/* =====================================================================
   Casino Satellite Design System — theme.css
   Single CSS source of truth. Mirrors src/tokens.ts.

   Layout          : mobile-first, fluid clamp()/grid, container queries, no
                     fixed centre column — fills the monitor to 2560px+.
   Look            : dark neon + glassmorphism, bento.
   Motion          : ARCADE. slam / drop / spin / blink. But ONLY animates
                     transform / opacity / filter → compositor thread, cheap on
                     the GPU, does not hurt INP or CLS. No JS animation engine.
   SEO / a11y      : animation is decoration ON TOP of static semantic HTML.
                     prefers-reduced-motion snaps everything to its final,
                     assembled state — bots and screen readers see content.
   Brand           : every client value is a CSS variable. Recolour a whole
                     site by re-setting ~6 vars (see README).
   ===================================================================== */

/* ---------- Tokens (client-overridable) ------------------------------ */
:root {
  /* palette — the 6 you recolour per brand are marked CLIENT */
  --sat-bg:        #12071f;              /* CLIENT */
  --sat-bg-2:      #1c0e2e;              /* CLIENT */
  --sat-brand:     #a855f7;              /* CLIENT */
  --sat-brand-alt: #f5c542;             /* CLIENT */
  --sat-glow:      rgba(168,85,247,.55);/* CLIENT */
  --sat-text:      #f4f0ff;              /* CLIENT */

  --sat-text-dim:  #b9a9d4;
  --sat-surface:   rgba(255,255,255,.05);
  --sat-line:      rgba(255,255,255,.10);
  --sat-success:   #34d399;
  --sat-danger:    #fb7185;
  --sat-star:      var(--sat-brand-alt);

  /* type */
  --sat-font-display: "Bungee","Arial Black",system-ui,sans-serif;      /* @kind font */
  --sat-font-body:    "Sora",system-ui,-apple-system,"Segoe UI",sans-serif; /* @kind font */
  --sat-h1:    clamp(2.4rem, 5vw + 1rem, 6rem);       /* @kind other */
  --sat-h2:    clamp(1.6rem, 2.4vw + .75rem, 3rem);   /* @kind other */
  --sat-h3:    clamp(1.15rem, 1vw + .6rem, 1.7rem);   /* @kind other */
  --sat-body:  clamp(.95rem, .4vw + .85rem, 1.15rem); /* @kind other */
  --sat-small: .8rem;                                 /* @kind other */

  /* space / shape */
  --sat-xs: .375rem; --sat-sm: .625rem; --sat-md: 1rem;
  --sat-lg: 1.75rem; --sat-xl: 3rem;
  --sat-xxl: clamp(3rem,6vw,7rem); /* @kind spacing */
  --sat-r-sm: .5rem; --sat-r-md: .9rem; --sat-r-lg: 1.4rem;
  --sat-r-xl: 2rem;  --sat-r-pill: 999px;

  /* depth */
  --sat-sh-glass: 0 8px 32px rgba(0,0,0,.45);
  --sat-sh-lift:  0 16px 40px rgba(0,0,0,.5);
  --sat-blur:     16px; /* @kind other */

  /* motion — durations */
  --sat-ent-drop: 700ms;      /* @kind other */
  --sat-ent-slam: 520ms;      /* @kind other */
  --sat-ent-fly:  620ms;      /* @kind other */
  --sat-ent-bounce: 640ms;    /* @kind other */
  --sat-loop-bulb: 1.4s;      /* @kind other */
  --sat-loop-chase: 1.2s;     /* @kind other */
  --sat-loop-reel: .8s;       /* @kind other */
  --sat-loop-wheel: 7s;       /* @kind other */
  --sat-loop-coin-fall: 3s;   /* @kind other */
  --sat-loop-coin-flip: 1.6s; /* @kind other */
  --sat-loop-flicker: 5s;     /* @kind other */
  --sat-loop-float: 8s;       /* @kind other */
  --sat-loop-shimmer: 4.5s;   /* @kind other */
  --sat-loop-pulse: 2.4s;     /* @kind other */
  --sat-loop-ticker: 26s;     /* @kind other */
  --sat-stagger: 90ms;        /* @kind other */

  /* motion — easings (the arcade feel lives here) */
  --sat-spring-back:    cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --sat-spring-elastic: cubic-bezier(.5,1.6,.4,1);    /* @kind other */
  --sat-spring-slam:    cubic-bezier(.16,1,.3,1);     /* @kind other */
  --sat-spring-inback:  cubic-bezier(.36,0,.66,-.56); /* @kind other */
  --sat-ease:           cubic-bezier(.22,1,.36,1);    /* @kind other */

  --sat-bulb-n: 24; /* @kind other */ /* default bulbs per frame — set by BulbFrame */

  color-scheme: dark;
}

/* ---------- Photoreal theme modifier --------------------------------
   Apply .sat-photoreal on a root wrapper for the "realistic" template:
   green felt + real gold + red, tighter glow, harder shadows, luxe serif.
   Still 100% variable — same components, different world.                */
.sat-photoreal {
  --sat-bg:        #0a1410;
  --sat-bg-2:      #12241c;
  --sat-brand:     #d4af37;               /* metallic gold */
  --sat-brand-alt: #c0392b;               /* felt red */
  --sat-glow:      rgba(212,175,55,.35);
  --sat-text:      #f7f2e2;
  --sat-text-dim:  #b9b39a;
  --sat-surface:   rgba(255,255,255,.04);
  --sat-line:      rgba(212,175,55,.20);
  --sat-star:      #d4af37;
  --sat-font-display: "Playfair Display",Georgia,"Times New Roman",serif;
  --sat-sh-glass: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  --sat-blur: 10px;
}

/* ---------- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
button, input, a { font: inherit; color: inherit; }
a { text-decoration: none; }
:where(h1,h2,h3) { line-height: 1.05; }

body {
  font-family: var(--sat-font-body);
  font-size: var(--sat-body);
  line-height: 1.6;
  color: var(--sat-text);
  background:
    radial-gradient(120% 90% at 15% -10%, color-mix(in srgb, var(--sat-brand) 22%, transparent), transparent 55%),
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sat-brand-alt) 14%, transparent), transparent 50%),
    linear-gradient(180deg, var(--sat-bg-2), var(--sat-bg) 60%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

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

/* generic page wrapper — full-bleed, never a narrow centred column */
.sat-shell { width: 100%; padding-inline: clamp(1rem, 4vw, 5rem); }
.sat-section { padding-block: var(--sat-xxl); }
.sat-eyebrow {
  font-family: var(--sat-font-display); font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sat-brand);
}
.sat-h1 { font-family: var(--sat-font-display); font-size: var(--sat-h1); line-height: .95; }
.sat-h2 { font-family: var(--sat-font-display); font-size: var(--sat-h2); }
.sat-lead { color: var(--sat-text-dim); font-size: var(--sat-h3); max-width: 46ch; }

/* =====================================================================
   GLASS
   ===================================================================== */
.sat-glass {
  position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sat-brand) 8%, var(--sat-surface)), var(--sat-surface));
  border: 1px solid var(--sat-line);
  border-radius: var(--sat-r-lg);
  box-shadow: var(--sat-sh-glass);
  -webkit-backdrop-filter: blur(var(--sat-blur));
  backdrop-filter: blur(var(--sat-blur));
  overflow: hidden;
}
.sat-glass--pad { padding: clamp(1.1rem, 2vw, 2rem); }
.sat-glass--glow { box-shadow: var(--sat-sh-glass), 0 0 34px -6px var(--sat-glow); }
.sat-glass--hover { transition: transform var(--sat-base,300ms) var(--sat-ease), box-shadow 300ms var(--sat-ease); }
.sat-glass--hover:hover { transform: translateY(-4px); box-shadow: var(--sat-sh-lift), 0 0 40px -6px var(--sat-glow); }

/* shine bar reused by cards + buttons (transform-only sweep) */
.sat-shine {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  border-radius: inherit;
}
.sat-shine::after {
  content: ""; position: absolute; top: -40%; left: 0; width: 40%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translate3d(-160%,0,0) rotate(8deg);
  animation: sat-shimmer var(--sat-loop-shimmer) var(--sat-ease) infinite;
}

/* =====================================================================
   HERO — LayeredHero
   ===================================================================== */
.sat-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(30rem, 82vh, 54rem);
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
/* absolutely-placed decorative layer; consumer supplies left/top/right/etc. */
.sat-hero-layer {
  position: absolute;
  pointer-events: none; /* ENTPL 07.10.2026: декор не перехватывает клики по CTA */
  z-index: var(--depth, 1);
  will-change: transform, opacity;
  transform-origin: center;
}
.sat-hero-content {
  position: relative;
  z-index: 50;
  display: grid;
  gap: var(--sat-md);
  justify-items: start;
  max-width: min(46rem, 92vw);
}
.sat-hero-content--center { justify-items: center; text-align: center; margin-inline: auto; }

/* entrance one-shots. `both` fill = hidden during delay (no flash), holds final */
.sat-ent-drop     { animation: sat-drop      var(--sat-ent-drop)   var(--sat-spring-slam)    both; }
.sat-ent-slam     { animation: sat-slam      var(--sat-ent-slam)   var(--sat-spring-slam)    both; }
.sat-ent-fly-left { animation: sat-fly-left  var(--sat-ent-fly)    var(--sat-spring-back)    both; }
.sat-ent-fly-right{ animation: sat-fly-right var(--sat-ent-fly)    var(--sat-spring-back)    both; }
.sat-ent-bounce   { animation: sat-bounce-in var(--sat-ent-bounce) var(--sat-spring-elastic) both; }

/* =====================================================================
   BULB FRAME (neon sign border with chasing lights)
   ===================================================================== */
.sat-bulbframe {
  position: relative;
  padding: clamp(1rem, 2.4vw, 2.2rem);
  border-radius: var(--sat-r-xl);
  border: 3px solid color-mix(in srgb, var(--sat-brand) 60%, #fff 5%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sat-bg-2) 70%, transparent), color-mix(in srgb, var(--sat-bg) 85%, transparent));
  box-shadow:
    0 0 26px -4px var(--sat-glow),
    inset 0 0 26px -8px var(--sat-glow);
}
.sat-bulbframe__edge {
  position: absolute; display: flex; z-index: 2;
}
.sat-bulbframe__edge--top    { top: -6px;    left: 14px; right: 14px; justify-content: space-between; }
.sat-bulbframe__edge--bottom { bottom: -6px; left: 14px; right: 14px; justify-content: space-between; }
.sat-bulbframe__edge--left   { left: -6px;   top: 14px;  bottom: 14px; flex-direction: column; justify-content: space-between; }
.sat-bulbframe__edge--right  { right: -6px;  top: 14px;  bottom: 14px; flex-direction: column; justify-content: space-between; }
.sat-bulb {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--sat-brand-alt) 55%, color-mix(in srgb, var(--sat-brand-alt) 40%, #000) 100%);
  box-shadow: 0 0 8px 1px var(--sat-brand-alt);
  animation: sat-chase var(--sat-loop-chase) linear infinite;
  animation-delay: calc(var(--i, 0) * var(--sat-loop-chase) / var(--sat-bulb-n));
  will-change: opacity;
}

/* =====================================================================
   SLOT REELS
   ===================================================================== */
.sat-slot {
  display: inline-flex; gap: 6px; padding: 12px;
  border-radius: var(--sat-r-md);
  background: linear-gradient(180deg,#2a1740,#160a26);
  border: 2px solid color-mix(in srgb, var(--sat-brand-alt) 60%, #000);
  box-shadow: 0 0 22px -6px var(--sat-glow), inset 0 2px 6px rgba(0,0,0,.6);
}
.sat-reel {
  position: relative; width: clamp(44px,6vw,68px); height: clamp(132px,18vw,204px);
  overflow: hidden; border-radius: 8px;
  background: linear-gradient(180deg,#0d0617,#1a0f2b);
  box-shadow: inset 0 8px 12px -6px #000, inset 0 -8px 12px -6px #000;
}
.sat-reel__strip {
  display: flex; flex-direction: column;
  animation: sat-reel-spin var(--reel-dur, var(--sat-loop-reel)) linear infinite;
  will-change: transform;
}
.sat-reel[data-spinning="false"] .sat-reel__strip { animation-play-state: paused; }
.sat-reel__sym {
  height: clamp(44px,6vw,68px); display: grid; place-items: center;
  font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1;
}
.sat-reel::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 26% 74%, rgba(0,0,0,.55));
}
.sat-reel::after { /* payline */
  content: ""; position: absolute; z-index: 3; left: 6%; right: 6%; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: var(--sat-brand-alt); box-shadow: 0 0 8px var(--sat-brand-alt); opacity: .8;
}

/* =====================================================================
   ROULETTE
   ===================================================================== */
.sat-roulette {
  position: relative; aspect-ratio: 1; width: clamp(140px,22vw,260px);
  border-radius: 50%;
  padding: 8px;
  background: conic-gradient(from 0deg,
     #b0242e 0 30deg,#111 30deg 60deg,#b0242e 60deg 90deg,#111 90deg 120deg,
     #b0242e 120deg 150deg,#111 150deg 180deg,#b0242e 180deg 210deg,#111 210deg 240deg,
     #b0242e 240deg 270deg,#111 270deg 300deg,#b0242e 300deg 330deg,#1f7a44 330deg 360deg);
  box-shadow: 0 0 30px -6px var(--sat-glow), inset 0 0 0 6px color-mix(in srgb,var(--sat-brand-alt) 70%,#000), 0 10px 30px rgba(0,0,0,.6);
  animation: sat-wheel-spin var(--sat-loop-wheel) linear infinite;
  will-change: transform;
}
.sat-roulette__hub {
  position: absolute; inset: 30%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff2, transparent 40%),
              linear-gradient(180deg, color-mix(in srgb,var(--sat-brand-alt) 85%,#000), #3a2a06);
  box-shadow: inset 0 2px 4px #fff6, 0 4px 10px #000a;
}
.sat-roulette__ball {
  position: absolute; top: 9%; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cbd0d8);
  box-shadow: 0 0 6px #fff;
}

/* =====================================================================
   COINS
   ===================================================================== */
.sat-coins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sat-coin {
  position: absolute; top: 0; width: var(--coin-size,34px); height: var(--coin-size,34px);
  perspective: 240px;
  animation: sat-coin-fall var(--coin-dur, var(--sat-loop-coin-fall)) linear infinite backwards;
  animation-delay: var(--coin-delay, 0ms);
  will-change: transform, opacity;
}
.sat-coin__face {
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #5a3d00;
  font-size: calc(var(--coin-size,34px) * .5);
  background:
    radial-gradient(circle at 35% 30%, #fff6 0 12%, transparent 40%),
    radial-gradient(circle at 50% 50%, var(--sat-brand-alt), #a9791a 72%, #6b4a08 100%);
  box-shadow: 0 0 10px -1px var(--sat-brand-alt), inset 0 0 0 2px #fff5, inset 0 -3px 6px #0006;
  transform-style: preserve-3d;
  animation: sat-coin-flip var(--coin-flip, var(--sat-loop-coin-flip)) linear infinite;
  will-change: transform;
}

/* =====================================================================
   NEON SIGN
   ===================================================================== */
.sat-neon {
  font-family: var(--sat-font-display);
  color: var(--sat-text);
  letter-spacing: .02em;
  text-shadow:
    0 0 4px #fff,
    0 0 11px var(--sat-brand),
    0 0 22px var(--sat-brand),
    0 0 42px var(--sat-glow);
  animation: sat-neon-flicker var(--sat-loop-flicker) steps(1,end) infinite;
  will-change: filter, opacity;
}
.sat-neon--gold {
  text-shadow: 0 0 4px #fff, 0 0 11px var(--sat-brand-alt), 0 0 24px var(--sat-brand-alt);
}

/* =====================================================================
   ARCADE BUTTON (CTA)
   ===================================================================== */
.sat-btn {
  position: relative; display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sat-font-display); font-size: clamp(.85rem,1.4vw,1.05rem);
  letter-spacing: .04em; text-transform: uppercase;
  padding: .85em 1.6em; border: 0; border-radius: var(--sat-r-pill); cursor: pointer;
  color: #1a0530;
  background: linear-gradient(120deg, var(--sat-brand-alt), color-mix(in srgb,var(--sat-brand) 55%, var(--sat-brand-alt)));
  box-shadow: 0 6px 18px -4px var(--sat-glow), inset 0 1px 0 #fff8;
  animation: sat-cta-pulse var(--sat-loop-pulse) ease-in-out infinite;
  transition: transform 120ms var(--sat-spring-back), filter 200ms ease;
  will-change: transform;
  isolation: isolate;
}
.sat-btn::after { /* pulsing glow ring */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 0 2px var(--sat-glow);
  animation: sat-cta-glow var(--sat-loop-pulse) ease-in-out infinite;
}
.sat-btn:hover { filter: brightness(1.08); }
.sat-btn:active { transform: scale(.94); }
.sat-btn--ghost {
  color: var(--sat-text); background: var(--sat-surface);
  border: 1px solid var(--sat-brand); box-shadow: none; animation: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sat-btn--ghost::after { content: none; }
.sat-btn--lg { padding: 1.05em 2.2em; font-size: clamp(1rem,1.8vw,1.25rem); }

/* =====================================================================
   RATING STARS
   ===================================================================== */
.sat-stars { display: inline-flex; align-items: center; gap: .5rem; }
.sat-stars__row {
  --v: 0; position: relative; display: inline-block; line-height: 1;
  font-size: 1.15rem; letter-spacing: .12em;
}
.sat-stars__bg { color: color-mix(in srgb, var(--sat-star) 26%, transparent); }
.sat-stars__fill {
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
  width: calc(var(--v) / 5 * 100%); color: var(--sat-star);
  text-shadow: 0 0 8px color-mix(in srgb,var(--sat-star) 60%, transparent);
}
.sat-stars__meta { color: var(--sat-text-dim); font-size: var(--sat-small); }

/* =====================================================================
   COUNTDOWN
   ===================================================================== */
.sat-countdown { display: inline-flex; gap: clamp(.4rem,1.2vw,.9rem); align-items: flex-end; }
.sat-count-unit { display: grid; justify-items: center; gap: .35rem; perspective: 400px; }
.sat-count-digits {
  display: flex; gap: 3px;
  font-family: var(--sat-font-display); font-size: clamp(1.4rem,4vw,2.6rem);
}
.sat-count-digit {
  min-width: 1.1em; padding: .18em .28em; border-radius: 8px; text-align: center;
  background: linear-gradient(180deg,#241338,#120a20);
  border: 1px solid var(--sat-line); color: var(--sat-brand-alt);
  box-shadow: inset 0 -6px 10px -6px #000, 0 0 14px -6px var(--sat-glow);
  transform-origin: center top; backface-visibility: hidden;
  animation: sat-flip 380ms var(--sat-spring-back) both;
}
.sat-count-label { font-size: var(--sat-small); letter-spacing: .12em; text-transform: uppercase; color: var(--sat-text-dim); }
.sat-count-sep { font-family: var(--sat-font-display); font-size: clamp(1.2rem,3vw,2rem); color: var(--sat-brand); align-self: center; padding-bottom: 1.4rem; }

/* =====================================================================
   LIVE TICKER
   ===================================================================== */
.sat-ticker {
  overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.sat-ticker__track {
  display: inline-flex; gap: 1.5rem; white-space: nowrap;
  animation: sat-ticker-scroll var(--sat-loop-ticker) linear infinite;
  will-change: transform;
}
.sat-ticker:hover .sat-ticker__track { animation-play-state: paused; }
.sat-ticker__item {
  display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem;
  border-radius: var(--sat-r-pill); background: var(--sat-surface);
  border: 1px solid var(--sat-line); font-size: .92rem;
}
.sat-ticker__nick { color: var(--sat-text-dim); }
.sat-ticker__amt { color: var(--sat-success); font-weight: 700; }
.sat-ticker__game { color: var(--sat-text-dim); font-size: var(--sat-small); }

/* =====================================================================
   STAT COUNTER
   ===================================================================== */
.sat-stat { display: grid; gap: .2rem; justify-items: start; }
.sat-stat__num { font-family: var(--sat-font-display); font-size: clamp(1.8rem,4.5vw,3.2rem); color: var(--sat-brand-alt); line-height: 1; }
.sat-stat__label { color: var(--sat-text-dim); font-size: var(--sat-small); letter-spacing: .1em; text-transform: uppercase; }

/* =====================================================================
   BENTO
   ===================================================================== */
.sat-bento {
  display: grid; gap: clamp(.8rem, 1.6vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr));
  grid-auto-flow: dense;
}
.sat-bento-item--wide { grid-column: span 2; }
.sat-bento-item--tall { grid-row: span 2; }
.sat-bento-item--big  { grid-column: span 2; grid-row: span 2; }
@media (max-width: 40rem) {
  .sat-bento-item--wide, .sat-bento-item--big { grid-column: auto; }
  .sat-bento-item--tall, .sat-bento-item--big { grid-row: auto; }
}

/* =====================================================================
   TRUST BADGE / BAR
   ===================================================================== */
.sat-trustbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.sat-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem;
  border-radius: var(--sat-r-pill); background: var(--sat-surface);
  border: 1px solid var(--sat-line); font-size: .85rem; color: var(--sat-text-dim);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sat-badge__icon { font-size: 1.1rem; line-height: 1; }
.sat-badge--age {
  color: var(--sat-text); font-family: var(--sat-font-display);
  border-color: var(--sat-danger); box-shadow: 0 0 14px -6px var(--sat-danger);
}

/* =====================================================================
   FAQ (native <details> — SEO-friendly, JS-free, animatable)
   ===================================================================== */
.sat-faq { display: grid; gap: .7rem; }
.sat-faq__item { padding: 0 clamp(1rem,2vw,1.4rem); }
.sat-faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-family: var(--sat-font-display); font-size: clamp(1rem,1.4vw,1.2rem);
}
.sat-faq__q::-webkit-details-marker { display: none; }
.sat-faq__q::after {
  content: "+"; color: var(--sat-brand); font-size: 1.5rem; line-height: 1;
  transition: transform 240ms var(--sat-spring-back);
}
.sat-faq__item[open] .sat-faq__q::after { transform: rotate(45deg); }
.sat-faq__a {
  overflow: hidden; color: var(--sat-text-dim);
  display: grid; grid-template-rows: 1fr; padding-bottom: 1.1rem;
  animation: sat-faq-open 300ms var(--sat-ease) both;
}

/* =====================================================================
   NEON ORBS (background decoration)
   ===================================================================== */
.sat-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sat-orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .5;
  animation: sat-float var(--orb-dur, var(--sat-loop-float)) ease-in-out infinite;
  animation-delay: var(--orb-delay, 0ms);
  will-change: transform;
}

/* =====================================================================
   KEYFRAMES  (transform / opacity / filter only)
   ===================================================================== */

/* --- entrance --- */
@keyframes sat-drop {
  0%   { opacity: 0; transform: translate3d(0,-130%,0) scale(.9); }
  58%  { opacity: 1; transform: translate3d(0,6%,0)    scale(1.03); }
  76%  {             transform: translate3d(0,-3%,0)   scale(.99); }
  90%  {             transform: translate3d(0,1.5%,0); }
  100% { opacity: 1; transform: translate3d(0,0,0)     scale(1); }
}
@keyframes sat-slam {
  0%   { opacity: 0; transform: scale(1.6) translate3d(0,-8%,0); filter: blur(5px); }
  68%  { opacity: 1; transform: scale(.93); filter: blur(0); }
  84%  {             transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sat-fly-left {
  0%   { opacity: 0; transform: translate3d(-120%,0,0) rotate(-9deg); }
  70%  { opacity: 1; transform: translate3d(5%,0,0)    rotate(2deg); }
  100% { opacity: 1; transform: translate3d(0,0,0)     rotate(0); }
}
@keyframes sat-fly-right {
  0%   { opacity: 0; transform: translate3d(120%,0,0) rotate(9deg); }
  70%  { opacity: 1; transform: translate3d(-5%,0,0)  rotate(-2deg); }
  100% { opacity: 1; transform: translate3d(0,0,0)    rotate(0); }
}
@keyframes sat-bounce-in {
  0%   { opacity: 0; transform: scale(.3); }
  55%  { opacity: 1; transform: scale(1.08); }
  72%  {             transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- loops --- */
@keyframes sat-bulb-blink { 0%,100% { opacity: .4; filter: brightness(.7); } 50% { opacity: 1; filter: brightness(1.7); } }
@keyframes sat-chase      { 0%,100% { opacity: .25; } 8% { opacity: 1; } 24% { opacity: .25; } }
@keyframes sat-reel-spin  { to { transform: translate3d(0,-50%,0); } }
@keyframes sat-wheel-spin { to { transform: rotate(360deg); } }
@keyframes sat-coin-fall {
  0%   { opacity: 0; transform: translate3d(0,-160%,0); }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0,720%,0); }
}
@keyframes sat-coin-flip  { to { transform: rotateY(360deg); } }
@keyframes sat-neon-flicker {
  0%,17%,19%,21%,55%,57%,100% { opacity: 1; filter: brightness(1); }
  18%,20%                     { opacity: .55; filter: brightness(.6); }
  56%                         { opacity: .7;  filter: brightness(.75); }
}
@keyframes sat-float {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(0,-7%,0) scale(1.06); }
}
@keyframes sat-shimmer  { to { transform: translate3d(360%,0,0) rotate(8deg); } }
@keyframes sat-cta-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes sat-cta-glow  { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 0; transform: scale(1.35); } }
@keyframes sat-ticker-scroll { to { transform: translate3d(-50%,0,0); } }
@keyframes sat-flip { 0% { opacity: 0; transform: rotateX(-90deg); } 100% { opacity: 1; transform: rotateX(0); } }
@keyframes sat-faq-open { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }

/* =====================================================================
   REDUCED MOTION — snap to the assembled final state, no movement.
   Also what a crawler / screen reader effectively sees: static content.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* neutralise the sweep bars so they don't sit mid-frame */
  .sat-shine::after { display: none !important; }
  .sat-btn::after   { display: none !important; }
}