/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Display wall halo-flash. An overlay layered ABOVE the video iframes (iframes paint
 * in their own layer, so an inset shadow on the wall itself would hide behind them).
 * The halo is a RED bar on each edge that is fully opaque AT the edge and fades to
 * transparent toward the center, so the videos stay visible through the middle.
 * Tune the two custom properties to taste:
 *   --lv-flash-color : halo colour as "R, G, B"
 *   --lv-flash-width : how far the bar reaches inward from each edge */
.lv-flash-overlay {
  --lv-flash-color: 220, 38, 38; /* red */
  --lv-flash-width: 14vh;        /* wider than the old 2.5vh bar */
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom, rgba(var(--lv-flash-color), 0.95), rgba(var(--lv-flash-color), 0) var(--lv-flash-width)),
    linear-gradient(to top,    rgba(var(--lv-flash-color), 0.95), rgba(var(--lv-flash-color), 0) var(--lv-flash-width)),
    linear-gradient(to right,  rgba(var(--lv-flash-color), 0.95), rgba(var(--lv-flash-color), 0) var(--lv-flash-width)),
    linear-gradient(to left,   rgba(var(--lv-flash-color), 0.95), rgba(var(--lv-flash-color), 0) var(--lv-flash-width));
}
@keyframes lv-flash-pulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
[data-status="flash"] .lv-flash-overlay { animation: lv-flash-pulse 0.6s ease-in-out infinite; }

/* Reveal winner-replay player fills the screen. */
[data-reveal-target="mount"] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Idle "scan to vote" intro: the llama fills the screen and holds ~15s, then recedes
 * to a small header as the QR rises huge in front. The llama is moved clear of the QR
 * (not behind it) so the code stays high-contrast and scannable from across a stadium.
 * Pure CSS (animation-delay + fill-mode: both) — no JS, no timing drift; the resting
 * state is "QR shown", so anyone arriving after the intro still sees the code. */
@keyframes lv-llama-recede {
  0%   { transform: translateY(0) scale(1);        opacity: 1; }
  100% { transform: translateY(-39vh) scale(0.24); opacity: 0.92; }
}
@keyframes lv-qr-rise {
  0%   { transform: scale(0.55); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
.lv-llama-recede { animation: lv-llama-recede 1.6s cubic-bezier(.2,.7,.2,1) 15s both; transform-origin: center center; }
.lv-qr-rise      { animation: lv-qr-rise 1.4s cubic-bezier(.2,.7,.2,1) 15.2s both; }

/* Per-bracket opening ("intro" state): the scan-to-vote QR rises with the SAME
 * lv-qr-rise animation as the launch idle screen, but right away (no 15s llama
 * hold) so it doesn't drag across many brackets. It then holds for the rest of
 * the intro pause; lengthen that pause via the tournament's intro_seconds. */
.lv-intro-qr     { animation: lv-qr-rise 1.4s cubic-bezier(.2,.7,.2,1) 0.2s both; }
@media (prefers-reduced-motion: reduce) { .lv-llama-recede, .lv-qr-rise, .lv-intro-qr { animation-duration: 0.01ms; } }