/* cycle™ — Effects: shadow, gloss, blur, borders
   Shadows are restrained and cool. The signature material effect is GLOSS:
   a thin specular top-edge highlight + soft contact shadow that mimics the
   beveled, lit 3D extrusions in the brand film. */
:root {
  /* —— Elevation (cool, low-spread) —— */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.16);
  --shadow-xl:  0 40px 120px rgba(0,0,0,0.24);

  /* —— On dark: shadows read as deeper voids —— */
  --shadow-dark-md: 0 16px 50px rgba(0,0,0,0.6);

  /* —— Gloss / specular (the brand material) —— */
  --gloss-edge:      inset 0 1px 0 rgba(255,255,255,0.55);
  --gloss-edge-dark: inset 0 1px 0 rgba(255,255,255,0.12);
  --gloss-sheen:     linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 42%);

  /* —— Protection gradients for text over imagery —— */
  --scrim-bottom: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 100%);
  --scrim-top:    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  --scrim-radial: radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.75) 100%);

  /* —— Glass (overlays over motion) —— */
  --glass-bg:     rgba(10,10,10,0.55);
  --glass-bg-lt:  rgba(255,255,255,0.7);
  --glass-blur:   blur(18px) saturate(120%);
  --glass-border: 1px solid rgba(255,255,255,0.12);

  /* —— Borders —— */
  --border-hair:     1px solid var(--hairline);
  --border-1:        1px solid var(--border);
  --border-strong-1: 1.5px solid var(--border-strong);

  /* —— Grain (subtle film texture; apply as overlay opacity) —— */
  --grain-opacity: 0.04;
}