/* ============================================================================
   MeshyFlix — design system foundation
   Loaded before every other sheet. Tokens and primitives only; no page layout.
   The contract this implements lives in /DESIGN-SYSTEM.md — read it first.
   ========================================================================== */

:root{
  /* ---- colour ----
     Near-black carries a faint COOL cast, not a green one. A green-tinted base
     under a lime accent leaves the accent nothing to push against — the whole
     page reads as one hue. Cool base, warm accent: maximum separation. ---- */
  --bg:         #08090B;
  --surface-1:  #0D0F12;
  --surface-2:  #12151A;
  --surface-3:  #191D24;

  /* THE hairline. One value for the entire site. Neutral, so it never tints
     the surface it sits on. */
  --hairline:   rgba(255,255,255,.09);
  --hairline-2: rgba(255,255,255,.17);   /* hover only */

  --text:   #F4F5F7;
  --muted:  rgba(244,245,247,.62);
  --faint:  rgba(244,245,247,.38);

  /* Lime means "act on this" or "this is live". Nowhere else. */
  --accent:      #CFFE25;
  --accent-deep: #7FB800;
  --accent-ink:  #06070A;

  /* ---- translucency ladder: the only glass in the system ----
     Apple's material, not the 2015 frosted-panel cliché. Three things make it
     read as glass rather than a grey box: a real blur, SATURATION so colour
     bleeds through from behind, and a 1px top highlight so the edge catches
     light. Use --glass-edge as an inset box-shadow on any glass surface. */
  --glass-1: rgba(255,255,255,.05);
  --glass-2: rgba(255,255,255,.09);
  --glass-3: rgba(255,255,255,.13);
  --glass-4: rgba(255,255,255,.20);
  --blur:    blur(32px) saturate(180%);

  /* Apple's material is four layers, not one. Blur and saturation are the easy
     two; what actually sells it is the SPECULAR RIM — a bright top edge where
     light catches, a dimmer bounce along the bottom, faint sides — plus a soft
     drop that lifts the pane off the surface behind it. */
  --glass-edge:
    inset 0  1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.07),
    inset  1px 0 0 rgba(255,255,255,.09),
    inset -1px 0 0 rgba(255,255,255,.09);
  --glass-lift: 0 12px 40px -12px rgba(0,0,0,.55);

  /* ---- shape ----
     Large surfaces are soft; small controls stay crisp. Measured on the
     reference: 32px and 16px dominate, 75 uses each. */
  --r-chip:  10px;   /* chips, inputs, small controls */
  --r-card:  20px;   /* cards, CTAs, media */
  --r-block: 32px;   /* whole section blocks, hero panels */
  --r-pill:  999px;

  /* ---- motion: three durations, one easing ---- */
  --t-quick: .16s;
  --t-base:  .32s;
  --t-slow:  .8s;
  --ease:    cubic-bezier(.22,1,.36,1);

  /* ---- measure ----
     The container SCALES with the viewport instead of stopping at a fixed cap.
     A 1200px column on a 2200px monitor reads as a narrow strip floating in
     space; the reference runs 1776px at a 2226px viewport, i.e. ~80% of the
     screen, and that is what "wide" actually means. Reading measures stay
     capped in ch — only the layout grows. */
  --w-narrow: min(820px, 92vw);
  --w-base:   min(1680px, 92vw);
  --w-wide:   min(1900px, 95vw);
  --gutter:   clamp(20px, 3vw, 56px);
  --pad:      clamp(88px, 9vw, 168px);

  --font: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------- type ---- */

.s3-h1{
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 1.02;
  letter-spacing: -.042em;
  font-weight: 500;
  max-width: 15ch;            /* deliberate break, not a full-width run */
}
.s3-h2{
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 500;
}
.s3-h3{ font-size:20px; line-height:1.25; letter-spacing:-.02em; font-weight:500 }
.s3-lede{ font-size:17px; line-height:1.6; color:var(--muted); max-width:56ch }

/* Mono is a job, not a decoration: specs, counts, sizes, costs, durations. */
.s3-spec{
  font-family:var(--mono); font-size:12px; line-height:1.5; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; color:var(--muted);
}
.s3-spec-lg{
  font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums;
  color:var(--text); letter-spacing:.02em;
}
/* The ONE permitted uppercase micro-label: a readout beside a number. */
.s3-readout{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
}

/* ------------------------------------------------------------ measures ---- */

.s3-wrap        { width:100%; max-width:var(--w-base);   margin-inline:auto; padding-inline:var(--gutter) }
.s3-wrap-narrow { width:100%; max-width:var(--w-narrow); margin-inline:auto; padding-inline:var(--gutter) }
.s3-wrap-wide   { width:100%; max-width:var(--w-wide);   margin-inline:auto; padding-inline:var(--gutter) }
.s3-bleed       { width:100%; margin-inline:0; padding-inline:0 }

.s3-band       { padding-block:var(--pad) }
.s3-band-tight { padding-block:calc(var(--pad) * .58) }

/* An inverted band. Required at least once per long page so the silhouette
   stops being a stack of identical dark rectangles. */
.s3-invert{ background:var(--accent); color:var(--accent-ink) }
/* Headings inherit a white from main.css that survives onto the lime band and
   is unreadable there. Everything inside an inverted band takes the dark ink. */
.s3-invert :where(h1,h2,h3,h4,p,li,dt,dd,strong,b,a,span,em){ color:inherit }
.s3-invert :where(a):hover{ color:var(--accent-ink); text-decoration:underline }
.s3-invert .s3-lede{ color:color-mix(in srgb, var(--accent-ink) 72%, transparent) }
.s3-invert .s3-readout{ color:color-mix(in srgb, var(--accent-ink) 55%, transparent) }

/* ------------------------------------------------------------- buttons ---- */
/* Exactly one filled CTA per screen. Everything else rides the glass ladder. */

.s3-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-card);
  font-size:15px; font-weight:500; line-height:1;
  border:1px solid transparent; cursor:pointer;
  transition:background var(--t-quick) var(--ease),
             border-color var(--t-quick) var(--ease),
             color var(--t-quick) var(--ease);
}
.s3-btn-primary{ background:var(--accent); color:var(--accent-ink); font-weight:700 }
.s3-btn-primary:hover{ background:#DDFF52 }

.s3-btn-glass{ background:var(--glass-1); color:var(--text); border-color:var(--hairline) }
.s3-btn-glass:hover{ background:var(--glass-2); border-color:var(--hairline-2) }

.s3-btn-bare{ background:none; color:var(--muted); padding-inline:0 }
.s3-btn-bare:hover{ color:var(--text) }

/* Nav CTA is deliberately demoted so it never competes with the hero CTA. */
.s3-btn-nav{
  height:36px; padding:0 18px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500;
  background:var(--glass-3); color:var(--text); border:1px solid var(--hairline);
}
.s3-btn-nav:hover{ background:var(--glass-4) }

.s3-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--r-chip);
  background:var(--glass-1); border:1px solid var(--hairline);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted);
  transition:border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.s3-chip:hover{ border-color:var(--hairline-2); color:var(--text) }
.s3-chip[aria-pressed="true"], .s3-chip.is-on{
  border-color:var(--accent); color:var(--accent); background:rgba(207,254,37,.08);
}

/* --------------------------------------------------------------- cards ---- */
/* One interaction language: the hairline brightens, nothing moves. */

.s3-card{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  transition:border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.s3-card:hover{ border-color:var(--hairline-2) }

/* Glass is for floating chrome above media — never for a static card. */
.s3-glass{
  position:relative; isolation:isolate;
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--hairline);
  border-radius:var(--r-card);
  box-shadow:var(--glass-edge), var(--glass-lift);
}

/* The sheen: a single diagonal pass of light across the pane. Real glass is
   never evenly lit, and this is the cheapest way to say so. */
.s3-glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.02) 32%,
    transparent 56%);
  z-index:-1;
}

/* Refraction is NOT a CSS-only effect. Real Liquid Glass needs a displacement
   map sized to the element — a horizontal ramp in R, a vertical ramp in B, and
   a blurred inset grey rounded-rect that neutralises the interior so the bend
   is confined to an edge band. That map has to be generated per element, so it
   lives in JS (assets/js/home.js), not here. A noise-based feTurbulence map
   was tried and is wrong: it warps the whole pane instead of its rim.

   JS adds .is-refracting once the filter is attached; until then, and forever
   in Safari and Firefox, the pane stays frosted and looks correct. */
.s3-glass-refract{ /* opt-in marker; JS upgrades it, CSS leaves it frosted */ }


.s3-rule{ height:1px; background:var(--hairline); border:0; margin:0 }

/* ------------------------------------------------------------ a11y/motion - */

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

/* Scroll entrances are set up by JS; without JS everything is simply visible. */
.s3-anim{ opacity:0 }
.no-js .s3-anim, .s3-anim.is-in{ opacity:1 }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .s3-anim{ opacity:1 !important; transform:none !important }
}