/* Reset, typography, and the floor behind everything. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--deep-0);
  color: var(--text);
  font: 400 1.0625rem/1.5 var(--font-ui);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* One typeface for everything; titles are its heaviest weight. */
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

h2,
h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* The stage, behind everything: a dark house, a burgundy glow (or the light of day you chose) high in the middle, and a darker foot so
   type stays readable. Nothing is drawn on it. */

.rink-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--floor);
}

.sp {
  fill: var(--cream);
  filter: drop-shadow(0 0 5px rgba(255, 217, 138, 0.9));
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.55);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Readability first. Type sits on the dark stage, and people who ask for more contrast or less transparency
   (in their device settings or in the app) get solid, brighter surfaces and plain edges. */

/* On the Skate screen the phone may be running on battery for an hour, so nothing twinkles. */
[data-route="skate"] .sp {
  animation: none;
  opacity: 0.7;
  filter: none;
}

@media (prefers-contrast: more) {
  :root {
    --text-dim: var(--navy);
    --text-faint: var(--navy-2);
    --mute: var(--navy-2);
    --line: #7e93ab;
    --line-soft: #9fb2c6;
    --floor: #ffffff;
  }
}

:root[data-contrast="high"] {
  --text-dim: var(--navy);
  --text-faint: var(--navy-2);
  --mute: var(--navy-2);
  --line: #7e93ab;
  --line-soft: #9fb2c6;
  --floor: #ffffff;
  --navy: #000c24;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .sp {
    opacity: 0.8;
  }
}

/* Text for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}