/* CrossCurrent Racing — global page styles + custom animations
   (beacon pulse, waveform, reel cross-fade). Layered on top of the DS tokens. */

html, body { margin: 0; background: var(--cc-canvas); }
body {
  font-family: var(--font-body);
  color: var(--cc-body);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

a { color: var(--cc-red); text-decoration: none; }
a:hover { color: var(--cc-cyan); }

img { display: block; }

/* ---- Discord "team radio" beacon ---- */
.cc-beacon-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cc-red);
  box-shadow: 0 0 0 0 rgba(224,31,38,0.55);
  animation: cc-pulse 1.8s var(--ease-standard) infinite;
}
@keyframes cc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224,31,38,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(224,31,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(224,31,38,0); }
}

.cc-wave-bar {
  flex: 1;
  min-width: 2px;
  background: linear-gradient(180deg, var(--cc-cyan), var(--cc-blue) 60%, var(--cc-red));
  height: 30%;
  transform-origin: bottom;
  animation: cc-wave 1.1s var(--ease-standard) infinite;
}
@keyframes cc-wave {
  0%, 100% { height: 22%; opacity: 0.55; }
  50%      { height: 100%; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-beacon-dot, .cc-wave-bar { animation: none; }
  .cc-wave-bar { height: 60%; }
}

/* ---- Gallery reel cross-fade ---- */
.cc-reel-frame {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-standard);
  pointer-events: none;
}
.cc-reel-frame[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* image-slot should sit flush on the black canvas */
image-slot { --slot-bg: var(--cc-surface-soft); }

/* Reveal-on-load for hero content */
@media (prefers-reduced-motion: no-preference) {
  .cc-rise { opacity: 0; transform: translateY(16px); animation: cc-rise 620ms var(--ease-standard) forwards; }
  @keyframes cc-rise { to { opacity: 1; transform: none; } }
}