/* ============================================================
   CINEMATIC SYSTEM — hub (index.html / home.html) only.
   Loaded after style.css/hub.css/ambient.css/more.css so these
   :root tokens win the cascade on this page without touching
   anyaluga.html / eluga-radio.html, which keep their own themes.
   ============================================================ */

:root{
  --bg:#0a0710;--bg2:#0d0a15;
  --ink:#f4eef2;--mut:#ab97ac;
  --pink:#ff7eb6;--rose:#ff5d8f;--mint:#38d67e;--lav:#b9a4ff;--sky:#8fd3ff;
  --card:rgba(255,255,255,.045);--bd:rgba(255,255,255,.10);
  --glass-hi:rgba(255,255,255,.14);
  --ease-cine:cubic-bezier(.16,.84,.26,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
}
body.hub{background:
    radial-gradient(60vw 60vw at 15% -10%,#3a1830 0%,transparent 60%),
    radial-gradient(55vw 55vw at 100% 10%,#0d2a24 0%,transparent 55%),
    var(--bg);
}
body.hub .bg i{opacity:.35;mix-blend-mode:screen}
body.hub .bg i:nth-child(1){background:var(--rose)}
body.hub .bg i:nth-child(2){background:var(--lav)}
body.hub .bg i:nth-child(3){background:var(--mint)}
/* the whole fixed blob field drifts opposite the scroll, a touch slower than the content
   above it — classic parallax depth, one transform, cheap (JS sets --scroll-y below).
   Site-wide: works on any page's .bg, not just the dark hub one. */
@media(prefers-reduced-motion:no-preference){
  .bg{transform:translateY(calc(var(--scroll-y,0) * -0.06px))}
}

/* faux-glass surfaces get a hairline edge + soft depth shadow instead of stacked blur */
body.hub .card,body.hub .pcard,body.hub article,body.hub .status-row,body.hub .stage{
  background:linear-gradient(165deg,var(--card),rgba(255,255,255,.015));
  border-color:var(--bd);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 50px -28px #000000cc;
}
body.hub .pcard-anya{background:linear-gradient(160deg,#2a1522,#190f18);border-color:#ff7eb63a}
body.hub .pcard-anya,body.hub .pcard-anya h3{color:var(--ink)}
body.hub .pcard-anya p{color:var(--mut)}
body.hub .pcard-anya:hover{box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 60px -20px #ff5d8f55}
body.hub .pcard-eluga{background:linear-gradient(160deg,#0e1f16,#0a1712);border-color:#38d67e2e}
body.hub .pcard-eluga:hover{box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 60px -20px #38d67e4d}

/* ---------- navbar: transparent → glass on scroll ----------
   Site-wide, not hub-only: every page already defines its own --bg/--bd for its
   theme (pink theme.css, green eluga.css, dark cinematic here), so this adapts
   automatically instead of forcing one palette everywhere. */
.nav{background:transparent;border-bottom:1px solid transparent;backdrop-filter:none;
  transition:background .4s var(--ease-soft),border-color .4s var(--ease-soft),backdrop-filter .4s var(--ease-soft)}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid var(--bd);backdrop-filter:blur(16px) saturate(140%)}
body.hub .nav a{opacity:.85}body.hub .nav a:hover{opacity:1}
body.hub .logo{color:var(--ink)}

/* ================== HERO SEQUENCE ================== */
body.hub .cine-hero{position:relative;min-height:min(92vh,860px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:80px 0 40px;overflow:visible}

/* ambient glow field behind hero copy — desktop cursor moves it via --mx/--my, mobile keeps it static */
.cine-glow{position:absolute;inset:-10% -5%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at calc(50% + var(--mx,0)*4%) calc(38% + var(--my,0)*4%),#ff5d8f26,transparent 60%),
    radial-gradient(30vmax 30vmax at calc(78% + var(--mx,0)*-3%) calc(70% + var(--my,0)*-3%),#38d67e22,transparent 60%);
  transition:background-position .6s var(--ease-soft)}

.cine-eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin:0 0 18px}
.cine-headline{margin:0;font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.08;max-width:16ch}
.cine-headline .ln{display:block;overflow:hidden}
.cine-headline .ln span{display:inline-block;
  background:linear-gradient(100deg,var(--ink),var(--lav) 55%,var(--sky),var(--ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;background-size:220%}
.cine-sub{color:var(--mut);font-size:1.08rem;max-width:44ch;margin:20px auto 0}

/* the two products drift in as depth-layered glass orbs, not a flat fade */
.cine-orbit{position:relative;width:100%;max-width:560px;height:132px;margin:34px auto 6px}
.cine-orb{position:absolute;top:0;display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:99px;
  background:var(--card);border:1px solid var(--bd);box-shadow:inset 0 1px 0 var(--glass-hi),0 20px 50px -22px #000000d0;
  font:600 .95rem/1 "Fredoka","Noto Sans Thai",sans-serif;color:var(--ink);white-space:nowrap}
.cine-orb b{font-size:1.3rem;font-weight:500}
.orb-anya{left:2%;top:6px}
.orb-eluga{right:2%;top:52px}

.cine-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
body.hub .btn{box-shadow:0 10px 30px #ff5d8f45}
body.hub .btn.ghost{border-color:var(--bd);color:var(--ink)}

/* ================== 3D SCROLL/CURSOR-REACTIVE ORB ================== */
/* A real (perspective + preserve-3d) sculpture standing behind the headline, not a flat
   icon: three tilted glass rings around a headphone-mark core. It idles on its own slow
   spin, leans toward the cursor (reuses --mx/--my from the glow below, set on .cine-hero
   so both can read them), and gets extra spin + fades/shrinks with blur as JS (--sy/--sp)
   tracks scroll leaving the hero — the depth + parallax beat from the reference clip,
   applied to a made-for-this-site shape rather than its artwork. */
.cine-hero{perspective:1000px}
.cine-3d{position:absolute;top:54%;left:50%;width:230px;height:230px;z-index:-1;pointer-events:none;
  transform-style:preserve-3d;
  opacity:var(--sp,1);
  transform:translate(-50%,-50%) scale(calc(.82 + var(--sp,1) * .18)) rotateX(calc(var(--my,0) * -6deg)) rotateY(calc(var(--mx,0) * 10deg + var(--sy,0) * 1deg));
  filter:blur(calc((1 - var(--sp,1)) * 6px));
  transition:opacity .5s var(--ease-soft),filter .5s var(--ease-soft)}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--bd);
  box-shadow:inset 0 0 40px #ffffff10,0 0 60px -20px #ff5d8f40;
  background:conic-gradient(#ff5d8f22,#8fd3ff22,#38d67e22,#ff5d8f22)}
.orb-ring.r1{transform:rotateX(72deg) rotateZ(0deg)}
.orb-ring.r2{inset:14%;opacity:.7;transform:rotateX(72deg) rotateY(45deg) rotateZ(60deg)}
.orb-ring.r3{inset:26%;opacity:.5;transform:rotateY(78deg) rotateZ(30deg)}
.orb-core{position:absolute;inset:38%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;transform:translateZ(30px);
  background:radial-gradient(circle at 35% 30%,#ffffff26,#0000 60%),linear-gradient(160deg,#2a1522,#160c14);
  border:1px solid var(--bd);box-shadow:inset 0 1px 0 var(--glass-hi),0 20px 40px -18px #000000d0}

@media(prefers-reduced-motion:no-preference){
  .orb-ring.r1{animation:orb-spin-r1 22s linear infinite}
  .orb-ring.r2{animation:orb-spin-r2 17s linear infinite}
  .orb-ring.r3{animation:orb-spin-r3 28s linear infinite reverse}
}
@keyframes orb-spin-r1{to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes orb-spin-r2{to{transform:rotateX(72deg) rotateY(45deg) rotateZ(420deg)}}
@keyframes orb-spin-r3{to{transform:rotateY(78deg) rotateZ(390deg)}}

@media(max-width:800px),(pointer:coarse){
  .cine-3d{width:168px;height:168px;top:50%}
  .orb-ring.r3{display:none} /* one fewer 3D plane on touch/small screens — same budget cine-glow already keeps */
}

/* ================== CURSOR-REVEALED HIDDEN SCENE ==================
   The reference clip's core trick, adapted: a second, richer scene sits behind the
   hero, hidden — a soft circular window (a CSS mask, not an image swap) follows the
   cursor and lets it show through, slightly blurred/oversized like a rack-focus
   settling in. Built from this site's own palette (--rose/--sky/--mint), not the
   clip's own photography. Reuses --mx/--my already set on .cine-hero by the mousemove
   handler above (mask-image recomputes on its own whenever those vars change — no
   extra JS). Desktop + motion-ok only, same as the glow/orb it sits behind. */
.cine-mask{position:absolute;inset:-10% -4%;z-index:-2;pointer-events:none;overflow:hidden;
  opacity:var(--sp,1);transition:opacity .5s var(--ease-soft);
  -webkit-mask-image:radial-gradient(circle 260px at calc(50% + var(--mx,0) * 32%) calc(50% + var(--my,0) * 28%),#000 0%,#000 55%,transparent 100%);
  mask-image:radial-gradient(circle 260px at calc(50% + var(--mx,0) * 32%) calc(50% + var(--my,0) * 28%),#000 0%,#000 55%,transparent 100%)}
.cine-mask i{position:absolute;inset:0;display:block;
  background:
    radial-gradient(60% 50% at 30% 35%,color-mix(in srgb,var(--rose) 55%,transparent),transparent 60%),
    radial-gradient(55% 45% at 72% 60%,color-mix(in srgb,var(--sky) 55%,transparent),transparent 60%),
    radial-gradient(50% 60% at 50% 85%,color-mix(in srgb,var(--mint) 45%,transparent),transparent 65%),
    var(--bg);
  filter:blur(10px) saturate(1.35);transform:scale(1.08)}
/* shown on mobile too now — touch-drag + idle auto-drift (see cinematic.js) drive --mx/--my there */

@media(prefers-reduced-motion:no-preference){
  .cine-eyebrow{animation:cine-up .6s var(--ease-cine) both}
  .cine-headline .ln span{animation:cine-reveal 1s var(--ease-cine) both;animation-delay:calc(.12s + var(--i,0)*.12s)}
  .cine-sub{animation:cine-up .7s var(--ease-cine) .32s both}
  .orb-anya{animation:cine-orb-in 1s var(--ease-cine) .4s both}
  .orb-eluga{animation:cine-orb-in 1s var(--ease-cine) .52s both}
  .cine-cta{animation:cine-up .6s var(--ease-cine) .68s both}
}
@keyframes cine-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cine-reveal{from{opacity:0;filter:blur(10px);transform:translateY(70%) scale(1.04)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes cine-orb-in{from{opacity:0;filter:blur(6px);transform:translateY(22px) scale(.9)}to{opacity:1;filter:blur(0);transform:none}}

/* ================== SCROLL-DRIVEN SECTION TRANSITIONS ================== */
/* Each section "emerges" from the one before via mask + blur + scale + a slight 3D lean,
   not a plain slide/fade. --p is a 0→1 progress var JS repaints every scroll frame while
   the section is on screen (continuous scrub, not a one-shot flip) — rotateX needs the
   perspective root below to actually read as depth instead of a flat squash. Short
   transitions smooth the per-frame steps into one fluid, slightly-trailing motion.
   .in is the settled/fallback state: JS sets it near p=1, and it's all that runs when
   JS can't (still IntersectionObserver-driven, same one-shot pattern as .rv).
   Site-wide, like the rest of this block — any page that adds .cine-reveal to a
   section (not just the hub) gets the same scrub. */
main{perspective:1600px}
.cine-reveal{--p:0;opacity:var(--p);
  transform:translateY(calc((1 - var(--p)) * 46px)) scale(calc(.97 + var(--p) * .03)) rotateX(calc((1 - var(--p)) * 8deg));
  filter:blur(calc((1 - var(--p)) * 14px));
  clip-path:inset(calc((1 - var(--p)) * 12%) 0 0 0 round calc((1 - var(--p)) * 28px));
  transition:opacity .6s var(--ease-soft),transform .6s var(--ease-soft),filter .6s var(--ease-soft),clip-path .6s var(--ease-soft)}
.cine-reveal.in{--p:1}
.cine-reveal .stagger{opacity:0;transform:translateY(16px)}
.cine-reveal.in .stagger{opacity:1;transform:none;transition:opacity .6s var(--ease-soft),transform .6s var(--ease-soft);
  transition-delay:calc(var(--i,0)*.08s)}

body.hub section{padding:96px 0 12px}
body.hub h2{color:var(--ink);font-size:clamp(1.6rem,3.4vw,2.3rem)}

/* ================== FEATURE SHOWCASE ================== */
.showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.showcase-copy h2{text-align:left;margin-bottom:10px}
.showcase-copy p{color:var(--mut);max-width:46ch}
.showcase-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:2px}
.showcase-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  color:var(--mut);font-size:.95rem;transition:background .3s,color .3s}
.showcase-list li .dot{width:8px;height:8px;border-radius:50%;background:var(--bd);flex:none;transition:background .3s,box-shadow .3s}
.showcase-list li.on{background:var(--card);color:var(--ink)}
.showcase-list li.on .dot{background:var(--rose);box-shadow:0 0 0 4px #ff5d8f2c}
.showcase-stage{position:relative}
.showcase-stage .stage{min-height:260px}
.showcase-stage .scene{transition:opacity .35s,filter .35s}

/* light sweep across the preview panel each time the scene changes */
.showcase-stage::after{content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,#ffffff14 50%,transparent 60%);
  background-size:250% 100%;background-position:150% 0;opacity:0}
.showcase-stage.sweep::after{animation:cine-sweep 1s var(--ease-soft)}
@keyframes cine-sweep{0%{background-position:150% 0;opacity:1}70%{opacity:1}100%{background-position:-50% 0;opacity:0}}

/* ================== FINAL CTA ================== */
.cine-final{position:relative;text-align:center;padding:120px 0 100px;overflow:hidden}
.cine-final::before{content:"";position:absolute;inset:-20% 0 0;z-index:-1;
  background:radial-gradient(50vmax 40vmax at 50% 100%,#38d67e1f,transparent 65%),
             radial-gradient(40vmax 30vmax at 50% 0%,#ff5d8f1c,transparent 65%)}
.cine-final .cine-mark{font-size:2.2rem;margin-bottom:8px}
.cine-final h2{font-size:clamp(1.8rem,4.4vw,2.8rem);max-width:20ch;margin:0 auto 22px;
  background:linear-gradient(100deg,var(--ink),var(--lav) 55%,var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent}

@media(max-width:800px){
  .showcase{grid-template-columns:1fr}
  .showcase-copy h2,.showcase-copy p{text-align:center;margin-left:auto;margin-right:auto}
  .cine-orbit{height:100px}
  .cine-glow{display:none} /* cursor-follow glow is a desktop nicety; keep mobile paint cheap */
}
@media(prefers-reduced-motion:reduce){
  .cine-reveal{opacity:1;transform:none;filter:none;clip-path:none}
  .cine-reveal .stagger{opacity:1;transform:none}
  .showcase-stage.sweep::after{animation:none}
}