/* Baddy animated welcome — self-contained: index.html does NOT load style.css, so every token used here is defined here. Mounted by welcome.js as a fixed overlay appended to (never inside #root — the landing bundle replaces that node on hydrate). */ /* Pre-JS cover: the inline head guard sets .bw-pending before first paint so the page never flashes beneath the splash. Failsafe animation clears it even if welcome.js dies before mounting. */ html.bw-pending::after{ content:"";position:fixed;inset:0;z-index:9998;background:#07080b; animation:bw-cover-failsafe .4s ease 6s forwards; } @keyframes bw-cover-failsafe{to{opacity:0;visibility:hidden}} html.bw-lock{overflow:hidden} .bw-overlay{ --bw-bg:#07080b;--bw-text:#e9ecf3;--bw-muted:#98a0b3; --bw-lime:#b7f542;--bw-cyan:#46e3ff; --bw-grad:linear-gradient(100deg,var(--bw-lime),var(--bw-cyan)); position:fixed;inset:0;z-index:9999;display:flex;align-items:center; justify-content:center;overflow:hidden;background:var(--bw-bg); color:var(--bw-text);text-align:center; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; opacity:1;transition:opacity .55s ease;cursor:pointer; } .bw-overlay.bw-out{opacity:0;pointer-events:none} .bw-media{position:absolute;inset:0;opacity:0;animation:bw-media-in 1.4s ease 2.1s forwards} .bw-media video,.bw-media img{width:100%;height:100%;object-fit:cover} @keyframes bw-media-in{to{opacity:.30}} .bw-scrim{position:absolute;inset:0;background: radial-gradient(ellipse at 50% 42%,rgba(7,8,11,.25),rgba(7,8,11,.88) 75%), linear-gradient(180deg,rgba(7,8,11,.65),rgba(7,8,11,.45) 45%,#07080b 100%)} /* Shot-trajectory arc: one bright sweep with the intro, fading out of the way of the title, then a softer sweep on a loop while the gate waits for Start (TASK-101: the intro no longer auto-dismisses). */ .bw-arc{position:absolute;inset:0;width:100%;height:100%; filter:drop-shadow(0 0 12px rgba(183,245,66,.45))} .bw-arc path{stroke-dasharray:2400;stroke-dashoffset:2400; animation:bw-arc-intro 1.95s cubic-bezier(.55,0,.35,1) .1s both, bw-arc-loop 4.8s cubic-bezier(.55,0,.35,1) 2.9s infinite} @keyframes bw-arc-intro{ 0%{stroke-dashoffset:2400;opacity:1} 60%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0}} @keyframes bw-arc-loop{ 0%{stroke-dashoffset:2400;opacity:.55} 32%{stroke-dashoffset:0;opacity:.55} 48%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:0;opacity:0}} .bw-stage{position:relative;max-width:820px;padding:0 26px;z-index:2} .bw-brand{display:flex;align-items:center;justify-content:center;gap:12px; margin-bottom:34px;opacity:0;transform:scale(.62); animation:bw-pop .7s cubic-bezier(.2,1.4,.4,1) .85s forwards} .bw-brand svg{width:40px;height:40px; filter:drop-shadow(0 0 16px rgba(183,245,66,.55)); animation:bw-glow 3.2s ease-in-out 2.4s infinite} @keyframes bw-glow{ 0%,100%{filter:drop-shadow(0 0 16px rgba(183,245,66,.55))} 50%{filter:drop-shadow(0 0 26px rgba(70,227,255,.6))}} .bw-brandname{font-family:"Space Grotesk",Inter,sans-serif;font-weight:700; font-size:24px;letter-spacing:.16em} .bw-brandname b{background:var(--bw-grad);-webkit-background-clip:text; background-clip:text;color:transparent;-webkit-text-fill-color:transparent} @keyframes bw-pop{to{opacity:1;transform:scale(1)}} .bw-title{font-family:"Space Grotesk",Inter,sans-serif;font-weight:700; font-size:clamp(42px,7.4vw,78px);line-height:1.04;letter-spacing:-.02em;margin:0} .bw-title .bw-line{display:block} .bw-grad-line .bw-w{background:var(--bw-grad);-webkit-background-clip:text; background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .bw-w{display:inline-block;opacity:0;transform:translateY(20px); filter:blur(10px);animation:bw-rise .62s cubic-bezier(.2,.8,.25,1) forwards} @keyframes bw-rise{to{opacity:1;transform:translateY(0);filter:blur(0)}} .bw-sub{max-width:540px;margin:24px auto 0;color:var(--bw-muted); font-size:17px;line-height:1.6;opacity:0;transform:translateY(14px); animation:bw-rise .6s ease 2.35s forwards} .bw-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center; margin-top:36px;opacity:0;transform:translateY(14px); animation:bw-rise .6s ease 2.6s forwards} .bw-btn{display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:0 30px;border:0;border-radius:999px;cursor:pointer; font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:16px; color:#0a0c08;background:var(--bw-grad);text-decoration:none; box-shadow:0 0 26px rgba(183,245,66,.28);transition:filter .15s,transform .15s} .bw-btn:hover{filter:brightness(1.08);transform:translateY(-1px)} .bw-ghost{background:rgba(24,24,27,.72);color:var(--bw-text); border:1px solid rgba(255,255,255,.14);box-shadow:none;font-weight:500} /* Start waits for the visitor: a slow breathing glow once the CTAs are in. */ .bw-start{gap:10px;min-width:168px; animation:bw-breathe 2.6s ease-in-out 3.3s infinite} @keyframes bw-breathe{ 0%,100%{box-shadow:0 0 22px rgba(183,245,66,.26)} 50%{box-shadow:0 0 44px rgba(183,245,66,.55),0 0 0 6px rgba(183,245,66,.10)}} @media (max-width:520px){ .bw-brand{margin-bottom:26px} .bw-sub{font-size:15.5px} .bw-ctas{display:grid;width:100%;margin-top:30px} } /* Reduced motion: deterministic final state — no choreography and no loops; the gate still waits for Start, media stays a still. */ @media (prefers-reduced-motion:reduce){ .bw-arc{display:none} .bw-overlay .bw-brand,.bw-overlay .bw-w,.bw-overlay .bw-sub, .bw-overlay .bw-ctas,.bw-overlay .bw-start,.bw-overlay .bw-brand svg{ animation:none;opacity:1;transform:none} .bw-overlay .bw-w{filter:none} .bw-overlay .bw-media{animation:none;opacity:.22} }