/* ============================================================
   OZIRA AI — Cinematic hero styles
   Loaded by public/landing.html. Tokens come from landing.html's
   :root (--bg, --text, --violet, --coral, etc.).
   ============================================================ */

.hero{
  position:relative;
  min-height:min(100vh,900px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;padding:120px 0 60px;
}

/* WebGL canvas — sits behind everything, never blocks first paint */
#heroCanvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  display:block;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
}
#heroCanvas.on{opacity:1}

/* static poster shown before WebGL loads / when animation is disabled */
.hero-poster{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  opacity:.9;transition:opacity .8s ease;
}
.hero.webgl-live .hero-poster{opacity:0}

/* ambient aura specific to hero */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%, rgba(124,92,240,.20), transparent 62%);
}

/* floating hand + phone centerpiece */
.hand-phone{
  position:absolute;z-index:2;top:50%;left:50%;
  width:min(340px,68vw);transform:translate(-50%,-58%);
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.6));
  animation:floaty 6s ease-in-out infinite;pointer-events:none;
}
@keyframes floaty{0%,100%{transform:translate(-50%,-58%)}50%{transform:translate(-50%,-63%)}}
@media (prefers-reduced-motion:reduce){.hand-phone{animation:none}}

/* hero content overlaps the visual */
.hero-content{position:relative;z-index:3;max-width:820px;padding:0 24px}
.hero-content .badge{margin-bottom:26px}
.hero-content h1{font-size:clamp(40px,7vw,72px);font-weight:600;letter-spacing:-.035em;margin-bottom:22px;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.hero-content h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-content .sub{color:var(--muted);font-size:clamp(16px,2.3vw,20px);max-width:600px;margin:0 auto 30px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}

/* app-store badges */
.store-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.store-badges a{position:relative;display:inline-flex}
.store-badges img{height:52px;width:auto;transition:transform .15s ease,filter .2s ease}
.store-badges a:hover img{transform:translateY(-2px)}
.badge-soon{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;letter-spacing:.02em;
  background:var(--coral);color:#fff;padding:2px 7px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.4)}

.hero-reassure{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.hero-reassure span{display:inline-flex;align-items:center;gap:7px}
.hero-reassure .dot{width:5px;height:5px;border-radius:50%;background:var(--violet)}

/* scroll cue */
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;color:var(--muted);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue .mouse{width:22px;height:36px;border:1.5px solid var(--line-2);border-radius:12px;position:relative}
.scroll-cue .mouse::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:7px;border-radius:2px;background:var(--violet);animation:scrolldot 1.6s ease-in-out infinite}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1;transform:translate(-50%,10px)}100%{opacity:0;transform:translate(-50%,12px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue .mouse::before{animation:none}}

/* ============================================================
   Ignition intro overlay
   ============================================================ */
.hero-intro{
  position:fixed;inset:0;z-index:900;background:var(--bg);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hero-intro::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 55%, rgba(124,92,240,.18), transparent 60%),
             radial-gradient(50% 40% at 50% 80%, rgba(225,29,72,.14), transparent 60%)}
.hero-intro.done{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}

.intro-stage{position:relative;width:min(680px,92vw);height:min(680px,92vh)}

.intro-africa{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:min(300px,60%);opacity:0}
.intro-human{position:absolute;left:50%;bottom:8%;transform:translate(-50%,40px);width:min(190px,42%);opacity:0;transform-origin:bottom center}
.intro-ai{position:absolute;left:50%;top:6%;transform:translate(-50%,-40px);width:min(190px,42%);opacity:0;transform-origin:top center}
.intro-spark{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) scale(.2);width:180px;height:180px;opacity:0;
  background:radial-gradient(circle, #fff 0%, var(--coral) 22%, var(--violet) 48%, transparent 70%);border-radius:50%;filter:blur(2px)}

.intro-skip{position:absolute;bottom:26px;right:26px;z-index:2;
  background:var(--glass);border:1px solid var(--line-2);color:var(--text);
  font-family:inherit;font-size:13px;font-weight:500;padding:9px 16px;border-radius:999px;cursor:pointer}
.intro-skip:hover{background:var(--glass-2)}

/* responsive */
@media (max-width:640px){
  .hero{min-height:92vh;padding:100px 0 80px}
  .hand-phone{width:74vw}
  .store-badges img{height:46px}
}