/* ============================================================
   ADAYA — Hero cinema: interactive network globe + 360° scroll
   Theme-aware (dark + light). Sticky scroll storytelling.
   ============================================================ */

/* ---- cinema shell ---- */
.globe-cinema{position:relative;height:520vh}
.globe-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center}
.globe-grid{display:grid;grid-template-columns:1.02fr 1.05fr;gap:clamp(32px,5vw,72px);
  align-items:center;width:100%;padding-top:54px}

/* ---- copy deck ---- */
.globe-copy{max-width:560px;position:relative;z-index:4}
.phase-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:var(--r-pill);
  background:var(--glass-thin);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);margin-bottom:24px}
.phase-eyebrow .pdot{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}
.globe-deck{position:relative;min-height:clamp(232px,33vh,330px)}
.g-phase{position:absolute;inset:0;opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.g-phase.is-active{opacity:1;transform:none;pointer-events:auto}
.globe-title{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.05;margin-bottom:20px;text-wrap:balance}
.g-phase .lead{max-width:480px}
.globe-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:32px;position:relative;z-index:4}

/* ---- globe stage ---- */
.globe-stage{position:relative;aspect-ratio:1/1;width:100%;max-width:620px;margin:0 auto;
  display:flex;align-items:center;justify-content:center}
.globe-stage .globe-halo{position:absolute;width:78%;height:78%;border-radius:50%;
  background:radial-gradient(circle,rgba(34,205,241,.34),rgba(26,132,242,.16) 45%,transparent 70%);
  filter:blur(30px);animation:globe-breathe 7s ease-in-out infinite}
[data-theme="light"] .globe-stage .globe-halo{
  background:radial-gradient(circle,rgba(34,205,241,.20),rgba(26,132,242,.10) 45%,transparent 72%)}
@keyframes globe-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
#globeCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}

/* ---- floating stat cards ---- */
.stat-deck{position:absolute;inset:0;z-index:4;pointer-events:none;
  transition:opacity .5s var(--ease)}
.stat-card{position:absolute;z-index:4;min-width:178px;padding:16px 18px;border-radius:var(--r-lg);
  pointer-events:auto;
  background:var(--glass-reg);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);box-shadow:var(--elev-3),var(--glass-hi)}
.stat-card .sc-head{display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;color:var(--text-2);margin-bottom:10px}
.stat-card .sc-ico{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:color-mix(in srgb,var(--sapphire) 14%,transparent);border:1px solid color-mix(in srgb,var(--sky) 30%,transparent)}
.stat-card .sc-ico svg{width:15px;height:15px;color:var(--text-brand)}
.stat-card .sc-num{font-size:1.85rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-card .sc-sub{margin-top:5px;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3)}

.stat-card.sc-1{top:5%;left:-5%;animation:floaty 6s ease-in-out infinite}
.stat-card.sc-2{top:11%;right:-6%;animation:floaty 6.6s ease-in-out infinite .5s}
.stat-card.sc-3{bottom:13%;left:-3%;animation:floaty 6.2s ease-in-out infinite 1s}
.stat-card.sc-4{bottom:5%;right:-4%;animation:floaty 5.8s ease-in-out infinite 1.4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ---- concept core label (slide 03 — innovation engine) ---- */
.concept-core{position:absolute;left:50%;top:4%;transform:translateX(-50%) translateY(-8px);
  z-index:4;text-align:center;pointer-events:none;opacity:0;
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.concept-core span{display:block;font-weight:800;font-size:1.05rem;letter-spacing:-.01em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.concept-core small{display:block;margin-top:3px;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.concept-core.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- vertical scroll-progress rail ---- */
.globe-rail{position:absolute;right:clamp(14px,2.6vw,40px);top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.gr-num{font-family:"IBM Plex Mono",monospace;font-size:.82rem;font-weight:600;color:var(--text-brand);letter-spacing:.08em}
.gr-dots{display:flex;flex-direction:column;gap:11px;align-items:center}
.gr-dot{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--text-3) 55%,transparent);
  transition:all .35s var(--ease)}
.gr-dot.done{background:var(--sky)}
.gr-dot.active{background:var(--text-brand);box-shadow:0 0 10px var(--sky);transform:scale(1.55)}

/* ---- scroll hint ---- */
.globe-foot{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:10px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.globe-foot .mouse{width:20px;height:32px;border-radius:11px;border:1.5px solid color-mix(in srgb,var(--sky) 45%,transparent);
  position:relative;flex-shrink:0}
.globe-foot .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)}}

/* ---- reduced-motion fallback: static hero, phase 0 only ---- */
@media (prefers-reduced-motion:reduce){
  .globe-cinema{height:auto}
  .globe-sticky{position:relative;height:auto;min-height:100vh;min-height:100dvh;padding:120px 0 80px}
  .g-phase{position:relative;opacity:1;transform:none;display:none}
  .g-phase[data-phase="0"]{display:block}
  .globe-deck{min-height:0}
  .globe-rail,.globe-foot{display:none}
  .globe-stage .globe-halo{animation:none}
}

/* ---- responsive: collapse the cinema on tablet / mobile ---- */
@media (max-width:1080px){
  .globe-cinema{height:auto}
  .globe-sticky{position:relative;height:auto;min-height:auto;padding:116px 0 72px;overflow:visible}
  .globe-grid{grid-template-columns:1fr;gap:10px;text-align:center;padding-top:0}
  .globe-copy{max-width:none;margin:0 auto}
  .g-phase{position:relative;opacity:1;transform:none;display:none}
  .g-phase[data-phase="0"]{display:block}
  .g-phase .lead{margin-left:auto;margin-right:auto}
  .globe-deck{min-height:0}
  .globe-cta{justify-content:center}
  .globe-stage{order:-1;max-width:460px}
  .globe-rail,.globe-foot{display:none}
}
@media (max-width:680px){
  .globe-title{font-size:clamp(2.1rem,9vw,2.9rem)}
  .globe-stage{max-width:340px}
  .stat-card{min-width:140px;padding:12px 13px}
  .stat-card .sc-num{font-size:1.5rem}
  .stat-card.sc-1{left:-6%}.stat-card.sc-2{right:-6%}.stat-card.sc-3{left:-4%}.stat-card.sc-4{right:-4%}
  .globe-cta .btn{width:100%;justify-content:center}
}
@media (max-width:420px){
  .stat-card .sc-head span:not(.sc-ico){display:none}
}