/* ==========================================================================
   ThundersFlag — design tokens
   One angle (the logo's lightning bolt) drives every cut and slant.
   ========================================================================== */

:root {
    /* Colour — black dominates, gold is the accent */
    --black: #050505;
    --surface: #11100f;
    --surface-2: #1a1714;
    --surface-3: #231f1a;
    --line: #2b2621;
    --line-strong: #3d352c;

    --gold: #f8b945;
    --gold-light: #fde967;
    --gold-dark: #a86519;

    --text: #f5f1e8;
    --text-body: #e4dfd5;        /* long-form paragraphs: ~15:1 on black */
    --text-muted: #d0cabf;       /* secondary text: ~13:1 on black */
    --text-faint: #aaa398;       /* tertiary text: ~8:1 on black */
    --danger: #f2937e;           /* 9:1 on --black */

    /* Metallic gold: used only on CTA fills, the player-card frame and key rules */
    --metal: linear-gradient(100deg, #77440d 0%, #d68928 20%, #fde967 40%, #f8b945 55%, #a86519 78%, #77440d 100%);
    --metal-vertical: linear-gradient(180deg, #fde967 0%, #f8b945 45%, #77440d 100%);
    --overlay-left: linear-gradient(90deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.7) 42%, rgba(5, 5, 5, 0.15) 100%);
    --overlay-bottom: linear-gradient(0deg, var(--black) 0%, rgba(5, 5, 5, 0) 45%);

    /* Typography */
    --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    --fs-xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
    --fs-2xl: clamp(2.75rem, 1.8rem + 4vw, 5.5rem);
    --fs-3xl: clamp(3.5rem, 1.8rem + 7.5vw, 9rem);
    --fs-hero: clamp(4.75rem, 1.2rem + 15vw, 14rem);

    --lh-tight: 0.86;
    --lh-heading: 1.05;
    --lh-body: 1.6;

    --tracking-wide: 0.14em;
    --tracking-label: 0.08em;

    /* Spacing (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --section-y: clamp(4rem, 2.5rem + 6vw, 8.5rem);

    /* Layout */
    --container: 1320px;
    --container-narrow: 780px;
    --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);
    --header-h: 72px;

    /* Geometry: zero radius; corners are cut, never rounded */
    --radius-0: 0;
    --radius-input: 2px;
    --cut: 12px;
    --cut-lg: 24px;
    --slant: 5.5deg;            /* the bolt slant used for bands and plates */

    /* Shadows */
    --shadow-deep: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
    --shadow-photo: 0 18px 22px rgba(0, 0, 0, 0.55);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
    --ease-cine: cubic-bezier(0.22, 1, 0.26, 1);   /* long, unhurried settle: camera, not UI */
    --dur-fast: 140ms;
    --dur: 260ms;
    --dur-slow: 700ms;
    --dur-scene: 1400ms;

    /* Film layer. Amounts are small on purpose: the effect should be felt, not seen. */
    --grain-opacity: 0.045;
    --vignette: 0.55;           /* how dark the frame edge goes */
    --sweep-dur: 2600ms;        /* the light pass across gold */
    --depth: 1;                 /* global parallax multiplier; 0 disables every layer */

    /* Layers */
    --z-header: 50;
    --z-menu: 60;
    --z-dialog: 100;
}

/* --------------------------------------------------------------------------
   Typed custom properties.
   Every property animated by GSAP or by CSS is registered here. Registration is
   what lets the browser interpolate them as numbers on the compositor instead of
   re-resolving a string through style recalculation on every frame. The initial
   values double as the no-JS finished state, which is why the rails and rules
   render complete when motion never runs.
   -------------------------------------------------------------------------- */
@property --rule     { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --progress { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --draw     { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --node     { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --rx       { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --ry       { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --sweep    { syntax: "<percentage>"; inherits: false; initial-value: -40%; }
@property --reveal   { syntax: "<number>"; inherits: false; initial-value: 1; }