/* =============================================================================
   FLUX — experiential tier showcase
   Art direction: near-black void · bone-white type · a living electric accent
   that shifts through the journey (cyan → violet → ember). Cinematic, weightless.
   ============================================================================= */

:root{
  --void:#050506;
  --ink:#f4f1ea;            /* bone white */
  --ink-dim:#9a978f;
  --line:rgba(244,241,234,.14);
  --accent:#6ce0ff;         /* live — JS shifts this per beat */
  --accent-2:#b98cff;
  --ease:cubic-bezier(.7,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font:'Space Grotesk',system-ui,sans-serif;
  --serif:'Space Grotesk',system-ui,sans-serif;   /* (legacy var — italics removed) */
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--void);
  color:var(--ink);
  overflow:hidden;                 /* the stage is a fixed world, not a scroll page */
  position:fixed; inset:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
  /* touch: no text-selection / long-press callout hijacking gestures */
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
/* but real inputs stay selectable/editable */
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
body.is-touch{cursor:auto}
@media (hover:none){ body{cursor:auto} }
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:inherit}
/* keyboard focus — visible ring for non-pointer users (cursor is hidden) */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:#000}

/* ----------------------------------------------------------------- BG layers */
.bg-stage{position:fixed;inset:0;z-index:0}
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%);
}

/* ----------------------------------------------------------------- HUD */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,3vw,30px) clamp(18px,4vw,46px);
  pointer-events:none;
  mix-blend-mode:difference;        /* HUD legible over any beat */
}
.hud > *{pointer-events:auto}
.hud__brand{display:flex;align-items:baseline;gap:.5em;letter-spacing:.02em;text-decoration:none;transition:opacity .3s var(--ease)}
.hud__brand:hover{opacity:.7}
.hud__exit{font-size:15px;line-height:1;align-self:center;transition:transform .3s var(--ease)}
.hud__brand:hover .hud__exit{transform:translateX(-3px)}
.hud__mark{font-weight:700;font-size:clamp(15px,1.4vw,18px);letter-spacing:.18em}
.hud__by{font-size:11px;color:#fff;opacity:.6;font-weight:400}
.hud__progress{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:12px;color:#fff}
.hud__beat{font-weight:500;font-variant-numeric:tabular-nums}
.hud__slash{opacity:.4}
.hud__total{opacity:.5}
.hud__rail{width:clamp(60px,14vw,140px);height:2px;background:rgba(255,255,255,.22);margin-left:.4em;overflow:hidden}
.hud__rail i{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.hud__skip{
  display:flex;align-items:center;gap:.5em;font-size:12px;letter-spacing:.04em;color:#fff;
  padding:.55em .9em;border:1px solid rgba(255,255,255,.3);border-radius:100px;
  transition:gap .3s var(--ease),border-color .3s;text-transform:lowercase;
}
.hud__skip:hover{gap:.85em;border-color:#fff}
.hud__skip svg{transition:transform .3s var(--ease)}
.hud__skip:hover svg{transform:translateX(2px)}

/* ----------------------------------------------------------------- Stage / beats */
.stage{position:fixed;inset:0;z-index:10}
.beat{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .9s var(--ease),visibility .9s;
  padding:max(8vh,80px) clamp(20px,5vw,60px) 12vh;
}
.beat.is-active{opacity:1;visibility:visible;pointer-events:auto}
.beat.is-exiting{opacity:0}
.beat__inner{
  position:relative;z-index:5;text-align:center;max-width:760px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3vh,32px);
}
.beat__inner--wide{max-width:1100px}
.beat__inner--overlay{pointer-events:none}
.beat__inner--overlay > *{pointer-events:auto}
.beat canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}

/* cue — the gesture prompt */
.cue{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:lowercase;
  color:var(--accent);
  padding:.6em 1.1em;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:100px;background:color-mix(in srgb,var(--accent) 8%,transparent);
  animation:cuePulse 2.4s var(--ease) infinite;
  backdrop-filter:blur(4px);
}
.cue__icon{font-size:15px;animation:cueSpin 6s linear infinite}
@keyframes cuePulse{0%,100%{opacity:.65;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes cueSpin{to{transform:rotate(360deg)}}
.cue.is-done{opacity:0;transform:translateY(-8px);transition:.5s var(--ease)}

.beat__line{
  font-size:clamp(2.4rem,8vw,6rem);line-height:.96;font-weight:500;letter-spacing:-.02em;
}
.beat__note{font-size:clamp(13px,1.6vw,15px);color:var(--ink-dim);letter-spacing:.02em;max-width:42ch}
.beat__note--top{order:-1}
.beat__next{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink);
  padding:.7em 1.4em;border:1px solid var(--line);border-radius:100px;
  transition:.35s var(--ease);opacity:0;transform:translateY(8px);
  animation:nextIn .6s var(--ease-out) forwards;
}
.beat__next[hidden]{display:none}
.beat__next:hover{border-color:var(--accent);color:var(--accent);transform:translateY(0) scale(1.03)}
.beat__nav{display:flex;align-items:center;justify-content:center;gap:14px}
.beat__back{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-dim);
  padding:.7em 1.1em;border-radius:100px;border:1px solid transparent;transition:.3s var(--ease)}
.beat__back:hover{color:var(--ink);border-color:var(--line)}
@keyframes nextIn{to{opacity:1;transform:translateY(0)}}

/* ----------------------------------------------------------------- BEAT 0 · enter */
.beat--enter{padding-top:max(10vh,90px)}
.beat--enter .enter__center{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,26px);width:100%;max-width:900px}
.enter__kicker{font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim)}
.enter__stage{position:relative;width:100%;height:clamp(180px,38vh,380px)}
.enter__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.enter__play{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:lowercase;
  color:color-mix(in srgb,var(--accent) 80%,transparent);white-space:nowrap;
  padding:.4em .9em;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:100px;
  background:color-mix(in srgb,var(--accent) 6%,transparent);backdrop-filter:blur(4px);
  animation:cuePulse 2.4s var(--ease) infinite;pointer-events:none}
body.is-touch .enter__play,body.is-reduced .enter__play{animation:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.enter__sub{font-size:clamp(14px,2vw,18px);color:var(--ink-dim);max-width:34ch;line-height:1.5}
.enter__go{
  position:relative;margin-top:.6em;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--void);
  padding:1em 2.2em;border-radius:100px;background:var(--ink);
  overflow:hidden;isolation:isolate;font-weight:500;
}
.enter__go::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:-1}
.enter__go:hover::before{transform:scaleX(1)}
.enter__pulse{position:absolute;inset:-2px;border-radius:100px;border:1px solid var(--ink);animation:goPulse 2.2s var(--ease) infinite;z-index:-2}
@keyframes goPulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
.enter__hint{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(244,241,234,.35);text-transform:lowercase}

/* ----------------------------------------------------------------- BEAT 3 · hold */
.hold-stage{position:relative;width:100%;height:clamp(150px,30vh,300px)}
.hold-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.beat--hold .hold-pad{margin-top:calc(-1 * clamp(80px,16vh,150px))}  /* core sits inside the word */
.hold-pad{
  position:relative;width:clamp(150px,22vw,210px);aspect-ratio:1;display:grid;place-items:center;
  touch-action:none;
}
.hold-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hold-ring circle{fill:none;stroke-width:2}
.hold-ring__track{stroke:var(--line)}
.hold-ring__fill{
  stroke:var(--accent);stroke-linecap:round;
  stroke-dasharray:339;stroke-dashoffset:339;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 70%,transparent));
  transition:stroke-dashoffset .08s linear;
}
.hold-pad__core{
  width:36%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--accent),color-mix(in srgb,var(--accent) 20%,#000));
  box-shadow:0 0 30px color-mix(in srgb,var(--accent) 60%,transparent);
  transition:transform .12s var(--ease);
}
.hold-pad.is-charging .hold-pad__core{animation:coreShake .12s linear infinite}
@keyframes coreShake{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}

/* ----------------------------------------------------------------- BEAT 4 · drag (reel) */
.reel{position:relative;width:100%;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none;padding:10px 0;
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.reel.is-grabbing{cursor:grabbing}
.reel__track{display:flex;gap:clamp(14px,2vw,26px);will-change:transform;touch-action:pan-y}
.reel-card{
  flex:0 0 clamp(220px,26vw,300px);aspect-ratio:3/4;border-radius:16px;
  border:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  transition:border-color .4s,transform .4s var(--ease-out);
}
.reel-card::before{content:"";position:absolute;inset:0;opacity:.5;background:var(--card-bg);transition:opacity .5s}
.reel-card:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.reel-card__idx{position:absolute;top:18px;left:20px;font-family:var(--mono);font-size:11px;color:var(--ink-dim);z-index:2}
.reel-card__t{position:relative;z-index:2;font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.01em}
.reel-card__d{position:relative;z-index:2;font-size:12.5px;color:var(--ink-dim);margin-top:.4em;line-height:1.4}

/* ----------------------------------------------------------------- BEAT 5 · scroll */
.scroll-scene{position:absolute;inset:0;z-index:1;overflow:hidden}
.scroll-layer{position:absolute;inset:-10%;background-repeat:no-repeat;will-change:transform}
.scroll-layer[data-depth="0.15"]{background:radial-gradient(40% 40% at 30% 30%,color-mix(in srgb,var(--accent) 18%,transparent),transparent)}
.scroll-layer--mid{background:radial-gradient(36% 36% at 72% 64%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent)}
.scroll-kinetic{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.02em}
.beat__inner--scroll{position:absolute;inset:0;max-width:none;justify-content:space-between;padding:13vh 20px 9vh}
.scroll-bottom{display:flex;flex-direction:column;align-items:center;gap:16px}
.beat__inner--scroll .beat__note{background:rgba(5,5,6,.5);backdrop-filter:blur(6px);padding:.4em 1em;border-radius:100px}
.scroll-kinetic .kw{
  font-size:clamp(2.4rem,10.5vw,9rem);font-weight:700;line-height:.8;letter-spacing:-.03em;
  opacity:0;transform:translateY(60px) skewY(6deg);
  will-change:transform,opacity;
}
.scroll-kinetic .kw:nth-child(even){font-weight:400;color:var(--accent)}
.scroll-progress{width:min(280px,60vw);height:2px;background:var(--line);position:relative;overflow:hidden}
.scroll-progress i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}

/* ----------------------------------------------------------------- BEAT · field (BIOME) */
.beat__field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
.beat__inner--field{position:absolute;inset:0;max-width:none;justify-content:space-between;padding:13vh 20px 9vh}
.field-mid{flex:1;display:grid;place-items:center;width:100%}
.beat__line--field{font-size:clamp(2rem,6.5vw,5rem);text-align:center;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.beat__inner--field .beat__note{background:rgba(5,5,6,.5);backdrop-filter:blur(6px);padding:.4em 1em;border-radius:100px}

/* ----------------------------------------------------------------- BEAT 6 · type / quote */
.quote{
  width:100%;max-width:860px;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,2.4vw,30px);
  text-align:left;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  backdrop-filter:blur(10px);
}
.quote__field{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--line)}
.quote__label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.quote__input{
  background:none;border:none;border-bottom:1px solid var(--line);
  font-family:var(--font);font-size:clamp(18px,2.4vw,26px);color:var(--ink);padding:.3em 0;outline:none;
  transition:border-color .3s;
}
.quote__input:focus{border-color:var(--accent)}
.quote__input::placeholder{color:rgba(244,241,234,.28)}
.quote__chips{display:flex;flex-wrap:wrap;gap:8px}
.quote-chip{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-dim);
  padding:.5em .9em;border:1px solid var(--line);border-radius:100px;transition:.25s var(--ease);
}
.quote-chip:hover{color:var(--ink);border-color:var(--ink-dim)}
.quote-chip.is-on{color:var(--void);background:var(--accent);border-color:var(--accent)}
.quote__readout{padding:clamp(20px,3vw,34px);display:flex;flex-direction:column;justify-content:center;gap:14px;background:rgba(0,0,0,.25)}
.quote__row{font-size:15px;line-height:1.5;color:var(--ink);min-height:3em}
.quote__price{display:flex;align-items:baseline;gap:.1em;font-weight:600;letter-spacing:-.02em}
.quote__cur{font-size:clamp(20px,3vw,30px);color:var(--ink-dim)}
.quote__num{font-size:clamp(40px,7vw,72px);font-variant-numeric:tabular-nums;line-height:1}
.quote__plus{font-size:clamp(18px,2.6vw,26px);font-weight:500;color:var(--accent);margin-left:.3em}
.quote__meta{font-family:var(--mono);font-size:11px;color:var(--ink-dim);letter-spacing:.02em}

/* ----------------------------------------------------------------- BEAT 7 · CTA */
.beat--cta{padding-bottom:8vh}
.cta__center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.6vh,28px);position:relative;z-index:5;max-width:680px}
.cta__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim)}
.cta__title{font-size:clamp(3rem,11vw,8rem);font-weight:600;line-height:.92;letter-spacing:-.03em}
.cta__title em{font-style:normal;font-weight:600;color:var(--accent)}
.cta__sub{font-size:clamp(15px,2vw,19px);color:var(--ink-dim);max-width:30ch;line-height:1.5}
.cta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:.6em}
.cta__btn{font-size:15px;letter-spacing:.01em;padding:1em 2em;border-radius:100px;transition:.35s var(--ease)}
.cta__btn--primary{background:var(--ink);color:var(--void);font-weight:600}
.cta__btn--primary:hover{background:var(--accent);transform:translateY(-2px)}
.cta__btn--ghost{border:1px solid var(--line)}
.cta__btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.cta__foot{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(244,241,234,.4);margin-top:1.2em}

/* ----------------------------------------------------------------- custom cursor */
.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:60;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:7px;height:7px;background:#fff;transform:translate(-50%,-50%)}
.cursor-ring{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.7);transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s;
  display:grid;place-items:center;
}
.cursor-ring span{font-family:var(--mono);font-size:9px;color:#fff;opacity:0;white-space:nowrap;letter-spacing:.05em;text-transform:lowercase}
body.cursor-hover .cursor-ring{width:54px;height:54px;background:rgba(255,255,255,.1)}
body.cursor-label .cursor-ring{width:auto;height:auto;min-width:54px;padding:.7em 1em;border-radius:100px}
body.cursor-label .cursor-ring span{opacity:1}
body.is-touch .cursor,body.is-touch .cursor-ring{display:none}

/* ----------------------------------------------------------------- toast (skip hint) */
.toast{
  position:fixed;left:50%;bottom:max(26px,5vh);transform:translateX(-50%) translateY(16px);
  z-index:50;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-dim);
  padding:.7em 1.3em;border:1px solid var(--line);border-radius:100px;background:rgba(8,8,10,.6);
  backdrop-filter:blur(8px);opacity:0;transition:.5s var(--ease);pointer-events:none;
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast b{color:var(--accent);font-weight:500}

/* ----------------------------------------------------------------- fallbacks */
.fallback{position:fixed;inset:0;display:grid;place-items:center;padding:10vw;text-align:center;color:var(--ink);font-size:18px;z-index:80}

/* reduced motion: calm, readable, all copy visible, no gesture-gating */
body.is-reduced .cue,body.is-reduced .enter__pulse,body.is-reduced .cue__icon{animation:none}
body.is-reduced .beat{transition:opacity .3s}

/* ----------------------------------------------------------------- responsive */
@media (max-width:780px){
  .hud__by{display:none}
  .hud__skip-label{display:none}
  .quote{grid-template-columns:1fr}
  .quote__field{border-right:none;border-bottom:1px solid var(--line)}
  .beat{padding:max(12vh,90px) 20px 14vh}
  .beat__line{font-size:clamp(2rem,11vw,3.4rem)}
  .reel-card{flex-basis:clamp(180px,62vw,240px)}
  .hud__rail{width:64px}
  /* touch tap targets — ≥44px */
  .beat__next{min-height:44px;padding:.7em 1.5em}
  .beat__back{min-height:44px;display:inline-flex;align-items:center}
  .cta__btn{min-height:48px;display:inline-flex;align-items:center}
  .quote-chip{min-height:44px;display:inline-flex;align-items:center}
  .quote__input{min-height:44px;padding:.5em 0;font-size:18px}
  .hud__skip{min-height:40px}
}
@media (max-width:480px){
  .enter__title{font-size:clamp(4rem,30vw,7rem)}
}