/* Direction A: "Fresh sheet". The rink, seen from the bench, draws itself in. */

/* ---------- hero ---------- */
.hero-a {
  position: relative; isolation: isolate; overflow: clip;
  min-height: calc(100svh - 66px);
  display: flex; justify-content: center;
  padding: clamp(8px, 3vh, 56px) var(--gutter) clamp(220px, 30vh, 300px);
  text-align: center;
}
.hero-a .copy { position: relative; z-index: 2; width: 100%; max-width: 680px; display: flex; flex-direction: column; align-items: center; }
.hero-a .copy::before { /* soft clearing behind the type so rink lines never fight it */
  content: ''; position: absolute; z-index: -1; left: 50%; top: 42%; width: 150%; height: 120%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--bg) 55%, transparent); pointer-events: none;
}
.hero-owl { width: 52px; height: 52px; color: var(--ink); margin: 0 0 18px; animation: perch 900ms 1500ms var(--ease-out) both; }
@keyframes perch { from { opacity: 0; transform: translateY(-10px); } }

.hero-a h1 {
  margin: 0; font-family: Sora, Manrope, sans-serif; font-weight: 600;
  font-size: clamp(44px, 11.5vw, 96px); line-height: .98; letter-spacing: -.04em;
  text-wrap: balance;
}
.hero-a h1 span { display: inline-block; }
.hero-a h1 .l1 { animation: settle 1000ms 200ms var(--ease-out) both; }
.hero-a h1 .l2 { animation: settle 1000ms 340ms var(--ease-out) both; }
@keyframes settle { from { opacity: 0; transform: translateY(.18em); } }
.lede { margin: 18px auto 26px; max-width: 30em; text-wrap: balance; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55; color: var(--ink-2); animation: fadein 900ms 600ms var(--ease-out) both; }
.hero-a .signup-wrap { text-align: left; animation: fadein 900ms 760ms var(--ease-out) both; }
@keyframes fadein { from { opacity: 0; } }

/* ---------- rink stage ---------- */
.stage {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 48%);
  mask-image: linear-gradient(to bottom, transparent 4%, #000 48%);
  animation: stagein 1600ms var(--ease-out) both;
}
@media (max-width: 999px) { .stage { -webkit-mask-image: linear-gradient(to bottom, transparent 64%, #000 84%); mask-image: linear-gradient(to bottom, transparent 64%, #000 84%); } }

@keyframes stagein { from { opacity: 0; transform: translateY(40px); } }
.plane {
  --w: min(128vw, 860px);
  position: absolute; left: 50%; bottom: -2px; width: var(--w); aspect-ratio: 85 / 200;
  margin-left: calc(var(--w) / -2);
  transform-origin: 50% 100%;
  transform: perspective(1100px) rotateX(calc(61deg + var(--rx, 0deg))) rotateZ(var(--rz, 0deg));
  will-change: transform;
}

@media (min-width: 600px) and (max-width: 999px) {
  .plane { --w: min(96vw, 820px); transform: perspective(1300px) rotateX(calc(50deg + var(--rx, 0deg))) rotateZ(var(--rz, 0deg)); }
  .stage { -webkit-mask-image: linear-gradient(to bottom, transparent 44%, #000 64%); mask-image: linear-gradient(to bottom, transparent 44%, #000 64%); }
}
/* desktop: copy left, the rink turned on its corner to the right, like a camera up in the stands */
@media (min-width: 1000px) {
  .hero-a { max-width: 1440px; margin: 0 auto; justify-content: flex-start; align-items: center; text-align: left;
    min-height: min(calc(100svh - 76px), 900px); padding: 24px var(--gutter) 72px; }
  .hero-a .copy { align-items: flex-start; max-width: 640px; }
  .hero-a h1 .l2 { white-space: nowrap; }
  .rink path.mk { rotate: 34deg; } /* keep the X marks reading as X once the rink is turned */
  .hero-a .copy::before { left: 40%; }
  .hero-a h1 { font-size: clamp(60px, 6vw, 92px); }
  .lede { margin-left: 0; text-wrap: pretty; }
  .stage { -webkit-mask-image: radial-gradient(ellipse 62% 75% at 70% 52%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 75% at 70% 52%, #000 45%, transparent 100%); }
  .plane { --w: clamp(380px, 34vw, 520px); left: 69%; top: 45%; bottom: auto; margin-top: calc(var(--w) * -1.1765);
    transform-origin: 50% 50%;
    transform: perspective(1500px) rotateX(calc(54deg + var(--rx, 0deg))) rotateZ(calc(-34deg + var(--rz, 0deg))); }
}
.rink { width: 100%; height: 100%; overflow: visible; }
.rink .ln { stroke-dasharray: 1 1; animation: draw 1300ms var(--ease-io) both; }
.rink .rk { stroke: var(--ink-3); stroke-width: .42; opacity: .55; }
.rink .red { stroke: var(--paint-red); stroke-width: .42; opacity: .7; }
.rink .blue { stroke: var(--paint-blue); stroke-width: .42; opacity: .7; }
.rink .wide { stroke-width: 1.05; opacity: .5; }
.rink .t0 { animation-duration: 1800ms; }
.rink .t1 { animation-delay: 250ms; } .rink .t2 { animation-delay: 380ms; } .rink .t3 { animation-delay: 520ms; }
.rink .t4 { animation-delay: 620ms; } .rink .t5 { animation-delay: 740ms; } .rink .t6 { animation-delay: 900ms; }
.rink .fades { animation: fadein 800ms 950ms both; }
.rink .crease { fill: var(--paint-blue); opacity: .16; }
.rink .dots-red { fill: var(--paint-red); opacity: .75; }
.rink .dot-blue { fill: var(--paint-blue); }

/* coach's marker strokes */
.rink .stroke { stroke: var(--ink); stroke-width: .62; stroke-linecap: round; stroke-linejoin: round; }
.rink .dashed { stroke-dasharray: 1.6 1.4; }
.rink .hl { stroke: var(--volt); stroke-width: 3.4; stroke-linecap: round; opacity: .9; }
@media (prefers-color-scheme: light) { .rink .hl { opacity: .95; } }
.rink .mk { stroke: var(--ink); stroke-width: .62; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: mark 420ms var(--ease-out) both; }
.rink .m1 { animation-delay: 1150ms; } .rink .m2 { animation-delay: 1220ms; } .rink .m3 { animation-delay: 1290ms; }
.rink .m4 { animation-delay: 1370ms; } .rink .m5 { animation-delay: 1440ms; } .rink .m6 { animation-delay: 1510ms; }
@keyframes mark { from { opacity: 0; transform: scale(.2); } }
.rink .p1 { animation: draw 620ms 1650ms var(--ease-io) both; } .rink .p1h { animation: draw 160ms 2250ms ease-out both; }
.rink .p2 { animation: draw 620ms 1800ms var(--ease-io) both; } .rink .p2h { animation: draw 160ms 2400ms ease-out both; }
.rink .p3 { animation: draw 520ms 2250ms var(--ease-io) both; } .rink .p3h { animation: draw 150ms 2750ms ease-out both; }
.rink .p4 { animation: draw 400ms 2900ms var(--ease-out) both; } .rink .p4h { animation: draw 150ms 3280ms ease-out both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* after a signup the highlighted line glows once */
.is-joined .rink .hl { animation: none; }
.rink.cheer .hl { animation: cheer 1100ms var(--ease-out); }
@keyframes cheer { 30% { opacity: 1; stroke-width: 5.5; } }

/* ---------- bench scene ---------- */
.bench-a { position: relative; padding: 0 var(--gutter); }
.bench-pin {
  max-width: 1200px; margin: 0 auto; padding: clamp(72px, 12vh, 140px) 0;
  display: grid; gap: 40px; align-items: center;
}
.lines { margin: 0; padding: 0; list-style: none; display: grid; gap: .28em;
  font-family: Sora, Manrope, sans-serif; font-weight: 600; font-size: clamp(28px, 7.4vw, 56px); line-height: 1.06; letter-spacing: -.035em; }
.lines li { text-wrap: balance; }
.scrolly .lines li { opacity: .3; transition: opacity 500ms var(--ease-out); }
.scrolly .lines li.on { opacity: 1; }
.bench { width: 100%; height: auto; overflow: visible; }
@media (max-width: 599px) { .bench { width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); } }
.bench .floor { fill: var(--bg-2); }
.bench .ice-mark { fill: none; stroke-width: 3; opacity: .45; }
.bench .ice-mark.blue { stroke: var(--paint-blue); }
.bench .ice-mark.red { stroke: var(--paint-red); }
.bench .ice-dot { fill: var(--paint-red); opacity: .7; }
.bench .boards { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.bench .boards.thin { stroke-width: 1; opacity: .4; }
.bench .seat { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.bench .wall { stroke: var(--line); stroke-width: 1.2; }
.bench .tok-a circle { fill: var(--ink); }
.bench .tok-b circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.8; }
.bench circle { will-change: transform; }

@media (min-width: 900px) {
  .bench-a.scrolly { height: 220vh; }
  .scrolly .bench-pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; padding: 0; }
  .bench-pin { grid-template-columns: 5fr 6fr; gap: 64px; }
}
@media (max-width: 899px) {
  .bench-a.scrolly { height: 175vh; }
  .scrolly .bench-pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; padding: 48px 0; align-content: center; }
}

/* ---------- closing ---------- */
.close-a { padding: clamp(64px, 12vh, 140px) var(--gutter) clamp(72px, 12vh, 140px); text-align: center; border-top: 1px solid var(--line); max-width: 1440px; margin: 0 auto; }
.close-a h2 { margin: 0 0 28px; font-family: Sora, Manrope, sans-serif; font-weight: 600; font-size: clamp(34px, 7vw, 72px); line-height: 1; letter-spacing: -.04em; }
.btn-solo { border-radius: 14px; text-decoration: none; height: 58px; padding: 0 28px; }
.btn-solo:focus-visible { border-radius: 14px; }
.foot { border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .plane { will-change: auto; } /* wl.css collapses every animation to its end frame: the rink appears fully drawn */
}