/* ---------- opening stage ---------- */
.intro { position: relative; height: 250svh; }
.stage { position: sticky; top: 0; height: 100svh; min-height: 520px; overflow: hidden; background: var(--ink); isolation: isolate; }
@media (max-width: 767px) { .intro { height: 210svh; } }

/* layer 3: the opening screen */
.hero-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.atmos { position: absolute; inset: 0; will-change: opacity; }
/* Cinematic light: a soft beam from above, low haze drifting across, and a
   slow swell of light behind the wordmark. Long, eased loops; nothing jitters. */
.atmos { background: radial-gradient(120% 90% at 50% 40%, #121117, var(--ink) 70%); }
.atmos-beam, .atmos-haze, .atmos-haze2, .atmos-glow { position: absolute; will-change: transform, opacity; }
.atmos-beam {
  inset: -10% -20% 0;
  background:
    radial-gradient(38% 75% at 50% 0%, rgba(214, 208, 232, 0.13), rgba(168, 159, 195, 0.05) 45%, transparent 75%),
    radial-gradient(14% 60% at 50% 0%, rgba(240, 236, 248, 0.08), transparent 70%);
  transform-origin: 50% 0;
  animation: beam 26s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.atmos-haze {
  inset: 40% -40% -20%;
  background:
    radial-gradient(40% 32% at 30% 50%, rgba(150, 144, 170, 0.10), transparent 70%),
    radial-gradient(34% 26% at 72% 58%, rgba(120, 116, 142, 0.09), transparent 70%);
  animation: haze 70s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.atmos-haze2 {
  inset: 20% -40% 10%;
  background: radial-gradient(30% 22% at 60% 50%, rgba(233, 230, 224, 0.035), transparent 70%);
  animation: haze2 90s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.atmos-glow {
  inset: 0;
  background: radial-gradient(30% 22% at 50% 50%, rgba(168, 159, 195, 0.12), transparent 70%);
  animation: glow 14s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.atmos::after { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 75% at 50% 48%, transparent 45%, rgba(0, 0, 0, 0.75)); }
@keyframes beam { from { transform: rotate(-2.5deg) scaleX(0.94); opacity: 0.75; } to { transform: rotate(2.5deg) scaleX(1.06); opacity: 1; } }
@keyframes haze { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, -3%, 0); } }
@keyframes haze2 { from { transform: translate3d(10%, 2%, 0); } to { transform: translate3d(-10%, -2%, 0); } }
@keyframes glow { from { opacity: 0.45; transform: scale(0.96); } to { opacity: 1; transform: scale(1.06); } }

.seam {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px;
  background: linear-gradient(90deg, transparent, rgba(168, 159, 195, 0.7) 30%, rgba(233, 230, 224, 0.9) 50%, rgba(168, 159, 195, 0.7) 70%, transparent);
  transform: scaleX(0); opacity: 0; will-change: transform, opacity;
}

.mark-col { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding-bottom: 2svh; }
.mark {
  font-family: var(--f-serif);
  font-weight: 500;
  font-variation-settings: 'opsz' 28;
  font-size: clamp(88px, 21vw, 330px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--bone);
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}
.mark-breathe { display: inline-block; animation: mark-breathe 9s ease-in-out infinite; }
@keyframes mark-breathe { 50% { transform: translate3d(0, -0.012em, 0); opacity: 0.88; } }

.tagline {
  margin-top: clamp(18px, 2.4vw, 36px);
  font-family: var(--f-sans);
  font-stretch: 85%;
  font-weight: 500;
  font-size: clamp(11px, 0.4vw + 9px, 15px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--bone-70);
  padding-left: 0.42em;
}
.tw { display: inline-block; will-change: transform, opacity; }

.cue {
  position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mist);
}
.cue i { position: relative; width: 1px; height: 44px; background: var(--line); overflow: hidden; }
.cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--bone); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { to { transform: translateY(350%); } }

/* layer 2: eyelids */
.lid { position: absolute; left: 0; right: 0; height: 50.2%; z-index: 2; background: var(--ink); will-change: transform; }
.lid-top { top: 0; }
.lid-bot { bottom: 0; }

/* layer 1: the drop underneath */
.scene { position: absolute; inset: 0; z-index: 1; background: var(--night); }
.scene-inner { position: absolute; inset: 0; transform: scale(1.14); opacity: 0.3; will-change: transform, opacity; }
.scene-light {
  position: absolute; inset: 0;
  background:
    radial-gradient(36% 46% at 50% 46%, rgba(233, 230, 224, 0.075), transparent 72%),
    linear-gradient(to bottom, transparent 62%, rgba(0, 0, 0, 0.45));
}
.scene-title {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding-left: var(--side-l); padding-right: var(--side-r);
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: var(--t-hero); line-height: 0.8; letter-spacing: -0.01em; color: var(--bone);
  pointer-events: none;
}
.st { display: block; will-change: transform, opacity; }
.js .st, .js .scene-meta > * { opacity: 0; }

.scene-frame {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
  width: min(50svh, 62vw); aspect-ratio: 4 / 5; max-width: 100%;
  display: block; z-index: 1; overflow: hidden;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9);
}
.scene-frame .media { width: 100%; height: 100%; transition: transform 1.4s var(--ease); }
@media (hover: hover) { .scene-frame:hover .media { transform: scale(1.025); } }

.scene-meta {
  position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px;
  padding-left: var(--side-l); padding-right: var(--side-r);
}
.scene-meta > :last-child { justify-self: end; }
.scene-meta .status { color: var(--bone-70); }
.scene-sub { font-family: var(--f-serif); font-size: clamp(20px, 1.4vw + 10px, 30px); line-height: 1; color: var(--bone); }
.scene-meta > * { will-change: transform, opacity; }

@media (max-width: 767px) {
  .scene-title { flex-direction: column; align-items: stretch; justify-content: space-between; padding-block: calc(var(--nav-h) + 6svh) 15svh; font-size: clamp(76px, 27vw, 150px); }
  .st-num { align-self: flex-end; }
  .scene-frame { width: min(40svh, 60vw); top: 48%; }
  .scene-meta { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .scene-sub { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}

/* ---------- reduced motion: a still opening, then the drop ---------- */
.rm .intro { height: auto; }
.rm .stage { position: relative; height: auto; min-height: 0; overflow: visible; }
.rm .hero-layer { position: relative; height: 100svh; min-height: 520px; }
.rm .lid, .rm .seam { display: none; }
.rm .scene { position: relative; height: 100svh; min-height: 560px; }
.rm .scene-inner { transform: none; opacity: 1; }
.rm .st, .rm .scene-meta > * { opacity: 1; }
.rm .atmos > div, .rm .mark-breathe { animation: none; }