/* ============================================================
   ADAYA — Immersive Hero Cinema
   visionOS liquid-glass · scroll storytelling · cursor reactive
   ============================================================ */

/* ---------- CUSTOM CURSOR ---------- */
.cursor-dot,.cursor-ring{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor-dot,.cursor-ring{
    display:block;position:fixed;top:0;left:0;border-radius:50%;
    pointer-events:none;z-index:10000;transform:translate(-50%,-50%);
    mix-blend-mode:screen;will-change:transform}
  .cursor-dot{width:7px;height:7px;background:var(--sky);box-shadow:0 0 12px 2px var(--sky)}
  .cursor-ring{width:34px;height:34px;border:1.5px solid rgba(130,222,255,.65);
    background:rgba(34,205,241,.04);
    transition:width .28s var(--ease),height .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease),opacity .28s}
  .cursor-ring.is-hover{width:58px;height:58px;background:rgba(34,205,241,.10);border-color:rgba(130,222,255,.95)}
  .cursor-ring.is-logo{width:104px;height:104px;background:rgba(34,205,241,.08);border-color:rgba(130,222,255,.45)}
  .cursor-ring.is-down{width:26px;height:26px}
  .cinema-on,.cinema-on a,.cinema-on button,.cinema-on .btn,.cinema-on [data-magnetic]{cursor:none}
}

/* ---------- CINEMA SHELL ---------- */
.hero-cinema{position:relative;height:460vh;background:
  radial-gradient(1200px 760px at 78% 8%, rgba(34,205,241,.16), transparent 60%),
  radial-gradient(1000px 700px at 12% 78%, rgba(26,132,242,.14), transparent 62%),
  linear-gradient(180deg,#020B24 0%,#04123A 55%,#020B24 100%)}
.hero-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;
  --glow:0}

/* ---------- ENVIRONMENT ---------- */
.env-grid{position:absolute;inset:-2px;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(72,150,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,150,255,.10) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 45%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 45%,#000 30%,transparent 78%)}
.env-beams{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-beams::before,.env-beams::after{content:"";position:absolute;top:-30%;width:48vw;height:160%;
  background:linear-gradient(180deg,rgba(34,205,241,.10),transparent 70%);filter:blur(40px)}
.env-beams::before{left:8%;transform:rotate(14deg)}
.env-beams::after{right:6%;transform:rotate(-12deg);background:linear-gradient(180deg,rgba(26,132,242,.12),transparent 70%)}
.env-particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.env-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(2,8,28,.55) 100%)}

/* ---------- STAGE LAYOUT ---------- */
.stage-inner{position:relative;z-index:3;display:grid;grid-template-columns:1.02fr .98fr;
  gap:48px;align-items:center;width:100%}

/* LEFT — phase copy */
.stage-copy{max-width:560px}
.phase-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(10,30,72,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(120,200,255,.18);margin-bottom:26px}
.phase-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--sky);box-shadow:0 0 10px var(--sky);
  animation:pulse 2.4s infinite;flex-shrink:0}
.phase-eyebrow .overline{white-space:nowrap;color:#bfe9ff}
.phase-deck{position:relative;min-height:clamp(220px,30vh,290px)}
.phase-copy{position:absolute;inset:0;opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.phase-copy.is-active{opacity:1;transform:none;pointer-events:auto}
.phase-copy h1{font-size:clamp(2.4rem,4.8vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  color:#fff;margin-bottom:20px;text-wrap:balance}
.phase-copy h1 em{font-style:normal;background:linear-gradient(120deg,#5FE0FA,#1A84F2);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.phase-copy p{font-size:clamp(1.02rem,1.4vw,1.2rem);color:#9fb4d6;max-width:480px;line-height:1.6;text-wrap:pretty}
.stage-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:34px}
.scroll-hint{display:flex;align-items:center;gap:10px;margin-top:30px;font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#6f86ad}
.scroll-hint .mouse{width:20px;height:32px;border-radius:11px;border:1.5px solid rgba(130,200,255,.4);position:relative;flex-shrink:0}
.scroll-hint .mouse::before{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;
  background:var(--sky);transform:translateX(-50%);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}

@media (prefers-reduced-motion:reduce){
  .phase-eyebrow .dot,
  .scroll-hint .mouse::before{animation:none}
}

/* glass button glow */
.btn-glass{background:rgba(20,42,92,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  color:#eaf6ff;border:1px solid rgba(120,200,255,.30);position:relative;overflow:hidden}
.btn-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),rgba(34,205,241,.35),transparent 70%)}
.btn-glass:hover{border-color:rgba(120,210,255,.6);transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,90,200,.4)}
.btn-glass:hover::after{opacity:1}

/* RIGHT — 3D logo */
.hero-cinema .hero-visual{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;z-index:3}
.hero-cinema .core-glow{opacity:calc(.5 + var(--glow)*.45);
  transform:scale(calc(1 + var(--glow)*.16));transition:opacity .2s linear,transform .2s linear}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
.hero-stage.bright .core{filter:brightness(1.14) saturate(1.12)}
.hero-stage.bright .podium-ring{box-shadow:0 0 40px rgba(80,210,255,1),inset 0 0 22px rgba(150,230,255,.7)}
.core{transition:filter .4s var(--ease)}

/* pillar caption cards */
.pillar-card{position:absolute;z-index:6;max-width:212px;padding:15px 17px;border-radius:var(--r-lg);
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:500;line-height:1.5;
  background:rgba(9,24,58,.55);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(120,190,255,.16);color:#aebfdc;
  opacity:.32;filter:saturate(.5);transform:translateY(6px) scale(.97);
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.pillar-card .pc-head{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.pillar-card .d{width:9px;height:9px;border-radius:50%;background:var(--dc);box-shadow:0 0 10px var(--dc);flex-shrink:0}
.pillar-card b{font-weight:700;color:#eaf3ff;letter-spacing:.02em}
.pillar-card.active{opacity:1;filter:none;transform:none;
  border-color:color-mix(in srgb,var(--dc) 55%,transparent);
  box-shadow:0 0 34px color-mix(in srgb,var(--dc) 30%,transparent)}
.pc-sky{top:1%;right:-7%}
.pc-sapphire{top:39%;left:-13%}
.pc-navy{bottom:1%;right:-3%}

/* ---------- PROGRESS RAIL ---------- */
.progress-rail{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:7;
  display:flex;align-items:flex-start;gap:0;width:min(680px,82vw)}
.rail-track{position:relative;flex:1;height:2px;margin-top:21px;background:rgba(120,180,255,.18);border-radius:2px}
.rail-fill{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#1A84F2,#22CDF1);
  border-radius:2px;box-shadow:0 0 12px rgba(34,205,241,.7)}
.rail-nodes{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center}
.rail-node{position:relative;display:flex;flex-direction:column;align-items:center}
.rail-node .pt{width:11px;height:11px;border-radius:50%;background:#0a1f4d;border:2px solid rgba(120,180,255,.4);
  transition:all .3s var(--ease)}
.rail-node .lb{position:absolute;top:-26px;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:#5f7aa6;white-space:nowrap;transition:color .3s var(--ease)}
.rail-node.done .pt{background:#22CDF1;border-color:#22CDF1;box-shadow:0 0 12px rgba(34,205,241,.8)}
.rail-node.active .pt{background:#fff;border-color:#22CDF1;box-shadow:0 0 16px rgba(34,205,241,1);transform:scale(1.25)}
.rail-node.active .lb{color:#cfeaff}

/* ---------- REDUCED-MOTION / NO-CINEMA FALLBACK ---------- */
.reduce-cine .hero-cinema{height:auto}
.reduce-cine .hero-stage{position:relative;height:auto;min-height:100vh;min-height:100dvh;padding:130px 0 70px}
.reduce-cine .env-particles{display:none}
.reduce-cine .phase-copy{position:relative;opacity:1;transform:none;display:none}
.reduce-cine .phase-copy[data-phase="0"]{display:block}
.reduce-cine .pillar-card{opacity:1;filter:none;transform:none}
.reduce-cine .progress-rail,.reduce-cine .scroll-hint{display:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero-cinema{height:auto}
  .hero-stage{position:relative;height:auto;min-height:100vh;min-height:100dvh;padding:120px 0 90px;display:flex}
  .stage-inner{grid-template-columns:1fr;gap:30px}
  .hero-cinema .hero-visual{max-width:420px;margin:0 auto;order:-1}
  .phase-copy{position:relative;opacity:1;transform:none;display:none}
  .phase-copy.is-active{display:block}
  .phase-deck{min-height:0}
  .pc-sky{right:-2%}.pc-sapphire{left:-4%}.pc-navy{right:-2%}
  .progress-rail{display:none}
}
@media (max-width:680px){
  .pillar-card{display:none}
  .phase-copy h1{font-size:clamp(2.1rem,9vw,2.8rem)}
  .stage-cta .btn{width:100%;justify-content:center}
}