/* ══════════════════════════════════════════════════════════════════
   VELENTRA VMS — GATE SCREEN · BEIGE + iOS GLASSMORPHISM
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; width: 100%; overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased;
  background: #f2ece0;
  color: #2c2418;
}

:root {
  /* Beige base tones */
  --bg:      #f2ece0;
  --bg2:     #ebe3d4;
  --bg3:     #e2d8c5;

  /* iOS glass — light frosted */
  --glass:          rgba(255,255,255,0.52);
  --glass-hover:    rgba(255,255,255,0.68);
  --glass-dark:     rgba(255,253,248,0.42);
  --glass-border:   rgba(255,255,255,0.72);
  --glass-border2:  rgba(200,185,160,0.30);
  --glass-shadow:   0 8px 32px rgba(140,110,70,0.10), 0 2px 8px rgba(140,110,70,0.06), inset 0 1px 0 rgba(255,255,255,0.85);
  --glass-shadow-lg:0 20px 60px rgba(140,110,70,0.14), 0 4px 16px rgba(140,110,70,0.08), inset 0 1px 0 rgba(255,255,255,0.90);

  /* Accent colours — muted, solid, warm */
  --slate:   #4e6580;
  --sage:    #5a7260;
  --rust:    #8a5248;
  --ochre:   #7d6535;
  --clay:    #6e4f3a;
  --ink:     #2c2418;

  /* Text */
  --t-hi:  #2c2418;
  --t-mid: #6b5c48;
  --t-lo:  #a08e78;

  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.55,0,1,.45);
}

/* ══════════════════════════════════════════════════════════════════
   BACKGROUND — warm beige parchment, always light
   ══════════════════════════════════════════════════════════════════ */
.gs-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}

.gs-bg-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 75% at 8%  12%, rgba(255,248,230,1.00) 0%, transparent 52%),
    radial-gradient(ellipse 75% 65% at 92% 82%, rgba(228,210,182,0.95) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 50% 46%, rgba(245,235,215,0.70) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 20% 70%, rgba(218,198,168,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 78% 22%, rgba(232,218,195,0.50) 0%, transparent 55%),
    linear-gradient(155deg, #faf4e6 0%, #f4ecdA 25%, #ede3cc 55%, #e6dbc4 80%, #dfd4bb 100%);
  animation: bg-breathe 18s ease-in-out infinite alternate;
}
@keyframes bg-breathe {
  0%   { opacity:1;    filter:brightness(1); }
  33%  { opacity:0.96; filter:brightness(1.02); }
  66%  { opacity:0.98; filter:brightness(0.99); }
  100% { opacity:1;    filter:brightness(1.01); }
}

/* Fine linen dot grid */
.gs-bg-grid {
  position: absolute; inset: -40px;
  background-image: radial-gradient(circle, rgba(140,110,70,0.11) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: grid-drift 85s linear infinite;
}
@keyframes grid-drift {
  from { transform: translate(0,0); }
  to   { transform: translate(28px,28px); }
}

/* Soft warm scan wave */
.gs-bg-wave {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(255,245,220,0.45) 45%, transparent 100%);
  background-size: 100% 300%;
  animation: wave-scan 16s ease-in-out infinite;
}
@keyframes wave-scan {
  0%   { background-position: 0 -100%; }
  50%  { background-position: 0 200%;  }
  100% { background-position: 0 -100%; }
}

/* Diagonal aurora sweep — always running */
.gs-bg-aurora {
  position:absolute; inset:-50%; z-index:0;
  width:200%; height:200%;
  background:
    linear-gradient(118deg,
      transparent 20%,
      rgba(230,210,175,0.18) 32%,
      rgba(245,228,198,0.28) 38%,
      rgba(255,245,220,0.20) 44%,
      transparent 56%),
    linear-gradient(245deg,
      transparent 25%,
      rgba(210,188,152,0.14) 38%,
      rgba(228,208,175,0.22) 45%,
      transparent 58%);
  animation: aurora-drift 12s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform:translate(-8%,-6%) rotate(-2deg) scale(1.05); }
  33%  { transform:translate(4%, 3%) rotate(1deg)  scale(1.02); }
  66%  { transform:translate(-4%, 5%) rotate(-1deg) scale(1.04); }
  100% { transform:translate(6%,-4%) rotate(2deg)  scale(1.03); }
}

/* Full-page slow diagonal light beam */
.gs-bg-beam {
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.gs-bg-beam::before {
  content:''; position:absolute;
  top:-100%; left:-60%; width:35%; height:300%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,248,230,0.22),
    rgba(255,252,238,0.35),
    rgba(255,248,230,0.22),
    transparent);
  transform: rotate(12deg);
  animation: beam-sweep 18s ease-in-out infinite;
}
.gs-bg-beam::after {
  content:''; position:absolute;
  top:-100%; left:-60%; width:20%; height:300%;
  background: linear-gradient(90deg,
    transparent,
    rgba(240,225,195,0.16),
    rgba(250,238,215,0.25),
    rgba(240,225,195,0.16),
    transparent);
  transform: rotate(12deg);
  animation: beam-sweep 18s ease-in-out infinite;
  animation-delay:-9s;
}
@keyframes beam-sweep {
  0%   { left:-60%; }
  100% { left:160%; }
}

/* Warm colour-bleed orbs */
.gs-bg-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.gs-bg-orb:nth-child(1) {
  width:55vw; height:55vw; top:-20%; left:-15%;
  background: radial-gradient(circle, rgba(220,195,155,0.55) 0%, rgba(210,185,140,0.30) 40%, transparent 70%);
  filter: blur(70px);
  animation: orb-f1 18s ease-in-out infinite alternate;
}
.gs-bg-orb:nth-child(2) {
  width:48vw; height:48vw; bottom:-18%; right:-12%;
  background: radial-gradient(circle, rgba(195,168,125,0.50) 0%, rgba(180,155,115,0.28) 40%, transparent 70%);
  filter: blur(65px);
  animation: orb-f2 22s ease-in-out infinite alternate;
}
.gs-bg-orb:nth-child(3) {
  width:38vw; height:38vw; top:35%; left:45%;
  background: radial-gradient(circle, rgba(208,182,142,0.42) 0%, rgba(195,170,130,0.22) 40%, transparent 70%);
  filter: blur(55px);
  animation: orb-f3 16s ease-in-out infinite alternate;
}
@keyframes orb-f1 { from{transform:translate(0,0) scale(1)} to{transform:translate(60px,45px) scale(1.18)} }
@keyframes orb-f2 { from{transform:translate(0,0) scale(1)} to{transform:translate(-55px,-40px) scale(1.15)} }
@keyframes orb-f3 { from{transform:translate(0,0) scale(1)} to{transform:translate(35px,-28px) scale(1.12)} }

/* ── Ambient live objects ─────────────────────────────────────── */
.gs-ambient { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }

.gs-ring {
  position:absolute; border-radius:50%;
  border:1.5px solid rgba(160,130,90,0.22);
  box-shadow: 0 0 12px rgba(180,150,100,0.08), inset 0 0 12px rgba(255,240,210,0.06);
}
.gs-ring:nth-child(1) { width:220px;height:220px;top:8%;left:-5%;   animation:ring-drift1 28s linear infinite; }
.gs-ring:nth-child(2) { width:150px;height:150px;top:55%;left:-3%;  animation:ring-drift2 36s linear infinite;animation-delay:-12s; }
.gs-ring:nth-child(3) { width:290px;height:290px;top:18%;right:-8%; animation:ring-drift3 32s linear infinite;animation-delay:-8s; }
.gs-ring:nth-child(4) { width:110px;height:110px;top:72%;right:-3%; animation:ring-drift4 24s linear infinite;animation-delay:-4s; }
.gs-ring:nth-child(5) { width:200px;height:200px;top:42%;left:22%;  animation:ring-float  14s ease-in-out infinite alternate; }

@keyframes ring-drift1 { from{transform:translateX(0) rotate(0deg)}   to{transform:translateX(108vw) rotate(180deg)} }
@keyframes ring-drift2 { from{transform:translateX(0) rotate(0deg)}   to{transform:translateX(106vw) rotate(-120deg)} }
@keyframes ring-drift3 { from{transform:translateX(0) rotate(0deg)}   to{transform:translateX(-108vw) rotate(200deg)} }
@keyframes ring-drift4 { from{transform:translateX(0) rotate(0deg)}   to{transform:translateX(-110vw) rotate(-160deg)} }
@keyframes ring-float  { from{transform:translateY(0) rotate(0deg)}   to{transform:translateY(-28px) rotate(10deg)} }

.gs-dot-float {
  position:absolute; border-radius:50%;
  background: rgba(160,130,90,0.28);
  box-shadow: 0 0 8px rgba(180,150,100,0.20);
}
.gs-dot-float:nth-child(6)  { width:10px;height:10px;top:15%;left:18%; animation:dot-bob1 7s  ease-in-out infinite; }
.gs-dot-float:nth-child(7)  { width:7px; height:7px; top:65%;left:42%; animation:dot-bob2 9s  ease-in-out infinite;animation-delay:-3s; }
.gs-dot-float:nth-child(8)  { width:13px;height:13px;top:35%;left:72%; animation:dot-bob3 11s ease-in-out infinite;animation-delay:-6s; }
.gs-dot-float:nth-child(9)  { width:8px; height:8px; top:80%;left:60%; animation:dot-bob1 8s  ease-in-out infinite;animation-delay:-2s; }
.gs-dot-float:nth-child(10) { width:6px; height:6px; top:28%;left:88%; animation:dot-bob2 13s ease-in-out infinite;animation-delay:-5s; }

@keyframes dot-bob1 { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-18px)} }
@keyframes dot-bob2 { 0%,100%{transform:translateY(0)}    50%{transform:translateY(14px)} }
@keyframes dot-bob3 { 0%,100%{transform:translate(0,0)}   50%{transform:translate(12px,-12px)} }

.gs-dash {
  position:absolute; height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, rgba(180,145,95,0.45), rgba(210,175,120,0.55), rgba(180,145,95,0.45), transparent);
  box-shadow: 0 0 6px rgba(180,145,95,0.18);
}
.gs-dash:nth-child(11) { width:180px;top:22%;left:-20%;  animation:dash-run1 11s linear infinite; }
.gs-dash:nth-child(12) { width:120px;top:58%;left:-14%;  animation:dash-run1 15s linear infinite;animation-delay:-5s; }
.gs-dash:nth-child(13) { width:240px;top:78%;right:-24%; animation:dash-run2 18s linear infinite;animation-delay:-3s; }
.gs-dash:nth-child(14) { width:150px;top:40%;right:-18%; animation:dash-run2 13s linear infinite;animation-delay:-8s; }

@keyframes dash-run1 { from{transform:translateX(0)}   to{transform:translateX(120vw)} }
@keyframes dash-run2 { from{transform:translateX(0)}   to{transform:translateX(-120vw)} }

/* ── Extra ambient: flip shards ─────────────────────────────── */
.gs-flip-shard {
  position:absolute; border-radius:4px;
  background: rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(2px);
}
.gs-flip-shard:nth-child(15){ width:44px;height:26px;top:12%;left:28%; animation:flip-card 9s ease-in-out infinite; }
.gs-flip-shard:nth-child(16){ width:30px;height:18px;top:68%;left:14%; animation:flip-card 12s ease-in-out infinite;animation-delay:-4s; }
.gs-flip-shard:nth-child(17){ width:52px;height:30px;top:44%;right:10%;animation:flip-card 11s ease-in-out infinite;animation-delay:-7s; }
.gs-flip-shard:nth-child(18){ width:36px;height:22px;top:82%;right:28%;animation:flip-card 8s  ease-in-out infinite;animation-delay:-2s; }
@keyframes flip-card {
  0%  { transform:rotateY(0deg)   translateY(0)    scale(1);   opacity:.22; }
  25% { transform:rotateY(90deg)  translateY(-10px) scale(1.05); opacity:.08; }
  50% { transform:rotateY(180deg) translateY(0)    scale(.95); opacity:.20; }
  75% { transform:rotateY(270deg) translateY(8px)  scale(1.02); opacity:.06; }
  100%{ transform:rotateY(360deg) translateY(0)    scale(1);   opacity:.22; }
}

/* ── Extra ambient: zoom-pulse blobs ─────────────────────────── */
.gs-zoom-blob {
  position:absolute; border-radius:50%; pointer-events:none;
  background: rgba(180,155,115,0.07);
}
.gs-zoom-blob:nth-child(19){ width:120px;height:120px;top:30%;left:48%; animation:zoom-pulse 7s ease-in-out infinite; }
.gs-zoom-blob:nth-child(20){ width:80px; height:80px; top:60%;left:20%; animation:zoom-pulse 10s ease-in-out infinite;animation-delay:-3s; }
.gs-zoom-blob:nth-child(21){ width:100px;height:100px;top:20%;right:22%;animation:zoom-pulse 8s  ease-in-out infinite;animation-delay:-5s; }
@keyframes zoom-pulse {
  0%,100%{ transform:scale(1);   opacity:.5; filter:blur(0px); }
  50%    { transform:scale(1.55); opacity:.12; filter:blur(6px); }
}

/* ── Extra ambient: ocean wave lines ─────────────────────────── */
.gs-wave-line {
  position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background: linear-gradient(90deg, transparent 0%, rgba(160,130,90,0.13) 30%, rgba(180,155,115,0.18) 50%, rgba(160,130,90,0.13) 70%, transparent 100%);
  border-radius:1px;
}
.gs-wave-line:nth-child(22){ top:35%; animation:wave-line 8s ease-in-out infinite; }
.gs-wave-line:nth-child(23){ top:55%; animation:wave-line 11s ease-in-out infinite;animation-delay:-4s; }
.gs-wave-line:nth-child(24){ top:72%; animation:wave-line 9s ease-in-out infinite;animation-delay:-2s; }
@keyframes wave-line {
  0%  { transform:scaleX(.3) translateX(-20%); opacity:0; }
  20% { opacity:1; }
  50% { transform:scaleX(1)  translateX(0%);   opacity:.7; }
  80% { opacity:1; }
  100%{ transform:scaleX(.3) translateX(20%);  opacity:0; }
}

/* ── Extra ambient: blur drift diamonds ──────────────────────── */
.gs-blur-diamond {
  position:absolute; pointer-events:none;
  background: rgba(200,178,140,0.12);
  border:1px solid rgba(255,255,255,0.22);
  transform:rotate(45deg);
}
.gs-blur-diamond:nth-child(25){ width:28px;height:28px;top:48%;left:6%;  animation:blur-drift 15s ease-in-out infinite; }
.gs-blur-diamond:nth-child(26){ width:18px;height:18px;top:18%;right:18%;animation:blur-drift 12s ease-in-out infinite;animation-delay:-6s; }
.gs-blur-diamond:nth-child(27){ width:22px;height:22px;top:78%;left:60%; animation:blur-drift 18s ease-in-out infinite;animation-delay:-9s; }
@keyframes blur-drift {
  0%  { transform:rotate(45deg)  translate(0,0)      scale(1);   filter:blur(0px);   opacity:.5; }
  33% { transform:rotate(135deg) translate(20px,-15px) scale(1.2); filter:blur(3px);   opacity:.2; }
  66% { transform:rotate(225deg) translate(-15px,18px) scale(.8);  filter:blur(1px);   opacity:.4; }
  100%{ transform:rotate(405deg) translate(0,0)       scale(1);   filter:blur(0px);   opacity:.5; }
}

/* Canvases */
#gs-particles { position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.45; }
#gs-ripple    { position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.28; }
#gs-liquid    { position:fixed;inset:0;z-index:200;pointer-events:none;display:none; }

/* ══════════════════════════════════════════════════════════════════
   SHELL
   ══════════════════════════════════════════════════════════════════ */
.gs-shell {
  position:relative; z-index:3;
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
  transition:filter 1.4s ease, opacity 1.4s ease, transform 1.4s var(--ease);
}
.gs-shell.ad-active {
  filter:blur(14px) brightness(0.60) saturate(0.15);
  opacity:.22; transform:scale(.97); pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════════
   HEADER — light frosted glass bar
   ══════════════════════════════════════════════════════════════════ */
.gs-header {
  height:62px; padding:0 28px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;

  /* iOS frosted glass */
  background: rgba(255,252,244,0.70);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border-bottom: 1px solid rgba(255,255,255,0.80);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95),
    0 4px 24px rgba(140,110,70,0.09),
    inset 0 0 0 0.5px rgba(255,255,255,0.70);

  position:relative; overflow:hidden;
  animation: hdr-in .7s var(--ease) both;
}
@keyframes hdr-in {
  from{ opacity:0; transform:translateY(-100%); }
  to  { opacity:1; transform:translateY(0); }
}

/* Glass reflection band inside header */
.gs-header::before {
  content:''; position:absolute; top:0; left:0; right:0; height:50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18), transparent);
  pointer-events:none;
}
/* Running warm sweep */
.gs-header::after {
  content:''; position:absolute; bottom:0; left:-60%; width:60%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(160,130,90,0.35), transparent);
  animation: hdr-sweep 7s linear infinite;
}
@keyframes hdr-sweep { from{left:-60%} to{left:160%} }

.gs-title { display:flex; align-items:center; gap:13px; }
.gs-title-logo {
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(240,232,215,0.70));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.90);
  box-shadow: 0 2px 12px rgba(140,110,70,0.18), inset 0 1px 0 rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center;
  animation: logo-breathe 6s ease-in-out infinite;
}
@keyframes logo-breathe {
  0%,100%{ box-shadow:0 2px 12px rgba(140,110,70,.18),inset 0 1px 0 rgba(255,255,255,.95); }
  50%    { box-shadow:0 4px 20px rgba(140,110,70,.28),inset 0 1px 0 rgba(255,255,255,.95); }
}
.gs-title-logo svg { width:16px; height:16px; color:var(--clay); }
.gs-title-text { display:flex; flex-direction:column; gap:1px; }
.gs-title-main { font-size:13.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--t-hi); line-height:1; }
.gs-title-sub  { font-size:8px; font-weight:500; color:var(--t-lo); letter-spacing:.18em; }

.gs-live-dot {
  width:8px; height:8px; border-radius:50%; background:var(--sage); flex-shrink:0;
  animation: live-pulse 2.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.5; transform:scale(.7); }
}

.gs-header-right { display:flex; align-items:center; gap:12px; }
.gs-status-pills { display:flex; gap:7px; }
.gs-status-pill {
  display:flex; align-items:center; gap:5px;
  font-size:8.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px;
  background: rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(140,110,70,0.10), inset 0 1px 0 rgba(255,255,255,0.90);
}
.gs-status-pill.online { color:var(--sage); }
.gs-status-pill.secure { color:var(--slate); }
.gs-status-pill-dot { width:5px; height:5px; border-radius:50%; background:currentColor; animation:live-pulse 2.6s ease-in-out infinite; }
.gs-status-pill.secure .gs-status-pill-dot { animation-delay:.7s; }

.gs-clock {
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 6px rgba(140,110,70,0.09), inset 0 1px 0 rgba(255,255,255,0.95);
  border-radius:9px; padding:5px 15px;
  font-size:11px; font-weight:600; color:var(--t-mid);
  font-family:'DM Mono',monospace; letter-spacing:.07em; white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   STAT CARDS — iOS frosted glass tiles
   ══════════════════════════════════════════════════════════════════ */
.gs-stats {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px; padding:12px 24px 8px; flex-shrink:0;
}

.gs-stat {
  position:relative; overflow:hidden; cursor:default;
  border-radius:18px; padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:8px;

  /* iOS frosted glass card */
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:
    0 8px 32px rgba(140,110,70,0.10),
    0 2px 8px rgba(140,110,70,0.06),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 0 0 0.5px rgba(255,255,255,0.60);

  opacity:0;
  /* animation handled per-card in .gs-stat--* rules with merged lists */
}
@keyframes card-rise {
  from{ opacity:0; transform:translateY(20px) scale(.96); filter:blur(4px); }
  to  { opacity:1; transform:translateY(0)    scale(1);   filter:blur(0); }
}

/* Glass top reflection band */
.gs-stat::before {
  content:''; position:absolute; top:0; left:0; right:0; height:45%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.45), transparent);
  border-radius:18px 18px 0 0;
  pointer-events:none; z-index:0;
}

/* Warm shimmer sweep */
.gs-stat::after {
  content:''; position:absolute; top:-50%; left:-80%;
  width:50%; height:200%; transform:skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.50), transparent);
  animation:shimmer 12s ease-in-out infinite;
  pointer-events:none; z-index:1;
}
.gs-stat:nth-child(2)::after{ animation-delay:2.4s }
.gs-stat:nth-child(3)::after{ animation-delay:4.8s }
.gs-stat:nth-child(4)::after{ animation-delay:7.2s }
.gs-stat:nth-child(5)::after{ animation-delay:9.6s }
@keyframes shimmer { 0%,75%,100%{left:-80%} 84%{left:140%} }

/* Subtle colored top accent per card */
.gs-stat--total   { --gs-accent: rgba(78,101,128,0.30); }
.gs-stat--checkin { --gs-accent: rgba(78,101,128,0.35); }
.gs-stat--inside  { --gs-accent: rgba(90,114,96,0.35);  }
.gs-stat--out     { --gs-accent: rgba(125,101,53,0.35); }
.gs-stat--over    { --gs-accent: rgba(138,82,72,0.40);  }

/* Breathing glow + magnetic float per card — merged so nothing conflicts */
.gs-stat--total   { animation-name:card-rise,breathe-dim,  mag-float-1; animation-duration:.65s,7s,  8s;   animation-delay:.06s,.9s, 0s;   animation-fill-mode:both,none,none; animation-iteration-count:1,infinite,infinite; animation-timing-function:var(--ease),ease-in-out,ease-in-out; }
.gs-stat--checkin { animation-name:card-rise,breathe-slate,mag-float-2; animation-duration:.65s,5.5s,9s;   animation-delay:.13s,1.4s,-2s;  animation-fill-mode:both,none,none; animation-iteration-count:1,infinite,infinite; animation-timing-function:var(--ease),ease-in-out,ease-in-out; }
.gs-stat--inside  { animation-name:card-rise,breathe-sage, mag-float-3; animation-duration:.65s,5.5s,7.5s; animation-delay:.20s,2.0s,-4s;  animation-fill-mode:both,none,none; animation-iteration-count:1,infinite,infinite; animation-timing-function:var(--ease),ease-in-out,ease-in-out; }
.gs-stat--out     { animation-name:card-rise,breathe-ochre,mag-float-4; animation-duration:.65s,5.5s,10s;  animation-delay:.27s,2.6s,-1s;  animation-fill-mode:both,none,none; animation-iteration-count:1,infinite,infinite; animation-timing-function:var(--ease),ease-in-out,ease-in-out; }
.gs-stat--over    { animation-name:card-rise,breathe-rust, mag-float-5; animation-duration:.65s,5.5s,8.5s; animation-delay:.34s,3.2s,-3s;  animation-fill-mode:both,none,none; animation-iteration-count:1,infinite,infinite; animation-timing-function:var(--ease),ease-in-out,ease-in-out; }

@keyframes breathe-dim   { 0%,100%{box-shadow:0 8px 32px rgba(140,110,70,.10),0 2px 8px rgba(140,110,70,.06),inset 0 1px 0 rgba(255,255,255,.95)} 50%{box-shadow:0 10px 40px rgba(140,110,70,.16),0 3px 12px rgba(140,110,70,.09),inset 0 1px 0 rgba(255,255,255,.95)} }
@keyframes breathe-slate { 0%,100%{box-shadow:0 8px 32px rgba(140,110,70,.10),0 2px 8px rgba(140,110,70,.06),inset 0 1px 0 rgba(255,255,255,.95)} 50%{box-shadow:0 8px 36px rgba(78,101,128,.16),0 0 0 1px rgba(78,101,128,.12) inset,inset 0 1px 0 rgba(255,255,255,.95)} }
@keyframes breathe-sage  { 0%,100%{box-shadow:0 8px 32px rgba(140,110,70,.10),0 2px 8px rgba(140,110,70,.06),inset 0 1px 0 rgba(255,255,255,.95)} 50%{box-shadow:0 8px 36px rgba(90,114,96,.16),0 0 0 1px rgba(90,114,96,.12) inset,inset 0 1px 0 rgba(255,255,255,.95)} }
@keyframes breathe-ochre { 0%,100%{box-shadow:0 8px 32px rgba(140,110,70,.10),0 2px 8px rgba(140,110,70,.06),inset 0 1px 0 rgba(255,255,255,.95)} 50%{box-shadow:0 8px 36px rgba(125,101,53,.16),0 0 0 1px rgba(125,101,53,.12) inset,inset 0 1px 0 rgba(255,255,255,.95)} }
@keyframes breathe-rust  { 0%,100%{box-shadow:0 8px 32px rgba(140,110,70,.10),0 2px 8px rgba(140,110,70,.06),inset 0 1px 0 rgba(255,255,255,.95)} 50%{box-shadow:0 8px 36px rgba(138,82,72,.18),0 0 0 1px rgba(138,82,72,.14) inset,inset 0 1px 0 rgba(255,255,255,.95)} }

.gs-stat-lbl { font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.20em; color:var(--t-lo); position:relative; z-index:2; }

/* Speedometer value wrap */
.gs-stat-val-wrap { overflow:hidden; height:62px; position:relative; z-index:2; }
.gs-stat-val {
  font-size:52px; font-weight:800; line-height:62px;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums; display:block;
}
.gs-stat--total   .gs-stat-val { color:var(--slate); }
.gs-stat--checkin .gs-stat-val { color:var(--slate); }
.gs-stat--inside  .gs-stat-val { color:var(--sage);  }
.gs-stat--out     .gs-stat-val { color:var(--ochre); }
.gs-stat--over    .gs-stat-val { color:var(--rust);  }

/* Speedometer scroll animations */
@keyframes speedo-up-in  { from{transform:translateY(100%);opacity:0;filter:blur(3px)} to{transform:translateY(0);opacity:1;filter:blur(0)} }
@keyframes speedo-up-out { from{transform:translateY(0);opacity:1;filter:blur(0)} to{transform:translateY(-100%);opacity:0;filter:blur(3px)} }
@keyframes speedo-dn-in  { from{transform:translateY(-100%);opacity:0;filter:blur(3px)} to{transform:translateY(0);opacity:1;filter:blur(0)} }
@keyframes speedo-dn-out { from{transform:translateY(0);opacity:1;filter:blur(0)} to{transform:translateY(100%);opacity:0;filter:blur(3px)} }
.gs-stat-val.speedo-up-in  { animation:speedo-up-in  .44s var(--ease) both; }
.gs-stat-val.speedo-up-out { animation:speedo-up-out .44s var(--ease-in) both; position:absolute;top:0;left:0; }
.gs-stat-val.speedo-dn-in  { animation:speedo-dn-in  .44s var(--ease) both; }
.gs-stat-val.speedo-dn-out { animation:speedo-dn-out .44s var(--ease-in) both; position:absolute;top:0;left:0; }

.gs-stat-sub { font-size:8.5px; color:var(--t-lo); margin-top:2px; position:relative; z-index:2; }
.gs-stat-trend { display:inline-flex; padding:2px 8px; border-radius:999px; font-weight:700; font-size:8px; }
.gs-stat-trend.up      { background:rgba(90,114,96,.10);  color:var(--sage); }
.gs-stat-trend.warn    { background:rgba(138,82,72,.10);  color:var(--rust); }
.gs-stat-trend.neutral { background:rgba(78,101,128,.09); color:var(--slate); }

/* ══════════════════════════════════════════════════════════════════
   PANELS — deep frosted glass
   ══════════════════════════════════════════════════════════════════ */
.gs-panels {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; padding:0 24px 10px;
  flex:1; min-height:0; overflow:hidden;
}

.gs-panel {
  /* Deep layered glass */
  background: rgba(255,255,255,0.48);
  backdrop-filter: blur(32px) saturate(1.7);
  -webkit-backdrop-filter: blur(32px) saturate(1.7);
  border:1px solid rgba(255,255,255,0.82);
  box-shadow:
    0 12px 40px rgba(140,110,70,0.11),
    0 3px 10px rgba(140,110,70,0.07),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 0 0 0.5px rgba(255,255,255,0.55);

  border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
  position:relative; opacity:0;
}
.gs-panel:nth-child(1){ animation:card-rise .65s .44s var(--ease) both; }
.gs-panel:nth-child(2){ animation:card-rise .65s .54s var(--ease) both; }
.gs-panel:nth-child(3){ animation:card-rise .65s .64s var(--ease) both; }

/* Panel top glass reflection */
.gs-panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:42%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.38), transparent);
  border-radius:20px 20px 0 0;
  pointer-events:none; z-index:0;
}

/* Holographic shimmer overlay */
.gs-panel::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    transparent 40%,
    rgba(255,255,255,0.03) 100%);
  pointer-events:none; z-index:0;
}

/* Animated color top bar */
.gs-panel-topbar {
  position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background: linear-gradient(90deg,
    transparent 0%, var(--gs-panel-color) 35%,
    rgba(255,255,255,0.6) 50%,
    var(--gs-panel-color) 65%, transparent 100%);
  opacity:.65;
  animation: bar-slide 5s ease-in-out infinite alternate;
}
@keyframes bar-slide {
  from{ transform:scaleX(.5); transform-origin:left; }
  to  { transform:scaleX(1);  transform-origin:left; }
}
.gs-panel--blue  { --gs-panel-color:var(--slate); }
.gs-panel--amber { --gs-panel-color:var(--sage);  }
.gs-panel--red   { --gs-panel-color:var(--rust);  }

/* Panel burst flash on data change */
@keyframes panel-burst {
  0%  { box-shadow:0 12px 40px rgba(140,110,70,.11),0 3px 10px rgba(140,110,70,.07),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 0 rgba(var(--gs-burst),.0); }
  30% { box-shadow:0 12px 40px rgba(140,110,70,.11),0 3px 10px rgba(140,110,70,.07),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 6px rgba(var(--gs-burst),.18); transform:scale(1.006); }
  70% { box-shadow:0 12px 40px rgba(140,110,70,.11),0 3px 10px rgba(140,110,70,.07),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 12px rgba(var(--gs-burst),.0); transform:scale(1); }
  100%{ box-shadow:0 12px 40px rgba(140,110,70,.11),0 3px 10px rgba(140,110,70,.07),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 0 rgba(var(--gs-burst),.0); }
}
.gs-panel.data-changed  { animation:panel-burst .65s var(--ease) both; }
.gs-panel--blue.data-changed  { --gs-burst:78,101,128; }
.gs-panel--amber.data-changed { --gs-burst:90,114,96; }
.gs-panel--red.data-changed   { --gs-burst:138,82,72; }

.gs-panel-head {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  flex-shrink:0; border-bottom:1px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.38);
  position:relative; z-index:1;
}
.gs-panel-icon {
  width:26px; height:26px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.65);
  border:1px solid rgba(255,255,255,0.90);
  box-shadow: 0 1px 4px rgba(140,110,70,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
}
.gs-panel-icon svg { width:12px; height:12px; color:var(--gs-panel-color); }
.gs-panel-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--t-mid); flex:1; }
.gs-panel-count {
  font-size:9px; font-weight:700; color:var(--t-lo);
  background: rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.80);
  border-radius:999px; padding:2px 10px;
  font-family:'DM Mono',monospace;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
  transition:background .4s,color .4s,border-color .4s;
}
.gs-panel--blue  .gs-panel-count.live { background:rgba(78,101,128,.10);  color:var(--slate); border-color:rgba(78,101,128,.25); }
.gs-panel--amber .gs-panel-count.live { background:rgba(90,114,96,.10);   color:var(--sage);  border-color:rgba(90,114,96,.25); }
.gs-panel--red   .gs-panel-count.live { background:rgba(138,82,72,.10);   color:var(--rust);  border-color:rgba(138,82,72,.25); }

.gs-panel-body { flex:1; overflow-y:auto; scrollbar-width:none; position:relative; z-index:1; }
.gs-panel-body::-webkit-scrollbar { display:none; }

/* ══════════════════════════════════════════════════════════════════
   VISITOR ROWS — unique glass swap animations
   ══════════════════════════════════════════════════════════════════ */
.gs-row {
  display:flex; align-items:center; gap:11px; padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,0.55);
  will-change:transform,opacity; position:relative; overflow:hidden;
  transition:background .25s ease;
}
.gs-row:last-child { border-bottom:none; }
.gs-row:nth-child(even) {
  background: rgba(255,255,255,0.28);
}

/* Enter: swipes in from right with blur+skew+bounce */
.gs-row--enter { animation:row-enter .52s var(--ease) both; }
@keyframes row-enter {
  0%  { opacity:0; transform:translateX(48px) scale(.94) skewX(-3deg); filter:blur(6px); }
  55% { opacity:1; filter:blur(0); transform:translateX(-6px) scale(1.02) skewX(.5deg); }
  78% { transform:translateX(2px) scale(.999); }
  100%{ opacity:1; transform:translateX(0) scale(1) skewX(0); filter:blur(0); }
}

/* Exit: swipes RIGHT smoothly + collapses height */
.gs-row--exit { animation:row-exit .50s var(--ease-in) forwards; overflow:hidden; pointer-events:none; }
@keyframes row-exit {
  0%  { opacity:1; max-height:70px; padding-top:10px; padding-bottom:10px; transform:translateX(0) scale(1) skewX(0); filter:blur(0); }
  40% { opacity:0; transform:translateX(60px) scale(.92) skewX(-3deg); filter:blur(6px); }
  100%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; transform:translateX(80px); }
}

/* Flash shimmer on row when re-entering panel */
.gs-row--flash::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.60), transparent);
  animation:row-flash .5s ease-out forwards;
}
@keyframes row-flash {
  from{ transform:translateX(-100%); opacity:1; }
  to  { transform:translateX(110%);  opacity:0; }
}

.gs-av {
  width:36px; height:36px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.14), inset 0 0 0 1.5px rgba(255,255,255,0.30);
  position:relative;
}
.gs-av img { width:100%; height:100%; object-fit:cover; display:block; }

.gs-info { flex:1; min-width:0; }
.gs-name { font-size:12px; font-weight:600; color:var(--t-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-meta { font-size:10px; color:var(--t-lo); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.gs-time  { font-size:9.5px; font-weight:500; color:var(--t-lo); font-family:'DM Mono',monospace; }

.gs-chip {
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
  font-size:8px; font-weight:700; letter-spacing:.07em;
  border:1px solid transparent; white-space:nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gs-chip-dot { width:4px; height:4px; border-radius:50%; background:currentColor; animation:live-pulse 2.6s ease-in-out infinite; }
.gs-chip--soon   { background:rgba(78,101,128,.10);  color:var(--slate); border-color:rgba(78,101,128,.22); }
.gs-chip--inside { background:rgba(90,114,96,.10);   color:var(--sage);  border-color:rgba(90,114,96,.22); }
.gs-chip--over   { background:rgba(138,82,72,.10);   color:var(--rust);  border-color:rgba(138,82,72,.22); }

.gs-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:10px; padding:24px;
  animation:card-rise .4s var(--ease) both;
}
.gs-empty-icon { font-size:20px; opacity:.14; filter:grayscale(1) blur(1px); }
.gs-empty-text { font-size:10.5px; text-align:center; color:var(--t-lo); }

/* ══════════════════════════════════════════════════════════════════
   TOAST — floating glass notification
   ══════════════════════════════════════════════════════════════════ */
.gs-toast {
  position:fixed; right:20px; bottom:48px; z-index:50;
  display:flex; align-items:center; gap:12px;

  /* premium glass pill */
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(36px) saturate(1.8);
  -webkit-backdrop-filter: blur(36px) saturate(1.8);
  border:1px solid rgba(255,255,255,0.90);
  box-shadow:
    0 16px 48px rgba(140,110,70,0.18),
    0 4px 14px rgba(140,110,70,0.10),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 0 0 0.5px rgba(255,255,255,0.65);

  border-radius:16px; padding:12px 16px;
  min-width:250px; max-width:310px;
  border-left:3px solid var(--toast-color, var(--slate));

  opacity:0; transform:translateX(64px) scale(.93); pointer-events:none;
}
.gs-toast.toast-in  { animation:toast-in  .48s var(--ease) forwards; }
.gs-toast.toast-out { animation:toast-out .40s var(--ease-in) forwards; }
@keyframes toast-in {
  0%  { opacity:0; transform:translateX(64px) scale(.91) skewX(-2deg); filter:blur(5px); }
  60% { transform:translateX(-8px) scale(1.02) skewX(.5deg); filter:blur(0); opacity:1; }
  100%{ opacity:1; transform:translateX(0) scale(1) skewX(0); filter:blur(0); }
}
@keyframes toast-out {
  from{ opacity:1; transform:translateX(0)    scale(1);   filter:blur(0); }
  to  { opacity:0; transform:translateX(56px) scale(.92); filter:blur(4px); }
}
.gs-toast-av     { width:38px; height:38px; border-radius:50%; flex-shrink:0; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.gs-toast-body   { flex:1; min-width:0; }
.gs-toast-name   { font-size:12px; font-weight:700; color:var(--t-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-toast-action { font-size:10px; color:var(--t-lo); margin-top:2px; }
.gs-toast-icon   { font-size:17px; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════════
   TICKER — frosted strip
   ══════════════════════════════════════════════════════════════════ */
.gs-ticker {
  flex-shrink:0; height:28px;
  background: rgba(255,252,244,0.68);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top:1px solid rgba(255,255,255,0.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.90);
  display:flex; align-items:center; overflow:hidden;
}
.gs-ticker-label {
  flex-shrink:0; padding:0 14px;
  font-size:8px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--t-mid); border-right:1px solid rgba(255,255,255,0.65);
  white-space:nowrap; display:flex; align-items:center; gap:6px;
}
.gs-ticker-label-dot { width:5px; height:5px; border-radius:50%; background:var(--sage); animation:live-pulse 2.6s ease-in-out infinite; flex-shrink:0; }
.gs-ticker-track { flex:1; overflow:hidden; mask-image:linear-gradient(90deg,transparent,black 20px,black calc(100% - 20px),transparent); }
.gs-ticker-inner { display:flex; align-items:center; white-space:nowrap; animation:ticker-scroll 50s linear infinite; }
@keyframes ticker-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.gs-ticker-item { display:inline-flex; align-items:center; gap:7px; padding:0 22px; font-size:9.5px; color:var(--t-mid); border-right:1px solid rgba(200,185,160,0.18); }
.gs-ticker-dot  { width:4px; height:4px; border-radius:50%; flex-shrink:0; }
.gs-ticker-dot.b{ background:var(--slate); }
.gs-ticker-dot.g{ background:var(--sage); }
.gs-ticker-dot.a{ background:var(--ochre); }
.gs-ticker-dot.r{ background:var(--rust); }

/* ══════════════════════════════════════════════════════════════════
   AD OVERLAY — fullscreen stock video
   ══════════════════════════════════════════════════════════════════ */
.gs-ad-overlay {
  position:fixed; inset:0; z-index:100;
  pointer-events:none; opacity:0;
  transition:opacity .4s ease;
}
.gs-ad-overlay.visible { opacity:1; pointer-events:all; }

/* Warm beige liquid behind video */
.gs-ad-liquid {
  position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(145deg, #f8f2e4, #ede5d0, #e4d8be);
}
.gs-blob { position:absolute; inset:0; width:100%; height:100%; }
.blob-c1 { fill:rgba(180,158,118,0.65); animation:blob1 12s ease-in-out infinite alternate; }
.blob-c2 { fill:rgba(160,138,100,0.55); animation:blob2 15s ease-in-out infinite alternate-reverse; }
.blob-c3 { fill:rgba(140,118,88,0.35);  animation:blob1 13s ease-in-out infinite alternate;animation-delay:2s; }
.blob-c4 { fill:rgba(120,100,72,0.30);  animation:blob2 14s ease-in-out infinite alternate-reverse;animation-delay:5s; }
@keyframes blob1 { from{transform:translate(0,0) scale(1)} to{transform:translate(55px,38px) scale(1.20)} }
@keyframes blob2 { from{transform:translate(0,0) scale(1)} to{transform:translate(-44px,-32px) scale(1.16)} }

/* Curtain blur */
.gs-ad-curtain {
  position:absolute; inset:0; z-index:5;
  background:rgba(245,240,230,0.55);
  backdrop-filter:blur(24px) saturate(.85);
  -webkit-backdrop-filter:blur(24px) saturate(.85);
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.gs-ad-curtain.curtain-active { opacity:1; }

/* Video wrap — glass reveal */
.gs-ad-video-wrap {
  position:absolute; inset:0; z-index:3;
  opacity:0; transform:scale(1.05);
  transition:opacity 1.1s .4s ease, transform 1.1s .4s var(--ease);
}
.gs-ad-overlay.visible .gs-ad-video-wrap { opacity:1; transform:scale(1); }

/* Dual YouTube players — both fill the wrap, B hidden behind A */
#gs-yt-a, #gs-yt-b,
#gs-yt-a iframe, #gs-yt-b iframe {
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  border:none; pointer-events:none;
}
#gs-yt-b { opacity:0; transition:opacity .4s ease; }
#gs-yt-b.yt-active { opacity:1; }
#gs-yt-a { opacity:0; transition:opacity .4s ease; }
#gs-yt-a.yt-active { opacity:1; }

/* Vignette */
.gs-ad-vignette {
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse 88% 88% at 50% 50%, transparent 52%, rgba(20,14,8,0.55) 100%);
}

/* CRT scanlines */
.gs-ad-scanlines {
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.03;
  background:repeating-linear-gradient(to bottom, transparent 0,transparent 2px,rgba(0,0,0,1) 2px,rgba(0,0,0,1) 4px);
}

/* Light sweep on reveal */
.gs-ad-sweep {
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, rgba(255,248,230,.12) 50%, transparent 62%);
  transform:translateX(-100%); opacity:0;
}
.gs-ad-overlay.visible .gs-ad-sweep { animation:sweep-reveal 1.4s .5s ease-out forwards; }
@keyframes sweep-reveal {
  from{ transform:translateX(-100%); opacity:1; }
  to  { transform:translateX(130%);  opacity:1; }
}

/* HUD */
.gs-ad-hud {
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.52), transparent);
  opacity:0; transform:translateY(-14px);
  transition:opacity .7s .7s ease, transform .7s .7s var(--ease);
}
.gs-ad-overlay.visible .gs-ad-hud { opacity:1; transform:translateY(0); }
.gs-ad-hud-logo { display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.85); letter-spacing:.08em; text-transform:uppercase; }
.gs-ad-countdown { font-size:10.5px; font-weight:600; color:rgba(255,255,255,.55); font-family:'DM Mono',monospace; background:rgba(0,0,0,.38); padding:4px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12); }

/* Progress bar */
.gs-ad-progress { position:absolute; bottom:0; left:0; right:0; height:3px; z-index:10; background:rgba(255,255,255,.14); }
.gs-ad-progress-bar { height:100%; width:0%; transition:width linear; background:linear-gradient(90deg, var(--clay), var(--ochre), var(--rust)); }

.gs-ad-returning { position:absolute; bottom:14px; right:18px; z-index:10; font-size:9px; color:rgba(255,255,255,.38); font-family:'DM Mono',monospace; display:flex; align-items:center; gap:5px; }
.gs-ad-returning-dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.55); animation:live-pulse 1.8s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .gs-stats  { gap:8px; padding:10px 16px 6px; }
  .gs-stat-val { font-size:38px; }
  .gs-stat-val-wrap { height:48px; }
  .gs-stat-val { line-height:48px; }
  .gs-panels { gap:8px; padding:0 16px 8px; }
}
@media (max-width:800px) {
  .gs-stats  { grid-template-columns:repeat(3,1fr); }
  .gs-panels { grid-template-columns:1fr; overflow-y:auto; }
  .gs-status-pills { display:none; }
}

/* ══════════════════════════════════════════════════════════════════
   VISION OS — CINEMATIC MOTION SYSTEM
   Beige-native premium transitions, no dark colours
   ══════════════════════════════════════════════════════════════════ */

/* ── Global motion readiness ──────────────────────────────────── */
:root {
  --spring:  cubic-bezier(0.22, 1, 0.36, 1);
  --soft:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --drift:   cubic-bezier(0.16, 1, 0.3, 1);
  --glow-warm: rgba(160,130,90,0.18);
}

/* ── Wave energy canvas (bottom-left glow source) ─────────────── */
#gs-wave-energy {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity 1.2s ease;
}
#gs-wave-energy.active { opacity:1; }

/* ── Vision shimmer uses a pseudo-element on a JS-added class ─── */
.gs-stat .gs-vision-shimmer {
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  background: linear-gradient(135deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.60) 50%, rgba(255,255,255,0) 70%);
  background-size:200% 200%; background-position:200% 200%;
  opacity:0; transition:opacity 0.3s ease;
}
.gs-stat .gs-vision-shimmer.active {
  opacity:1;
  animation: shimmer-sweep 1.8s var(--soft) forwards;
}
@keyframes shimmer-sweep {
  0%   { background-position:200% 200%; opacity:0; }
  20%  { opacity:1; }
  100% { background-position:-50% -50%; opacity:0; }
}

/* ── Card levitation on hover ─────────────────────────────────── */
.gs-stat {
  transition:
    transform 1.1s var(--spring),
    box-shadow 1.1s var(--spring),
    border-radius 1.4s var(--soft),
    background 1.2s ease,
    filter 1.0s ease;
  will-change: transform, box-shadow, border-radius;
  transform-style: preserve-3d;
}
.gs-stat:hover {
  transform: translateY(-6px) scale(1.022) rotateX(1.5deg);
  box-shadow:
    0 24px 60px rgba(140,110,70,0.18),
    0 8px 24px rgba(140,110,70,0.10),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 0 0 0.5px rgba(255,255,255,0.70);
}

/* ── Panel levitation ─────────────────────────────────────────── */
.gs-panel {
  transition:
    transform 1.4s var(--spring),
    box-shadow 1.4s var(--spring),
    border-radius 1.6s var(--soft),
    filter 1.2s ease;
  will-change: transform, box-shadow;
}
.gs-panel:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow:
    0 28px 72px rgba(140,110,70,0.16),
    0 8px 28px rgba(140,110,70,0.09),
    inset 0 1px 0 rgba(255,255,255,0.98);
}

/* ── Cinematic state — applied to gs-shell during sequence ───── */
.gs-shell.vision-active .gs-stat:nth-child(1) { animation: float-card-up   5.5s var(--spring) forwards !important; }
.gs-shell.vision-active .gs-stat:nth-child(2) { animation: float-card-down 6.0s var(--spring) forwards !important; animation-delay:.15s !important; }
.gs-shell.vision-active .gs-stat:nth-child(3) { animation: float-card-up   5.8s var(--spring) forwards !important; animation-delay:.3s !important; }
.gs-shell.vision-active .gs-stat:nth-child(4) { animation: float-card-down 6.2s var(--spring) forwards !important; animation-delay:.45s !important; }
.gs-shell.vision-active .gs-stat:nth-child(5) { animation: float-card-up   5.6s var(--spring) forwards !important; animation-delay:.6s !important; }

@keyframes float-card-up {
  0%   { transform:translateY(0)     scale(1)      skewX(0deg);    border-radius:18px; filter:blur(0); }
  12%  { transform:translateY(-22px) scale(1.032)  skewX(-0.5deg); border-radius:28px; filter:blur(0.5px); }
  35%  { transform:translateY(-38px) scale(1.048)  skewX(-1deg);   border-radius:34px; filter:blur(0); }
  60%  { transform:translateY(-28px) scale(1.028)  skewX(0.3deg);  border-radius:26px; }
  80%  { transform:translateY(-12px) scale(1.010)  skewX(0deg);    border-radius:20px; }
  100% { transform:translateY(0)     scale(1)      skewX(0deg);    border-radius:18px; filter:blur(0); }
}
@keyframes float-card-down {
  0%   { transform:translateY(0)    scale(1);     border-radius:18px; filter:blur(0); }
  12%  { transform:translateY(18px) scale(0.972); border-radius:28px; filter:blur(0.5px); }
  35%  { transform:translateY(30px) scale(0.956); border-radius:34px; filter:blur(0); }
  60%  { transform:translateY(22px) scale(0.970); border-radius:26px; }
  80%  { transform:translateY(8px)  scale(0.990); border-radius:20px; }
  100% { transform:translateY(0)    scale(1);     border-radius:18px; filter:blur(0); }
}

/* ── Panel parallax during cinematic ─────────────────────────── */
.gs-shell.vision-active .gs-panel:nth-child(1) { animation: panel-drift-l 6.5s var(--drift) forwards; animation-delay:.2s; }
.gs-shell.vision-active .gs-panel:nth-child(2) { animation: panel-drift-u 7.0s var(--drift) forwards; animation-delay:.4s; }
.gs-shell.vision-active .gs-panel:nth-child(3) { animation: panel-drift-r 6.8s var(--drift) forwards; animation-delay:.6s; }

@keyframes panel-drift-l {
  0%   { transform:translate(0,0)       scale(1);     border-radius:20px; filter:blur(0); }
  15%  { transform:translate(-18px,8px) scale(0.982); border-radius:30px; filter:blur(1px); }
  40%  { transform:translate(-28px,16px) scale(0.968); border-radius:38px; filter:blur(0.5px); }
  65%  { transform:translate(-14px,8px) scale(0.982); border-radius:28px; }
  85%  { transform:translate(-4px,2px)  scale(0.996); border-radius:22px; }
  100% { transform:translate(0,0)       scale(1);     border-radius:20px; filter:blur(0); }
}
@keyframes panel-drift-u {
  0%   { transform:translate(0,0)       scale(1);     border-radius:20px; filter:blur(0); }
  15%  { transform:translate(4px,-20px) scale(1.018); border-radius:30px; filter:blur(1px); }
  40%  { transform:translate(6px,-32px) scale(1.030); border-radius:38px; filter:blur(0.5px); }
  65%  { transform:translate(3px,-18px) scale(1.016); border-radius:28px; }
  85%  { transform:translate(1px,-6px)  scale(1.004); border-radius:22px; }
  100% { transform:translate(0,0)       scale(1);     border-radius:20px; filter:blur(0); }
}
@keyframes panel-drift-r {
  0%   { transform:translate(0,0)       scale(1);     border-radius:20px; filter:blur(0); }
  15%  { transform:translate(20px,10px) scale(0.980); border-radius:30px; filter:blur(1px); }
  40%  { transform:translate(30px,18px) scale(0.965); border-radius:38px; filter:blur(0.5px); }
  65%  { transform:translate(16px,10px) scale(0.980); border-radius:28px; }
  85%  { transform:translate(5px,3px)   scale(0.996); border-radius:22px; }
  100% { transform:translate(0,0)       scale(1);     border-radius:20px; filter:blur(0); }
}

/* ── Header during cinematic ──────────────────────────────────── */
.gs-shell.vision-active .gs-header {
  animation: header-breathe 6s var(--soft) forwards;
}
@keyframes header-breathe {
  0%   { transform:translateY(0)    scaleX(1);     filter:blur(0); }
  20%  { transform:translateY(-5px) scaleX(0.996); filter:blur(0.5px); }
  50%  { transform:translateY(-8px) scaleX(0.993); filter:blur(0); }
  80%  { transform:translateY(-3px) scaleX(0.998); }
  100% { transform:translateY(0)    scaleX(1);     filter:blur(0); }
}

/* ── Ticker during cinematic ──────────────────────────────────── */
.gs-shell.vision-active .gs-ticker {
  animation: ticker-lift 6s var(--soft) forwards;
}
@keyframes ticker-lift {
  0%,100% { transform:translateY(0); filter:blur(0); opacity:1; }
  30%     { transform:translateY(-4px); filter:blur(0.5px); opacity:0.88; }
  60%     { transform:translateY(-2px); opacity:0.94; }
}

/* ── Stats bar area during cinematic ─────────────────────────── */
.gs-shell.vision-active .gs-stats {
  animation: stats-parallax 6.5s var(--spring) forwards;
}
@keyframes stats-parallax {
  0%   { transform:translateY(0) perspective(800px) rotateX(0deg); }
  25%  { transform:translateY(-10px) perspective(800px) rotateX(1.5deg); }
  55%  { transform:translateY(-16px) perspective(800px) rotateX(2.2deg); }
  80%  { transform:translateY(-6px) perspective(800px) rotateX(0.8deg); }
  100% { transform:translateY(0) perspective(800px) rotateX(0deg); }
}

/* ── Morphing border-radius pulse ─────────────────────────────── */
@keyframes morph-border {
  0%,100% { border-radius:18px; }
  25%     { border-radius:38px 18px 38px 18px; }
  50%     { border-radius:50% 30px 50% 30px; }
  75%     { border-radius:24px 40px 24px 40px; }
}
.gs-stat.morphing {
  animation-name: morph-border !important;
  animation-duration: 4s !important;
  animation-timing-function: var(--soft) !important;
  animation-fill-mode: forwards !important;
  animation-iteration-count: 1 !important;
}

/* ── Magnetic float — individual stat continuous breathing ───── */
@keyframes mag-float-1 { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(2px,-5px) rotate(0.3deg)} 66%{transform:translate(-1px,-3px) rotate(-0.2deg)} }
@keyframes mag-float-2 { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(-3px,-6px) rotate(-0.4deg)} 66%{transform:translate(2px,-2px) rotate(0.2deg)} }
@keyframes mag-float-3 { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(1px,-7px) rotate(0.5deg)} 66%{transform:translate(-2px,-4px) rotate(-0.3deg)} }
@keyframes mag-float-4 { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(-2px,-4px) rotate(-0.3deg)} 66%{transform:translate(3px,-6px) rotate(0.4deg)} }
@keyframes mag-float-5 { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(2px,-5px) rotate(0.2deg)} 66%{transform:translate(-1px,-8px) rotate(-0.4deg)} }

/* mag-float merged into .gs-stat--* animation-name lists above */

/* ── Breathing opacity on panels ─────────────────────────────── */
@keyframes panel-breathe {
  0%,100% { box-shadow: 0 12px 40px rgba(140,110,70,.11), 0 3px 10px rgba(140,110,70,.07), inset 0 1px 0 rgba(255,255,255,.95); }
  50%     { box-shadow: 0 20px 56px rgba(140,110,70,.18), 0 6px 18px rgba(140,110,70,.11), inset 0 1px 0 rgba(255,255,255,.98); }
}
.gs-panel { animation: panel-breathe 7s ease-in-out infinite; }
.gs-panel:nth-child(2) { animation-delay:-2.5s; }
.gs-panel:nth-child(3) { animation-delay:-5s; }

/* ── Glass reflection sweep on panels ────────────────────────── */
.gs-panel::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(125deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 60%);
  background-size:300% 300%;
  animation: glass-reflect 12s ease-in-out infinite;
  pointer-events:none; z-index:0;
}
@keyframes glass-reflect {
  0%,100% { background-position:300% 0%; opacity:0; }
  45%     { opacity:0; }
  50%     { background-position:0% 100%; opacity:1; }
  55%     { opacity:0; }
}

/* ── Bottom-left wave energy glow ─────────────────────────────── */
@keyframes wave-energy-pulse {
  0%   { transform:translate(0,0) scale(1); opacity:0; }
  10%  { opacity:0.6; }
  50%  { transform:translate(30vw,-25vh) scale(2.8); opacity:0.3; }
  85%  { transform:translate(65vw,-55vh) scale(5.0); opacity:0.1; }
  100% { transform:translate(80vw,-70vh) scale(6.0); opacity:0; }
}
#gs-energy-orb {
  position:fixed; bottom:-80px; left:-80px; z-index:2;
  width:200px; height:200px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(180,155,115,0.55) 0%, rgba(160,130,90,0.20) 45%, transparent 70%);
  filter: blur(30px);
  opacity:0;
}
#gs-energy-orb.firing {
  animation: wave-energy-pulse 5.5s var(--drift) forwards;
}

/* ── Liquid ripple transition overlay ────────────────────────── */
#gs-vision-ripple {
  position:fixed; inset:0; z-index:4; pointer-events:none;
  overflow:hidden;
}
.vr-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(180,155,115,0.22);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
}

/* ── Depth perspective wrapper ───────────────────────────────── */
.gs-shell {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

/* ── Scroll-float for rows during vision mode ────────────────── */
.gs-shell.vision-active .gs-row {
  animation: row-float-drift 5.5s var(--spring) forwards;
}
.gs-shell.vision-active .gs-row:nth-child(2) { animation-delay:.1s; }
.gs-shell.vision-active .gs-row:nth-child(3) { animation-delay:.2s; }
.gs-shell.vision-active .gs-row:nth-child(4) { animation-delay:.3s; }
.gs-shell.vision-active .gs-row:nth-child(5) { animation-delay:.4s; }
@keyframes row-float-drift {
  0%   { transform:translateX(0) translateY(0); filter:blur(0); opacity:1; }
  20%  { transform:translateX(4px) translateY(-8px); filter:blur(0.4px); opacity:0.92; }
  50%  { transform:translateX(-3px) translateY(-14px); filter:blur(0); opacity:0.95; }
  80%  { transform:translateX(2px) translateY(-5px); opacity:0.98; }
  100% { transform:translateX(0) translateY(0); filter:blur(0); opacity:1; }
}

/* ── Clock pulse during transition ───────────────────────────── */
.gs-shell.vision-active .gs-clock {
  animation: clock-glow 6s var(--soft) forwards;
}
@keyframes clock-glow {
  0%,100% { box-shadow:0 1px 6px rgba(140,110,70,.09),inset 0 1px 0 rgba(255,255,255,.95); filter:blur(0); }
  40%     { box-shadow:0 4px 20px rgba(140,110,70,.22),0 0 0 3px rgba(180,155,115,.12),inset 0 1px 0 rgba(255,255,255,.98); filter:blur(0); }
}

/* ── Stat value depth bob ─────────────────────────────────────── */
.gs-shell.vision-active .gs-stat-val {
  animation: val-depth 5s var(--spring) forwards;
}
@keyframes val-depth {
  0%   { transform:translateZ(0)    scale(1); }
  30%  { transform:translateZ(12px) scale(1.04); }
  60%  { transform:translateZ(20px) scale(1.06); }
  85%  { transform:translateZ(8px)  scale(1.02); }
  100% { transform:translateZ(0)    scale(1); }
}

/* ── Soft blur veil during cinematic sequence ─────────────────── */
#gs-vision-veil {
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
    transparent 40%,
    rgba(242,236,224,0.22) 100%);
  opacity:0;
  transition: opacity 1.8s ease;
}
#gs-vision-veil.active { opacity:1; }

/* ── Live dot magnetic pulse ──────────────────────────────────── */
@keyframes live-magnetic {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(90,114,96,0); }
  30%     { transform:scale(1.15); box-shadow:0 0 0 4px rgba(90,114,96,0.15); }
  60%     { transform:scale(0.9);  box-shadow:0 0 0 8px rgba(90,114,96,0.05); }
}
.gs-live-dot { animation:live-magnetic 3.5s ease-in-out infinite !important; }

/* ── Ticker scroll speed breathing ───────────────────────────── */
@keyframes ticker-speed-breathe {
  0%,100% { animation-duration:50s; }
  50%     { animation-duration:35s; }
}

/* ── Stat lbl float up ────────────────────────────────────────── */
@keyframes lbl-float {
  0%,100% { transform:translateY(0); opacity:1; }
  50%     { transform:translateY(-3px); opacity:0.82; }
}
.gs-stat-lbl { animation:lbl-float 6s ease-in-out infinite; }
.gs-stat:nth-child(2) .gs-stat-lbl { animation-delay:-1.5s; }
.gs-stat:nth-child(3) .gs-stat-lbl { animation-delay:-3s; }
.gs-stat:nth-child(4) .gs-stat-lbl { animation-delay:-4.5s; }
.gs-stat:nth-child(5) .gs-stat-lbl { animation-delay:-2s; }

/* ── Panel topbar shimmer ─────────────────────────────────────── */
@keyframes topbar-shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-100% 0; }
}
.gs-panel-topbar {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gs-panel-color) 30%,
    rgba(255,255,255,0.85) 50%,
    var(--gs-panel-color) 70%,
    transparent 100%) !important;
  background-size:300% 100% !important;
  animation:topbar-shimmer 4s ease-in-out infinite, bar-slide 5s ease-in-out infinite alternate !important;
}

/* ── Cinematic sequence: status pills float ───────────────────── */
.gs-shell.vision-active .gs-status-pills {
  animation: pills-drift 6s var(--spring) forwards;
}
@keyframes pills-drift {
  0%,100% { transform:translateY(0) scale(1); }
  40%     { transform:translateY(-5px) scale(1.015); }
  70%     { transform:translateY(-2px) scale(1.005); }
}

/* ── Post-vision recovery: snap back ─────────────────────────── */
.gs-shell.vision-recover * {
  transition:
    transform 1.8s var(--spring),
    border-radius 1.4s var(--soft),
    box-shadow 1.4s ease,
    filter 1.2s ease !important;
  animation:none !important;
}