/* ---------- Self-hosted fonts (V2-only stylesheet) ----------------------- */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* ---------- End self-hosted fonts -------------------------------------- */

/* Source: gooolll-v2 @ ab08796, project/gooolll.css (D's read-only package).
 * Scoping edits: :root -> .g-v2; prefix every non-keyframe selector with .g-v2.
 * Add same-element .g-v2 variants for g-root, theme-paper, g-rtl and g-still
 * so the V2 root can carry those classes as on D's boards; descendant forms remain.
 * No html/body selectors occur in this source. All source declarations/values are unchanged.
 * @keyframes (including names), @font-face and @property --n remain global;
 * @property is a registration, not a selector, and is required by D's count-up.
 */
/* ==========================================================================
   GOOOLLL — "Floodlight Noir" shared kit
   Tokens, chrome components, time-based motion, scroll-driven motion, CSS 3D.
   Every artboard links this file right after the support.js line.
   Rule of thumb: layout + one-off visuals are inline styles on the artboard;
   anything with a hover/focus/animation lives here as a class.
   ========================================================================== */

.g-v2 {
  --bg: #06080B;
  --bg-2: #0B0F14;
  --bg-3: #121821;
  --fg: #F3F0EA;
  --fg-2: #BAB6AD;
  --fg-3: #8D8A82;
  --line: rgba(243, 240, 234, .09);
  --line-2: rgba(243, 240, 234, .18);
  --surface: rgba(243, 240, 234, .035);
  --surface-2: rgba(243, 240, 234, .06);
  --glass: rgba(9, 12, 16, .62);
  --accent: #4FE3F2;
  --on-accent: #06080B;

  --brand-cyan: #22D3EE;
  --brand-violet: #7C5CFF;
  --brand-magenta: #C026D3;
  --live: #FF5B47;
  --gold: #E2B85C;
  --champagne: #E7D7B1;
  --turf: #56E39F;

  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --spring: cubic-bezier(.175, .885, .32, 1.275);
}

/* Light editorial theme (The Desk, Article) */
.g-v2 .theme-paper, .g-v2.theme-paper {
  --bg: #F2EEE6;
  --bg-2: #E9E3D8;
  --bg-3: #DDD5C7;
  --fg: #15130F;
  --fg-2: #4A453D;
  --fg-3: #6A645A;
  --line: rgba(21, 19, 15, .12);
  --line-2: rgba(21, 19, 15, .24);
  --surface: rgba(21, 19, 15, .035);
  --surface-2: rgba(21, 19, 15, .06);
  --glass: rgba(242, 238, 230, .78);
  --on-accent: #F7F3EC;
}

/* ---------- Root, scroller, atmosphere ---------------------------------- */

.g-v2 .g-root, .g-v2.g-root {
  position: relative;
  overflow: clip; /* clip, not hidden: a hidden box is a scroll container and would capture view() timelines */
  isolation: isolate;
  timeline-scope: --page;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.g-v2 .g-root *, .g-v2.g-root *, .g-v2 .g-root *::before, .g-v2.g-root *::before, .g-v2 .g-root *::after, .g-v2.g-root *::after { box-sizing: border-box; }
.g-v2 .g-root :focus-visible, .g-v2.g-root :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.g-v2 .g-root ::selection, .g-v2.g-root ::selection { background: var(--accent); color: var(--on-accent); }

.g-v2 .g-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-timeline: --page block;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

/* Film grain: put <svg class="g-grain"> as the last child of .g-root */
.g-v2 .g-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 90;
  opacity: .08;
  mix-blend-mode: overlay;
}
.g-v2 .theme-paper .g-grain, .g-v2.theme-paper .g-grain { opacity: .14; mix-blend-mode: multiply; }

/* Floodlight beams: <div class="g-beam a-sweep"> inside a relative, overflow-hidden hero */
.g-v2 .g-beam {
  position: absolute;
  top: -12%;
  width: 34%;
  height: 150%;
  pointer-events: none;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(214, 246, 255, .26), rgba(214, 246, 255, .06) 45%, rgba(214, 246, 255, 0) 75%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(22px);
  mix-blend-mode: screen;
}

/* Soft halo light (not a wash: a single spot of light behind a hero object) */
.g-v2 .g-halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 38%, transparent), transparent);
  filter: blur(30px);
  opacity: .55;
}

/* Hairline grid texture for technical surfaces */
.g-v2 .g-gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}

/* ---------- Typography helpers ------------------------------------------ */

.g-v2 .g-display { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: .92; }
.g-v2 .g-display em, .g-v2 .g-italic { font-style: italic; }
.g-v2 .g-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.g-v2 .g-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--fg-3); }
.g-v2 .g-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.g-v2 .g-ooo {
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-violet) 55%, var(--brand-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.g-v2 .g-outline-text { color: transparent; -webkit-text-stroke: 1px var(--line-2); }

/* ---------- Chrome: header, nav, footer, tab bar ------------------------- */

.g-v2 .g-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background-color: rgba(6, 8, 11, .74);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.g-v2 .theme-paper .g-header, .g-v2.theme-paper .g-header { background-color: rgba(242, 238, 230, .82); }

.g-v2 .g-logo { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--fg); }
.g-v2 .g-logo-word { font-family: var(--sans); font-weight: 800; font-size: 17px; letter-spacing: .1em; }
.g-v2 .g-logo-mark { transition: transform .8s var(--spring); }
.g-v2 .g-logo:hover .g-logo-mark { transform: rotate(-12deg) scale(1.06); }

.g-v2 .g-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.g-v2 .g-nav:hover { color: var(--fg); background-color: var(--surface-2); }
.g-v2 .g-nav[aria-current="page"] { color: var(--fg); }
.g-v2 .g-nav[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

.g-v2 .g-kbd {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-3);
}

.g-v2 .g-foot-link { color: var(--fg-2); text-decoration: none; font-size: 14px; transition: color .3s var(--ease); }
.g-v2 .g-foot-link:hover { color: var(--fg); }
/* Mobile artboards (the tab bar follows the scroller): footer links get a full 44px hit target */
.g-v2 .g-scroll:has(~ .g-tabbar) .g-foot-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Mobile tab bar lives OUTSIDE .g-scroll, as a sibling, positioned absolute */
.g-v2 .g-tabbar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 70;
  height: 68px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  border-radius: 24px;
  background: rgba(10, 13, 18, .78);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .7);
}
.g-v2 .theme-paper .g-tabbar, .g-v2.theme-paper .g-tabbar { background: rgba(242, 238, 230, .86); box-shadow: 0 20px 50px -18px rgba(21, 19, 15, .35); }
.g-v2 .g-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  border: 0;
  background: none;
  color: var(--fg-3);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color .3s var(--ease), transform .4s var(--spring);
}
.g-v2 .g-tab-item:active { transform: scale(.92); }
.g-v2 .g-tab-item[aria-current="page"] { color: var(--fg); }
.g-v2 .g-tab-item[aria-current="page"] svg { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }

/* Bottom sheet (mobile "More") */
.g-v2 .g-sheet-backdrop { position: absolute; inset: 0; z-index: 80; background: rgba(0, 0, 0, .5); animation: g-fade .35s var(--ease) both; }
.g-v2 .g-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  padding: 12px 20px 36px;
  border-radius: 28px 28px 0 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  animation: g-sheet-up .55s var(--ease) both;
}

/* ---------- Controls ----------------------------------------------------- */

.g-v2 .g-btn, .g-v2 .g-btn-ghost {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .5s var(--spring), box-shadow .5s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.g-v2 .g-btn { border: 0; background: var(--fg); color: var(--bg); }
.g-v2 .g-btn--accent { background: var(--accent); color: var(--on-accent); }
.g-v2 .g-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
.g-v2 .g-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px color-mix(in oklab, var(--accent) 70%, transparent); }
.g-v2 .g-btn:hover::before { animation: g-shimmer 1s var(--ease) both; }
.g-v2 .g-btn-ghost { border: 1px solid var(--line-2); background: transparent; color: var(--fg); }
.g-v2 .g-btn-ghost:hover { border-color: var(--accent); background-color: var(--surface); transform: translateY(-2px); }
.g-v2 .g-btn-sm { min-height: 44px; padding: 0 18px; font-size: 13px; }

.g-v2 .g-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .4s var(--spring);
}
.g-v2 .g-icon-btn:hover { border-color: var(--accent); background-color: var(--surface); transform: scale(1.06); }

.g-v2 .g-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--spring);
}
.g-v2 .g-chip:hover { color: var(--fg); border-color: var(--fg-3); }
.g-v2 .g-chip:active { transform: scale(.96); }
.g-v2 .g-chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.g-v2 .g-chip.is-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Segmented control: wrap .g-seg-btn buttons in a .g-seg container */
.g-v2 .g-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.g-v2 .g-seg-btn {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color .3s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.g-v2 .g-seg-btn:hover { color: var(--fg); }
.g-v2 .g-seg-btn.is-on { background: var(--fg); color: var(--bg); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6); }

.g-v2 .g-input {
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.g-v2 .g-input::placeholder { color: var(--fg-3); }
.g-v2 .g-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }
/* Form states (promoted from the Foundations board; Feedback uses the same pattern). Focus stays the native
   .g-root :focus-visible ring — the board's .fd-focus only draws it. */
.g-v2 .g-root, .g-v2.g-root { --err: #FFB4A2; }
.g-v2 .g-label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.g-v2 .g-off { opacity: .38; cursor: not-allowed; }
.g-v2 .g-off:hover { transform: none; box-shadow: none; }
.g-v2 .g-input.is-err { border-color: var(--err); }
.g-v2 .g-msg { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--err); }

/* Toggle switch: <button class="g-switch is-on" aria-pressed="true"><span></span></button> */
.g-v2 .g-switch { position: relative; width: 52px; height: 30px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; transition: background-color .35s var(--ease); }
.g-v2 .g-switch > span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg-2); transition: transform .45s var(--spring), background-color .3s var(--ease); }
.g-v2 .g-switch.is-on { background: var(--accent); border-color: var(--accent); }
.g-v2 .g-switch.is-on > span { transform: translateX(22px); background: var(--on-accent); }
/* 44px hit areas without changing the look: the switch (30px) and segment buttons (40px + the track's 4px padding)
   extend their clickable box invisibly. */
.g-v2 .g-switch::after { content: ""; position: absolute; inset: -8px -4px; }
.g-v2 .g-seg-btn { position: relative; }
.g-v2 .g-seg-btn::after { content: ""; position: absolute; inset: -2px 0; border-radius: inherit; }

/* ---------- Surfaces ----------------------------------------------------- */

.g-v2 .g-card {
  position: relative;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .7s var(--ease), border-color .5s var(--ease), box-shadow .7s var(--ease), background-color .5s var(--ease);
}
.g-v2 .g-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(520px circle at 30% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.g-v2 .g-card:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.g-v2 .g-card:hover::before { opacity: 1; }
.g-v2 .theme-paper .g-card:hover, .g-v2.theme-paper .g-card:hover { box-shadow: 0 40px 80px -44px rgba(21, 19, 15, .45); }
.g-v2 a.g-card { display: block; color: inherit; text-decoration: none; }

.g-v2 .g-glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line-2);
}
/* Menus that drop from the header (More mega-menu, language, account): the header's own backdrop-filter makes it the
   backdrop root, so their blur cannot reach the page behind — give them a near-opaque ground instead. */
.g-v2 .g-header .g-glass { background: rgba(9, 12, 16, .94); }
.g-v2 .theme-paper .g-header .g-glass, .g-v2.theme-paper .g-header .g-glass { background: rgba(242, 238, 230, .96); }

.g-v2 .g-row { transition: background-color .3s var(--ease), transform .5s var(--ease); }
.g-v2 .g-row:hover { background-color: var(--surface-2); }

.g-v2 .g-link { color: var(--fg); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .5s var(--ease), color .3s var(--ease); }
.g-v2 .g-link:hover { background-size: 100% 1px; }

.g-v2 .g-hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Live indicator: <span class="g-live-dot"></span> */
.g-v2 .g-live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex-shrink: 0; }
.g-v2 .g-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); animation: g-pulse 1.8s var(--ease) infinite; }

/* ---------- CSS 3D --------------------------------------------------------- */

.g-v2 .p3d { perspective: 1400px; }
.g-v2 .p3d-near { perspective: 800px; }
.g-v2 .preserve { transform-style: preserve-3d; }

/* Hover tilt with depth layers. Never set transform inline on .h-tilt itself. */
.g-v2 .h-tilt { transform-style: preserve-3d; transition: transform .9s var(--ease); }
.g-v2 .h-tilt:hover { transform: rotateX(7deg) rotateY(-9deg) translateZ(0); }
.g-v2 .z-1 { transform: translateZ(24px); }
.g-v2 .z-2 { transform: translateZ(48px); }
.g-v2 .z-3 { transform: translateZ(80px); }

/* Holographic sheen for trading cards: add <span class="g-holo"></span> inside a relative card */
.g-v2 .g-holo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: .35;
  background: linear-gradient(115deg, transparent 20%, rgba(79, 227, 242, .5) 36%, rgba(210, 75, 234, .45) 48%, rgba(226, 184, 92, .5) 60%, transparent 76%);
  background-size: 250% 250%;
  animation: g-holo 6s var(--ease-io) infinite;
}

/* The ball: see chrome.html for the markup (skin svg + shade) */
.g-v2 .g-ball { position: relative; border-radius: 50%; overflow: hidden; background: #EFECE6; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85); }
.g-v2 .g-ball-skin { position: absolute; top: 0; left: 0; width: 200%; height: 100%; }
.g-v2 .g-ball::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .55) 100%),
    radial-gradient(circle at 78% 82%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset -10px -14px 30px color-mix(in oklab, var(--accent) 30%, transparent);
}
.g-v2 .g-ball-shadow { border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); filter: blur(6px); }

/* Wireframe orb (AI / data): rings are <i> children, see chrome.html */
.g-v2 .g-orb { position: relative; transform-style: preserve-3d; }
.g-v2 .g-orb > i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent); box-shadow: 0 0 18px -6px var(--accent); }
.g-v2 .g-orb > b { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 30px 8px color-mix(in oklab, var(--accent) 60%, transparent); }

/* 3D pitch plane: tilt it with an inline transform on .g-pitch */
.g-v2 .g-pitch {
  position: relative;
  transform-style: preserve-3d;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .06), rgba(0, 0, 0, .35) 80%),
    repeating-linear-gradient(90deg, #0F4B34 0 8.33%, #0C412D 8.33% 16.66%);
  box-shadow: 0 90px 120px -40px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.g-v2 .g-pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-v2 .g-player { position: absolute; transform: translate(-50%, -50%) translateZ(2px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.g-v2 .g-player > b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 12px 24px rgba(0, 0, 0, .6);
}
.g-v2 .g-player > span { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--fg); text-shadow: 0 2px 8px rgba(0, 0, 0, .8); white-space: nowrap; }

/* ---------- Parametric 3D stadium (Stadium3D.dc.html) -------------------- */

.g-v2 .st-root, .g-v2 .st-root *, .g-v2 .st-root *::before, .g-v2 .st-root *::after { box-sizing: border-box; }
.g-v2 .st-scene { position: relative; overflow: clip; perspective: 1700px; perspective-origin: 50% 30%; }
.g-v2 .st-camera { position: absolute; left: 50%; top: 54%; width: 0; height: 0; transform-style: preserve-3d; }
.g-v2 .st-spin { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transition: transform 1.2s var(--ease); }
/* No continuous spin (Q, 27 Sep: a 60 s spin re-composites ~288 preserve-3d panels every frame = 6-10 fps on an Iris Xe;
   paused = 60 fps). The stadium turns only while it is scrolled past, so it costs nothing at rest. */
.g-v2 .st-autospin { }
.g-v2 .st-world { position: absolute; transform-style: preserve-3d; }
.g-v2 .st-panel { position: absolute; transform-origin: 50% 0; backface-visibility: visible; }
/* --sh (0–0.7) is the per-panel shade computed from its facing; a flat layer is far cheaper than an inset shadow */
.g-v2 .st-seat {
  background:
    linear-gradient(rgba(0, 0, 0, var(--sh, 0)), rgba(0, 0, 0, var(--sh, 0))),
    repeating-linear-gradient(180deg, var(--seat, #2F6FD6) 0 4px, color-mix(in oklab, var(--seat, #2F6FD6) 58%, #000) 4px 6px);
}
.g-v2 .st-seat-alt {
  background:
    linear-gradient(rgba(0, 0, 0, var(--sh, 0)), rgba(0, 0, 0, var(--sh, 0))),
    repeating-linear-gradient(180deg, var(--seat2, #E8E8E8) 0 4px, color-mix(in oklab, var(--seat2, #E8E8E8) 58%, #000) 4px 6px);
}
.g-v2 .st-roof {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(226, 234, 242, .26), rgba(226, 234, 242, .07));
  border-top: 1px solid rgba(255, 255, 255, .45);
}
.g-v2 .st-facade {
  background:
    linear-gradient(rgba(0, 0, 0, var(--sh, 0)), rgba(0, 0, 0, var(--sh, 0))),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 9px),
    linear-gradient(0deg, #0D1117, #1F2732);
}
.g-v2 .st-ribbon { background: var(--rim, var(--accent)); box-shadow: 0 0 14px var(--rim, var(--accent)); }
.g-v2 .st-pitch {
  position: absolute;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .08), rgba(0, 0, 0, .28) 85%),
    repeating-linear-gradient(90deg, #13603F 0 9.09%, #0F5335 9.09% 18.18%);
  box-shadow: 0 0 80px rgba(86, 227, 159, .18);
}
.g-v2 .st-track {
  position: absolute;
  border-radius: 93px;
  border: 20px solid #9A4B37;
  background: #0E4A32;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 255, 255, .25);
}
.g-v2 .st-track::after { content: ""; position: absolute; inset: -12px; border-radius: 105px; border: 1px dashed rgba(255, 255, 255, .28); }
.g-v2 .st-cover { position: absolute; border-radius: 40%; }
.g-v2 .st-cover-glass { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 16px), rgba(190, 214, 232, .16); border: 1px solid rgba(255, 255, 255, .35); }
.g-v2 .st-cover-solid { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 16px), rgba(28, 34, 44, .58); border: 1px solid rgba(255, 255, 255, .22); }
.g-v2 .st-mast { background: linear-gradient(0deg, #2A313C, #6B7684); }
.g-v2 .st-lamp { background: #FFFFFF; box-shadow: 0 0 30px 12px rgba(220, 244, 255, .75); }
.g-v2 .st-shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); filter: blur(10px); }
@keyframes g-orbit-z { to { transform: rotateZ(360deg); } }
@keyframes st-turn { from { transform: rotateZ(-50deg); } to { transform: rotateZ(50deg); } }

/* ---------- Crest + flag holders (the live site already serves the real images) ----
   Team crest:  <span class="g-crest" style="--cs: 40px;" data-slot="crest:Granada CF"><span class="g-crest-fb">GRA</span></span>
   With image:  <span class="g-crest" style="--cs: 40px;" data-slot="crest:Granada CF"><img src="…" alt="Granada CF crest"></span>
   Country:     <span class="g-flag" style="--fw: 28px;" data-slot="flag:Spain"><span class="g-flag-fb">ESP</span></span>
   Sizes: crests 20 / 28 / 40 / 64 / 120 px, flags 18 / 22 / 28 / 44 / 72 px wide (3:2). Never draw a crest or a flag. */
.g-v2 .g-crest {
  --cs: 40px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--cs);
  height: var(--cs);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 58%), var(--bg-3);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 18px -10px rgba(0, 0, 0, .7);
}
.g-v2 .g-crest > img { width: 76%; height: 76%; object-fit: contain; }
.g-v2 .g-crest-fb { font-family: var(--mono); font-size: calc(var(--cs) * .27); font-weight: 600; letter-spacing: .03em; color: var(--fg-2); line-height: 1; }
.g-v2 .g-flag {
  --fw: 28px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--fw);
  height: calc(var(--fw) * 2 / 3);
  border-radius: calc(var(--fw) * .12);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)), var(--bg-3);
  border: 1px solid var(--line-2);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .7);
}
.g-v2 .g-flag > img { width: 100%; height: 100%; object-fit: cover; }
.g-v2 .g-flag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 45%); pointer-events: none; }
.g-v2 .g-flag-fb { font-family: var(--mono); font-size: calc(var(--fw) * .3); font-weight: 600; letter-spacing: .04em; color: var(--fg-2); line-height: 1; }
/* Competition logo: <span class="g-comp" style="--ls: 28px;" data-slot="comp:Premier League"><span class="g-comp-fb">PL</span></span>
   Sizes 20 / 28 / 40 / 64 / 120 px. Rounded square, since competition logos are rarely round. */
.g-v2 .g-comp {
  --ls: 28px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--ls);
  height: var(--ls);
  border-radius: calc(var(--ls) * .28);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 60%), var(--bg-3);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 18px -10px rgba(0, 0, 0, .7);
}
.g-v2 .g-comp > img { width: 74%; height: 74%; object-fit: contain; }
/* Player photo: <span class="g-avatar" style="--as: 48px;" data-slot="player:Bukayo Saka"><span class="g-avatar-fb">BS</span></span>
   Round headshot by default; add g-avatar--portrait for a 4:5 card photo (profiles, top-3 cards). Sizes 24 / 32 / 48 / 72 / 160 px. */
.g-v2 .g-avatar {
  --as: 48px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--as);
  height: var(--as);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .14) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .12) 0 46%, transparent 47%),
    var(--bg-3);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 18px -10px rgba(0, 0, 0, .7);
}
.g-v2 .g-avatar--portrait { height: calc(var(--as) * 1.25); border-radius: calc(var(--as) * .16); }
.g-v2 .g-avatar > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.g-v2 .g-avatar-fb { font-family: var(--sans); font-size: calc(var(--as) * .3); font-weight: 600; letter-spacing: .02em; color: var(--fg-2); line-height: 1; position: relative; }
.g-v2 .g-comp-fb { font-family: var(--mono); font-size: calc(var(--ls) * .3); font-weight: 600; letter-spacing: .02em; color: var(--fg-2); line-height: 1; }

/* ---------- Ad slots (the live site's AdBanner: leaderboard / rectangle / mobile) --------------
   <aside class="g-ad g-ad--leader" data-slot="ad:leaderboard" aria-label="Advertisement">
     <span class="g-ad-label">Advertisement</span><div class="g-ad-box"></div></aside>
   The box reserves the creative's exact height (no layout shift) and stays EMPTY in the design — the app mounts
   <ins class="adsbygoogle"> into it. Never animate, tilt, blur or overlay a slot (no sr-*, sp-*, a-*, h-tilt), never put
   one inside a card, sheet, dialog, sticky bar or 3D scene, and keep >= 32px from any control. */
.g-v2 .g-ad { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-inline: auto; width: 100%; }
.g-v2 .g-ad-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.g-v2 .g-ad-box {
  position: relative;
  width: 100%;
  border-radius: 14px;
  border: 1px dashed var(--line-2);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--surface) 14px 15px),
    var(--surface);
  contain: layout paint;
  overflow: hidden;
}
.g-v2 .g-ad--leader .g-ad-box { max-width: 970px; height: 90px; }
.g-v2 .g-ad--rect .g-ad-box { width: 300px; height: 250px; }
.g-v2 .g-ad--mobile .g-ad-box { max-width: 320px; height: 50px; border-radius: 10px; }
.g-v2 .g-ad-box::after {
  content: attr(data-size);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--fg-3); opacity: .7;
}

/* ---------- Loading skeleton (the site's "Loading…" states) ------------------------------------ */
.g-v2 .g-skel { position: relative; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.g-v2 .g-skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(243, 240, 234, .07) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: g-skel 1.6s var(--ease-io) infinite;
}
@keyframes g-skel { to { transform: translateX(100%); } }

/* ---------- Dialog (first-login wizard, confirmations) -------------------------------------------
   Backdrop + centred glass panel inside the artboard; on mobile use .g-sheet instead. */
.g-v2 .g-modal-backdrop { position: absolute; inset: 0; z-index: 90; background: rgba(3, 4, 6, .62); backdrop-filter: blur(6px); animation: g-fade .4s var(--ease) both; }
.g-v2 .g-modal {
  position: absolute; z-index: 91; left: 50%; top: 50%;
  width: min(720px, calc(100% - 48px));
  translate: -50% -50%;
  border-radius: 32px;
  border: 1px solid var(--line-2);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: g-rise .6s var(--ease) both;
}

/* ---------- Arabic / RTL (every page under ?lang=ar — full mirror) --------------------------------
   Root gets dir="rtl" lang="ar" + class g-rtl. Numbers, scores, times, codes and Latin names stay LTR islands. */
.g-v2 .g-rtl, .g-v2.g-rtl { --serif: "IBM Plex Sans Arabic", "Instrument Serif", serif; --sans: "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif; }
.g-v2 .g-rtl .g-display, .g-v2.g-rtl .g-display { letter-spacing: 0; line-height: 1.12; font-weight: 600; }
.g-v2 .g-rtl .g-display em, .g-v2.g-rtl .g-display em { font-style: normal; color: var(--accent); }
.g-v2 .g-rtl .g-kicker, .g-v2.g-rtl .g-kicker, .g-v2 .g-rtl .g-meta, .g-v2.g-rtl .g-meta { letter-spacing: 0; text-transform: none; }
/* Geist Mono has no Arabic glyphs: Arabic kicker / meta / label lines use Plex Arabic (numbers keep .g-num mono) */
.g-v2 .g-rtl .g-kicker, .g-v2.g-rtl .g-kicker, .g-v2 .g-rtl .g-meta, .g-v2.g-rtl .g-meta, .g-v2 .g-rtl .g-label, .g-v2.g-rtl .g-label { font-family: var(--sans); }
.g-v2 .g-rtl .g-label, .g-v2.g-rtl .g-label { letter-spacing: 0; text-transform: none; }
.g-v2 .g-rtl .g-num, .g-v2.g-rtl .g-num, .g-v2 .g-ltr { direction: ltr; unicode-bidi: isolate; }
.g-v2 .g-rtl .g-flip, .g-v2.g-rtl .g-flip { transform: scaleX(-1); }
/* Arabic inside English pages (footer link, language lists): never tracked or uppercased, and aligned with its
   LTR column instead of floating to the right edge. */
.g-v2 .g-meta:lang(ar), .g-v2 .g-kicker:lang(ar), .g-v2 .g-foot-link:lang(ar), .g-v2 .g-meta :lang(ar) { letter-spacing: 0; text-transform: none; }
.g-v2 .g-foot-link[dir="rtl"] { align-self: flex-start; }

/* ---------- Realistic ball (Ball3D.dc.html) ------------------------------
   24 pre-projected frames of a truncated icosahedron laid side by side (frame i at x = i * 200 user units) in ONE
   .b3-strip inside the ball's clip. A single steps(24) animation moves the strip, so exactly one frame shows and the
   frames share one start time (no drift, no blank or double frames). Motion off = frame 0. */
.g-v2 .b3-root { position: relative; }
.g-v2 .b3-ball { position: absolute; left: 0; top: 0; display: block; overflow: visible; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .45)); }
.g-v2 .b3-strip { transform: translateX(0); }
.g-v2 .b3-spin .b3-strip { animation: b3-strip var(--b3t, 1.3s) steps(24) infinite; }
@keyframes b3-strip { to { transform: translateX(-4800px); } }
.g-v2 .b3-shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); filter: blur(4px); }

/* ---------- Golden trophy (Trophy3D.dc.html) ----------------------------- */
.g-v2 .t3-root { position: relative; }
.g-v2 .t3-halo { position: absolute; left: 6%; right: 6%; top: 0; height: 46%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--t3glow, #F472B6) 50%, transparent), transparent); filter: blur(26px); opacity: .75; pointer-events: none; }
.g-v2 .t3-body { position: relative; }
.g-v2 .t3-svg { display: block; overflow: visible; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(255, 214, 130, .18)); }
.g-v2 .t3-glint { transform: translateX(-90px); }
.g-v2 .t3-live .t3-glint { animation: t3-glint 6.5s var(--ease-io) infinite; }
@keyframes t3-glint { 0% { transform: translateX(-90px); } 55%, 100% { transform: translateX(430px); } }

/* ---------- Time-based motion (always on, cheap) ------------------------ */

@keyframes g-fade { from { opacity: 0; } }
@keyframes g-rise { from { opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(6px); } }
@keyframes g-rise-3d { from { opacity: 0; transform: perspective(1200px) rotateX(24deg) translate3d(0, 60px, 0); } }
@keyframes g-letter { from { opacity: 0; transform: translate3d(0, .6em, 0) rotate(4deg); } }
@keyframes g-spin { to { transform: rotate(360deg); } }
@keyframes g-spin-y { from { transform: rotateX(-14deg) rotateY(0deg); } to { transform: rotateX(-14deg) rotateY(360deg); } }
@keyframes g-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -16px, 0); } }
@keyframes g-bob-3d { 0%, 100% { transform: rotateX(8deg) rotateY(-12deg) translate3d(0, 0, 0); } 50% { transform: rotateX(-4deg) rotateY(10deg) translate3d(0, -12px, 0); } }
@keyframes g-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes g-ring { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes g-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes g-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes g-sweep { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(14deg); } }
@keyframes g-shimmer { to { transform: translateX(320%) skewX(-18deg); } }
@keyframes g-holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes g-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes g-dash-run { to { stroke-dashoffset: -1; } }
@keyframes g-glow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes g-sheet-up { from { transform: translate3d(0, 100%, 0); } }
@keyframes g-bar { from { transform: scaleX(0); } }
@keyframes g-bar-y { from { transform: scaleY(0); } }
@keyframes g-orbit { to { transform: rotate(360deg); } }

@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
@keyframes g-count { from { --n: 0; } }

.g-v2 .a-rise { animation: g-rise 1.1s var(--ease) both; }
.g-v2 .a-rise-3d { animation: g-rise-3d 1.3s var(--ease) both; }
.g-v2 .a-fade { animation: g-fade 1.2s var(--ease) both; }
.g-v2 .dl-1 { animation-delay: .08s; }
.g-v2 .dl-2 { animation-delay: .16s; }
.g-v2 .dl-3 { animation-delay: .26s; }
.g-v2 .dl-4 { animation-delay: .38s; }
.g-v2 .dl-5 { animation-delay: .52s; }
.g-v2 .dl-6 { animation-delay: .7s; }
.g-v2 .dl-7 { animation-delay: .9s; }
.g-v2 .dl-8 { animation-delay: 1.1s; }

/* Letter-by-letter headline: wrap each word/letter in <span class="a-letter" style="animation-delay:..."> */
.g-v2 .a-letter { display: inline-block; animation: g-letter 1s var(--ease) both; }

.g-v2 .a-spin { animation: g-spin 30s linear infinite; }
.g-v2 .a-spin-fast { animation: g-spin 3.2s linear infinite; }
.g-v2 .a-spin-y { animation: g-spin-y 16s linear infinite; transform-style: preserve-3d; }
.g-v2 .a-float { animation: g-float 7s var(--ease-io) infinite; }
.g-v2 .a-bob-3d { animation: g-bob-3d 9s var(--ease-io) infinite; transform-style: preserve-3d; }
.g-v2 .a-roll { animation: g-marquee 7s linear infinite; }
.g-v2 .a-sweep { animation: g-sweep 10s var(--ease-io) infinite; }
.g-v2 .a-sweep-alt { animation: g-sweep 13s var(--ease-io) infinite reverse; }
.g-v2 .a-glow { animation: g-glow 3.6s var(--ease-io) infinite; }
.g-v2 .a-blink { animation: g-blink 1.6s var(--ease-io) infinite; }
.g-v2 .a-ring { animation: g-ring 2.6s var(--ease) infinite; }
.g-v2 .a-orbit { animation: g-orbit 40s linear infinite; }
.g-v2 .a-marquee { display: flex; width: max-content; animation: g-marquee 80s linear infinite; }
.g-v2 .a-marquee:hover { animation-play-state: paused; }
.g-v2 .a-draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: g-draw 2.4s var(--ease) both; }
.g-v2 .a-dash-run { stroke-dasharray: .04 .02; animation: g-dash-run 6s linear infinite; }
.g-v2 .a-bar { transform-origin: 0 50%; animation: g-bar 1.6s var(--ease) both; }
.g-v2 .a-bar-y { transform-origin: 50% 100%; animation: g-bar-y 1.6s var(--ease) both; }

/* Count-up number: <span class="a-count g-num" style="--to: 27" aria-label="27"></span> */
.g-v2 .a-count { --n: var(--to); counter-reset: n var(--n); animation: g-count 2.4s var(--ease) both; }
.g-v2 .a-count::after { content: counter(n); }

/* ---------- Scroll-driven motion (progressive enhancement) --------------
   Base styles are the FINAL, visible state. Without support (Firefox) or
   with motion off, everything simply shows. Inside .g-scroll the nearest
   scroller drives view(); --page is the page scroll progress.
   ------------------------------------------------------------------------ */

@keyframes g-sr-up { from { opacity: 0; transform: translate3d(0, 70px, 0); } }
@keyframes g-sr-down { from { opacity: 0; transform: translate3d(0, -50px, 0); } }
@keyframes g-sr-left { from { opacity: 0; transform: translate3d(-90px, 0, 0); } }
@keyframes g-sr-right { from { opacity: 0; transform: translate3d(90px, 0, 0); } }
@keyframes g-sr-zoom { from { opacity: 0; transform: scale(.84); } }
@keyframes g-sr-blur { from { opacity: 0; filter: blur(14px); transform: translate3d(0, 30px, 0); } }
@keyframes g-sr-tilt { from { opacity: 0; transform: perspective(1400px) rotateX(34deg) translate3d(0, 110px, -80px); } }
@keyframes g-sr-flip { from { opacity: 0; transform: perspective(1200px) rotateY(-70deg); } }
@keyframes g-sr-unfold { from { transform: perspective(1400px) rotateX(62deg) scale(.9); opacity: .2; } }
@keyframes g-sr-clip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes g-sr-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes g-sr-bar { from { transform: scaleX(0); } }
@keyframes g-sr-bar-y { from { transform: scaleY(0); } }
@keyframes g-sr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes g-par { from { transform: translate3d(0, var(--p, 90px), 0); } to { transform: translate3d(0, calc(var(--p, 90px) * -1), 0); } }
@keyframes g-par-x { from { transform: translate3d(var(--px, 120px), 0, 0); } to { transform: translate3d(calc(var(--px, 120px) * -1), 0, 0); } }
@keyframes g-par-rot { from { transform: rotate(calc(var(--r, 40deg) * -1)); } to { transform: rotate(var(--r, 40deg)); } }
@keyframes g-hero-out { to { opacity: 0; transform: translate3d(0, -140px, 0) scale(.94); filter: blur(8px); } }
@keyframes g-hero-sink { to { transform: perspective(1400px) rotateX(38deg) translate3d(0, 160px, -200px) scale(.9); opacity: .15; } }
@keyframes g-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes g-head-in { from { background-color: rgba(6, 8, 11, 0); border-bottom-color: rgba(243, 240, 234, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); } }
@keyframes g-head-in-paper { from { background-color: rgba(242, 238, 230, 0); border-bottom-color: rgba(21, 19, 15, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); } }
@keyframes g-hs { to { transform: translate3d(var(--hs-shift, -60%), 0, 0); } }

@supports (animation-timeline: view()) {
  .g-v2 .sr-up, .g-v2 .sr-down, .g-v2 .sr-left, .g-v2 .sr-right, .g-v2 .sr-zoom, .g-v2 .sr-blur, .g-v2 .sr-tilt, .g-v2 .sr-flip, .g-v2 .sr-unfold, .g-v2 .sr-clip, .g-v2 .sr-wipe, .g-v2 .sr-bar, .g-v2 .sr-bar-y, .g-v2 .sr-draw, .g-v2 .sr-count {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: auto;
    animation-timeline: view();
    animation-range: entry 4% cover 30%;
  }
  .g-v2 .sr-up { animation-name: g-sr-up; }
  .g-v2 .sr-down { animation-name: g-sr-down; }
  .g-v2 .sr-left { animation-name: g-sr-left; }
  .g-v2 .sr-right { animation-name: g-sr-right; }
  .g-v2 .sr-zoom { animation-name: g-sr-zoom; }
  .g-v2 .sr-blur { animation-name: g-sr-blur; }
  .g-v2 .sr-tilt { animation-name: g-sr-tilt; animation-range: entry 0% cover 38%; }
  .g-v2 .sr-flip { animation-name: g-sr-flip; }
  .g-v2 .sr-unfold { animation-name: g-sr-unfold; animation-range: entry 0% cover 45%; transform-origin: 50% 100%; }
  .g-v2 .sr-clip { animation-name: g-sr-clip; }
  .g-v2 .sr-wipe { animation-name: g-sr-wipe; }
  .g-v2 .sr-bar { animation-name: g-sr-bar; transform-origin: 0 50%; animation-range: entry 10% cover 40%; }
  .g-v2 .sr-bar-y { animation-name: g-sr-bar-y; transform-origin: 50% 100%; animation-range: entry 10% cover 40%; }
  .g-v2 .sr-draw { animation-name: g-sr-draw; stroke-dasharray: 1; animation-range: entry 0% cover 55%; }
  .g-v2 .sr-count { animation-name: g-count; animation-range: entry 10% cover 45%; }

  /* Stagger inside a row: later siblings finish later */
  .g-v2 .st-1 { animation-range: entry 8% cover 34%; }
  .g-v2 .st-2 { animation-range: entry 14% cover 40%; }
  .g-v2 .st-3 { animation-range: entry 20% cover 46%; }
  .g-v2 .st-4 { animation-range: entry 26% cover 52%; }
  .g-v2 .st-5 { animation-range: entry 32% cover 58%; }
  .g-v2 .st-6 { animation-range: entry 38% cover 64%; }

  /* Parallax: set --p (px) inline. Use on WRAPPERS only (it owns transform). */
  .g-v2 .sp-par { animation: g-par linear both; animation-timeline: view(); animation-range: cover; }
  .g-v2 .sp-par-x { animation: g-par-x linear both; animation-timeline: view(); animation-range: cover; }
  .g-v2 .sp-par-rot { animation: g-par-rot linear both; animation-timeline: view(); animation-range: cover; }

  /* Page-level: hero leaves as you scroll the first 760px */
  .g-v2 .sp-hero-out { animation: g-hero-out linear both; animation-timeline: --page; animation-range: 0px 760px; }
  .g-v2 .sp-hero-sink { animation: g-hero-sink linear both; animation-timeline: --page; animation-range: 0px 820px; transform-origin: 50% 100%; }
  .g-v2 .sp-progress { transform-origin: 0 50%; animation: g-progress linear both; animation-timeline: --page; }
  .g-v2 .sp-header { animation: g-head-in linear both; animation-timeline: --page; animation-range: 0px 200px; }
  .g-v2 .theme-paper .sp-header, .g-v2.theme-paper .sp-header { animation-name: g-head-in-paper; }

  /* Pinned horizontal scroll: wrapper is tall; its sticky child holds the track */
  .g-v2 .st-autospin { animation: st-turn linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .g-v2 .sp-hs-wrap { view-timeline: --hs block; }
  .g-v2 .sp-hs-track { animation: g-hs linear both; animation-timeline: --hs; animation-range: contain 0% contain 100%; }
}

/* ---------- Motion off -------------------------------------------------- */

.g-v2 .g-still *, .g-v2.g-still *, .g-v2 .g-still *::before, .g-v2.g-still *::before, .g-v2 .g-still *::after, .g-v2.g-still *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .g-v2 .g-root *, .g-v2.g-root *, .g-v2 .g-root *::before, .g-v2.g-root *::before, .g-v2 .g-root *::after, .g-v2.g-root *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* RN-Web ScrollView owns the page timeline without the board layout class. */
.g-v2 [data-g-scroll] { scroll-timeline: --page block; }