/* SIMUL8OR — WELCOME TAKEOVER (kit v0.3)
   Full-bleed first-run screen: no dialog box, no scrim, no close.
   Load AFTER s8-tokens.css + s8-ui.css.

   Markup shape:
   <div class="s8-tko">
     <div class="s8-mkt">…chart/candles/tape (or your real chart canvas)…</div>
     <div class="s8-tko__veil">
       <div class="s8-tko__top s8-lockup">…logo…</div>
       <div class="s8-tko__stack">
         <div class="s8-tko__kicker">…</div>
         <div class="s8-tko__fig"><sup>$</sup><span data-count="100000">100,000</span></div>
         <div class="s8-tko__sub">…</div>
         <div class="s8-tko__meta">…</div>
         <div class="s8-tko__act"><button class="s8-tko__cta">…</button><button class="s8-tko__alt">…</button></div>
       </div>
       <p class="s8-tko__legal">…</p>
     </div>
   </div>
   The count-up is 8 lines of JS — see the bottom of this file's comment
   block in Welcome Takeover.html. */

.s8-tko{position:relative;width:100%;height:100%;overflow:hidden;background:var(--s8-bg)}

/* ── the running market behind everything ───────────── */
.s8-mkt{position:absolute;inset:0;overflow:hidden}
.s8-mkt__grid{position:absolute;inset:0;background-image:linear-gradient(var(--s8-line) 1px,transparent 1px),linear-gradient(90deg,var(--s8-line) 1px,transparent 1px);background-size:52px 40px;opacity:.4}
.s8-mkt__candles{position:absolute;left:0;right:0;bottom:0;height:66%;display:flex;align-items:flex-end;gap:4px;padding:0 var(--s8-4) var(--s8-6)}
.s8-mkt__candles i{position:relative;flex:1;border-radius:1px;background:var(--s8-buy);transform-origin:bottom;animation:s8-c-grow 620ms cubic-bezier(.2,1,.3,1) both}
.s8-mkt__candles i.d{background:var(--s8-sell)}
.s8-mkt__candles i::before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:9px;background:currentColor;opacity:.5}
@keyframes s8-c-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.s8-mkt__line{position:absolute;left:0;right:0;bottom:0;height:66%}
.s8-mkt__line svg{width:100%;height:100%;display:block}
.s8-mkt__line path.ln{fill:none;stroke:var(--s8-up);stroke-width:2;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;filter:drop-shadow(0 0 9px rgba(62,214,155,.5));animation:s8-ln-draw 1700ms cubic-bezier(.3,.7,.3,1) 200ms forwards}
@keyframes s8-ln-draw{to{stroke-dashoffset:0}}
.s8-mkt__tape{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;gap:var(--s8-5);padding:0 var(--s8-4);background:rgba(8,9,11,.72);border-bottom:1px solid var(--s8-line);font-size:var(--s8-fs-micro);letter-spacing:.04em;color:var(--s8-fg-3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.s8-mkt__tape .live{display:inline-flex;align-items:center;gap:6px;flex:none;color:var(--s8-up);font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.s8-mkt__tape .live i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:s8-pulse 1.9s var(--s8-ease) infinite}
@keyframes s8-pulse{0%,100%{box-shadow:0 0 0 0 rgba(62,214,155,.5)}60%{box-shadow:0 0 0 6px rgba(62,214,155,0)}}

/* ── logo lockup ────────────────────────────────────── */
.s8-lockup{display:flex;align-items:center;gap:8px}
.s8-lockup .mark{display:flex;align-items:flex-end;gap:2.5px;height:20px}
.s8-lockup .mark i{width:4px;border-radius:1px;background:var(--s8-buy-hi)}
.s8-lockup .mark svg{width:11px;height:11px;margin-bottom:-1px;fill:var(--s8-up);stroke:none}
.s8-lockup img{height:23px;width:auto;display:block}

/* ── the takeover layer ─────────────────────────────── */
/* bottom padding reserves room for the legal line so the CTA row
   can never sit on top of it */
.s8-tko__veil{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s8-6) var(--s8-6) 58px;background:linear-gradient(180deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.28) 34%,rgba(8,9,11,.9) 78%,rgba(8,9,11,.97) 100%)}
.s8-tko__top{position:absolute;left:var(--s8-6);top:46px}
.s8-tko__stack{display:grid;gap:var(--s8-4);max-width:430px}
.s8-tko__kicker{font-size:var(--s8-fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--s8-up);animation:s8-rise 500ms var(--s8-ease) 200ms both}
.s8-tko__fig{display:flex;align-items:flex-start;gap:4px;font-size:78px;line-height:.94;font-weight:700;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;animation:s8-rise 620ms cubic-bezier(.2,1,.3,1) 260ms both}
.s8-tko__fig sup{margin-top:12px;font-size:36px;font-weight:600;color:var(--s8-up)}
.s8-tko__sub{font-size:var(--s8-fs-xl);line-height:1.35;color:var(--s8-fg);text-wrap:pretty;animation:s8-rise 560ms var(--s8-ease) 400ms both}
.s8-tko__sub b{color:#fff;font-weight:600}
.s8-tko__meta{display:flex;align-items:center;gap:var(--s8-3);flex-wrap:wrap;font-size:var(--s8-fs-sm);color:var(--s8-fg-3);animation:s8-rise 520ms var(--s8-ease) 520ms both}
.s8-tko__meta s{text-decoration:none;color:var(--s8-line-2)}
.s8-tko__act{display:flex;align-items:center;gap:var(--s8-4);flex-wrap:wrap;margin-top:var(--s8-2);animation:s8-rise 560ms cubic-bezier(.2,1,.3,1) 620ms both}
.s8-tko__cta{position:relative;display:inline-flex;align-items:center;gap:var(--s8-3);height:56px;padding:0 var(--s8-6);border:0;border-radius:var(--s8-r);background:var(--s8-accent);color:#fff;font:inherit;font-size:var(--s8-fs-xl);font-weight:700;cursor:pointer;overflow:hidden;box-shadow:0 18px 44px -14px rgba(43,143,224,.85);transition:transform var(--s8-t) var(--s8-ease),background var(--s8-t) var(--s8-ease)}
.s8-tko__cta:hover{background:var(--s8-accent-hi);transform:translateY(-1px)}
.s8-tko__cta:active{background:var(--s8-accent-lo);transform:translateY(0)}
.s8-tko__cta:focus-visible{outline:none;box-shadow:var(--s8-focus),0 18px 44px -14px rgba(43,143,224,.85)}
.s8-tko__cta svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--s8-t) var(--s8-ease)}
.s8-tko__cta:hover svg{transform:translateX(3px)}
/* sheen: one pass on entry and on hover — never a loop */
.s8-tko__cta::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transform:translateX(-170%);animation:s8-sheen 1000ms cubic-bezier(.4,0,.2,1) 900ms}
.s8-tko__cta:hover::after{animation:s8-sheen 900ms cubic-bezier(.4,0,.2,1)}
@keyframes s8-sheen{to{transform:translateX(340%)}}
.s8-tko__alt{border:0;background:none;color:var(--s8-fg-3);font:inherit;font-size:var(--s8-fs-md);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.s8-tko__alt:hover{color:var(--s8-fg)}
.s8-tko__legal{position:absolute;left:var(--s8-6);right:var(--s8-6);bottom:var(--s8-4);margin:0;text-align:left;font-size:var(--s8-fs-micro);line-height:1.5;color:var(--s8-fg-4)}
.s8-tko__legal a{color:var(--s8-fg-3)}
.s8-tko__legal a:hover{color:var(--s8-fg)}
@keyframes s8-rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

/* phones: figure steps down, actions stack full-width */
@media (max-width:560px){
.s8-tko__veil{padding:var(--s8-4) var(--s8-4) 62px}
.s8-tko__top{left:var(--s8-4);top:42px}
.s8-tko__fig{font-size:56px}
.s8-tko__fig sup{margin-top:8px;font-size:27px}
.s8-tko__sub{font-size:var(--s8-fs-lg)}
.s8-tko__act{gap:var(--s8-3)}
.s8-tko__cta{width:100%;justify-content:center}
.s8-tko__legal{left:var(--s8-4);right:var(--s8-4)}
}
@media (prefers-reduced-motion:reduce){
.s8-mkt__candles i,.s8-mkt__line path.ln,.s8-mkt__tape .live i,.s8-tko__kicker,.s8-tko__fig,.s8-tko__sub,.s8-tko__meta,.s8-tko__act{animation:none}
.s8-tko__cta::after{display:none}
}


/* Prototype adaptation: takeover composition inside a large modal. */
.s8-tko-modal{position:relative;z-index:1;width:min(1000px,calc(100vw - 48px));height:min(540px,calc(100vh - 80px));border:1px solid var(--s8-line-2);border-radius:var(--s8-r-lg);box-shadow:var(--s8-pop-lg);overflow:hidden;background:var(--s8-bg)}
#simul8or-welcome .s8-scrim{z-index:0;opacity:1;pointer-events:auto;background:rgba(0,0,0,.62);backdrop-filter:none}
.s8-tko-modal .s8-tko__top{top:32px}
.s8-welcome-header{display:grid;gap:10px;justify-items:start}
.s8-welcome-tagline{margin:0;color:#fff;font-size:33px;font-weight:600;line-height:1.14;letter-spacing:-.022em;text-wrap:balance}
.s8-welcome-tagline em{color:var(--s8-gold-hi);font-style:normal}
.s8-welcome-proof{display:flex;align-items:center;gap:9px;color:var(--s8-fg-2);font-size:var(--s8-fs-sm)}
.s8-welcome-proof b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.s8-welcome-stars{color:var(--s8-gold);font-size:var(--s8-fs-sm);letter-spacing:.12em}
.s8-tko-modal .s8-mkt{background:url('/prototypes/terminal-v3/assets/welcome-market-bg.png') 65% 42%/cover no-repeat}
.s8-tko-modal .s8-mkt__grid,.s8-tko-modal .s8-mkt__candles,.s8-tko-modal .s8-mkt__line,.s8-tko-modal .s8-mkt__tape{display:none}
.s8-tko-modal .s8-tko__veil{padding-bottom:42px;background:linear-gradient(90deg,rgba(8,9,11,.96) 0%,rgba(8,9,11,.88) 31%,rgba(8,9,11,.5) 58%,rgba(8,9,11,.08) 100%),linear-gradient(180deg,rgba(8,9,11,.28),rgba(8,9,11,.06) 55%,rgba(8,9,11,.72))}
.s8-tko-modal .s8-tko__stack{gap:12px}
.s8-tko-modal .s8-tko__fig{font-size:70px}
.s8-tko-modal .s8-tko__meta s{display:none}
.s8-tko-modal .s8-tko__cta{height:52px;padding-left:20px;padding-right:20px}
.s8-tko-modal .s8-tko__alt{display:none}
.s8-tko-modal .s8-tko__legal{color:var(--s8-fg-3)}
@media(max-width:640px){.s8-tko-modal{width:100vw;height:100dvh;border:0;border-radius:0}.s8-welcome-tagline{font-size:27px}.s8-welcome-proof{align-items:flex-start;flex-direction:column;gap:4px}}