@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/display.ttf") format("truetype");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #0c1113;
  color: #f0f3e9;
  --accent: #c9f45b;
}

* { box-sizing: border-box; }
body { margin: 0; position: relative; isolation: isolate; }
::selection { color: #0c1113; background: var(--accent); }

.arena {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 87% 46%, #20322d 0, #14201e 28%, #0c1113 66%);
}
.arena::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0c1113 0%, #0c1113f2 27%, #0c1113b3 45%, #0c111300 70%),
    linear-gradient(0deg, #0c1113 0%, #0c111300 22%, #0c111300 76%, #0c111399 100%);
}
.arena-light {
  position: absolute;
  inset: -30%;
  background: linear-gradient(119deg, transparent 51%, #deead004 53%, #deead008 55%, transparent 58%);
}
.ice-texture {
  position: absolute;
  inset: 0;
  background: url("/assets/ice-grain.svg") repeat;
  opacity: .19;
  mix-blend-mode: soft-light;
}
.rink-scene {
  position: absolute;
  width: clamp(1000px, 80vw, 1400px);
  left: 79%;
  top: 49%;
  transform: translate(-50%, -50%) rotate(-54deg);
}
.rink { display: block; width: 100%; overflow: visible; }
.boards-outer { stroke: #adc7be; stroke-opacity: .1; stroke-width: 1; }
.boards { stroke: #b0cbbf; stroke-opacity: .38; stroke-width: 2; }
.blue-line { stroke: #8baeb5; stroke-opacity: .23; stroke-width: 6; }
.center-line { stroke: #c9f45b; stroke-opacity: .22; stroke-width: 3; stroke-dasharray: 9 7; }
.goal-line { stroke: #abc5ac; stroke-opacity: .24; stroke-width: 2; }
.rink-markings { stroke: #b6ccb9; stroke-opacity: .25; stroke-width: 1.4; }
.faceoff-dots { fill: #b6ccb9; fill-opacity: .27; }
.crease { fill: #9ac7d8; fill-opacity: .04; stroke: #9ac7d8; stroke-opacity: .3; stroke-width: 1.5; }
.net { stroke: #b6ccb9; stroke-opacity: .4; stroke-width: 2; }
.center-mark { opacity: .85; }
.rink-ticks { stroke: #b6ccb9; stroke-opacity: .25; stroke-width: 1; }

/* A passing lane opens, the puck travels, then the diagram holds and fades. */
.play { opacity: .75; animation: play-cycle 12s ease infinite both; }
.skating-route { stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 4 5; }
.passing-lane {
  stroke: var(--accent);
  stroke-opacity: .6;
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: lane-reveal 12s ease infinite both;
}
.player-ring { stroke: var(--accent); stroke-opacity: .5; stroke-width: 1; }
.player-dot { fill: var(--accent); }
.receiver { transform: translate(117px, -49px); animation: receiver-skate 12s ease infinite both; }
.defender { stroke: #d0dcd6; stroke-opacity: .6; stroke-width: 1.5; }
.defender-motion { transform: translate(-15px, -72px); animation: defender-skate 12s ease infinite both; }
.puck { fill: #f0f3e9; transform: translate(122px, 121px); animation: puck-pass 12s ease infinite both; }
.receive-flash { stroke: var(--accent); stroke-width: 1; opacity: 0; animation: receive 12s ease infinite both; }

@keyframes play-cycle {
  0%, 100% { opacity: 0; }
  10%, 76% { opacity: .75; }
  94% { opacity: 0; }
}
@keyframes lane-reveal {
  0%, 26% { stroke-dashoffset: 100; opacity: 0; }
  38% { opacity: 1; }
  46%, 76% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: .42; }
}
@keyframes receiver-skate {
  0%, 12% { transform: translate(0, 0); }
  46%, 100% { transform: translate(117px, -49px); }
}
@keyframes defender-skate {
  0%, 12% { transform: translate(0, 0); }
  40%, 100% { transform: translate(-15px, -72px); }
}
@keyframes puck-pass {
  0%, 46% { transform: translate(0, 0); }
  60%, 100% { transform: translate(122px, 121px); }
}
@keyframes receive {
  0%, 58% { opacity: 0; r: 12; }
  62% { opacity: .8; r: 16; }
  78%, 100% { opacity: 0; r: 30; }
}

.page {
  min-height: 100svh;
  max-width: 1600px;
  margin: auto;
  padding: 0 clamp(24px, 6vw, 96px);
  display: flex;
  flex-direction: column;
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0;
  border-bottom: 1px solid #d0e6d51c;
}
.wordmark {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 27px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -.4px;
}
.wordmark span { color: var(--accent); }
.edition { display: flex; align-items: center; gap: 12px; color: #a3b6ae; font-size: 10px; letter-spacing: 2px; }
.edition-mark { width: 17px; height: 17px; border: 1px solid #a3b6ae66; border-radius: 50%; position: relative; }
.edition-mark::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); inset: 6px; }

main { flex: 1; display: flex; align-items: center; padding: 100px 0 112px; }
.message { position: relative; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 32px;
  padding: 11px 23px 11px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  background: var(--accent);
  color: #192111;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  line-height: 1;
}
.status-mark { width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; position: relative; }
.status-mark::after { content: ""; position: absolute; width: 2px; height: 2px; background: currentColor; inset: 2.5px; border-radius: 50%; }

h1 {
  margin: 0;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(64px, 8.25vw, 128px);
  font-style: italic;
  font-weight: 800;
  line-height: .94;
  letter-spacing: -1.5px;
}
h1 span { display: block; white-space: nowrap; }
h1 span + span { margin-top: 10px; color: var(--accent); }
.supporting-copy { margin-top: 44px; padding-left: 22px; border-left: 2px solid var(--accent); }
h2 { margin: 0; font-size: clamp(23px, 2vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.7px; }
.description { margin: 12px 0 0; max-width: 420px; font-size: 16px; line-height: 1.65; color: #a9bbb5; }

footer {
  min-height: 69px;
  padding: 14px 0;
  border-top: 1px solid #d0e6d51c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 1.5px;
  color: #91a49a;
}

@media (min-width: 1600px) { .rink-scene { left: calc(50% + 460px); } }

@media (max-width: 900px) {
  .rink-scene { left: 88%; width: 1000px; top: 43%; }
  .arena::after { background: linear-gradient(90deg, #0c1113f2, #0c111380 60%, transparent), linear-gradient(0deg, #0c1113 3%, #0c111300 85%); }
}

@media (max-width: 600px) {
  .page { padding: 0 24px; }
  .masthead { padding: 23px 0; }
  .wordmark { font-size: 25px; }
  .edition { font-size: 8px; letter-spacing: 1.5px; max-width: 90px; line-height: 1.6; text-align: right; }
  .edition-mark { display: none; }
  main { align-items: flex-start; padding: 202px 0 66px; }
  .status { margin-bottom: 24px; padding: 10px 21px 10px 12px; font-size: 9px; letter-spacing: 1.5px; }
  h1 { font-size: clamp(45px, 12.9vw, 70px); letter-spacing: -.8px; }
  h1 span + span { margin-top: 8px; }
  .supporting-copy { margin-top: 30px; padding-left: 16px; }
  h2 { font-size: 23px; letter-spacing: -.6px; }
  .description { font-size: 14px; line-height: 1.75; margin-top: 10px; max-width: 300px; }
  .desktop-break { display: none; }
  .rink-scene { width: 680px; left: 58%; top: 238px; transform: translate(-50%, -50%) rotate(-54deg); }
  .center-mark { opacity: .7; }
  .arena { background: radial-gradient(ellipse at 100% 12%, #263b30 0, #14201e 25%, #0c1113 63%); }
  .arena::after { background: linear-gradient(0deg, #0c1113 0%, #0c1113ed 30%, #0c1113b3 54%, #0c111300 85%), linear-gradient(90deg, #0c111366, #0c111300 80%); }
  .boards { stroke-opacity: .45; }
  .rink-markings { stroke-opacity: .38; }
  .blue-line { stroke-opacity: .3; }
  footer { min-height: 65px; padding: 12px 0; font-size: 8px; letter-spacing: 1.1px; }
}

@media (max-width: 360px) {
  .page { padding: 0 20px; }
  .edition { display: none; }
  main { padding-top: 140px; padding-bottom: 50px; }
  .rink-scene { top: 186px; left: 62%; width: 580px; }
  h1 { font-size: 11.9vw; }
  h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .play, .passing-lane, .receiver, .defender-motion, .puck, .receive-flash { animation: none; }
}