/* Igaming Recon — landing page styles */

:root{
  --signal:#00D4A0;        /* accent for text/details; darkened in light theme for contrast */
  --signal-fill:#00D4A0;   /* accent for solid fills (button, mark) — same in both themes */

  --bg:#070D1A;
  --bg-2:#0A1322;          /* footer / raised surfaces */
  --tx:#F4F6F8;
  --tx-muted:#8A96A8;
  --line:rgba(255,255,255,.08);
  --overlay-bg:rgba(7,13,26,.72);

  --net-node:rgba(210,222,235,.75);
  --net-link:rgba(160,180,205,.16);
  --net-accent:#00D4A0;

  --ease:cubic-bezier(.22,.9,.24,1);
}
[data-theme="light"]{
  --signal:#007A5C; /* darker teal: 4.5:1+ on the light bg (WCAG AA for accent text) */
  --bg:#F2F3F1;
  --bg-2:#E9EBE6;
  --tx:#0B1220;
  --tx-muted:#59616E; /* 4.5:1+ body-copy contrast on light bg */
  --line:rgba(11,18,32,.09);
  --overlay-bg:rgba(242,243,241,.78);

  /* darker + stronger canvas colors: light bg washes out faint dots/lines */
  --net-node:rgba(22,32,50,.92);
  --net-link:rgba(22,32,50,.30);
  --net-accent:#00684F;
}

/* per-section background tint (body[data-section] set by JS) */
body[data-section="networks"],body[data-section="intelligence"]{--bg:#0A1322}
body[data-section="tracks"],body[data-section="contact"]{--bg:#081020}
[data-theme="light"] body[data-section="networks"],
[data-theme="light"] body[data-section="intelligence"]{--bg:#EDEFEA}
[data-theme="light"] body[data-section="tracks"],
[data-theme="light"] body[data-section="contact"]{--bg:#F5F4F0}

*{box-sizing:border-box;margin:0}
/* anchor scrolling animated in JS (rAF) — native smooth is unreliable across embeds */
html,body{height:auto}
body{
  background:var(--bg);
  color:var(--tx);
  font-family:"Inter Tight",Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .8s var(--ease),color .4s var(--ease);
  overflow-x:clip; /* NOT hidden: hidden makes body a scroll container and kills smooth window scroll */
}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

#net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---------- lockup (official logo, live type) ---------- */
.lockup{display:inline-flex;flex-direction:column;line-height:1}
.lockup__kick{font-weight:600;letter-spacing:.66em;text-transform:uppercase;color:var(--tx-muted);font-size:.27em}
.lockup__word{display:flex;align-items:center;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;color:var(--tx);margin-top:.07em;font-size:1em}
.lockup__o{width:.74em;height:.74em;margin:0 .015em;flex:none;color:var(--signal-fill)} /* brand teal in BOTH themes (logo, WCAG-exempt) */
.lockup--nav{font-size:26px}
.lockup--nav .lockup__kick{font-size:.3em}
.lockup--hero{font-size:clamp(64px,11vw,150px)}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 34px;
}
.topbar__brand{opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s}
body.scrolled .topbar__brand{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.topbar__actions{display:flex;align-items:center;gap:22px}
.theme-toggle{width:22px;height:22px;opacity:.85;transition:transform .45s var(--ease)}
.theme-toggle:hover{transform:rotate(180deg)}
.theme-toggle svg{width:100%;height:100%;display:block}
.menu-btn{display:flex;align-items:center;gap:10px}
.menu-btn__label{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.menu-btn__bars{display:flex;flex-direction:column;gap:5px;width:26px}
.menu-btn__bars i{height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),width .3s var(--ease)}
.menu-btn:hover .menu-btn__bars i:last-child{width:70%}
.menu-btn__bars i:last-child{align-self:flex-end;width:100%}
.menu-btn__x{font-size:16px;line-height:1}

/* ---------- overlay menu ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;
  background:var(--overlay-bg);
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:22px 34px 26px;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s linear .45s;
}
.overlay.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.overlay__top{display:flex;align-items:center;justify-content:space-between}
.overlay__list{list-style:none;padding:0;display:flex;flex-direction:column;gap:1.2vh}
.overlay__list li{
  display:flex;align-items:baseline;gap:26px;
  opacity:0;transform:translateY(26px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.overlay.open .overlay__list li{opacity:1;transform:none}
.overlay.open .overlay__list li:nth-child(1){transition-delay:.06s}
.overlay.open .overlay__list li:nth-child(2){transition-delay:.11s}
.overlay.open .overlay__list li:nth-child(3){transition-delay:.16s}
.overlay.open .overlay__list li:nth-child(4){transition-delay:.21s}
.overlay.open .overlay__list li:nth-child(5){transition-delay:.26s}
.overlay__num{font-size:12px;font-weight:600;color:var(--signal);letter-spacing:.1em}
.overlay__list a{
  font-size:clamp(40px,7.4vh,72px);font-weight:800;letter-spacing:-.02em;
  transition:color .25s var(--ease),transform .3s var(--ease);display:inline-block;
}
.overlay__list a:hover{color:var(--signal);transform:translateX(10px)}
.overlay__bottom{display:flex;align-items:center;justify-content:space-between}
.overlay__pill{font-size:11px;font-weight:600;letter-spacing:.08em;border:1px solid var(--line);border-radius:999px;padding:7px 13px;color:var(--tx-muted)}

/* ---------- horizontal scroll story ----------
   five full-viewport panels in a horizontal track inside a sticky viewport;
   vertical scroll scrubs the track's translateX (JS) — the whole panel,
   text included, glides right→left on scroll-down and reverses on scroll-up */
main{position:relative;z-index:1}
.hscroll{height:560vh} /* 5 panels: 100vh on screen + 460vh of scrub distance */
.hscroll__viewport{position:sticky;top:0;height:100vh;overflow:hidden}
.hscroll__track{display:flex;height:100vh;will-change:transform}
/* NO overflow:hidden here — the eased text must be free to extend past its
   panel's edge while traveling; only the viewport above clips */
.panel{position:relative;flex:0 0 100vw;width:100vw;height:100vh}

/* ---------- hero ---------- */
.hero{display:flex;align-items:flex-end;padding:0 34px 9vh}
.hero__block{will-change:transform,filter,opacity;backface-visibility:hidden}
.hero__block>*{opacity:0;transform:translateX(64px);animation:rise .9s var(--ease) forwards}
.hero__block .lockup--hero{animation-delay:.15s}
.hero__tagline{animation-delay:.4s}
.hero__strip{animation-delay:.55s}
.hero__scroll{animation-delay:.85s}
@keyframes rise{to{opacity:1;transform:none}}
.hero__tagline{font-size:clamp(20px,2.6vw,30px);font-weight:800;margin-top:26px}
.tick{color:var(--signal)}
.hero__strip{font-size:12.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--tx-muted);margin-top:14px}
.hero__scroll{font-size:12.5px;color:var(--tx-muted);margin-top:26px}
.hero__scroll span{display:inline-block;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}

/* ---------- feature panels ----------
   text block sits BOTTOM-LEFT; the panel itself is carried by
   the horizontal track, plus a light per-element parallax from JS */
.feature{display:flex;align-items:flex-end;padding:10vh 34px 12vh}
.feature__inner{max-width:720px;margin:0;width:100%;will-change:transform,filter,opacity;backface-visibility:hidden}
.kicker{font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--signal);margin-bottom:22px}
.kicker--center{text-align:center}
.feature__title{
  font-size:clamp(44px,6.4vw,92px);font-weight:800;letter-spacing:-.025em;line-height:1.02;
  margin-bottom:34px;text-transform:none;
}
/* feature headings are scroll-scrubbed as whole blocks (JS-driven);
   the mask machinery stays inert for them */
.mask{display:inline-block;vertical-align:bottom}
.feature .mask>span{display:inline-block}
.feature__body{max-width:560px;margin-left:0}
.feature__body p{font-size:16.5px;line-height:1.65;color:var(--tx-muted);margin-bottom:18px}
.feature__body p:first-child{color:var(--tx)}
.feature__link{
  display:inline-block;margin-top:10px;font-size:14px;font-weight:600;letter-spacing:.04em;
  border-bottom:1px solid var(--signal);padding-bottom:4px;transition:color .25s;
}
.feature__link:hover{color:var(--signal)}
.feature__link span{display:inline-block;transition:transform .3s var(--ease)}
.feature__link:hover span{transform:translateX(5px)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* reveal helper: feature text is JS-scrubbed (no CSS transition — the scrub
   writes transform/opacity every frame); tracks + CTA keep the rise-in */
.feature .reveal{transition:none}
.tracks .reveal,.cta .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.in .reveal{opacity:1;transform:none}
.in .reveal:nth-child(2){transition-delay:.08s}
.in .reveal:nth-child(3){transition-delay:.16s}

/* ---------- marquee ---------- */
/* contained band: hairline top/bottom, big blurred dots drifting behind */
.tracks{
  position:relative;isolation:isolate; /* keeps the z-index:-1 blobs inside this section */
  padding:16vh 0;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.tracks::before,.tracks::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  filter:blur(70px);
}
.tracks::before{
  width:360px;height:360px;left:-90px;top:10%;
  background:var(--signal-fill);opacity:.14;
  animation:blob-a 19s ease-in-out infinite alternate;
}
.tracks::after{
  width:440px;height:440px;right:-130px;bottom:-10%;
  background:var(--tx-muted);opacity:.12;
  animation:blob-b 23s ease-in-out infinite alternate;
}
@keyframes blob-a{to{transform:translate(22vw,60px) scale(1.15)}}
@keyframes blob-b{to{transform:translate(-18vw,-70px) scale(0.9)}}
.tracks__title{font-size:clamp(30px,4vw,54px);font-weight:800;letter-spacing:-.02em;text-align:center;margin-bottom:9vh;padding:0 34px}
.marquee{display:flex;flex-direction:column;gap:34px}
.marquee__row{display:flex;width:max-content}
.marquee__group{display:flex;align-items:center;flex:none;padding-right:0}
.marquee__row--left .marquee__group{animation:scroll-l 36s linear infinite}
.marquee__row--right .marquee__group{animation:scroll-r 42s linear infinite}
/* JS marquee (mouse-reactive) drives the ROW transform instead */
.js-marquee .marquee__group{animation:none!important}
@keyframes scroll-l{to{transform:translateX(-100%)}}
@keyframes scroll-r{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.marquee span{
  font-size:clamp(26px,3.4vw,44px);font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase;white-space:nowrap;padding:0 28px;color:var(--tx);
}
.marquee i{font-style:normal;color:var(--signal);font-size:clamp(22px,2.6vw,34px);font-weight:600}
.marquee__row--right span{color:var(--tx-muted)}

/* ---------- CTA + footer ---------- */
.cta{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14vh 34px;gap:34px}
.cta__title{font-size:clamp(38px,5.6vw,80px);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.cta__btn{
  font-size:15px;font-weight:600;letter-spacing:.06em;
  background:var(--signal-fill);color:#06251D;border-radius:999px;padding:18px 36px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cta__btn:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,212,160,.35)}
/* waitlist form */
.wl{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:stretch}
.wl__input{
  font:inherit;font-size:15px;color:var(--tx);
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:16px 24px;min-width:280px;outline:none;
  transition:border-color .25s var(--ease);
}
.wl__input::placeholder{color:var(--tx-muted)}
.wl__input:focus{border-color:var(--signal)}
.wl__btn{border:0}
.wl__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl__msg{font-size:13.5px;color:var(--tx-muted);min-height:1.4em;margin-top:-10px}
.wl__msg--ok{color:var(--signal)}
.wl__msg--err{color:#D9705B}
.wl__privacy{font-size:12px;color:var(--tx-muted);margin-top:-18px}
@media (max-width:560px){.wl{flex-direction:column;align-items:center}.wl__input{width:100%;min-width:0}}
.footer{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:26px 34px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--tx-muted);
  background:var(--bg-2);
  transition:background-color .8s var(--ease);
}
.footer__mark{width:18px;height:18px;color:var(--signal)}
.footer__mark svg{width:100%;height:100%;display:block}
.footer a:hover{color:var(--signal)}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .topbar{padding:16px 20px}
  .hero{padding:0 20px 12vh}
  .feature{padding:10vh 20px}
  .feature__body{margin-left:0}
  .overlay{padding:16px 20px 20px}
  .footer{flex-direction:column;text-align:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .hero__block>*,.reveal,.mask>span{opacity:1!important;transform:none!important}
  /* infinite alternate animations don't stop at .001s — they strobe; kill them */
  .marquee__group,.tracks::before,.tracks::after,.hero__scroll span{animation:none!important}
  /* no scroll-jack: panels stack vertically as plain sections */
  .hscroll{height:auto}
  .hscroll__viewport{position:static;height:auto;overflow:visible}
  .hscroll__track{display:block;height:auto;transform:none!important}
  .panel{width:auto;height:auto;min-height:100vh;flex:none}
}