/* =========================================================
   HERO — JOHNNY PEPPERSTEIN
   ANIMATIONS ONLY
   Fast / Smooth / No Typing Cursor
========================================================= */

/* =========================================================
   HERO BASE
========================================================= */

.hero {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   REVEAL OVERRIDE
========================================================= */

.hero-copy.reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

.hero-board.reveal {
  opacity: 0;
}

/* =========================================================
   ORNAMENT
========================================================= */

.hero-copy .ornament {
  opacity: 0;

  transform: translateY(-22px);

  animation: heroFadeDown 0.45s ease 0s forwards;
}

/* =========================================================
   HERO KICKER
========================================================= */

.hero-copy .hero-kicker {
  opacity: 0;

  transform: translateY(-22px);

  animation: heroFadeDown 0.45s ease 0.1s forwards;
}

/* =========================================================
   HERO TITLE
========================================================= */

.hero-copy h1 {
  overflow: visible;
}

/* =========================================================
   ANIMATED TITLE WORDS
========================================================= */

.hero-copy h1 .hero-word {
  display: inline-block;

  opacity: 0;

  transform: translateY(-85px) rotate(-5deg);

  filter: blur(2px);

  animation: wordDrop 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =========================================================
   TITLE WORD TIMING
========================================================= */

.hero-copy h1 .hero-word:nth-child(1) {
  animation-delay: 0.18s;
}

.hero-copy h1 .hero-word:nth-child(2) {
  animation-delay: 0.27s;
}

.hero-copy h1 .hero-word:nth-child(3) {
  animation-delay: 0.36s;
}

.hero-copy h1 .hero-word:nth-child(4) {
  animation-delay: 0.45s;
}

.hero-copy h1 .hero-word:nth-child(5) {
  animation-delay: 0.54s;
}

.hero-copy h1 .hero-word:nth-child(6) {
  animation-delay: 0.63s;
}

/* =========================================================
   WORD DROP
========================================================= */

@keyframes wordDrop {
  0% {
    opacity: 0;

    transform: translateY(-85px) rotate(-5deg);

    filter: blur(2px);
  }

  60% {
    opacity: 1;

    transform: translateY(5px) rotate(1deg);

    filter: blur(0);
  }

  80% {
    transform: translateY(-2px) rotate(0deg);
  }

  100% {
    opacity: 1;

    transform: translateY(0) rotate(0deg);

    filter: blur(0);
  }
}

/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-copy .hero-description {
  display: block;

  max-width: 100%;

  opacity: 0;
  visibility: hidden;

  /*
    No border.
    No blinking cursor.
    No typing indicator.
  */
  border-right: none !important;
}

/* =========================================================
   DESCRIPTION WHILE TYPING
========================================================= */

.hero-copy .hero-description.typing {
  opacity: 1;

  visibility: visible;

  border-right: none !important;

  animation: none;
}

/* =========================================================
   DESCRIPTION AFTER TYPING
========================================================= */

.hero-copy .hero-description.typing-done {
  opacity: 1 !important;

  visibility: visible !important;

  border-right: none !important;

  animation: none !important;
}

/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-copy .hero-actions {
  opacity: 0;

  transform: translateY(15px);

  pointer-events: none;

  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   SHOW ACTIONS
========================================================= */

.hero-copy .hero-actions.show {
  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;
}

/* =========================================================
   BUTTON HOVER
========================================================= */

.hero-copy .gold-button,
.hero-copy .text-button {
  transition:
    transform 0.22s ease,
    color 0.22s ease,
    background 0.22s ease;
}

.hero-copy .gold-button:hover {
  transform: translateY(-3px);
}

.hero-copy .text-button:hover {
  transform: translateX(4px);
}

/* =========================================================
   CORKBOARD ENTRANCE
========================================================= */

.hero-board.reveal {
  transform: translateY(60px) rotate(3deg) scale(0.97);

  filter: blur(3px);

  animation: boardEnter 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

/* =========================================================
   BOARD ENTRANCE
========================================================= */

@keyframes boardEnter {
  0% {
    opacity: 0;

    transform: translateY(60px) rotate(3deg) scale(0.97);

    filter: blur(3px);
  }

  55% {
    opacity: 1;

    transform: translateY(-5px) rotate(-1deg) scale(1.01);

    filter: blur(0);
  }

  80% {
    transform: translateY(1px) rotate(0.3deg) scale(1);
  }

  100% {
    opacity: 1;

    transform: translateY(0) rotate(0deg) scale(1);

    filter: blur(0);
  }
}

/* =========================================================
   BOARD TITLE
========================================================= */

.hero-board .board-title {
  opacity: 0;

  transform: translateY(-22px) rotate(-2deg);

  animation: boardObjectDrop 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

/* =========================================================
   MAIN PHOTO
========================================================= */

.hero-board .photo-main {
  opacity: 0;

  transform: translateY(-35px) rotate(-4deg) scale(0.94);

  animation: boardObjectDrop 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.82s forwards;
}

/* =========================================================
   BOOK CARD
========================================================= */

.hero-board .book-card {
  opacity: 0;

  transform: translateY(-35px) rotate(4deg) scale(0.94);

  animation: boardObjectDrop 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.94s forwards;
}

/* =========================================================
   FIRST NOTE
========================================================= */

.hero-board .note-one {
  opacity: 0;

  transform: translateY(-30px) rotate(-6deg) scale(0.94);

  animation: boardObjectDrop 0.48s cubic-bezier(0.16, 1, 0.3, 1) 1.06s forwards;
}

/* =========================================================
   SECOND NOTE
========================================================= */

.hero-board .note-two {
  opacity: 0;

  transform: translateY(-30px) rotate(5deg) scale(0.94);

  animation: boardObjectDrop 0.48s cubic-bezier(0.16, 1, 0.3, 1) 1.18s forwards;
}

/* =========================================================
   BOARD OBJECT DROP
========================================================= */

@keyframes boardObjectDrop {
  0% {
    opacity: 0;

    transform: translateY(-35px) rotate(-5deg) scale(0.94);
  }

  55% {
    opacity: 1;

    transform: translateY(5px) rotate(2deg) scale(1.02);
  }

  80% {
    transform: translateY(-2px) rotate(0deg) scale(1);
  }

  100% {
    opacity: 1;

    transform: translateY(0) rotate(0deg) scale(1);
  }
}

/* =========================================================
   PINS
========================================================= */

.hero-board .gold-pin,
.hero-board .rust-pin,
.hero-board .sage-pin {
  opacity: 0;

  transform: scale(0);

  animation: pinPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* =========================================================
   PIN TIMING
========================================================= */

.hero-board .photo-main .gold-pin {
  animation-delay: 1.05s;
}

.hero-board .note-one .rust-pin {
  animation-delay: 1.25s;
}

.hero-board .note-two .sage-pin {
  animation-delay: 1.38s;
}

/* =========================================================
   PIN POP
========================================================= */

@keyframes pinPop {
  0% {
    opacity: 0;

    transform: scale(0);
  }

  65% {
    opacity: 1;

    transform: scale(1.2);
  }

  100% {
    opacity: 1;

    transform: scale(1);
  }
}

/* =========================================================
   BOOK TAPE
========================================================= */

.hero-board .tape {
  transform-origin: center;

  animation: tapeDrop 0.42s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
}

/* =========================================================
   TAPE DROP
========================================================= */

@keyframes tapeDrop {
  0% {
    opacity: 0;

    transform: translateY(-12px) rotate(-5deg);
  }

  60% {
    opacity: 1;

    transform: translateY(2px) rotate(2deg);
  }

  100% {
    opacity: 1;

    transform: translateY(0) rotate(0deg);
  }
}

/* =========================================================
   BOARD OBJECT HOVER
========================================================= */

.hero-board .photo-main,
.hero-board .book-card,
.hero-board .board-note {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* =========================================================
   PHOTO HOVER
========================================================= */

.hero-board .photo-main:hover {
  transform: translateY(-6px) rotate(-1deg) scale(1.02);

  box-shadow: 0 20px 40px rgba(30, 25, 15, 0.2);
}

/* =========================================================
   BOOK HOVER
========================================================= */

.hero-board .book-card:hover {
  transform: translateY(-6px) rotate(1deg) scale(1.02);
}

/* =========================================================
   NOTE ONE HOVER
========================================================= */

.hero-board .note-one:hover {
  transform: translateY(-5px) rotate(-2deg) scale(1.02);
}

/* =========================================================
   NOTE TWO HOVER
========================================================= */

.hero-board .note-two:hover {
  transform: translateY(-5px) rotate(2deg) scale(1.02);
}

/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-bottom {
  opacity: 0;

  animation: heroFadeUp 0.5s ease 1.8s forwards;
}

.hero-bottom .scroll-line {
  transform-origin: top;

  transform: scaleY(0);

  animation: scrollLineGrow 0.6s ease 2s forwards;
}

/* =========================================================
   FADE DOWN
========================================================= */

@keyframes heroFadeDown {
  from {
    opacity: 0;

    transform: translateY(-22px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* =========================================================
   FADE UP
========================================================= */

@keyframes heroFadeUp {
  from {
    opacity: 0;

    transform: translateY(15px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* =========================================================
   SCROLL LINE
========================================================= */

@keyframes scrollLineGrow {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {
  .hero-copy h1 .hero-word {
    transform: translateY(-65px) rotate(-4deg);
  }

  .hero-board.reveal {
    transform: translateY(50px) rotate(3deg) scale(0.97);
  }

  .hero-copy .hero-description {
    max-width: 100%;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .hero-copy h1 .hero-word {
    transform: translateY(-55px) rotate(-3deg);
  }

  .hero-board.reveal {
    transform: translateY(40px) rotate(2deg) scale(0.98);
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero-copy .ornament,
  .hero-copy .hero-kicker,
  .hero-copy h1 .hero-word,
  .hero-copy .hero-description,
  .hero-copy .hero-actions,
  .hero-board.reveal,
  .hero-board .board-title,
  .hero-board .photo-main,
  .hero-board .book-card,
  .hero-board .note-one,
  .hero-board .note-two,
  .hero-board .gold-pin,
  .hero-board .rust-pin,
  .hero-board .sage-pin,
  .hero-board .tape,
  .hero-bottom,
  .hero-bottom .scroll-line {
    opacity: 1;

    visibility: visible;

    transform: none;

    filter: none;

    animation: none !important;
  }

  .hero-copy .hero-description {
    opacity: 1;

    visibility: visible;

    border: none !important;
  }

  .hero-copy .hero-actions {
    pointer-events: auto;
  }
}
/* =========================================================
   AUTHOR'S DESK — CARD SCROLL ANIMATION
========================================================= */


/* =========================================================
   DESK SECTION
========================================================= */

.desk-section {
  position: relative;
  overflow: hidden;
}


/* =========================================================
   DESK HEADING
   Keep heading normal unless you also want it animated.
========================================================= */

.desk-heading.reveal {
  opacity: 1;
  transform: none;
  filter: none;
}


/* =========================================================
   DESK CARDS — INITIAL STATE
========================================================= */

.desk-grid .desk-card {
  opacity: 0;

  transform:
    translateY(55px)
    scale(0.96);

  filter: blur(3px);

  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s ease;
}


/* =========================================================
   CARD VISIBLE
========================================================= */

.desk-grid .desk-card.desk-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter: blur(0);
}


/* =========================================================
   SCROLLING DOWN
   01 → 02 → 03
========================================================= */

.desk-grid .desk-card:nth-child(1) {
  transition-delay: 0s;
}

.desk-grid .desk-card:nth-child(2) {
  transition-delay: 0.12s;
}

.desk-grid .desk-card:nth-child(3) {
  transition-delay: 0.24s;
}


/* =========================================================
   SCROLLING UP
   Reverse animation timing

   03 → 02 → 01
========================================================= */

.desk-grid.reverse .desk-card:nth-child(1) {
  transition-delay: 0.24s;
}

.desk-grid.reverse .desk-card:nth-child(2) {
  transition-delay: 0.12s;
}

.desk-grid.reverse .desk-card:nth-child(3) {
  transition-delay: 0s;
}


/* =========================================================
   OPTIONAL CARD HOVER
========================================================= */

.desk-grid .desk-card {
  will-change:
    transform,
    opacity,
    filter;
}


/* =========================================================
   CARD HOVER
========================================================= */

.desk-grid .desk-card.desk-visible:hover {
  transform:
    translateY(-7px)
    scale(1.01);
}


/* =========================================================
   FEATURED CARD
========================================================= */

.desk-grid .desk-card.featured.desk-visible:hover {
  transform:
    translateY(-9px)
    scale(1.015);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .desk-grid .desk-card {
    opacity: 1;

    transform: none;

    filter: none;

    transition: none !important;
  }

}
/* =========================================================
   INTRO SECTION — SCROLL ANIMATION
   Down:    Heading → Rule → Text
   Up:      Text → Rule → Heading
========================================================= */


/* =========================================================
   SECTION BASE
========================================================= */

.intro-section {
  position: relative;
  overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.intro-section .section-heading {
  opacity: 0;

  transform:
    translateY(-45px);

  filter: blur(3px);

  transition:
    opacity 0.55s ease,
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.55s ease;
}


/* =========================================================
   HEADING VISIBLE
========================================================= */

.intro-section .section-heading.intro-visible {
  opacity: 1;

  transform:
    translateY(0);

  filter: blur(0);
}


/* =========================================================
   EYEBROW
========================================================= */

.intro-section .eyebrow {
  opacity: 0;

  transform:
    translateY(-20px);

  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   EYEBROW VISIBLE
========================================================= */

.intro-section .section-heading.intro-visible .eyebrow {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay: 0.05s;
}


/* =========================================================
   HEADING TITLE
========================================================= */

.intro-section .section-heading h2 {
  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   TITLE VISIBLE
========================================================= */

.intro-section
.section-heading.intro-visible
h2 {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay: 0.12s;
}


/* =========================================================
   INTRO CONTENT
========================================================= */

.intro-section .intro-content {
  position: relative;
}


/* =========================================================
   DECORATIVE RULE
========================================================= */

.intro-section .intro-rule {
  transform-origin: left center;

  transform:
    scaleX(0);

  opacity: 0;

  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s ease;
}


/* =========================================================
   RULE VISIBLE
========================================================= */

.intro-section .intro-content.intro-visible .intro-rule {
  opacity: 1;

  transform:
    scaleX(1);

  transition-delay: 0.2s;
}


/* =========================================================
   LARGE TEXT
========================================================= */

.intro-section .large-text {
  opacity: 0;

  transform:
    translateX(55px)
    translateY(15px);

  filter: blur(3px);

  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s ease;
}


/* =========================================================
   TEXT VISIBLE
========================================================= */

.intro-section .large-text.intro-visible {
  opacity: 1;

  transform:
    translateX(0)
    translateY(0);

  filter: blur(0);

  transition-delay: 0.32s;
}


/* =========================================================
   REVERSE MODE
   Used when scrolling upward.
========================================================= */

.intro-section.intro-reverse
.section-heading {
  transform:
    translateY(45px);
}


.intro-section.intro-reverse
.intro-rule {
  transform-origin: right center;
}


.intro-section.intro-reverse
.large-text {
  transform:
    translateX(-55px)
    translateY(15px);
}


/* =========================================================
   REVERSE VISIBLE
========================================================= */

.intro-section.intro-reverse
.section-heading.intro-visible {
  transform:
    translateY(0);
}


.intro-section.intro-reverse
.intro-content.intro-visible
.intro-rule {
  transform:
    scaleX(1);
}


.intro-section.intro-reverse
.large-text.intro-visible {
  transform:
    translateX(0)
    translateY(0);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

  .intro-section .section-heading {
    transform:
      translateY(-30px);
  }

  .intro-section .large-text {
    transform:
      translateX(30px)
      translateY(10px);
  }

  .intro-section.intro-reverse
  .section-heading {
    transform:
      translateY(30px);
  }

  .intro-section.intro-reverse
  .large-text {
    transform:
      translateX(-30px)
      translateY(10px);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .intro-section .section-heading,
  .intro-section .eyebrow,
  .intro-section .section-heading h2,
  .intro-section .intro-rule,
  .intro-section .large-text {

    opacity: 1;

    transform: none;

    filter: none;

    transition: none !important;
  }

}
/* =========================================================
   AUTHOR FEATURE
   JOHNNY PEPPERSTEIN

   Animation:
   Scroll Down:
   Image → Text → Description → Button

   Scroll Up:
   Button → Description → Text → Image
========================================================= */


/* =========================================================
   AUTHOR FEATURE BASE
========================================================= */

.author-feature {
  position: relative;
  overflow: hidden;
}


/* =========================================================
   IMPORTANT
   Override any global .reveal animation.
========================================================= */

.author-feature .reveal {
  opacity: 1;
  transform: none;
  filter: none;
}


/* =========================================================
   AUTHOR IMAGE
========================================================= */

.author-feature .author-image {
  opacity: 0;

  transform:
    translateX(-70px)
    rotate(-2deg)
    scale(0.96);

  filter: blur(4px);

  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s ease;
}


/* =========================================================
   AUTHOR IMAGE VISIBLE
========================================================= */

.author-feature .author-image.author-visible {
  opacity: 1;

  transform:
    translateX(0)
    rotate(0)
    scale(1);

  filter: blur(0);
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.author-feature .image-frame {
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.author-feature
.author-image.author-visible
.image-frame {
  transform: scale(1);
}


/* =========================================================
   FRAME CORNERS
========================================================= */

.author-feature .frame-corner {
  opacity: 0;

  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   CORNER INITIAL POSITIONS
========================================================= */

.author-feature .top-left {
  transform: translate(-8px, -8px);
}

.author-feature .top-right {
  transform: translate(8px, -8px);
}

.author-feature .bottom-left {
  transform: translate(-8px, 8px);
}

.author-feature .bottom-right {
  transform: translate(8px, 8px);
}


/* =========================================================
   CORNERS VISIBLE
========================================================= */

.author-feature
.author-image.author-visible
.frame-corner {
  opacity: 1;

  transform: translate(0, 0);

  transition-delay: 0.3s;
}


/* =========================================================
   AUTHOR COPY
========================================================= */

.author-feature .author-copy {
  opacity: 0;

  transform:
    translateX(70px);

  filter: blur(4px);

  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s ease;
}


/* =========================================================
   AUTHOR COPY VISIBLE
========================================================= */

.author-feature .author-copy.author-visible {
  opacity: 1;

  transform:
    translateX(0);

  filter: blur(0);
}


/* =========================================================
   EYEBROW
========================================================= */

.author-feature
.author-copy
.eyebrow {
  opacity: 0;

  transform:
    translateY(-18px);

  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   HEADING
========================================================= */

.author-feature
.author-copy
h2 {
  opacity: 0;

  transform:
    translateY(20px);

  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   GOLD RULE
========================================================= */

.author-feature
.author-copy
.gold-rule {
  opacity: 0;

  transform-origin: left center;

  transform:
    scaleX(0);

  transition:
    opacity 0.3s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   DESCRIPTION PARAGRAPHS
========================================================= */

/*
   IMPORTANT:
   These are explicitly controlled.
   They are NOT hidden by the global .reveal class.
*/

.author-feature
.author-copy
p:not(.eyebrow) {
  opacity: 0;

  visibility: hidden;

  transform:
    translateY(25px);

  filter: blur(2px);

  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s ease;
}


/* =========================================================
   DESCRIPTION VISIBLE
========================================================= */

.author-feature
.author-copy.author-visible
p:not(.eyebrow) {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);

  filter: blur(0);

  transition:
    opacity 0.5s ease,
    visibility 0s linear 0s,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s ease;
}


/* =========================================================
   FIRST DESCRIPTION
========================================================= */

.author-feature
.author-copy.author-visible
p:not(.eyebrow):nth-of-type(1) {
  transition-delay: 0.35s;
}


/* =========================================================
   SECOND DESCRIPTION
========================================================= */

.author-feature
.author-copy.author-visible
p:not(.eyebrow):nth-of-type(2) {
  transition-delay: 0.48s;
}


/* =========================================================
   BUTTON
========================================================= */

.author-feature
.author-copy
.outline-button {
  opacity: 0;

  visibility: hidden;

  transform:
    translateY(25px);

  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   BUTTON VISIBLE
========================================================= */

.author-feature
.author-copy.author-visible
.outline-button {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);

  transition:
    opacity 0.5s ease,
    visibility 0s linear 0s,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);

  transition-delay: 0.62s;
}


/* =========================================================
   EYEBROW VISIBLE
========================================================= */

.author-feature
.author-copy.author-visible
.eyebrow {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay: 0.05s;
}


/* =========================================================
   HEADING VISIBLE
========================================================= */

.author-feature
.author-copy.author-visible
h2 {
  opacity: 1;

  transform:
    translateY(0);

  transition-delay: 0.13s;
}


/* =========================================================
   GOLD RULE VISIBLE
========================================================= */

.author-feature
.author-copy.author-visible
.gold-rule {
  opacity: 1;

  transform:
    scaleX(1);

  transition-delay: 0.23s;
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.author-feature
.author-copy.author-visible
.outline-button:hover {
  transform:
    translateY(-3px);
}


/* =========================================================
   REVERSE MODE
   SCROLLING UP
========================================================= */

.author-feature.author-reverse
.author-image {
  transform:
    translateX(70px)
    rotate(2deg)
    scale(0.96);
}


.author-feature.author-reverse
.author-copy {
  transform:
    translateX(-70px);
}


/* =========================================================
   REVERSE VISIBLE
========================================================= */

.author-feature.author-reverse
.author-image.author-visible {
  transform:
    translateX(0)
    rotate(0)
    scale(1);
}


.author-feature.author-reverse
.author-copy.author-visible {
  transform:
    translateX(0);
}


/* =========================================================
   REVERSE DESCRIPTION
========================================================= */

.author-feature.author-reverse
.author-copy
p:not(.eyebrow) {
  transform:
    translateY(-25px);
}


/* =========================================================
   REVERSE DESCRIPTION VISIBLE
========================================================= */

.author-feature.author-reverse
.author-copy.author-visible
p:not(.eyebrow) {
  transform:
    translateY(0);
}


/* =========================================================
   REVERSE GOLD RULE
========================================================= */

.author-feature.author-reverse
.gold-rule {
  transform-origin: right center;
}


/* =========================================================
   REVERSE BUTTON
========================================================= */

.author-feature.author-reverse
.outline-button {
  transform:
    translateY(-25px);
}


/* =========================================================
   REVERSE BUTTON VISIBLE
========================================================= */

.author-feature.author-reverse
.author-copy.author-visible
.outline-button {
  transform:
    translateY(0);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

  /* -----------------------------------------
     IMAGE
  ----------------------------------------- */

  .author-feature .author-image {
    transform:
      translateY(45px)
      scale(0.97);
  }


  /* -----------------------------------------
     COPY
  ----------------------------------------- */

  .author-feature .author-copy {
    transform:
      translateY(45px);
  }


  /* -----------------------------------------
     VISIBLE
  ----------------------------------------- */

  .author-feature
  .author-image.author-visible {
    transform:
      translateY(0)
      scale(1);
  }


  .author-feature
  .author-copy.author-visible {
    transform:
      translateY(0);
  }


  /* -----------------------------------------
     REVERSE
  ----------------------------------------- */

  .author-feature.author-reverse
  .author-image {
    transform:
      translateY(-45px)
      scale(0.97);
  }


  .author-feature.author-reverse
  .author-copy {
    transform:
      translateY(-45px);
  }


  .author-feature.author-reverse
  .author-image.author-visible {
    transform:
      translateY(0)
      scale(1);
  }


  .author-feature.author-reverse
  .author-copy.author-visible {
    transform:
      translateY(0);
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

  .author-feature .author-image {
    transform:
      translateY(35px)
      scale(0.98);
  }

  .author-feature .author-copy {
    transform:
      translateY(35px);
  }

  .author-feature.author-reverse
  .author-image {
    transform:
      translateY(-35px)
      scale(0.98);
  }

  .author-feature.author-reverse
  .author-copy {
    transform:
      translateY(-35px);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .author-feature .author-image,
  .author-feature .author-copy,
  .author-feature .frame-corner,
  .author-feature .eyebrow,
  .author-feature .author-copy h2,
  .author-feature .gold-rule,
  .author-feature .author-copy p,
  .author-feature .outline-button {

    opacity: 1;

    visibility: visible;

    transform: none;

    filter: none;

    transition: none !important;
  }

}