/* gen live production — component stylesheet.
   Colour, type, spacing, radius and border values live in tokens.json (compiled to tokens.css in this folder).
   This file keeps what tokens cannot hold: motion, the torn masks, the scrim, and base element styles. */

:root{
  --scrim-bottom:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 62%);
  /* torn masks — the manual's "shapes / masks" page. Stretch to any size: mask-size:100% 100%. */
  --mask-torn-circle:url("shapes/torn-circle.png");
  --mask-torn-square:url("shapes/torn-square.png");
  --mask-torn-rect:url("shapes/torn-rect.png");
  --tape-mask:var(--mask-torn-rect);
}

/* MOTION — broadcast-desk timing: fast, linear-ish, no bounce, no scale-up.
   Cuts and wipes over easing whenever a "live" feel is wanted.
   --dur-1 hover/colour swaps · --dur-2 state changes · --dur-3 panel & tab changes · --dur-4 scroll reveal */
:root{
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:280ms;
  --dur-4:600ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-linear:linear;
  --transition-hover:color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),opacity var(--dur-1) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-1:0ms;
    --dur-2:0ms;
    --dur-3:0ms;
    --dur-4:0ms;
  }
}

/* BASE — element defaults + the handful of brand utilities that appear on
   every gen live surface (rails, eyebrow labels, hairlines, red duotone). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:lowercase;margin:0}
h1{font-size:var(--fs-display-1)}
h2{font-size:var(--fs-display-2)}
h3{font-size:var(--fs-display-3)}
h4,h5,h6{font-family:var(--font-condensed);font-weight:var(--fw-label);text-transform:uppercase;letter-spacing:var(--ls-label);line-height:var(--lh-label);margin:0}
p{margin:0 0 var(--sp-4)}
a{color:var(--link);text-decoration:none;transition:var(--transition-hover)}
a:hover{color:var(--link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img,svg,video{display:block;max-width:100%}
hr{border:0;border-top:var(--hairline) solid var(--border-hairline);margin:var(--sp-6) 0}
::selection{background:var(--gl-red);color:var(--gl-white)}

/* eyebrow / rail label — Rift, caps, letterspaced. The most-used text style in the brand. */
.gl-label{font-family:var(--font-condensed);font-weight:var(--fw-label);font-size:var(--fs-label-lg);text-transform:uppercase;letter-spacing:var(--ls-label);line-height:var(--lh-label);color:var(--text-muted)}
.gl-label--strong{color:var(--text-primary);font-weight:var(--fw-label-strong)}
.gl-label--accent{color:var(--text-accent)}
.gl-label--sm{font-size:var(--fs-label-sm)}

/* hairline rule */
.gl-rule{height:var(--hairline);background:var(--border-hairline);border:0}

/* red duotone wash over photography */
.gl-duotone{position:relative;isolation:isolate}
.gl-duotone>img{filter:grayscale(1) contrast(1.05)}
.gl-duotone::after{content:"";position:absolute;inset:0;background:var(--gl-red);mix-blend-mode:screen;opacity:.62;pointer-events:none}

/* torn masks from the manual's shapes/masks page */
.gl-tape,.gl-torn-rect,.gl-torn-square,.gl-torn-circle{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.gl-tape,.gl-torn-rect{-webkit-mask-image:var(--mask-torn-rect);mask-image:var(--mask-torn-rect)}
.gl-torn-square{-webkit-mask-image:var(--mask-torn-square);mask-image:var(--mask-torn-square)}
.gl-torn-circle{-webkit-mask-image:var(--mask-torn-circle);mask-image:var(--mask-torn-circle)}