/* ============================================================
   Hero FX — make the homepage hero feel alive.
   Five layered effects, all CSS-driven (one tiny JS adds
   mouse parallax). Hooks onto existing markup via additive
   classes/wrappers so the original layout stays intact.

   Effects:
     1. Concentric "speaker ripple" rings behind the hero image
     2. Slow vertical float on the hero image ("breathing")
     3. Mouse parallax shift on the hero image (JS)
     4. Animated underline on the heading
     5. Decorative EQ bars at the bottom of the hero section
   ============================================================ */

#section-hero {
    position: relative;
    overflow: hidden;
}

/* ----- 1. Speaker ripple rings ----- */
.hero-image-wrap {
    position: relative;
    display: inline-block;
}

.hero-image-wrap::before,
.hero-image-wrap::after,
.hero-image-wrap > .hero-ripple {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid rgba(255, 83, 0, 0.4);
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    animation: hero-ripple 3.8s ease-out infinite;
}

.hero-image-wrap::after { animation-delay: 1.3s; }
.hero-image-wrap > .hero-ripple { animation-delay: 2.6s; }

@keyframes hero-ripple {
    0%   { transform: translate(-50%, -50%) scale(0.55); opacity: 0.55; border-width: 2px; }
    80%  { opacity: 0.05; }
    100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; border-width: 1px; }
}

/* ----- 2. Floating hero image (gentle breathing) ----- */
.hero-image-wrap > img,
.hero-image-wrap > .img-responsive {
    position: relative;
    z-index: 2;
    animation: hero-float 5.5s ease-in-out infinite;
    will-change: transform;
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ----- 3. Mouse parallax (set via JS, fallback OK if no JS) ----- */
.hero-image-wrap {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

/* ----- 4. Heading effects: word reveal + flowing gradient + underline ----- */

/* Word reveal — each word fades up in sequence after a small stagger */
.hero-heading-fx .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
    animation: hero-word-in 0.9s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}

.hero-heading-fx .word:nth-child(1)  { animation-delay: 0.30s; }
.hero-heading-fx .word:nth-child(2)  { animation-delay: 0.45s; }
.hero-heading-fx .word:nth-child(3)  { animation-delay: 0.60s; }
.hero-heading-fx .word:nth-child(4)  { animation-delay: 0.75s; }
.hero-heading-fx .word:nth-child(5)  { animation-delay: 0.90s; }
.hero-heading-fx .word:nth-child(6)  { animation-delay: 1.05s; }
.hero-heading-fx .word:nth-child(7)  { animation-delay: 1.20s; }
.hero-heading-fx .word:nth-child(8)  { animation-delay: 1.35s; }

@keyframes hero-word-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ----- Main heading: Rajdhani — refined Bauhaus geometric sans.
         Inspired by DIN/Eurostile, used in modern German tech UI.
         Dark drop shadow + faint warm undertone = grounded premium look
         (no orange glare). ----- */
.hero-heading-fx {
    display: inline-block;
    position: relative;
    padding-bottom: 6px;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 4.6vw, 62px);
    letter-spacing: 3px;
    line-height: 1;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px #ffffff;
            text-stroke: 1.5px #ffffff;
    text-shadow:
        0 4px 22px rgba(0, 0, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.4);
    animation: hero-heading-pulse 4.5s ease-in-out infinite;
}

@keyframes hero-heading-pulse {
    0%, 100% {
        -webkit-text-stroke-color: rgba(255, 255, 255, 0.92);
                text-stroke-color: rgba(255, 255, 255, 0.92);
    }
    50% {
        -webkit-text-stroke-color: rgba(255, 255, 255, 1);
                text-stroke-color: rgba(255, 255, 255, 1);
    }
}

/* Stroke a touch thicker on big screens, thinner on phones */
@media (min-width: 1200px) {
    .hero-heading-fx {
        -webkit-text-stroke-width: 2px;
                text-stroke-width: 2px;
    }
}
@media (max-width: 600px) {
    .hero-heading-fx {
        -webkit-text-stroke-width: 1.2px;
                text-stroke-width: 1.2px;
        letter-spacing: 2px;
    }
}

/* ----- Subtitle: elegant Playfair italic, readable on dark hero.
         Light fill with a hairline orange edge accent and a clean
         dark drop shadow for readability (no orange halo). ----- */
.hero-subtitle-fx {
    display: inline-block;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: 0.5px;
    line-height: 1.35;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.92);
    -webkit-text-stroke: 0.5px rgba(255, 130, 70, 0.55);
            text-stroke: 0.5px rgba(255, 130, 70, 0.55);
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.6),
        0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
    .hero-subtitle-fx {
        -webkit-text-stroke-width: 0.4px;
                text-stroke-width: 0.4px;
    }
}

/* Underline that sweeps in after word reveal */
.hero-heading-fx::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, #ff5300 30%, #ff8c4d 70%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left center;
    animation: hero-underline 2.6s cubic-bezier(0.4, 0, 0.2, 1) 1.6s forwards;
}

@keyframes hero-underline {
    0%   { transform: scaleX(0); transform-origin: left center; }
    50%  { transform: scaleX(1); transform-origin: left center; }
    51%  { transform: scaleX(1); transform-origin: right center; }
    100% { transform: scaleX(1); transform-origin: right center; }
}

/* ----- 6. Floating gradient orbs (ambient studio glow) -----
   Four large soft-blurred circles drift slowly in different paths
   and speeds. Mix-blend "screen" lets them additively color the
   underlying hero image into a warm cinematic atmosphere — no
   busy lines, no sharp edges. */
.hero-sound-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Dimmer, warm-charcoal orbs — ambient mood without orange glare.
   Mix dark navy + faint amber so they fade into the hero
   background rather than glowing on top of it. */
.hero-sound-wave .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    mix-blend-mode: screen;
    will-change: transform;
}

.hero-sound-wave .orb-1 {
    width: clamp(360px, 45vw, 620px);
    aspect-ratio: 1 / 1;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(180, 90, 40, 0.55) 0%, rgba(180, 90, 40, 0) 70%);
    animation: hero-orb-drift-1 18s ease-in-out infinite;
}
.hero-sound-wave .orb-2 {
    width: clamp(320px, 38vw, 520px);
    aspect-ratio: 1 / 1;
    bottom: -12%;
    right: 4%;
    background: radial-gradient(circle, rgba(120, 80, 60, 0.5) 0%, rgba(120, 80, 60, 0) 70%);
    animation: hero-orb-drift-2 22s ease-in-out infinite;
}
.hero-sound-wave .orb-3 {
    width: clamp(280px, 32vw, 460px);
    aspect-ratio: 1 / 1;
    top: 35%;
    right: -10%;
    background: radial-gradient(circle, rgba(80, 70, 90, 0.45) 0%, rgba(80, 70, 90, 0) 70%);
    animation: hero-orb-drift-3 26s ease-in-out infinite;
}
.hero-sound-wave .orb-4 {
    width: clamp(240px, 28vw, 400px);
    aspect-ratio: 1 / 1;
    bottom: 20%;
    left: 30%;
    background: radial-gradient(circle, rgba(140, 60, 30, 0.4) 0%, rgba(140, 60, 30, 0) 70%);
    animation: hero-orb-drift-4 30s ease-in-out infinite;
}

@keyframes hero-orb-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(50px, 35px) scale(1.12); }
}
@keyframes hero-orb-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-40px, -30px) scale(1.08); }
}
@keyframes hero-orb-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-30px, 40px) scale(1.15); }
}
@keyframes hero-orb-drift-4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(45px, -25px) scale(1.06); }
}

/* Ensure hero content sits above the wave layer */
#section-hero > .container { position: relative; z-index: 2; }
#section-hero > .hero-eq-deco { z-index: 1; }

/* ----- 5. Decorative EQ bars at hero bottom (very subtle) ----- */
.hero-eq-deco {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 60px;
    padding: 0 8%;
    pointer-events: none;
    opacity: 0.18;
    z-index: 1;
}

.hero-eq-deco span {
    flex: 1;
    max-width: 6px;
    background: linear-gradient(180deg, transparent 0%, #ff5300 100%);
    border-radius: 2px;
    transform-origin: bottom;
    animation: hero-eq-dance 1.2s ease-in-out infinite;
}

/* Staggered delays across the bars (modulo gives a wave pattern) */
.hero-eq-deco span:nth-child(20n+1)  { animation-delay: 0.00s; }
.hero-eq-deco span:nth-child(20n+2)  { animation-delay: 0.06s; }
.hero-eq-deco span:nth-child(20n+3)  { animation-delay: 0.12s; }
.hero-eq-deco span:nth-child(20n+4)  { animation-delay: 0.18s; }
.hero-eq-deco span:nth-child(20n+5)  { animation-delay: 0.24s; }
.hero-eq-deco span:nth-child(20n+6)  { animation-delay: 0.30s; }
.hero-eq-deco span:nth-child(20n+7)  { animation-delay: 0.36s; }
.hero-eq-deco span:nth-child(20n+8)  { animation-delay: 0.42s; }
.hero-eq-deco span:nth-child(20n+9)  { animation-delay: 0.48s; }
.hero-eq-deco span:nth-child(20n+10) { animation-delay: 0.54s; }
.hero-eq-deco span:nth-child(20n+11) { animation-delay: 0.48s; }
.hero-eq-deco span:nth-child(20n+12) { animation-delay: 0.42s; }
.hero-eq-deco span:nth-child(20n+13) { animation-delay: 0.36s; }
.hero-eq-deco span:nth-child(20n+14) { animation-delay: 0.30s; }
.hero-eq-deco span:nth-child(20n+15) { animation-delay: 0.24s; }
.hero-eq-deco span:nth-child(20n+16) { animation-delay: 0.18s; }
.hero-eq-deco span:nth-child(20n+17) { animation-delay: 0.12s; }
.hero-eq-deco span:nth-child(20n+18) { animation-delay: 0.06s; }
.hero-eq-deco span:nth-child(20n+19) { animation-delay: 0.00s; }
.hero-eq-deco span:nth-child(20n)    { animation-delay: 0.08s; }

@keyframes hero-eq-dance {
    0%, 100% { height: 15%; }
    50%      { height: 100%; }
}

/* ----- Mobile tweaks ----- */
@media (max-width: 991px) {
    .hero-image-wrap::before,
    .hero-image-wrap::after,
    .hero-image-wrap > .hero-ripple {
        width: 70%;
    }
    .hero-eq-deco { height: 40px; opacity: 0.12; }
}

/* ----- Reduced-motion accessibility ----- */
@media (prefers-reduced-motion: reduce) {
    .hero-image-wrap::before,
    .hero-image-wrap::after,
    .hero-image-wrap > .hero-ripple,
    .hero-image-wrap > img,
    .hero-heading-fx::after,
    .hero-eq-deco span {
        animation: none !important;
    }
}