/* ============================================================
   AIS GAMES — design tokens (single source of truth)
   Every color, size, radius, shadow, duration and easing used
   anywhere in the site is defined here and only here. Page css
   files reference these tokens; they never carry literal values.
   ============================================================ */

/* The logo's hover: the mark's dot and the I sit inside a <use> shadow tree,
   where a stylesheet cannot reach them. They read these three instead, which
   inherit across the boundary; js/site.js animates them. Registering the
   properties is what lets them interpolate rather than jump. */
@property --dot-x { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --dot-y { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --i-scale { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  color-scheme: dark;

  /* ---- Color · ink & surfaces ---- */
  --bg: #050507;
  --surface: #121216;
  --ink: #ffffff;
  --ink-dim: #a8a8b8;
  --ink-dark: #171208;              /* dark text on light card art */
  --ink-on-art: #ffffff;            /* text sitting ON artwork/dark cards — same in both themes */
  --line: rgba(255, 255, 255, 0.1);
  --scrim: rgba(0, 0, 0, 0.45);
  --scrim-soft: rgba(0, 0, 0, 0.25);
  --scrim-full: rgba(0, 0, 0, 0.92);  /* behind a screenshot at full size */
  --scrim-page: rgba(255, 255, 255, 0.14); /* the art pill on the bare page: dark on dark vanished */
  --shadow-text: 0 2px 12px rgba(0, 0, 0, 0.85);
  --shadow-text-lg: 0 6px 40px rgba(0, 0, 0, 0.9);
  --shadow-title: 0 3px 22px var(--scrim);
  --ink-on-art-soft: color-mix(in srgb, var(--ink-on-art) 85%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
  --tag-mix: 14%;                   /* ink share in chip backgrounds */
  --tag-mix-hover: 24%;
  --field-mix: 7%;                  /* ink share in form field backgrounds */
  --pulse-mix: 60%;                 /* ink share in the map pin's pulse ring */

  /* ---- Color · brand & accents ----
     The accent is the red of the logo mark; everything drawn in the brand
     color (buttons, underlines, links, glows, gradient type) derives from it */
  --accent: #e8122c;
  --accent-hover: #ff3b4f;          /* buttons light up one step on hover */
  --accent-deep: #a90d20;
  --on-accent: #ffffff;
  --accent-text: var(--accent);      /* accent used AS text (links, years) — deeper in light mode */
  --coral: #ff5d73;                 /* the accent's light end, for gradients */
  /* Display surfaces. Only two grounds: the accent's own dark end, and a
     neutral deep ink. The game art carries every other color, so the page
     around it never competes with the logo. */
  --wine: #4a1226;
  --wine-deep: #2f0d1a;
  --wine-night: #1c0810;
  --surface-deep: #23232c;
  --surface-night: #101014;
  /* Globe stage: follows the page background; its text flips with the theme.
     No country lines — the land is one mass shaded by a gradient that runs
     down the sheet, in a grey warmed toward the brand red, and Türkiye alone
     carries the accent */
  --map-bg: var(--bg);
  --map-ink: var(--ink-on-art);
  --map-land-1: #6a464d;            /* gradient: top of the sheet */
  --map-land-2: #55383e;            /* middle */
  --map-land-3: #3c262b;            /* bottom */
  --map-mark: var(--accent);
  --map-shade: 0.22;                /* brightness at the globe's limb: the lower, the rounder */
  --map-ink-dim: color-mix(in srgb, var(--map-ink) 75%, transparent);
  --map-text-shadow: var(--shadow-text);
  --map-text-shadow-lg: var(--shadow-text-lg);

  /* ---- Gradients ---- */
  /* Shows through the hero letters until the video plays: the brand red
     sliding through its lighter and darker ends */
  --grad-hero: linear-gradient(115deg, var(--accent-deep), var(--accent), var(--coral), var(--accent), var(--accent-deep));
  --grad-accent: linear-gradient(180deg, #ffd6db 0%, #ff4459 45%, var(--accent-deep) 100%);
  /* A light tint of the accent, for type that sits on the wine ground */
  --grad-tint: linear-gradient(180deg, #ffffff 0%, #ffd0d7 55%, #ff8598 100%);
  /* Same gradients as type sitting directly on the page background
     (light mode swaps in deeper tones, see below) */
  --grad-text-accent: var(--grad-accent);
  --grad-card-scrim: linear-gradient(180deg, var(--scrim-soft) 0%, transparent 45%);
  --grad-stat-warm: radial-gradient(ellipse 90% 90% at 50% 110%, var(--wine), var(--wine-night));
  --grad-stat-dark: radial-gradient(ellipse 90% 90% at 50% 110%, var(--surface-deep), var(--surface-night));
  --grad-cta: linear-gradient(180deg, var(--wine) 0%, var(--wine-deep) 45%, var(--wine-night) 100%);
  --grad-explore-overlay: radial-gradient(ellipse 46% 62% at 50% 50%,
    color-mix(in srgb, var(--surface-night) 97%, black) 35%,
    color-mix(in srgb, var(--surface-night) 55%, transparent) 70%,
    transparent 100%);
  --glow-accent: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent);

  /* ---- Type · family & cuts ---- */
  --font: "Archivo", "Segoe UI", sans-serif;
  --stretch-display: 118%;          /* expanded cut for display type */
  --stretch-text: 100%;             /* regular cut for reading type */

  /* ---- Type · scale (fluid, phone-safe minimums) ---- */
  --text-xs: 0.8rem;                /* eyebrow labels */
  --text-sm: 0.92rem;               /* footnotes, captions, form notes */
  --text-body: 1.0625rem;
  --text-md: 1.1rem;                /* tile titles, small headings */
  --text-lg: 1.2rem;                /* channel headings */
  --text-nav: 1.15rem;
  --text-btn: 1.05rem;
  --text-hud: 0.78rem;              /* small uppercase signatures (footer) */
  --text-chip: var(--text-sm);      /* category chips (smaller on phones) */
  --text-lead: clamp(1.3rem, 2.4vw, 1.9rem);
  --text-copy: clamp(1.1rem, 1.6vw, 1.5rem);           /* long-form copy (timeline, cta) */
  --text-h3: clamp(1.6rem, 2.8vw, 2.3rem);
  --text-h2: clamp(2rem, 4vw, 3rem);
  --text-h2-lg: clamp(2rem, 3.6vw, 3.4rem);            /* timeline title */
  --text-title: clamp(2.4rem, 5.2vw, 4.4rem);          /* card titles */
  --text-explore: clamp(2.4rem, 5vw, 4rem);
  --text-display: clamp(2.6rem, 7vw, 5.8rem);          /* section display headings */
  --text-display-lg: clamp(2.4rem, 9vw, 6rem);         /* "Where we are" over the globe */
  --text-cta: clamp(2.75rem, 9vw, 5.8rem);             /* closing card headline */
  --text-page-title: clamp(2.8rem, 8vw, 6.5rem);
  --text-figure: clamp(9rem, 22vw, 21rem);             /* home stat figures */
  --text-figure-label: clamp(1.7rem, 3vw, 2.8rem);
  --text-figure-xl: clamp(7rem, 20vw, 18rem);          /* about-page "4M" */
  --text-figure-sub: clamp(1.9rem, 5vw, 4rem);
  --text-year: clamp(4.2rem, 10vw, 9.5rem);            /* timeline year */
  --text-pin: clamp(1rem, 1.6vw, 1.35rem);             /* map pin label */
  --text-pin-sub: clamp(0.85rem, 1.2vw, 1rem);
  --text-hero-svg: 250px;           /* inside the 1600x900 viewBox */
  --text-hero-svg-m: 240px;         /* inside the 900x1600 portrait viewBox */

  /* ---- Type · weights ---- */
  --w-display: 900;                 /* giant headings and figures */
  --w-heading: 800;                 /* section headings, card titles */
  --w-sub: 700;                     /* small headings, labels, strong */
  --w-ui: 600;                      /* nav, buttons, leads */
  --w-copy: 500;                    /* long-form copy */

  /* ---- Type · tracking & leading ---- */
  --tracking-label: 0.14em;         /* uppercase eyebrows */
  --tracking-display: -0.03em;      /* display headings */
  --tracking-tight: -0.02em;        /* headings */
  --tracking-hero: -0.05em;         /* giant figures */
  --tracking-lead: -0.01em;         /* large reading text */
  --tracking-ui: 0.01em;            /* nav links, buttons, chips */
  --word-display: -0.04em;          /* display headings sit tighter between words */
  --lh-tight: 1.02;
  --lh-heading: 1.08;
  --lh-snug: 1.15;
  --lh-copy: 1.5;
  --lh-body: 1.6;
  --lh-figure: 0.85;
  --lh-year: 0.88;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;

  /* ---- Spacing · sections & cards ---- */
  --section-pad: clamp(1.5rem, 3vw, 2.5rem);            /* between card sections */
  --pad-section: clamp(3rem, 6vw, 5rem);                /* text sections */
  --pad-where: clamp(2.5rem, 5vw, 4rem);
  --pad-intro-top: clamp(4rem, 9vw, 7.5rem);
  --pad-intro-bottom: clamp(2.5rem, 5vw, 4rem);
  --pad-explore: clamp(5rem, 10vw, 8.5rem);
  --pad-card: clamp(1.75rem, 3.5vw, 3rem);
  --pad-card-top: clamp(3rem, 6vw, 5.5rem);
  --pad-stat: clamp(2.5rem, 4vw, 4rem);
  --pad-cta-y: clamp(2.5rem, 4.5vw, 4rem);
  --pad-cta-x: clamp(1.5rem, 4vw, 4rem);
  --pad-timeline-bottom: clamp(5rem, 10vw, 9rem);
  --gap-cta-title: clamp(2rem, 4.5vw, 3.5rem);
  --page-head-gap: clamp(2rem, 4vw, 3.5rem);
  --hero-gap: clamp(3rem, 6vw, 5rem);
  --nav-pad-y: 1.4rem;
  --btn-pad-x: 1.7rem;
  --chip-pad-y: 0.5em;
  --chip-pad-x: 1.2em;
  --tag-pad-y: 0.45em;
  --tag-pad-x: 1.1em;
  --gap-cards: clamp(1rem, 2vw, 1.75rem);
  --gap-cta: clamp(2.5rem, 6vw, 5rem);
  --gap-footer: clamp(2rem, 2vw, 4.5rem);
  --gap-links: var(--sp-5);         /* between nav / footer links */
  --underline-gap: 6px;
  --underline-draw: linear-gradient(currentColor, currentColor); /* text links draw their underline */
  --underline-w: max(1px, 0.07em);  /* its thickness grows with the type */

  /* ---- Shape & depth ---- */
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --radius-pill: 999px;
  --radius-icon: 23%;               /* matches the rounding baked into the icon SVGs */
  --border-w: 2px;
  --border-thin: 1px;
  --focus-offset: 3px;
  --shadow-card: 0 22px 60px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-icon: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));

  /* ---- Layout · widths ---- */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --w-max: 1720px;
  --w-cards: min(1560px, 84%);
  --w-narrow: 52rem;
  --w-lead: 46rem;
  --w-cta: 58rem;
  --w-tagline: 24rem;
  --w-glow: min(60rem, 90vw);
  --contact-cols: 1.15fr 0.85fr;

  /* ---- Layout · heights ---- */
  --h-card-wide: clamp(380px, 46vw, 620px);
  --h-card-tall: clamp(340px, 38vw, 560px);
  --h-card-featured: clamp(380px, 42vw, 560px);
  --h-card-duo: clamp(480px, 46vw, 660px);
  --h-stat: clamp(420px, 40vw, 600px);
  --h-hero-m: 72vh;                 /* phone hero (svh variant below) */
  --h-hero-m-s: 72svh;
  --h-hero-min-m: 480px;
  --h-textarea: 9rem;
  --h-about-clamp: 13rem;           /* a game's description before Show more */
  --mask-fade-bottom: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); /* a folded text fades out over its last lines */
  --h-player: min(72svh, 820px);    /* web player frame (landscape games) */
  --h-player-tall: min(85svh, 960px); /* portrait games */
  --h-player-m: min(70svh, 640px);
  --player-bg: #000000;             /* games render on pure black in both themes */
  --icon-cover: clamp(72px, 10vw, 120px);
  --icon-cover-m: 52px;             /* the short 16:9 player on a phone */
  --safe-top: env(safe-area-inset-top, 0px);     /* notch, for the player's own fullscreen */
  --safe-right: env(safe-area-inset-right, 0px);
  --btn-pad-x-lg: 2.4rem;
  --list-indent: 1.2em;
  --reel-card-w: clamp(200px, 22vw, 300px);   /* about-page screenshot strip */
  --reel-card-w-wide: clamp(320px, 38vw, 520px); /* …and a landscape game's */
  --reel-edge-fade: 0.78;                     /* a card the screen cuts off keeps ~22% opacity */
  --lightbox-pad: clamp(1rem, 4vw, 3rem);     /* around a full-size screenshot */
  --lightbox-max-h: 86vh;
  --reel-play: clamp(56px, 6vw, 80px);
  --chevron: 0.55em;                /* select arrow */
  --float-tilt: 10deg;              /* timeline icons tilt this much at the end of their travel */
  --map-runway: 210vh;              /* scroll distance of the about-page globe fly-out */
  --map-lead: 0.6;                  /* the fly-out starts once this much of the stage is in view */
  --map-caption-gap: clamp(2rem, 6vh, 5rem);
  --map-fade: clamp(4rem, 10vh, 7rem);    /* the stage's bottom edge dissolves into the page */

  /* ---- Layout · icons & controls ---- */
  --icon-sm: 22px;                  /* small glyphs in round buttons */
  --icon-toggle: calc(var(--text-nav) * 1.15);  /* header day/night glyph, sized to the menu type */
  --toggle-box: calc(var(--text-nav) * 1.9);    /* its tap area */
  --toggle-spin: 120deg;            /* how far the glyphs turn while swapping */
  --store-icon: 30px;
  --store-icon-sm: 26px;
  --tap: 44px;                      /* minimum touch target */
  --tap-sm: 40px;
  --icon-channel: 56px;
  --icon-collage: clamp(56px, 6vw, 84px);
  --icon-craft: clamp(88px, 9vw, 128px);
  --icon-float: clamp(150px, 13vw, 260px);   /* timeline app icons */
  --tile: 150px;                    /* explore icon wall tiles */
  --tile-gap: 24px;
  --explore-bleed: 60px;
  --logo-h: 2rem;                   /* brand logo height in the header and footer */
  --logo-ratio: 2.74;               /* the logo artwork's width / height */
  --pin-dot: 0.4em;
  --pin-outline: 2px;               /* ring of page background that lifts the pin off Türkiye */
  --pin-dot-lift: 0.5em;
  --pin-gap: 2.2em;
  --pulse-ring: 8px;
  --scrollbar-w: 12px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.4s;
  --dur-draw: 0.3s;                 /* a link underline drawn left to right */
  --dur-reveal: 0.6s;
  --dur-theme: 0.35s;
  --dur-count: 1.2s;
  --dur-logo-trip: 1s;              /* the dot's trip from the mark onto the I */
  --dur-pulse: 2.2s;
  --dur-float: 5.5s;
  --dur-hero-shift: 14s;
  --dur-drift: 16s;
  --stagger: 0.08s;                 /* reveal delay between siblings */
  --lift-sm: -2px;                  /* hover lift for small controls */
  --lift-md: -6px;                  /* hover lift for cards/tiles */
  --hop-lift: -5px;                 /* tile icons hop on hover */
  --dur-hop: 0.4s;
  --dur-page: 0.28s;                /* cross-page view transition */
  --reveal-shift: 22px;
  --reveal-shift-lg: 3rem;
  --slide-sm: 12px;
  --float-amp: 5px;
  --drift-amp: 30px;
  --pop-from: 0.4;
  --scale-hover: 1.04;
  --year-step: 0.3em;               /* second line of the timeline year steps right */
  --hero-grad-size: 320%;
  --blur-glass: 14px;               /* frosted panels (header, sticky bars) */
  --blur-chip: 6px;                 /* frosted pill badges */
  --glass-mix: 72%;
  --explore-icons-alpha: 0.85;
  --float-icons-alpha: 0.92;
  --stat-label-y: 58%;
  --glow-y: 18%;
  --caption-start: 0.5;             /* map caption fades in from this scroll progress… */
  --caption-span: 0.35;             /* …over this much progress */

  /* NOTE: the 860px responsive breakpoint cannot be a custom property
     (CSS variables are not allowed inside media query conditions);
     it is the one intentional literal shared across the css files. */

  /* ---- Stacking ---- */
  --z-header: 100;
  --z-lightbox: 120;                /* a screenshot at full size covers the header too */
  --z-player-full: 130;             /* the player's own fullscreen (iPhone has no real one) covers everything */
  --z-float: 2;                     /* timeline icons ride over the card below */
  --z-pin: 1;
  --z-caption: 2;

  /* ---- Fixed header height (for sticky elements below it) ---- */
  /* Initial guess only — js/site.js measures the real header and
     keeps this in sync, so sticky elements sit flush under it */
  --header-h: 72px;
}

/* ---- Light theme ----
   Toggled by the sun/moon button (js/site.js sets data-theme on <html>
   and persists the choice). Ink & surface tokens change, and anything
   drawn in the accent directly on the page gets deeper tones so it stays
   readable; artwork, scrims and text placed on artwork stay identical. */
[data-theme="light"] {
  color-scheme: light;
  --scrim-page: rgba(0, 0, 0, 0.72); /* white pill text needs a darker backdrop on the light page */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --ink: #17171f;
  --ink-dim: #565664;
  --line: rgba(20, 20, 30, 0.12);
  --accent-text: var(--accent-deep);
  --map-ink: var(--ink);
  --map-land-1: #fde3e7;
  --map-land-2: #f6c9d0;
  --map-land-3: #eaa8b4;
  --map-shade: 0.5;                 /* light land needs less darkening to read as a ball */
  --map-text-shadow: 0 2px 12px rgba(245, 245, 247, 0.95);
  --map-text-shadow-lg: 0 6px 40px rgba(245, 245, 247, 1);
  --grad-text-accent: linear-gradient(180deg, #ff3d52 0%, #d4102a 45%, #8a0a1b 100%);
}

/* ---- Mobile scale ----
   Central overrides so small screens keep readable, slightly
   tighter type and layout without per-component rules. */
@media (max-width: 860px) {
  :root {
    --logo-h: 1.6rem;                 /* logo + three links + toggle must fit a 360px row */
    --text-nav: 0.95rem;
    --text-btn: 1rem;
    --text-body: 1rem;
    --gap-links: var(--sp-3);
    --text-chip: 0.82rem;
    --tag-pad-y: 0.35em;
    --tag-pad-x: 0.9em;
    --icon-craft: 72px;
    --tile: 100px;
    --map-runway: 190vh;
    --h-card-duo: clamp(380px, 90vw, 520px);
    --pad-card: var(--sp-5);          /* every panel is padded alike on phones */
  }
}