:root {
  --story-motion-fast: 520ms var(--ease);
  --story-motion-composed: 920ms var(--ease);
  --story-gap: clamp(14px, 1.2vw, 22px);
  --story-frame: color-mix(in srgb, var(--ink) 11%, transparent);
  --story-surface: #ecece8;
}

.emotion-story {
  height: 300vh;
  min-height: 300vh;
  padding: 0;
  overflow: visible;
  scroll-snap-align: none;
  background: var(--paper);
}

.emotion-story__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

.emotion-story__panel {
  position: absolute;
  inset: 0;
  padding: calc(var(--nav) + 28px) var(--pad) 58px;
}

.emotion-story__tone {
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(290px, .72fr) minmax(620px, 1.28fr);
  gap: clamp(50px, 6.5vw, 118px);
  align-items: center;
  transition: opacity var(--story-motion-composed), transform var(--story-motion-composed), filter var(--story-motion-composed);
}

.emotion-story__copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  transition: opacity var(--story-motion-fast), transform var(--story-motion-composed);
}

.emotion-story__copy .kicker {
  color: var(--blue);
}

.emotion-story__copy h2 {
  font-size: clamp(62px, 7.4vw, 128px);
  line-height: .86;
  letter-spacing: -.065em;
  font-weight: 400;
}

.emotion-story__copy h3 {
  margin-top: 22px;
  font-size: clamp(16px, 1.35vw, 24px);
  line-height: 1.2;
  letter-spacing: .08em;
  font-weight: 400;
}

.emotion-story__copy .section-copy {
  max-width: 520px;
  margin-top: clamp(24px, 3.2vh, 38px);
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.emotion-story__tone-board {
  height: min(70vh, 700px);
  display: grid;
  grid-template-columns: .25fr 1.08fr .95fr;
  gap: var(--story-gap);
  align-items: stretch;
  transform-origin: 72% 46%;
  transition: opacity var(--story-motion-composed), transform var(--story-motion-composed), filter var(--story-motion-composed);
}

.emotion-story__tone-board figure,
.emotion-story__mosaic figure {
  min-width: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--story-surface);
  border: 1px solid var(--story-frame);
}

.emotion-story__tone-board img,
.emotion-story__mosaic img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}

.emotion-story__words {
  z-index: 3;
  display: grid;
  place-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(44px);
  transition: opacity var(--story-motion-fast), transform var(--story-motion-composed);
}

.emotion-story__words .kicker {
  margin-bottom: clamp(28px, 5vh, 58px);
  color: var(--blue);
}

.emotion-story__word-row {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 4.2vw, 76px);
  flex-wrap: wrap;
}

.emotion-story__word-row span {
  display: inline-block;
  font-size: clamp(44px, 6.3vw, 112px);
  line-height: .9;
  letter-spacing: -.055em;
  transform: translateY(58px);
  opacity: 0;
  transition: opacity 620ms var(--ease), transform 840ms var(--ease);
}

.emotion-story__finale {
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(270px, .58fr) minmax(690px, 1.42fr);
  gap: clamp(42px, 5.6vw, 100px);
  align-items: center;
  color: var(--white);
  background: var(--black);
  transform: translateY(102%);
  transition: transform 1100ms var(--ease);
}

.emotion-story__finale-copy {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 680ms var(--ease) 420ms, transform 860ms var(--ease) 420ms;
}

.emotion-story__finale-copy .kicker {
  color: var(--blue);
}

.emotion-story__finale-copy h2 {
  font-size: clamp(42px, 4.3vw, 78px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 400;
}

.emotion-story__finale-copy p:last-child {
  max-width: 390px;
  margin-top: 28px;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.65;
  color: color-mix(in srgb, var(--white) 58%, transparent);
}

.emotion-story__mosaic {
  height: min(72vh, 720px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, .7vw, 12px);
  opacity: 0;
  transform: scale(.94);
  transition: opacity 760ms var(--ease) 600ms, transform 980ms var(--ease) 600ms;
}

.emotion-story__mosaic figure {
  background: #111;
  border-color: color-mix(in srgb, var(--white) 12%, transparent);
}

.emotion-story__index {
  position: absolute;
  z-index: 8;
  right: var(--pad);
  top: 34px;
  display: flex;
  gap: 22px;
  font-size: 11px;
  letter-spacing: .12em;
  mix-blend-mode: difference;
  color: var(--white);
}

.emotion-story__index span {
  opacity: .28;
  transition: opacity var(--story-motion-fast), color var(--story-motion-fast);
}

.emotion-story__page-no {
  position: absolute;
  z-index: 8;
  right: var(--pad);
  bottom: 34px;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--white);
  mix-blend-mode: difference;
}

.emotion-story[data-phase="tone"] .emotion-story__index span:nth-child(1),
.emotion-story[data-phase="words"] .emotion-story__index span:nth-child(2),
.emotion-story[data-phase="finale"] .emotion-story__index span:nth-child(3) {
  opacity: 1;
}

.emotion-story[data-phase="words"] .emotion-story__copy {
  opacity: 0;
  transform: translateY(-32px);
}

.emotion-story[data-phase="words"] .emotion-story__tone-board {
  opacity: .22;
  filter: saturate(.5);
  transform: translateY(-6vh) scale(.74);
}

.emotion-story[data-phase="words"] .emotion-story__words {
  opacity: 1;
  transform: none;
}

.emotion-story[data-phase="words"] .emotion-story__word-row span {
  opacity: 1;
  transform: none;
}

.emotion-story[data-phase="words"] .emotion-story__word-row span:nth-child(1) { transition-delay: 90ms; }
.emotion-story[data-phase="words"] .emotion-story__word-row span:nth-child(2) { transition-delay: 180ms; }
.emotion-story[data-phase="words"] .emotion-story__word-row span:nth-child(3) { transition-delay: 270ms; }
.emotion-story[data-phase="words"] .emotion-story__word-row span:nth-child(4) { transition-delay: 360ms; }
.emotion-story[data-phase="words"] .emotion-story__word-row span:nth-child(5) { transition-delay: 450ms; }

.emotion-story[data-phase="finale"] .emotion-story__tone {
  opacity: 0;
  filter: saturate(.45);
  transform: scale(.9);
}

.emotion-story[data-phase="finale"] .emotion-story__words {
  opacity: 0;
  transform: translateY(-26vh) scale(.72);
  transition-delay: 420ms;
}

.emotion-story[data-phase="finale"] .emotion-story__finale {
  transform: none;
}

.emotion-story[data-phase="finale"] .emotion-story__finale-copy,
.emotion-story[data-phase="finale"] .emotion-story__mosaic {
  opacity: 1;
  transform: none;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .emotion-story__tone {
    grid-template-columns: minmax(250px, .65fr) minmax(520px, 1.35fr);
    gap: 40px;
  }

  .emotion-story__finale {
    grid-template-columns: minmax(230px, .52fr) minmax(540px, 1.48fr);
    gap: 34px;
  }
}

@media (max-width: 760px) {
  .emotion-story {
    height: auto;
    min-height: 0;
  }

  .emotion-story__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .emotion-story__panel {
    position: relative;
    inset: auto;
    padding: 92px 22px 58px;
  }

  .emotion-story__tone,
  .emotion-story__finale {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .emotion-story__tone {
    min-height: 100svh;
  }

  .emotion-story__tone-board {
    height: min(66svh, 620px);
    grid-template-columns: .24fr 1fr .88fr;
    gap: 6px;
  }

  .emotion-story__words {
    min-height: 64svh;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .emotion-story__word-row {
    gap: 22px 30px;
  }

  .emotion-story__word-row span {
    font-size: clamp(42px, 16vw, 72px);
    opacity: 1;
    transform: none;
  }

  .emotion-story__finale {
    min-height: 100svh;
    transform: none;
  }

  .emotion-story__finale-copy,
  .emotion-story__mosaic {
    opacity: 1;
    transform: none;
  }

  .emotion-story__mosaic {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .emotion-story__mosaic figure {
    min-height: 38vw;
  }

  .emotion-story__mosaic img {
    height: auto;
    max-height: 44vw;
  }

  .emotion-story__index,
  .emotion-story__page-no {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .emotion-story {
    height: auto;
    min-height: 0;
  }

  .emotion-story__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .emotion-story__panel {
    position: relative;
    min-height: 100vh;
  }

  .emotion-story__words,
  .emotion-story__finale,
  .emotion-story__finale-copy,
  .emotion-story__mosaic,
  .emotion-story__word-row span {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .emotion-story__index,
  .emotion-story__page-no {
    display: none;
  }
}