/* Shared AURA header: still artwork + gold light waves + gold particles */

.aura-header {
    position: relative;
    width: 100%;
    height: 172px;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
}

.aura-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #000;
}

.aura-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.waves {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.wave {
    position: absolute;
    height: 100%;
    opacity: 0.6;
    mix-blend-mode: screen;
    filter: blur(0.8px);
}

.wave-left {
    left: -40%;
    width: 90%;
    background:
        radial-gradient(ellipse at 40% 50%, rgba(255, 200, 80, 0.18) 0%, transparent 55%),
        linear-gradient(95deg, transparent 10%, rgba(255, 190, 50, 0.22) 35%, transparent 65%);
    animation: flowLeft 16s ease-in-out infinite;
}

.wave-right {
    right: -40%;
    width: 90%;
    background:
        radial-gradient(ellipse at 60% 50%, rgba(255, 200, 80, 0.18) 0%, transparent 55%),
        linear-gradient(265deg, transparent 10%, rgba(255, 190, 50, 0.22) 35%, transparent 65%);
    animation: flowRight 19s ease-in-out infinite;
}

.wave-center {
    left: 0;
    width: 100%;
    background: radial-gradient(ellipse at center, rgba(255, 210, 100, 0.13) 0%, transparent 58%);
    animation: pulse 7s ease-in-out infinite;
}

@keyframes flowLeft {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(7%) scaleY(1.06); }
}

@keyframes flowRight {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(-7%) scaleY(1.06); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.07); }
}

.particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffe27a;
    border-radius: 50%;
    box-shadow: 0 0 12px 3px rgba(255, 210, 80, 0.95);
    animation: particle 13s linear infinite;
    opacity: 0;
}

.particles span:nth-child(1) { left: 5%; top: 78%; width: 2.6px; height: 2.6px; animation-duration: 14.8s; animation-delay: 0.2s; }
.particles span:nth-child(2) { left: 11%; top: 16%; width: 4.2px; height: 4.2px; animation-duration: 11.6s; animation-delay: 1.4s; }
.particles span:nth-child(3) { left: 17%; top: 64%; width: 3.2px; height: 3.2px; animation-duration: 16.2s; animation-delay: 3.1s; }
.particles span:nth-child(4) { left: 8%; top: 42%; width: 5.4px; height: 5.4px; animation-duration: 12.4s; animation-delay: 0.8s; animation-name: particle, particleGlow; animation-duration: 12.4s, 5.2s; }
.particles span:nth-child(5) { left: 23%; top: 8%; width: 2.8px; height: 2.8px; animation-duration: 13.8s; animation-delay: 4.6s; }
.particles span:nth-child(6) { left: 21%; top: 88%; width: 4.6px; height: 4.6px; animation-duration: 10.8s; animation-delay: 2.2s; }
.particles span:nth-child(7) { left: 31%; top: 72%; width: 3.4px; height: 3.4px; animation-duration: 15.4s; animation-delay: 6.1s; }
.particles span:nth-child(8) { left: 4%; top: 28%; width: 2.4px; height: 2.4px; animation-duration: 17.1s; animation-delay: 1.1s; }
.particles span:nth-child(9) { left: 68%; top: 12%; width: 5.8px; height: 5.8px; animation-duration: 11.2s; animation-delay: 0.4s; animation-name: particle, particleGlow; animation-duration: 11.2s, 4.6s; }
.particles span:nth-child(10) { left: 74%; top: 46%; width: 3px; height: 3px; animation-duration: 14.2s; animation-delay: 5.5s; }
.particles span:nth-child(11) { left: 82%; top: 20%; width: 4.4px; height: 4.4px; animation-duration: 13.1s; animation-delay: 2.8s; }
.particles span:nth-child(12) { left: 88%; top: 70%; width: 3.6px; height: 3.6px; animation-duration: 16.6s; animation-delay: 7.2s; }
.particles span:nth-child(13) { left: 94%; top: 34%; width: 2.6px; height: 2.6px; animation-duration: 12.8s; animation-delay: 1.9s; }
.particles span:nth-child(14) { left: 78%; top: 84%; width: 6.2px; height: 6.2px; animation-duration: 10.4s; animation-delay: 3.8s; }
.particles span:nth-child(15) { left: 64%; top: 78%; width: 3.2px; height: 3.2px; animation-duration: 15.8s; animation-delay: 0.6s; }
.particles span:nth-child(16) { left: 92%; top: 8%; width: 4px; height: 4px; animation-duration: 13.6s; animation-delay: 4.1s; }
.particles span:nth-child(17) { left: 14%; top: 52%; width: 2.8px; height: 2.8px; animation-duration: 18.2s; animation-delay: 8.4s; }
.particles span:nth-child(18) { left: 27%; top: 26%; width: 4.8px; height: 4.8px; animation-duration: 11.9s; animation-delay: 2.5s; animation-name: particle, particleGlow; animation-duration: 11.9s, 6.1s; }
.particles span:nth-child(19) { left: 71%; top: 30%; width: 3.4px; height: 3.4px; animation-duration: 14.6s; animation-delay: 6.8s; }
.particles span:nth-child(20) { left: 86%; top: 54%; width: 2.5px; height: 2.5px; animation-duration: 16.8s; animation-delay: 3.3s; }
.particles span:nth-child(21) { left: 6%; top: 60%; width: 5.2px; height: 5.2px; animation-duration: 12.1s; animation-delay: 9.2s; }
.particles span:nth-child(22) { left: 34%; top: 86%; width: 3.8px; height: 3.8px; animation-duration: 13.4s; animation-delay: 1.6s; }
.particles span:nth-child(23) { left: 62%; top: 6%; width: 2.7px; height: 2.7px; animation-duration: 15.1s; animation-delay: 5.9s; }
.particles span:nth-child(24) { left: 96%; top: 62%; width: 4.4px; height: 4.4px; animation-duration: 10.9s; animation-delay: 7.7s; }
.particles span:nth-child(25) { left: 19%; top: 76%; width: 3px; height: 3px; animation-duration: 17.4s; animation-delay: 0.9s; }
.particles span:nth-child(26) { left: 76%; top: 4%; width: 5.6px; height: 5.6px; animation-duration: 12.7s; animation-delay: 4.4s; animation-name: particle, particleGlow; animation-duration: 12.7s, 5.8s; }
.particles span:nth-child(27) { left: 10%; top: 6%; width: 2.4px; height: 2.4px; animation-duration: 14.9s; animation-delay: 8.1s; }
.particles span:nth-child(28) { left: 84%; top: 90%; width: 3.6px; height: 3.6px; animation-duration: 11.4s; animation-delay: 2.0s; }
.particles span:nth-child(29) { left: 29%; top: 48%; width: 2.9px; height: 2.9px; animation-duration: 16.3s; animation-delay: 6.4s; }
.particles span:nth-child(30) { left: 67%; top: 60%; width: 4.2px; height: 4.2px; animation-duration: 13.9s; animation-delay: 3.6s; }
.particles span:nth-child(31) { left: 48%; top: 88%; width: 3.3px; height: 3.3px; animation-duration: 15.6s; animation-delay: 1.3s; }
.particles span:nth-child(32) { left: 53%; top: 8%; width: 2.6px; height: 2.6px; animation-duration: 18.6s; animation-delay: 9.8s; }

@keyframes particle {
    0% { transform: translateY(18px) scale(0.35); opacity: 0; }
    14% { opacity: 0.95; }
    86% { opacity: 0.9; }
    100% { transform: translateY(-110px) scale(1.25); opacity: 0; }
}

@keyframes particleGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.35); }
}

.aura-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
    z-index: 4;
    pointer-events: none;
}

@media (max-width: 480px) {
    .aura-header {
        height: 152px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wave,
    .particles span {
        animation: none;
    }
}