/* ==========================================================================
   ATLAS — "Under the glass"
   --------------------------------------------------------------------------
   Near-black, bone white, one warm red. No second hue: the only other colour
   on the page is the cold blue of the tracking overlay, and it never leaves
   the footage.

   The ruggedness comes from three places, not from decoration:
     1. Poster-weight condensed caps, printed slightly out of register
     2. Real film grain over every surface
     3. Marker strokes that wobble, because a coach drawing on a board wobbles
   ========================================================================== */

@import url("/fonts/fonts.css");

/* ----------------------------------------------------------------- TOKENS */

:root {
  /* Ground */
  --ink-0:  #08080A;   /* deepest — page ground */
  --ink-1:  #0D0D10;   /* section ground */
  --ink-2:  #141418;   /* panel */
  --ink-3:  #1B1B20;   /* raised panel */
  --ink-4:  #24242A;   /* hover */
  --rule:   #26262C;   /* hairline */
  --rule-2: #34343C;   /* stronger rule */

  /* Type */
  --bone:   #F2F1ED;   /* headline white, warmed a touch off pure */
  --bone-2: #C7C6C0;   /* body */
  --bone-3: #8A8985;   /* secondary */
  --bone-4: #5E5E5B;   /* labels, muted */
  --bone-5: #3E3E3D;   /* barely there */

  /* The one accent */
  --red:      #DC3B2A;
  --red-hot:  #F2503C;
  --red-deep: #A62717;

  /* Lives only inside footage overlays */
  --track: #5FA8DE;

  /* Data states — kept desaturated so they never compete with the red */
  --up:   #7FA88C;
  --down: #C9A227;

  /* Type stacks */
  --f-display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-text:    "Public Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --f-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --e-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --e-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 300ms;
  --t-slow: 700ms;
  --t-cine: 1200ms;

  /* Geometry — square. Nothing on this page is a pill. */
  --shell:  1280px;
  --gutter: clamp(20px, 4vw, 52px);
  --rail-w: 250px;
}

/* ------------------------------------------------------------------ RESET */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--ink-0);
  /* the ice layer below paints the real ground */
  color: var(--bone-2);
  font-family: var(--f-text);
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
img,svg,video,canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input,textarea,select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; }

/* ------------------------------------------------------------------ GRAIN */

/* Sits above everything, moves nowhere, costs one composited layer.
   This is most of why the page reads as printed rather than rendered. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: grain 700ms steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 1%); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }


/* -------------------------------------------------------------- THE SHEET */

/* A photograph of real scratched ice, taken almost to black, laid under the
   whole page as one fixed sheet.

   It is deliberately not tiled. This texture has long directional scratches,
   and at any tile size those give the repeat away — a straight tile shows a
   seam line, a mirrored tile shows kaleidoscope symmetry. One large sheet
   fixed to the viewport reads as a single surface with neither artefact, and
   the content scrolls over it.
   --ice-y / --ice-p are written by ice.js. */

.ice-bg {
  position: fixed; inset: -5%;
  z-index: -3; pointer-events: none;
  background-image: url("/img/ice-sheet.jpg");
  background-size: cover;
  background-position: center center;
  transform: translate3d(0, calc(var(--ice-y, 0) * -0.018px), 0);
  will-change: transform;
}

/* arena light pooled over the sheet, and enough scrim to hold body copy */
.ice-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 64% 40% at 50% -10%, rgba(128,160,192,0.13), transparent 62%),
    radial-gradient(ellipse 72% 50% at 16% 110%, rgba(96,126,158,0.09), transparent 66%),
    linear-gradient(180deg, rgba(6,8,11,0.58) 0%, rgba(7,9,13,0.34) 44%, rgba(5,7,10,0.62) 100%);
}

/* the light pool travels down the sheet with the scroll */
.ice-sheen {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(
    ellipse 58% 26% at 50% calc(var(--ice-p, 0) * 118% - 9%),
    rgba(150,180,212,0.07), transparent 64%);
}

/* Sections ride on the sheet. Panels and cards keep their own ground so type
   stays legible; only the page-level bands are gone. */
.on-ice { background: transparent !important; }

@media (prefers-reduced-motion: reduce) {
  .ice-bg { transform: none; }
}

/* -------------------------------------------------------------- TYPOGRAPHY */

/* Poster type, printed a hair out of register — the red and cold plates
   land a pixel either side of the black. Subtle at small sizes, unmistakable
   at hero scale. */
.disp {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.005em;
  color: var(--bone);
  text-wrap: balance;
  text-shadow:
    -1.5px 0 0 rgba(220, 59, 42, 0.38),
     1.5px 0 0 rgba(95, 168, 222, 0.18),
     0 6px 26px rgba(0, 0, 0, 0.55);
}
.d1 { font-size: clamp(46px, 8.2vw, 118px); }
.d2 { font-size: clamp(34px, 5.4vw, 74px); }
.d3 { font-size: clamp(26px, 3.2vw, 42px); }
.d4 { font-size: clamp(19px, 2vw, 26px); text-shadow: -1px 0 0 rgba(220,59,42,0.45), 1px 0 0 rgba(95,168,222,0.22); }
.d5 { font-size: 15.5px; letter-spacing: 0.01em; text-shadow: none; }

/* The accent word: cut out, drawn in red outline only. */
.hollow {
  color: transparent;
  -webkit-text-stroke: 2px var(--red);
  text-stroke: 2px var(--red);
  text-shadow: none;
  paint-order: stroke fill;
}
@media (max-width: 620px) { .hollow { -webkit-text-stroke-width: 1.5px; } }

/* Micro-labels. Everything structural on this page is a slash label. */
.slash {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.slash i { font-style: normal; color: var(--bone-4); }
.slash-q { color: var(--bone-4); }
.slash-q b { color: var(--bone-2); font-weight: 700; }

.lede {
  font-size: clamp(16.5px, 1.35vw, 19px);
  line-height: 1.62;
  color: var(--bone-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.body-2 { font-size: 15px; line-height: 1.62; color: var(--bone-3); }
.data { font-family: var(--f-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }

/* A quoted note, set against a red bar rather than in quote marks. */
.note {
  border-left: 3px solid var(--red);
  padding-left: 18px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--bone-2);
}

/* ----------------------------------------------------------------- LAYOUT */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.shell-wide { max-width: 1560px; margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }
.pad   { padding: clamp(72px, 10vh, 132px) 0; }
.pad-s { padding: clamp(48px, 6vh, 78px) 0; }

/* Section head: slash label left, mono aside right, heavy rule under. */
.head {
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  margin-bottom: clamp(26px, 3.4vw, 44px);
}
.head-aside {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-4);
}
@media (max-width: 700px) { .head-aside { display: none; } }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule-heavy { height: 3px; background: var(--bone); border: 0; margin: 0; }
.rule-red { height: 3px; background: var(--red); border: 0; margin: 0; }

/* ---------------------------------------------------------------- BUTTONS */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--f-mono);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 17px 26px;
  border: 1px solid transparent;
  position: relative; overflow: hidden;
  transition: background var(--t-fast) ease, color var(--t-fast) ease,
              border-color var(--t-fast) ease, transform var(--t-fast) var(--e-std);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-hot); }
/* the arrow leaves, a new one arrives — a small reward for hovering */
.btn-red .arw { transition: transform var(--t-base) var(--e-out); }
.btn-red:hover .arw { transform: translateX(4px); }

.btn-line { border-color: var(--rule-2); color: var(--bone); }
.btn-line:hover { border-color: var(--bone-3); background: rgba(255,255,255,0.045); }

.btn-bone { background: var(--bone); color: var(--ink-0); }
.btn-bone:hover { background: #fff; }

.btn-sm { padding: 11px 16px; font-size: 10.5px; letter-spacing: 0.13em; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* ------------------------------------------------------------------ PLATE */

/* Every photograph on the site sits in a plate: a square frame, corner
   registration marks, a grain pass and a scrim so type stays readable. */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  isolation: isolate;
}
.plate > img, .plate > video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.12) brightness(0.62);
  transition: transform var(--t-cine) var(--e-out), filter var(--t-base) ease;
}
.plate::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.1) 42%, rgba(8,8,10,0.9) 100%);
}
.plate-hover:hover > img { transform: scale(1.045); filter: grayscale(0.15) contrast(1.15) brightness(0.72); }

/* corner registration marks */
.reg { position: absolute; z-index: 4; width: 15px; height: 15px; border: 2px solid rgba(242,241,237,0.5); }
.reg-tl { top: 12px; left: 12px;  border-right: 0; border-bottom: 0; }
.reg-tr { top: 12px; right: 12px; border-left: 0;  border-bottom: 0; }
.reg-bl { bottom: 12px; left: 12px;  border-right: 0; border-top: 0; }
.reg-br { bottom: 12px; right: 12px; border-left: 0;  border-top: 0; }

/* The empty state of a plate. Reads as a frame awaiting a plate, not a bug. */
.plate-empty {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 14px, transparent 14px 28px),
    var(--ink-2);
}
.plate-empty span {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-5);
  text-align: center; padding: 16px; line-height: 1.8;
}
.plate:has(> img) .plate-empty, .plate:has(> video) .plate-empty { display: none; }

/* --------------------------------------------------------------- MARQUEE */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(10,12,16,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 15px 0;
}
.marquee-row { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee-row span {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: 20px; letter-spacing: 0.02em; color: var(--bone-5);
  padding: 0 26px; display: flex; align-items: center; gap: 26px;
  white-space: nowrap;
}
.marquee-row span::after {
  content: ""; width: 7px; height: 7px; background: var(--red); flex: none;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-row { animation: none; } }

/* ----------------------------------------------------------------- REVEAL */

.rv { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out); }
.rv.in { opacity: 1; transform: none; }
.rv-1 { transition-delay: 80ms; }  .rv-2 { transition-delay: 160ms; }
.rv-3 { transition-delay: 240ms; } .rv-4 { transition-delay: 320ms; }

/* headline lines rise from behind a mask */
.wipe-line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.wipe-line > span { display: block; transform: translateY(106%); transition: transform var(--t-cine) var(--e-out); }
.wipe.in .wipe-line > span { transform: none; }
.wipe.in .wipe-line:nth-child(2) > span { transition-delay: 100ms; }
.wipe.in .wipe-line:nth-child(3) > span { transition-delay: 200ms; }

/* marker strokes draw themselves on when they scroll in */
.draw path, .draw line, .draw circle, .draw ellipse, .draw polyline {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 1500ms var(--e-out);
}
.draw.in path, .draw.in line, .draw.in circle, .draw.in ellipse, .draw.in polyline { stroke-dashoffset: 0; }

/* ---------------------------------------------------------------- 3D TILT */

.stage { perspective: 1500px; }
.tilt {
  transform-style: preserve-3d;
  transition: transform var(--t-base) var(--e-out);
  transform: rotateY(calc(var(--mx,0) * 5deg)) rotateX(calc(var(--my,0) * -5deg));
}

/* ----------------------------------------------------------------- PANELS */

.panel { background: var(--ink-2); border: 1px solid var(--rule); }
.panel-hd { padding: 22px 24px; border-bottom: 1px solid var(--rule); }

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--rule-2); color: var(--bone-3);
}
.tag-red  { border-color: rgba(220,59,42,0.5); color: var(--red); background: rgba(220,59,42,0.09); }
.tag-warn { border-color: rgba(201,162,39,0.5); color: var(--down); background: rgba(201,162,39,0.09); }

/* metric bar — red is the measured value, bone is the reference */
.bar { height: 5px; background: var(--ink-4); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); transition: width 1100ms var(--e-out); }
.bar.ref i { background: var(--bone-3); }
.bar.in i { width: var(--w, 50%); }

/* ------------------------------------------------------------------ FORMS */

.field {
  width: 100%; background: var(--ink-1);
  border: 1px solid var(--rule-2);
  padding: 15px 16px; color: var(--bone);
  font-size: 15.5px;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.field::placeholder { color: var(--bone-4); }
.field:focus { outline: none; border-color: var(--red); background: var(--ink-0); }

/* -------------------------------------------------------- REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .wipe-line > span { transform: none; }
  .tilt { transform: none; }
  .draw path, .draw line, .draw circle, .draw ellipse, .draw polyline { stroke-dashoffset: 0; }
}