/*
 * 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.
 */

/* Opening Ceremony fade-in */
.animate-fade-in {
  animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Vinyl Reveal flip */
.vinyl-flipping {
  animation: vinyl-flip 0.3s ease-in-out;
}

@keyframes vinyl-flip {
  0%   { transform: perspective(800px) rotateY(0deg); }
  50%  { transform: perspective(800px) rotateY(90deg); }
  100% { transform: perspective(800px) rotateY(0deg); }
}

/* Persistent now-playing bar */
.now-playing-bar {
  transition: transform 0.2s ease;
}

.now-playing-spacer {
  transition: height 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in { animation: none; }
  .vinyl-flipping { animation: none; }
  .now-playing-bar { transition: none; }
  .now-playing-spacer { transition: none; }
}

/* ==================== */
/* Icon Animations       */
/* ==================== */

/* Reaction button press */
.reaction-btn { transition: transform 100ms ease-out; }
.reaction-btn:active { transform: scale(0.9); }

/* Reaction active state (overshoot spring) */
.reaction-btn--active {
  transform: scale(1.1);
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Badge unlock pulse */
@keyframes badge-unlock {
  0% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.badge-unlock {
  animation: badge-unlock 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Badge tier glow */
.badge-tier-gold {
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.3));
}

.badge-tier-platinum {
  filter: drop-shadow(0 0 4px rgba(252, 211, 77, 0.4));
}

/* Skip button jolt */
.skip-btn:active svg {
  transform: translateX(3px);
  transition: transform 100ms ease-out;
}

/* Nav arrow hover hints */
.nav-arrow-left:hover svg {
  transform: translateX(-2px);
  transition: transform 215ms ease-out;
}

.nav-arrow-right:hover svg {
  transform: translateX(2px);
  transition: transform 215ms ease-out;
}

/* Focus indicators for icon buttons */
.reaction-btn:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 9999px;
}

/* Reduced motion: icon animations */
@media (prefers-reduced-motion: reduce) {
  .reaction-btn,
  .reaction-btn:active,
  .reaction-btn--active,
  .badge-unlock,
  .skip-btn:active svg,
  .nav-arrow-left:hover svg,
  .nav-arrow-right:hover svg {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}