/* static/css/main_page.css */
/* ===== BAI Main Page — polished: centered emblem, contained bar, unified glass color, zero scroll ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

:root{
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --navy:#000080; --navy-2:#00001a;

  --text:#fff; --text-dim:rgba(255,255,255,.86); --text-soft:rgba(255,255,255,.72);

  /* unified glass tone (slightly richer gray to match theme) */
  --glass:rgba(255,255,255,.085);
  --stroke:rgba(255,255,255,.16);

  --neo:#1CF2FF; --neo-press:#11ccda; --neo-glow:rgba(28,242,255,.46);

  --r:22px; --r-sm:12px;
  --shadow:0 34px 96px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.06);

  --t:.28s cubic-bezier(.2,.8,.2,1);

  --vh: 1vh; /* set via JS for safe mobile height */
}

/* RESET + NO-SCROLL */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%; width:100%}
html,body{overflow:hidden; overscroll-behavior:none; touch-action:none}
body.theme-navy{
  font-family:var(--font); color:var(--text);
  background:
    radial-gradient(1200px 600px at 8% -12%, #0011bb3a, transparent 70%),
    radial-gradient(1000px 720px at 92% -18%, #0044ff24, transparent 72%),
    linear-gradient(180deg, var(--navy), var(--navy-2));
  min-height:calc(var(--vh) * 100);
  position:relative;
}
.bg-canvas{position:fixed; inset:0; z-index:-2; display:block}
.bg-canvas.fg{z-index:-1}

/* STAGE */
.stage{
  width:100vw; height:calc(var(--vh) * 100);
  display:grid; place-items:center;
  padding: clamp(10px, 3vw, 28px);
}

/* CARD — unified gray, centered content, overflow hidden to keep bar inside */
.card{
  display:grid; place-items:center; gap:clamp(16px,3vw,32px);
  max-width:min(720px, 94vw);
  width:clamp(300px, 92vw, 720px);
  background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.04));
  border:1px solid var(--stroke); border-radius:var(--r);
  padding:clamp(20px,3.6vw,42px);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transform:translateY(20px) scale(.98);
  opacity:0;
  overflow:hidden;            /* <-- keep all inner visuals contained */
  animation:cardIn .9s cubic-bezier(.2,.8,.2,1) .25s forwards;
}
@keyframes cardIn{to{transform:translateY(0) scale(1); opacity:1}}

/* EMBLEM — force center alignment; no parallax offset */
.emblem{
  position:relative;
  width:clamp(180px, 32vw, 280px);
  aspect-ratio:1/1;
  margin-inline:auto;         /* <-- hard center */
  border-radius:50%;
  display:grid; place-items:center; isolation:isolate;
  transform:translateY(8px) scale(.96);
  opacity:0; animation:emblemIn 1s cubic-bezier(.18,.9,.24,1.05) .35s forwards;
}
@keyframes emblemIn{
  40%{transform:translateY(0) scale(1.10); opacity:1}
  75%{transform:translateY(0) scale(.99)}
  100%{transform:translateY(0) scale(1); opacity:1}
}
.emblem__img{
  position:relative; z-index:3;
  width:70%; height:70%; border-radius:50%; object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(28,242,255,.42)) brightness(1.06);
}
.pulse{
  position:absolute; inset:-6%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(28,242,255,.24), transparent 65%);
  animation:pulse 2.6s ease-in-out infinite; z-index:0;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.shine{
  position:absolute; inset:-2%; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 35%, rgba(255,255,255,.2) 40%, transparent 55% 100%);
  animation:shine 1.8s linear infinite; filter:blur(.3px); z-index:1;
}
@keyframes shine{to{transform:rotate(360deg)}}
.orbit{
  position:absolute; inset:-3%; border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);
  filter:drop-shadow(0 10px 24px rgba(28,242,255,.35));
}
.orbit--outer{ animation:orbit 16s linear infinite }
.orbit--mid  { inset:-10%; animation:orbit 11s linear reverse infinite; opacity:.9 }
.orbit--inner{ inset:-18%; animation:orbit 8s linear infinite; opacity:.85 }
@keyframes orbit{to{transform:rotate(360deg)}}
.orbit::before,.orbit::after{
  content:""; position:absolute; width:9px; height:9px; border-radius:50%;
  background: radial-gradient(circle, #fff, #1CF2FF 70%);
  box-shadow:0 0 10px rgba(28,242,255,.6), 0 0 22px rgba(28,242,255,.35);
}
.orbit::before{ top:-4px; left:50%; transform:translateX(-50%) }
.orbit::after { bottom:-4px; left:14% }

/* BRAND — BAI always visible, staggered */
.brand{display:grid; place-items:center; gap:.55rem; text-align:center; line-height:1.1}
.brand__letters{
  display:inline-grid; grid-auto-flow:column; gap:.18em;
  padding:.35rem .9rem; border-radius:14px;
  transform:translateY(10px); opacity:1; /* <-- ensure visible */
  animation:brandIn .7s var(--t) .8s forwards;
}
@keyframes brandIn{to{transform:translateY(0)}}
.brand__letters i{
  display:inline-block; font-style:normal; font-weight:900;
  font-size:clamp(2.4rem, 8vw, 3.8rem); letter-spacing:.06em;
  background:linear-gradient(180deg, #fff, #dffbff 70%, #b6fbff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 2px 0 rgba(255,255,255,.06), 0 18px 42px rgba(0,0,0,.5);
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.06));
  opacity:0; transform:translateY(16px) scale(.94);
  animation:letter .9s var(--t) forwards;
}
.brand__letters i:nth-child(1){animation-delay:1.0s}
.brand__letters i:nth-child(2){animation-delay:1.18s}
.brand__letters i:nth-child(3){animation-delay:1.36s}
@keyframes letter{to{opacity:1; transform:translateY(0) scale(1)}}
.brand__sub{
  font-weight:700; font-size:clamp(1rem,2.8vw,1.24rem); color:var(--text-dim);
  letter-spacing:.02em; opacity:0; transform:translateY(10px);
  animation:subIn .7s ease 1.55s forwards;
}
@keyframes subIn{to{opacity:1; transform:translateY(0)}}

/* PROGRESS — full width INSIDE card; never overflows */
.bar{
  width:100%;                 /* <-- container follows card width */
  display:grid; gap:.95rem;
}
.bar__track{
  position:relative; width:100%;    /* <-- track locked to card */
  height:clamp(12px,1.9vw,16px);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.bar__wave{
  position:absolute; inset:-140% -60% -140% -60%;
  background:radial-gradient(180px 180px at 50% 50%, rgba(28,242,255,.12), transparent 60%);
  animation:wave 2.1s linear infinite;
}
@keyframes wave{to{transform:rotate(360deg)}}
.bar__fill{
  --w:0%;
  position:absolute; inset:0 auto 0 0;
  width:var(--w); max-width:100%;   /* <-- cap width inside */
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.6), transparent 35%),
    linear-gradient(180deg, var(--neo), var(--neo-press));
  border-right:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 28px var(--neo-glow), inset 0 1px 0 rgba(255,255,255,.55);
  border-radius:inherit; transition:width .3s ease;
}
.bar__gloss{
  position:absolute; inset:-60% -40%;
  background:conic-gradient(from 0deg, transparent 0 30%, rgba(255,255,255,.22) 42%, transparent 55% 100%);
  animation:gloss 1.4s linear infinite; pointer-events:none
}
@keyframes gloss{to{transform:rotate(360deg)}}
.bar__meta{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--text-soft); font-weight:800; font-size:clamp(.92rem,2.1vw,1rem)
}
.dots{display:inline-flex; gap:.38rem}
.dots i{display:block; width:.62rem; height:.62rem; border-radius:50%;
  background:rgba(255,255,255,.4); animation:dot 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
.dots i:nth-child(4){animation-delay:.45s}
@keyframes dot{0%,100%{transform:translateY(0); opacity:.75} 50%{transform:translateY(-6px); opacity:1}}
.pct{color:#dffbff}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* RESPONSIVE */
@media (max-width:420px){
  .card{padding:18px; border-radius:18px}
}