@keyframes orbDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 0.75;
  }
  25% {
    transform: translate3d(90px, -60px, 0) scale(1.15) rotate(12deg);
    opacity: 1;
  }
  50% {
    transform: translate3d(-70px, 80px, 0) scale(0.88) rotate(-10deg);
    opacity: 0.7;
  }
  75% {
    transform: translate3d(60px, 40px, 0) scale(1.12) rotate(8deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(-40px, -30px, 0) scale(0.95) rotate(-6deg);
    opacity: 0.8;
  }
}

@keyframes wordFall {
  0% {
    transform: translateX(-50%) translateY(-120px) rotate(-14deg) scale(0.7);
    opacity: 0;
    letter-spacing: 0.18em;
    filter: blur(12px);
  }
  20% {
    opacity: 1;
    filter: blur(0);
  }
  70% {
    transform: translateX(-50%) translateY(calc(30vh + 20px)) rotate(8deg) scale(1.06);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(calc(52vh + 120px)) rotate(-4deg) scale(0.96);
    opacity: 0.92;
  }
}

@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.7) rotate(-8deg);
    filter: blur(14px);
  }
  60% {
    opacity: 1;
    transform: translateY(-8px) scale(1.08) rotate(2deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 0 rgba(245, 200, 66, 0.45),
      0 0 18px rgba(245, 200, 66, 0.35);
  }
  50% {
    transform: translateY(-4px) scale(1.08);
    box-shadow:
      0 0 0 14px rgba(245, 200, 66, 0.08),
      0 0 36px rgba(245, 200, 66, 0.6);
  }
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(-18%);
  }
  50% {
    transform: translateX(-22%);
  }
  95% {
    transform: translateX(-48%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-22px) scale(0.94);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: translateY(4px) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes toastIn {
  0% {
    transform: translateY(30px) scale(0.82);
    opacity: 0;
    filter: blur(10px);
  }
  70% {
    transform: translateY(-6px) scale(1.03);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes toastOut {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(-18px) scale(0.9);
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes voteRipple {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(245, 200, 66, 0.65),
      0 0 0 0 rgba(245, 200, 66, 0.25);
  }
  35% {
    transform: scale(1.08);
    box-shadow:
      0 0 0 14px rgba(245, 200, 66, 0.18),
      0 0 0 26px rgba(245, 200, 66, 0.1);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 28px rgba(245, 200, 66, 0),
      0 0 0 48px rgba(245, 200, 66, 0);
  }
}

@keyframes revealPop {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.88) rotate(-2deg);
    filter: blur(12px);
  }
  65% {
    opacity: 1;
    transform: translateY(-6px) scale(1.02) rotate(0.5deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
    filter: blur(0);
  }
}

@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

@keyframes cardHoverFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.orb {
  animation: orbDrift 10s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.orb--1 {
  animation-duration: 11s;
}

.orb--2 {
  animation-duration: 8s;
  animation-delay: -3s;
}

.orb--3 {
  animation-duration: 13s;
  animation-delay: -1.5s;
}

.featured-track.is-animated {
  animation: marqueeScroll 12s linear infinite;
  will-change: transform;
}

.vote-button {
  animation: glowPulse 0.95s ease-in-out infinite;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
  will-change: transform, box-shadow;
}

.vote-button:hover {
  transform: translateY(-4px) scale(1.08);
  filter: brightness(1.04);
}

.vote-button:active {
  transform: translateY(0) scale(0.97);
}

.field-error {
  animation:
    slideInDown 280ms cubic-bezier(0.22, 1, 0.36, 1),
    errorShake 360ms ease 1;
}

.toast {
  animation: toastIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.js-reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  filter: blur(12px);
}

.js-reveal.revealed {
  animation: revealPop 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.result-bar__fill.is-visible {
  transition: width 1100ms cubic-bezier(0.2, 0.9, 0.2, 1.1);
}

.vote-card {
  transition: transform 240ms ease, box-shadow 240ms ease, filter 240ms ease;
}

.vote-card:hover {
  transform: translateY(-8px) scale(1.02);
}

.vote-card.is-voted {
  animation: voteRipple 900ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal,
  .js-reveal.revealed {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
}

/* =========================================
   DARK BACKGROUND SUPPORT
   Softens animated background effects so text stays readable.
   ========================================= */
.orb {
  animation-duration: 16s !important;
  opacity: 0.18 !important;
}

.orb--1,
.orb--2,
.orb--3 {
  opacity: 0.12 !important;
}

@media (max-width: 1024px) {
  .orb {
    opacity: 0.08 !important;
  }
}


/* =========================================
   ENHANCED MICRO-INTERACTIONS
   Adds tasteful motion across the public site.
   ========================================= */
@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes shimmerSweep {
  0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  20% { opacity: 0.55; }
  100% { transform: translateX(240%) skewX(-18deg); opacity: 0; }
}

.site-header {
  animation: slideInDown 580ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-brand img,
.nominee-logo,
.nominee-logo img {
  transform-origin: center;
  transition: transform 280ms ease, filter 280ms ease;
}

.site-brand:hover img {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 12px 18px rgba(122, 15, 22, 0.22));
}

.status-pill,
.countdown__item,
.category-browser__toolbar,
.search-results-panel,
.glass-panel,
.modal-panel,
.auth-shell,
.featured-card,
.nominee-card,
.vote-card,
.category-accordion__item,
.vote-category-section {
  transition:
    transform 260ms ease,
    box-shadow 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    filter 260ms ease;
  will-change: transform;
}

.status-pill:hover,
.countdown__item:hover,
.category-browser__toolbar:hover,
.search-results-panel:hover,
.glass-panel:hover,
.modal-panel:hover,
.auth-shell:hover,
.featured-card:hover,
.nominee-card:hover,
.vote-card:hover,
.category-accordion__item:hover,
.vote-category-section:hover {
  transform: translateY(-4px);
}

.countdown__item:hover,
.category-browser__toolbar:hover,
.search-results-panel:hover,
.glass-panel:hover,
.modal-panel:hover,
.auth-shell:hover,
.category-accordion__item:hover,
.vote-category-section:hover {
  box-shadow: 0 18px 40px rgba(4, 10, 28, 0.18);
}

.featured-card:hover,
.nominee-card:hover,
.vote-card:hover {
  box-shadow: 0 22px 46px rgba(4, 10, 28, 0.22);
}

.featured-card,
.nominee-card,
.vote-card,
.vote-button,
.button--primary {
  position: relative;
  overflow: hidden;
}

.featured-card::after,
.nominee-card::after,
.vote-card::after,
.vote-button::after,
.button--primary::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -25%;
  width: 36%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  opacity: 0;
}

.featured-card:hover::after,
.nominee-card:hover::after,
.vote-card:hover::after,
.vote-button:hover::after,
.button--primary:hover::after {
  animation: shimmerSweep 850ms ease;
}

.featured-card:hover .featured-card__content,
.nominee-card:hover .nominee-card__content,
.vote-card:hover .vote-card__content {
  transform: translateY(-2px);
}

.nominee-card:hover .nominee-logo,
.nominee-card:hover .nominee-logo img,
.featured-card:hover .nominee-logo,
.vote-card:hover .nominee-logo {
  transform: scale(1.06);
}

.category-accordion__item.is-open {
  box-shadow: 0 22px 44px rgba(4, 10, 28, 0.18);
}

.category-accordion__trigger:hover .category-accordion__name {
  transform: translateX(4px);
}

.category-accordion__name,
.featured-card__content,
.nominee-card__content,
.vote-card__content {
  transition: transform 260ms ease;
}

.search-input,
.input,
.otp-input {
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, background-color 220ms ease;
}

.search-input:focus,
.input:focus,
.otp-input:focus {
  transform: translateY(-1px);
}

.modal-backdrop.is-open .modal-panel {
  animation: slideInDown 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero .countdown__item:nth-child(2n) {
  animation: softFloat 5.5s ease-in-out infinite;
}

.hero .countdown__item:nth-child(2n + 1) {
  animation: softFloat 6.5s ease-in-out infinite;
}

.js-reveal.revealed {
  animation-delay: var(--reveal-delay, 0ms);
}

.auth-shell,
.glass-panel--heavy {
  animation: slideInDown 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .auth-shell,
  .glass-panel--heavy,
  .hero .countdown__item:nth-child(2n),
  .hero .countdown__item:nth-child(2n + 1) {
    animation: none !important;
  }

  .status-pill:hover,
  .countdown__item:hover,
  .category-browser__toolbar:hover,
  .search-results-panel:hover,
  .glass-panel:hover,
  .modal-panel:hover,
  .auth-shell:hover,
  .featured-card:hover,
  .nominee-card:hover,
  .vote-card:hover,
  .category-accordion__item:hover,
  .vote-category-section:hover,
  .site-brand:hover img {
    transform: none !important;
  }

  .featured-card::after,
  .nominee-card::after,
  .vote-card::after,
  .vote-button::after,
  .button--primary::after {
    display: none !important;
  }
}


/* =========================================
   DYNAMIC BACKGROUND TRANSITIONS
   Makes the backdrop feel more alive and visible
   without distracting from voting content.
   ========================================= */
@keyframes ambientBackgroundShift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 16% 8%, 84% 14%, 48% 88%, 54% 44%;
    filter: hue-rotate(10deg);
  }
  100% {
    background-position: 6% 14%, 92% 6%, 58% 84%, 46% 58%;
    filter: hue-rotate(0deg);
  }
}

@keyframes ambientRibbonSweep {
  0% {
    transform: translate3d(-8%, -6%, 0) rotate(0deg) scale(1.02);
    opacity: 0.45;
  }
  50% {
    transform: translate3d(6%, 4%, 0) rotate(10deg) scale(1.08);
    opacity: 0.72;
  }
  100% {
    transform: translate3d(-4%, 8%, 0) rotate(-8deg) scale(1.04);
    opacity: 0.52;
  }
}

@keyframes ambientGridDrift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.16;
  }
  50% {
    transform: translate3d(-22px, 16px, 0);
    opacity: 0.28;
  }
  100% {
    transform: translate3d(-44px, 32px, 0);
    opacity: 0.18;
  }
}

@keyframes ambientLightSweep {
  0% {
    transform: translate3d(-12%, 0, 0) skewX(-16deg);
    opacity: 0.06;
  }
  50% {
    opacity: 0.16;
  }
  100% {
    transform: translate3d(18%, 0, 0) skewX(-16deg);
    opacity: 0.08;
  }
}

body {
  background-image:
    radial-gradient(circle at 12% 16%, rgba(122, 15, 22, 0.16), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(245, 200, 66, 0.1), transparent 20%),
    radial-gradient(circle at 50% 82%, rgba(59, 130, 246, 0.12), transparent 26%),
    linear-gradient(180deg, #030406 0%, #020305 42%, #010203 100%) !important;
  background-size: 160% 160%, 160% 160%, 180% 180%, 100% 100%;
  animation: ambientBackgroundShift 22s ease-in-out infinite alternate;
}

body::before {
  background:
    linear-gradient(180deg, rgba(1, 3, 6, 0.08) 0%, rgba(1, 3, 6, 0.18) 100%) !important;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 20%, rgba(255, 255, 255, 0.12) 48%, transparent 74%);
  mix-blend-mode: soft-light;
  animation: ambientLightSweep 12s ease-in-out infinite alternate;
}

.ambient-bg {
  opacity: 0.95;
  isolation: isolate;
}

.ambient-bg::before,
.ambient-bg::after {
  content: '';
  position: absolute;
  inset: -12%;
  pointer-events: none;
}

.ambient-bg::before {
  background:
    radial-gradient(circle at 14% 18%, rgba(122, 15, 22, 0.38), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(245, 200, 66, 0.28), transparent 16%),
    radial-gradient(circle at 52% 78%, rgba(59, 130, 246, 0.28), transparent 24%),
    linear-gradient(135deg, transparent 24%, rgba(255, 255, 255, 0.12) 48%, transparent 70%);
  filter: blur(42px);
  mix-blend-mode: screen;
  animation: ambientRibbonSweep 16s ease-in-out infinite alternate;
}

.ambient-bg::after {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 130px 130px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.96), transparent 82%);
  animation: ambientGridDrift 18s linear infinite;
  mix-blend-mode: normal;
}

.orb {
  filter: blur(120px) !important;
  opacity: 0.18 !important;
}

.orb--1 {
  opacity: 0.22 !important;
}

.orb--2 {
  opacity: 0.12 !important;
}

.orb--3 {
  opacity: 0.20 !important;
}

.particles-layer {
  opacity: 0.30 !important;
  filter: blur(0.25px) brightness(0.95);
}

@media (prefers-reduced-motion: reduce) {
  body,
  body::after,
  .ambient-bg::before,
  .ambient-bg::after {
    animation: none !important;
  }
}