/* Opening sequence */
.hero h1 { max-width: 12ch; }
.title-line { display: block; overflow: clip; padding-block: .06em; margin-block: -.04em; }
.title-line > span { display: block; }
.motion-enabled .hero::before, .motion-enabled .hero::after { content: ''; position: absolute; z-index: 5; left: 0; width: 100%; height: 50.2%; background: #0b0e0d; pointer-events: none; animation: curtain-open 1.6s cubic-bezier(.76,0,.24,1) .05s both; }
.motion-enabled .hero::before { top: 0; transform-origin: top; }
.motion-enabled .hero::after { bottom: 0; transform-origin: bottom; }
.motion-enabled .hero-kicker { animation: title-lift 1s cubic-bezier(.2,.7,.2,1) .45s both; }
.motion-enabled .title-line > span { animation: title-lift 1.35s cubic-bezier(.16,1,.3,1) .65s both; }
.motion-enabled .title-line:nth-child(2) > span { animation-delay: .85s; }
.motion-enabled .hero-description { animation: scene-appear 1s ease 1.1s both; }
.motion-enabled .hero-content > .button { animation: scene-appear 1s ease 1.25s both; }
.motion-enabled .hero-bottom { animation: scene-appear 1s ease 1.4s both; }
.motion-enabled .hero-image { transform: translate3d(0, var(--hero-y, 0px), 0) scale(var(--hero-scale, 1.08)); }
.motion-enabled .hero-content { transform: translate3d(0, var(--hero-copy-y, 0px), 0); opacity: var(--hero-opacity, 1); }
.intro-played .hero::before, .intro-played .hero::after, .intro-played .hero-kicker, .intro-played .title-line > span, .intro-played .hero-description, .intro-played .hero-content > .button, .intro-played .hero-bottom { animation: none; }
.intro-played .hero::before, .intro-played .hero::after { display: none; }
@keyframes curtain-open { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes title-lift { from { transform: translate3d(0, 115%, 0) rotate(2deg); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes scene-appear { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }

/* Reading position and motion control */
.site-header::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--accent); transform: scaleX(var(--reading-progress, 0)); transform-origin: left; }
.motion-toggle { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .5rem .6rem; border: 0; background: transparent; font-size: .75rem; color: #c7cbc1; }
.motion-toggle:hover { color: #fff; }
.motion-mark { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.motion-mark i { display: block; width: 2px; height: 6px; background: currentColor; }
.motion-mark i:nth-child(2) { height: 14px; }
.motion-mark i:nth-child(3) { height: 10px; }
.motion-toggle[aria-pressed=false] .motion-mark i { height: 2px; }
.motion-enabled .scroll-link > span { animation: scroll-hint 2.2s ease-in-out 2; }
@keyframes scroll-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.button { position: relative; overflow: hidden; }
.button > span[aria-hidden], .line-link > span[aria-hidden] { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.button:hover > span[aria-hidden]:last-child, .line-link:hover > span[aria-hidden] { transform: translate(3px, -3px); }

/* Collection cuts and a little depth under the pointer */
.collection { transition: background-color .8s ease; }
.collection[data-scent=crystal-air] { background: #18201e; }
.collection[data-scent=soft-smoke] { background: #211b17; }
.motion-enabled .scent-visual img { transform: scale(1.045) translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.motion-enabled .scent-panel.is-entering .scent-visual { animation: image-unveil 1s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .scent-panel.is-entering .scent-copy > * { animation: copy-unveil .85s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .scent-panel.is-entering .scent-copy > :nth-child(2) { animation-delay: .08s; }
.motion-enabled .scent-panel.is-entering .scent-copy > :nth-child(3) { animation-delay: .14s; }
.motion-enabled .scent-panel.is-entering .scent-copy > :nth-child(n+4) { animation-delay: .2s; }
@keyframes image-unveil { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0); opacity: 1; } }
@keyframes copy-unveil { from { opacity: 0; transform: translate3d(0, 1.5rem, 0); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
.motion-enabled .story-notes li:nth-child(2).is-revealed { animation-delay: .12s; }
.motion-enabled .story-notes li:nth-child(3).is-revealed { animation-delay: .24s; }
.motion-enabled .reveal.is-revealed { animation-duration: 1.05s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.motion-enabled .composition[open] dl { animation: scene-appear .4s ease both; }

/* A pause in the story, unfolded by scrolling */
.interlude { padding: 0; }
.interlude-inner { padding-block: 7rem; }
.memory-line { display: block; }
.motion-enabled .memory-line { opacity: var(--line-opacity, 1); transform: translate3d(0,var(--line-y,0px),0); }
.motion-enabled .interlude .vertical-rule { transform: scaleY(var(--memory-progress, 1)); transform-origin: top; }
.motion-enabled .experience-image { transform: translate3d(0,var(--experience-y,0px),0) scale(1.13); }
.motion-enabled .footer-wordmark { transform: translate3d(0,var(--footer-y,0px),0); }
@media (min-width: 761px) and (min-height: 650px) {
  .motion-enabled .interlude { min-height: 150svh; }
  .motion-enabled .interlude-inner { min-height: 100svh; position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
}

/* The campaign uses overlapping frames, so a chapter never cuts to blank. */
.cinema { background: #070907; }
.cinema-stage::before, .cinema-stage::after { content: ''; position: absolute; left: 0; width: 100%; height: clamp(.6rem, 1.8vw, 1.5rem); background: #070907; pointer-events: none; z-index: 2; }
.cinema-stage::before { top: 0; }
.cinema-stage::after { bottom: 0; }
.cinema-image { opacity: 0; transition: opacity 1.2s ease; transform: scale(calc(1.04 + var(--scene-progress, 0) * .12)) translate3d(calc(var(--scene-progress, 0) * -1.4%),0,0); }
.cinema-image.is-current { opacity: 1; }
.cinema-image[data-scene="1"] { transform: scale(calc(1.14 - var(--scene-progress, 0) * .1)) translate3d(0,calc(var(--scene-progress, 0) * -1.5%),0); }
.cinema-image[data-scene="2"] { transform: scale(calc(1.02 + var(--scene-progress, 0) * .14)); }
.cinema.is-playing .cinema-image { animation: none; }
.cinema-top, .cinema-controls { position: relative; z-index: 3; }
.cinema-copy { position: relative; z-index: 1; }
.motion-enabled .cinema[open] { animation: cinema-open .65s cubic-bezier(.16,1,.3,1); }
@keyframes cinema-open { from { opacity: 0; clip-path: inset(45% 0); } to { opacity: 1; clip-path: inset(0); } }
.motion-enabled .mobile-menu[open] { animation: menu-open .6s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .mobile-menu[open] nav a { animation: copy-unveil .7s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .mobile-menu[open] nav a:nth-child(2) { animation-delay: .06s; }
.motion-enabled .mobile-menu[open] nav a:nth-child(3) { animation-delay: .12s; }
.motion-enabled .mobile-menu[open] nav a:nth-child(4) { animation-delay: .18s; }
@keyframes menu-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(4rem, 12vw, 6rem); }
  .hero-bottom { flex-wrap: wrap; row-gap: .8rem; }
  .hero-caption { display: none; }
  .motion-toggle { padding-inline: 0; }
  .scroll-link { font-size: .75rem; gap: .6rem; }
  .interlude-inner { padding-block: 5.5rem; }
  .interlude h2 { font-size: clamp(2.5rem, 7.8vw, 4.5rem); }
  .collection-heading .display-title { font-size: clamp(3rem, 10vw, 5rem); }
  .cinema-stage { padding-block: 1.7rem; }
}
html:not(.motion-enabled) { scroll-behavior: auto; }
html:not(.motion-enabled) *, html:not(.motion-enabled) *::before, html:not(.motion-enabled) *::after { animation: none !important; transition: none !important; }
html:not(.motion-enabled) .reveal.is-waiting { opacity: 1; transform: none; }
html:not(.motion-enabled) .cinema-image { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-image, .hero-content, .memory-line, .experience-image, .footer-wordmark, .cinema-image { transform: none !important; }
  .memory-line, .hero-content { opacity: 1 !important; }
  .hero::before, .hero::after { display: none !important; }
}