/* SLOP. one face, one weight, three colours, one box. type + surfaces per 05, colour per 08_LOOK */

@font-face {
  font-family: 'Lil Grotesk';
  src: url('/assets/vendor/fonts/lil-grotesk-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lil Grotesk fallback';
  src: local('Arial Bold'), local('Arial');
  font-weight: 700;
  size-adjust: 107%;
  ascent-override: 93%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

:root {
  /* colour: the banner's own green is the ground, the words are ink, the sun in him is the accent */
  --ground: #01d738;
  --ink: #ffffff;
  --accent: #ff7a1a;
  --dark: oklch(from var(--ground) 0.32 calc(c * 0.55) h);
  --ground-2: color-mix(in oklch, var(--ground), var(--ink) 7%);
  --ink-2: color-mix(in oklch, var(--ink), var(--ground) 45%);
  --glow: color-mix(in oklch, var(--ink), var(--ground) 30%);
  --scrim: oklch(from var(--dark) l c h / .55);

  /* type: ratio 1.2 on the small steps, the hero is the ticker and it jumps */
  --t-hero: clamp(36px, 4.4vw, 60px);
  --t-head: clamp(17px, 1.35vw, 19px);
  --t-body: clamp(14px, 1.1vw, 15.8px);
  --t-label: clamp(12px, 3.3vw, 13.2px);
  --t-micro: 11px;
  --word: clamp(19px, 1.8vw, 26px); /* the flood's word size, the canvas reads it */
  --track-caps: .08em;
  --track-hero: -.02em;

  /* surface: roll 3. hard 3px edge, zero radius, offset shadow at zero blur, one system */
  --surface-0: var(--ground);
  --surface-1: var(--ink);
  --surface-2: var(--accent);
  --edge: 3px solid var(--dark);
  --pad: 12px;
  --radius: 0px;
  --radius-inner: 0px;
  --lift-1: 6px 6px 0 var(--dark);
  --lift-2: 10px 10px 0 var(--dark);
  --lift-hover: 3px 3px 0 var(--dark);
  --z-page: 0;
  --z-him: 5;
  --z-chrome: 10;

  --margin: clamp(16px, 2.2vw, 32px);
  --gap: 10px;
  --btn: clamp(96px, 12.5vw, 176px);
  --plate-h: 94px;
  --him-h: min(600px, 68vh);
  --dur: 180ms;
  --ease: cubic-bezier(.2, .9, .3, 1.15);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: 'Lil Grotesk', 'Lil Grotesk fallback', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--t-body);
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  cursor: url('/assets/cursor.png') 3 3, auto;
}
h1, h2, h3, .shout { text-wrap: balance; }
p, li { text-wrap: pretty; }
a, button { cursor: url('/assets/cursor-hot.png') 3 3, pointer; }

#flood {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: var(--z-page);
}

/* him: the cutout is the mask and the picture at once, so the scene inside him can drift */
.him {
  position: fixed;
  left: 50%;
  bottom: calc(var(--margin) + var(--plate-h) - 6px);
  height: var(--him-h);
  aspect-ratio: 524 / 1540;
  transform: translateX(-50%);
  z-index: var(--z-him);
  filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 26px var(--glow));
  animation: breathe 5s ease-in-out infinite;
  pointer-events: none;
}
.him-in {
  width: 100%;
  height: 100%;
  -webkit-mask: url('/assets/him-2.webp') center / 100% 100% no-repeat;
  mask: url('/assets/him-2.webp') center / 100% 100% no-repeat;
  background: url('/assets/him-2.webp') 42% 46% / 108% 108% no-repeat;
  animation: window 16s ease-in-out infinite alternate;
}
.him.hit { animation: flash var(--dur) var(--ease) 1; }
@keyframes window {
  from { background-position: 40% 44%; }
  to { background-position: 60% 56%; }
}
@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 26px var(--glow)); }
  50% { filter: drop-shadow(0 0 14px var(--glow)) drop-shadow(0 0 40px var(--glow)); }
}
@keyframes flash {
  50% { filter: drop-shadow(0 0 18px var(--ink)) drop-shadow(0 0 60px var(--ink)); }
}

/* the plinth he stands on: the ticker and the contract, the one accent surface */
.plate {
  position: fixed;
  left: 50%;
  bottom: var(--margin);
  transform: translateX(-50%);
  width: min(480px, calc(100% - 2 * var(--margin)));
  height: var(--plate-h);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  padding: calc(var(--pad) / 2) var(--pad);
  background: var(--surface-2);
  color: var(--dark);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
  font: inherit;
  z-index: var(--z-chrome);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur);
}
.plate:hover { transform: translate(calc(-50% + 3px), 3px); box-shadow: var(--lift-hover); }
.plate:active { transform: translate(calc(-50% + 6px), 6px); box-shadow: none; }
.plate.copied { background: var(--surface-1); }
.tick {
  font-size: var(--t-hero);
  line-height: .95;
  letter-spacing: var(--track-hero);
}
.ca {
  font-size: var(--t-label);
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

/* the two big buttons, floating in the corner. the mark on the centre, its label under it */
.corner {
  position: fixed;
  right: var(--margin);
  bottom: var(--margin);
  display: grid;
  gap: calc(var(--gap) + 6px);
  z-index: var(--z-chrome);
}
.btn {
  width: var(--btn);
  height: var(--btn);
  display: grid;
  place-items: center;
  align-content: center;
  gap: calc(var(--gap) / 2);
  background: var(--surface-1);
  color: var(--dark);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--lift-1);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--t-label);
  line-height: 1.1;
  letter-spacing: var(--track-caps);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur);
}
.btn img { width: 76%; height: auto; display: block; }
.btn:hover { transform: translate(3px, 3px); box-shadow: var(--lift-hover); }
.btn:active { transform: translate(6px, 6px); box-shadow: none; }
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.plate:focus-visible, .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.floor {
  position: fixed;
  left: 50%;
  top: var(--margin);
  transform: translateX(-50%);
  color: var(--ink);
  font-size: var(--t-body);
  z-index: var(--z-chrome);
}

/* 390 is its own drawing: he is shorter, the plinth spans the width, the buttons sit above it */
@media (max-width: 720px) {
  :root { --plate-h: 70px; --him-h: min(440px, 52vh); }
  .corner { bottom: calc(var(--margin) + var(--plate-h) + var(--gap) + 6px); }
  .plate { padding: calc(var(--pad) / 2) calc(var(--pad) / 2); }
}

@media (prefers-reduced-motion: reduce) {
  .him, .him-in, .him.hit { animation: none; }
  .plate, .btn { transition: none; }
}