/*
 * 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. Rendered as an overlay layered ABOVE the video iframes
 * (iframes paint in their own layer, so an inset shadow on the wall itself is hidden
 * behind them). The overlay is a sibling above the quadrants via z-index. */
.lv-flash-overlay { position: absolute; inset: 0; z-index: 40; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
@keyframes lv-flash-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); background: transparent; }
  50%      { box-shadow: inset 0 0 0 2.5vh rgba(255,255,255,0.95); background: rgba(255,255,255,0.10); }
}
[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; }
@media (prefers-reduced-motion: reduce) { .lv-llama-recede, .lv-qr-rise { animation-duration: 0.01ms; } }