/**
 * IMMERSIVE.CSS — Prestige Sound Immersive Experience
 * Awwwards-level hero effects: cursor, particles, tilt, reveal
 * April 2026
 */

/* ============================================================
   HERO CANVAS — Gold particle background (ABOVE slideshow)
   ============================================================ */
#hero-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Slideshow stays visible — canvas overlays it transparently */

/* ============================================================
   3D TILT — Form perspective effect
   ============================================================ */
.site-hero__form-wrapper {
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* ============================================================
   REVEAL ANIMATIONS — Cinematic entrance
   ============================================================ */
.reveal-up {
    opacity: 0;
    transform: translateY(60px);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
}
.reveal-stagger {
    opacity: 0;
    transform: translateY(20px);
}

/* ============================================================
   GOLD SHIMMER — Text effect
   ============================================================ */
.text-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-gold, #C9A962) 0%,
        #E8D5A3 45%,
        var(--color-gold, #C9A962) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
    to { background-position: 200% center; }
}

/* ============================================================
   SCROLL INDICATOR — Animated
   ============================================================ */
.hero__scroll-line {
    animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
    0%, 100% { height: 30px; opacity: 0.3; }
    50% { height: 50px; opacity: 0.8; }
}

/* ============================================================
   AMBIENT GLOW — Subtle gold ambient light
   ============================================================ */
.site-hero::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 40%;
    background: radial-gradient(ellipse, rgba(201, 169, 98, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   RESPONSIVE — Disable heavy effects on mobile
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .text-shimmer { animation: none; color: var(--color-gold, #C9A962); background: none; -webkit-background-clip: unset; }
    .reveal-up, .reveal-scale, .reveal-stagger { opacity: 1; transform: none; }
    .hero__scroll-line { animation: none; }
}