/* Telos FM: deferred styles.
 *
 * Everything here belongs to a celebration overlay that only exists after a
 * deliberate click: the DVD Mode corner burst and the DAWNCE emoji burst.
 * Neither paints on load, so neither belongs in the critical path. index.html
 * keeps the CSS that does paint on load inline, which is why that file has no
 * render-blocking stylesheet; this one is fetched without blocking the first
 * paint (see the <link> in the page head).
 *
 * Two rules for anything added here:
 *
 * 1. Move whole features. This file is applied after index.html's inline
 *    <style>, so at equal specificity these rules win. Leaving a rule's
 *    responsive or reduced-motion override behind in index.html inverts the
 *    cascade that override was written to rely on and silently breaks it. The
 *    media queries at the bottom of this file came across for exactly that
 *    reason.
 * 2. Nothing visible before a click. A rule that affects the loaded page would
 *    apply a frame late here, which is a flash of restyled content.
 *
 * Served immutable for a year, so bump the ?v= query on the <link> in
 * index.html in the same commit that changes this file, or nobody sees it.
 */

/* DVD Mode's corner-hit celebration. */
.dvd-corner-celebration {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(189, 145, 255, 0.18), transparent 46%);
}
.dvd-corner-celebration strong {
  position: relative;
  z-index: 2;
  padding: 13px 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(9, 6, 14, 0.9);
  color: var(--ink);
  box-shadow: 0 0 34px rgba(189, 145, 255, 0.42), 0 16px 44px rgba(0, 0, 0, 0.45);
  font-size: clamp(1rem, 4vw, 1.45rem);
  font-weight: 880;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}
.dvd-firework {
  position: absolute;
  top: 38%;
  left: 24%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  box-shadow:
    0 -82px 0 #f6d365,
    58px -58px 0 #bd91ff,
    82px 0 0 #68d5d9,
    58px 58px 0 #ffad91,
    0 82px 0 #8ee6b2,
    -58px 58px 0 #9fb8ff,
    -82px 0 0 #f6d365,
    -58px -58px 0 #ffad91;
  transform: scale(0.12);
}
.dvd-firework-right {
  top: 58%;
  left: 76%;
}
.dvd-corner-celebration.is-active {
  animation: dvd-celebration-shell 2200ms ease-out both;
}
.dvd-corner-celebration.is-active strong {
  animation: dvd-corner-message 2200ms ease-out both;
}
.dvd-corner-celebration.is-active .dvd-firework {
  animation: dvd-firework-burst 1050ms ease-out both;
}
.dvd-corner-celebration.is-active .dvd-firework-right {
  animation-delay: 120ms;
}
@keyframes dvd-celebration-shell {
  0% { opacity: 0; }
  10%, 72% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dvd-corner-message {
  0% { opacity: 0; transform: scale(0.72); }
  14% { opacity: 1; transform: scale(1.06); }
  24%, 74% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.96); }
}
@keyframes dvd-firework-burst {
  0% { opacity: 0; transform: scale(0.12) rotate(0deg); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.18) rotate(18deg); }
}

/* The lit card only exists while DVD Mode is running. `.dvd-toggle` itself is
   a visible control on load and stays inline in index.html. */
.player-card.dvd-mode-active {
  border-color: var(--dvd-accent, #bd91ff);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--dvd-accent, #bd91ff) 40%, transparent),
    0 0 34px color-mix(in srgb, var(--dvd-accent, #bd91ff) 34%, transparent),
    0 28px 90px rgba(0, 0, 0, 0.54);
  will-change: transform;
}
.player-card.dvd-mode-active::before {
  background: color-mix(in srgb, var(--dvd-accent, #bd91ff) 24%, transparent);
}

/* DAWNCE's particle field. The hero button that starts it is styled inline. */
.dawnce-overlay {
  position: fixed;
  z-index: 10004;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.dawnce-particle {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1em;
  height: 1em;
  opacity: 0;
  line-height: 1;
  text-align: center;
  transform-origin: center;
  will-change: transform, opacity;
  /* Safari and iOS Safari still need the prefix, and without it a two-finger
     drag mid-burst selects the emoji instead of scrolling past them. */
  -webkit-user-select: none;
  user-select: none;
}

/* Reduced motion holds both celebrations still rather than suppressing them:
   the message and its glow still appear, only the travel is removed. */
@media (prefers-reduced-motion: reduce) {
  .dvd-corner-celebration.is-active,
  .dvd-corner-celebration.is-active strong,
  .dvd-corner-celebration.is-active .dvd-firework {
    animation: none;
  }
  .dvd-corner-celebration.is-active { opacity: 1; }
  .dvd-corner-celebration.is-active strong { opacity: 1; transform: none; }
  .dvd-corner-celebration.is-active .dvd-firework { display: none; }
  .dawnce-particle { will-change: opacity, transform; }
}