/* =========================================================================
   PYC v8 "Prestige" — Experience page layer (loads after style.css + style-v7.css)
   Frame-by-frame scrollable demo. Sticky canvas + choreographed text.
   ========================================================================= */

/* ----- Scroll lock during critical preload -----------------------------
   Without this the user can scroll while frames are still streaming in,
   then `ready` flips and curP jumps mid-experience. Lock until ready. */
html.exp-loading, html.exp-loading body { overflow: hidden !important; height: 100%; touch-action: none; overscroll-behavior: contain; }

/* ----- Logo overlay on the first frame ---------------------------------
   Transparent intro: the cinematic first frame shows underneath. Only a
   soft radial vignette sits behind the logo so it reads against any image.
   Opacity is driven directly by scroll progress (see exp-v8.js loop()) —
   the logo lives on the first 2–3 frames and fades out as the user scrolls. */
.intro {
  position: fixed; inset: 0; z-index: 300;
  background:
    radial-gradient(45% 40% at 50% 46%, rgba(6,20,39,.55) 0%, rgba(6,20,39,.18) 55%, transparent 78%),
    linear-gradient(to bottom, rgba(6,20,39,.18) 0%, transparent 28%, transparent 68%, rgba(6,20,39,.35) 100%);
  display: grid; place-items: center;
  pointer-events: none;
  will-change: opacity;
}
.intro.is-done { visibility: hidden; }
.intro-inner { display: flex; flex-direction: column; align-items: center; }
.intro-logo { width: clamp(240px, 30vw, 420px); height: auto; opacity: 0; transform: translateY(18px); animation: introIn 1.4s var(--ease-out) .15s forwards; filter: drop-shadow(0 22px 90px rgba(6,20,39,.85)) drop-shadow(0 4px 14px rgba(6,20,39,.6)); }
@keyframes introIn { to { opacity: 1; transform: none; } }
.intro-prompt { margin-top: 38px; display: inline-flex; flex-direction: column; align-items: center; gap: 16px; opacity: 0; animation: introPromptIn 1.2s var(--ease-out) .85s forwards; }
@keyframes introPromptIn { to { opacity: 1; } }
.intro-prompt-txt { font-family: var(--font-sans); font-weight: 400; font-size: 11px; letter-spacing: .44em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 78%, transparent); text-align: center; text-shadow: 0 2px 18px rgba(6,20,39,.85); }
.intro-arrow { color: var(--gold); display: inline-block; animation: introArrow 2.2s var(--ease-soft) 1.4s infinite; filter: drop-shadow(0 2px 8px rgba(6,20,39,.7)); }
@keyframes introArrow { 0%, 100% { transform: translateY(0); opacity: .85 } 50% { transform: translateY(6px); opacity: 1 } }
@media (max-width: 640px) {
  .intro-prompt-txt { font-size: 10px; letter-spacing: .34em; max-width: 80vw; }
}

/* ----- Tall section + sticky stage --------------------------------------- */
/* 460vh = ~3.6× viewport scroll for 5 scenes ≈ comfortable timeline scrub */
.exp { position: relative; height: 460vh; background: var(--navy); }
@media (max-width: 820px) { .exp { height: 420vh; } }
.exp-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--ivory); }
.exp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.exp-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(85% 70% at 50% 50%, rgba(6,20,39,.18) 0%, transparent 70%),
              linear-gradient(to bottom, rgba(6,20,39,.45) 0%, transparent 22%, transparent 56%, rgba(6,20,39,.78) 100%); }
.exp-ready .exp-canvas { animation: heroSettle 1.4s var(--ease-out) both; }
@keyframes heroSettle { from { opacity: .45; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* ----- Top floating nav (subtle) ----------------------------------------- */
.exp-topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(20px,5vw,40px); pointer-events: none; }
.exp-topnav a, .exp-topnav button { pointer-events: auto; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 80%, transparent); padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(245,241,232,.22); background: rgba(6,20,39,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: color .3s, border-color .3s; }
.exp-topnav a:hover, .exp-topnav button:hover { color: var(--gold); border-color: var(--gold); }

/* ----- Top progress bar -------------------------------------------------- */
.exp-prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 30; background: rgba(245,241,232,.08); }
.exp-prog .bar { height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--gold), var(--blue)); transform-origin: 0 0; }

/* ----- UI layer (text panels live here) ---------------------------------- */
.exp-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.exp-panel { position: absolute; left: 0; right: 0; padding: clamp(20px,5vw,80px); }
.exp-panel--center { top: 50%; transform: translateY(-50%); text-align: center; }
.exp-panel--left   { bottom: clamp(60px,12vh,140px); }
.exp-panel--left .exp-inner { text-align: left; margin-right: auto; max-width: min(560px, 92vw); }
.exp-panel--right  { bottom: clamp(60px,12vh,140px); }
.exp-panel--right .exp-inner { text-align: left; margin-left: auto; max-width: min(560px, 92vw); }

.exp-inner { display: flex; flex-direction: column; gap: 14px; max-width: min(820px, 94vw); margin: 0 auto; }
.exp-panel--center .exp-inner { max-width: min(820px, 94vw); align-items: center; }

/* Type */
.exp-eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 12px; }
.exp-eyebrow .idx { font-family: var(--font-serif); font-size: 15px; letter-spacing: 0; color: color-mix(in oklab, var(--gold) 80%, var(--ivory)); }
.exp-eyebrow .ln { width: 30px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.exp-panel--center .exp-eyebrow { justify-content: center; }
.exp-panel--right .exp-eyebrow::before { content: ''; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); display: inline-block; margin-right: 4px; }
.exp-panel--right .exp-eyebrow .ln { display: none; }

.exp-h { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px,4.6vw,72px); line-height: 1.05; letter-spacing: -.006em; color: var(--ivory); text-wrap: balance; text-shadow: 0 2px 36px rgba(6,20,39,.6); }
.exp-panel--center .exp-h { font-size: clamp(46px,7vw,108px); text-shadow: 0 2px 44px rgba(6,20,39,.7); }
.exp-h em { font-style: italic; color: var(--gold); }
.exp-sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(17px,1.3vw,22px); line-height: 1.5; color: color-mix(in oklab, var(--ivory) 86%, transparent); max-width: 46ch; text-shadow: 0 1px 22px rgba(6,20,39,.5); }
.exp-panel--center .exp-sub { margin-inline: auto; max-width: 52ch; font-family: var(--font-sans); font-style: normal; font-weight: 300; }

/* Cinematic reveal — slow, smooth, magazine-style fade + rise + blur clear.
   Long durations + staggered delays = each section lingers and breathes. */
.exp-panel .exp-eyebrow, .exp-panel .exp-h, .exp-panel .exp-sub {
  opacity: 0; transform: translateY(28px) scale(.982); filter: blur(10px);
  transition: opacity 1.05s var(--ease-out), transform 1.2s cubic-bezier(.18,.7,.25,1), filter 1.05s var(--ease-out);
  will-change: opacity, transform, filter;
}
.exp-panel.is-in .exp-eyebrow { opacity: 1; transform: none; filter: none; transition-delay: .12s; }
.exp-panel.is-in .exp-h       { opacity: 1; transform: none; filter: none; transition-delay: .28s; }
.exp-panel.is-in .exp-sub     { opacity: 1; transform: none; filter: none; transition-delay: .46s; }
.exp-panel.is-out .exp-eyebrow, .exp-panel.is-out .exp-h, .exp-panel.is-out .exp-sub {
  opacity: 0; transform: translateY(-14px) scale(1.006); filter: blur(6px);
  transition-duration: .85s; transition-delay: 0s;
}

/* Headline word-by-word reveal — wrap each word in <span class="w"> for the staggered slide. */
.exp-h .w { display: inline-block; opacity: 0; transform: translateY(24px); filter: blur(10px); transition: opacity 1.05s var(--ease-out), transform 1.25s cubic-bezier(.18,.7,.25,1), filter 1.05s var(--ease-out); }
.exp-panel.is-in .exp-h .w { opacity: 1; transform: none; filter: none; }
.exp-panel.is-in .exp-h .w:nth-child(1) { transition-delay: .28s; }
.exp-panel.is-in .exp-h .w:nth-child(2) { transition-delay: .38s; }
.exp-panel.is-in .exp-h .w:nth-child(3) { transition-delay: .48s; }
.exp-panel.is-in .exp-h .w:nth-child(4) { transition-delay: .58s; }
.exp-panel.is-in .exp-h .w:nth-child(5) { transition-delay: .68s; }
.exp-panel.is-in .exp-h .w:nth-child(6) { transition-delay: .78s; }

/* ----- Scroll cue (bilingual, visible during travel zones only) --------- */
.exp-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 4; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .42em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 70%, transparent); pointer-events: none; transition: opacity .55s var(--ease-out); }
.exp-cue.is-hidden { opacity: 0; }
.exp-cue .line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--gold), transparent); animation: cueLine 2.6s var(--ease-soft) infinite; }
@keyframes cueLine { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ----- Progress beads (right edge — CLICKABLE with hover labels) -------- */
.exp-beads { position: absolute; right: clamp(16px,2.4vw,30px); top: 50%; transform: translateY(-50%); z-index: 8; display: flex; flex-direction: column; gap: 18px; pointer-events: none; }
.exp-beads i { pointer-events: auto; position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(245,241,232,.45); transition: background .4s, border-color .4s, transform .4s, box-shadow .4s; cursor: pointer; }
.exp-beads i::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }   /* larger click target */
.exp-beads i:hover { transform: scale(1.25); border-color: var(--gold); box-shadow: 0 0 10px rgba(201,169,97,.45); }
.exp-beads i.on { background: var(--gold); border-color: var(--gold); transform: scale(1.4); box-shadow: 0 0 18px rgba(201,169,97,.8); }
.exp-beads i .lbl { position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(8px); white-space: nowrap; font-family: var(--font-sans); font-weight: 500; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ivory); background: rgba(6,20,39,.7); padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(201,169,97,.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.exp-beads i:hover .lbl, .exp-beads i.on .lbl { opacity: 1; transform: translateY(-50%) translateX(0); }
.exp-beads i.on .lbl { background: rgba(201,169,97,.95); color: var(--navy); border-color: var(--gold); }

/* ----- Champagne bubbles overlay ---------------------------------------- */
.exp-bubbles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.exp-stage.bubbles-on .exp-bubbles, .exp.bubbles-on .exp-bubbles { opacity: 1; }
.exp-bubbles span { position: absolute; bottom: -8%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), rgba(245,241,232,.32) 46%, rgba(245,241,232,0) 72%); border: 1px solid rgba(201,169,97,.18); animation: bub linear infinite; }
@keyframes bub { 0%{transform:translateY(0) translateX(0) scale(.85);opacity:0} 12%{opacity:.55} 88%{opacity:.36} 100%{transform:translateY(-118vh) translateX(var(--bx,0)) scale(1.1);opacity:0} }

/* ----- End card — centered, logo + tagline + CTAs ----------------------- */
.exp-end-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 24px)) scale(.97); z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease-out), transform 1.25s cubic-bezier(.18,.7,.25,1); display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(28px,3vw,52px) clamp(32px,3.5vw,64px); border-radius: 24px; border: 1px solid rgba(201,169,97,.32); background: linear-gradient(145deg, rgba(11,28,52,.72), rgba(6,18,36,.88)); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: 0 60px 140px -50px rgba(0,0,0,.85), 0 0 0 1px rgba(201,169,97,.08) inset; max-width: min(640px, 92vw); }
.exp-end-card.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.exp-end-logo { width: clamp(140px,16vw,210px); height: auto; opacity: 0; transform: translateY(12px); transition: opacity 1.1s var(--ease-out) .18s, transform 1.2s var(--ease-out) .18s; filter: drop-shadow(0 14px 40px rgba(6,20,39,.65)); }
.exp-end-card.is-in .exp-end-logo { opacity: 1; transform: none; }
.exp-end-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px,2.4vw,34px); line-height: 1.2; color: var(--ivory); text-align: center; margin-top: -4px; }
.exp-end-sub { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in oklab, var(--ivory) 62%, transparent); margin-top: -8px; text-align: center; }
.exp-end-card .row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
@media (max-width: 640px) {
  .exp-end-card { width: calc(100% - 32px); padding: 26px 22px; gap: 14px; }
  .exp-end-card .row { gap: 8px; }
  .exp-end-card .row .cta { padding: 10px 16px; font-size: 11px; }
}

/* ----- Mobile ------------------------------------------------------------ */
@media (max-width: 820px) {
  .exp-panel--left, .exp-panel--right { bottom: clamp(90px,16vh,160px); }
  .exp-panel--left .exp-inner, .exp-panel--right .exp-inner { max-width: 100%; }
  .exp-beads { right: 12px; gap: 10px; }
}

/* ----- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .exp-bubbles span, .intro-logo, .exp-ready .exp-canvas, .exp-cue .line { animation: none; }
  .exp-panel .exp-eyebrow, .exp-panel .exp-h, .exp-panel .exp-sub { transition: opacity .35s ease; transform: none; }
}