/* AUTHORED — not generated. extract-tokens.mjs only writes colors.css and
   effects.css; this file is safe from --write and must be edited by hand.

   Depth, glass, atmosphere, and motion. This is a deliberate brand EXTENSION
   for the new marketing site, not something scraped from the current one.

   BRAND-RISK INVARIANT — every value below is built from alphas of colours the
   brand already owns: accent #05b8b3, accent-light #3ee8e0, white, and black.
   No new hue is introduced anywhere in this file. Depth comes from light and
   translucency, never from a new colour. Keep it that way. */

:root {
  /* ---- Elevation ladder ------------------------------------------------
     Surfaces rise by gaining shadow depth AND a brighter accent ring. The
     ring is the Focused Scopes tell; a shadow alone reads as generic. Use
     one rung per layer of meaning — never stack two on nested elements. */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.40),
            0 0 0 1px rgba(5, 184, 179, 0.08);
  --elev-2: 0 8px 24px rgba(0, 0, 0, 0.45),
            0 0 0 1px rgba(5, 184, 179, 0.10);
  --elev-3: 0 24px 60px rgba(0, 0, 0, 0.50),
            0 0 0 1px rgba(5, 184, 179, 0.14);
  --elev-4: 0 40px 120px rgba(0, 0, 0, 0.60),
            0 0 0 1px rgba(5, 184, 179, 0.18),
            0 0 60px rgba(5, 184, 179, 0.12),
            0 0 120px rgba(5, 184, 179, 0.04);

  /* ---- Glass -----------------------------------------------------------
     Translucent --bg-card over the page. `--glass-highlight` is the top-edge
     light catch that sells the material; without it glass reads as flat
     transparency. Always pair --glass-bg with --glass-blur. */
  --glass-bg: rgba(2, 55, 69, 0.55);
  --glass-bg-strong: rgba(2, 55, 69, 0.78);
  --glass-border: rgba(5, 184, 179, 0.18);
  --glass-blur: blur(18px) saturate(140%);
  --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%);

  /* ---- Atmosphere ------------------------------------------------------
     Large, cheap, CSS-only depth cues. `--spotlight` behind a hero implies a
     light source above; `--fog` fades a section into the page floor;
     `--vignette` pulls focus to centre. Use at most two per viewport. */
  --spotlight: radial-gradient(60% 60% at 50% 0%, rgba(5, 184, 179, 0.16), transparent 70%);
  --aurora: radial-gradient(40% 50% at 15% 20%, rgba(5, 184, 179, 0.14), transparent 70%),
            radial-gradient(35% 45% at 85% 10%, rgba(62, 232, 224, 0.10), transparent 70%);
  --fog: linear-gradient(180deg, transparent, #011820);
  --vignette: radial-gradient(120% 100% at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.55));
  --grid-lines: repeating-linear-gradient(90deg, rgba(5, 184, 179, 0.05) 0 1px, transparent 1px 64px),
                repeating-linear-gradient(0deg, rgba(5, 184, 179, 0.05) 0 1px, transparent 1px 64px);

  /* ---- Rings & edges ---------------------------------------------------- */
  --ring-subtle: 0 0 0 1px rgba(5, 184, 179, 0.12);
  --ring-accent: 0 0 0 1px rgba(5, 184, 179, 0.35);
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ---- Motion ----------------------------------------------------------
     Expo-out is the house curve: fast departure, long settle. It is what makes
     a hover feel expensive rather than springy. Never exceed --dur-slow on
     anything the user is waiting for. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;
  --lift: translateY(-2px);

  /* ---- 3D depth (CSS only, no WebGL) -----------------------------------
     Perspective + a capped tilt make cards and app screenshots read as
     physical planes floating above the floor, settling flat as they enter.
     Kept small on purpose: past ~8deg it stops looking premium and starts
     looking like a gimmick. Every 3D move is TRANSFORM-ONLY, so if it never
     runs the content is unmoved, never hidden — the same safety contract as
     the reveal layer. Perspective is baked into each keyframe, so no ancestor
     `perspective` is required. */
  --perspective: 1200px;
  --tilt-max: 7deg;            /* max rotateX/Y for a plane settling into view */
  --depth-near: 36px;          /* parallax travel for a foreground layer */
  --depth-far: 10px;           /* parallax travel for a receding layer */
  --scroll-snap: y proximity;  /* never `mandatory` — proximity won't trap scroll */
}

/* Anyone who prefers less motion gets none of it. Non-negotiable. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --lift: none;
    --tilt-max: 0deg;
  }
}

/* Phones get a lighter touch. Mobile-web is the PRIMARY surface for Focused
   Scopes, so the 3D softens on small screens to protect scroll performance and
   avoid repaint jank — parity and smooth scrolling matter more than spectacle
   here. Desktop and tablet keep the full tilt/parallax/perspective shine.
   These only scale the depth VARIABLES; the layout itself is authored
   responsively in each page. */
@media (max-width: 768px) {
  :root {
    --tilt-max: 3deg;
    --depth-near: 18px;
    --depth-far: 6px;
    --perspective: 900px;
  }
}