/* Explain: Styles for the animated hero section with cross-fading backgrounds. */
/* Animated hero: slow cross-fading background photos, drifting sparkles,
   gently swaying decorative shapes and a soft glowing halo behind the
   headline. Purely decorative — all motion is disabled for visitors who
   prefer reduced motion. */

.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: -30;
    overflow: hidden;
    /* Bright base image + soft fallback colour so a photo is ALWAYS visible
       underneath — during a crossfade the dark section never shows through. */
    background-color: #c7d5c9;
    background-image: url('https://files.cdn-files-a.com/uploads/12329372/normal_6a87ffa68be0e.jpg?format=avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    filter: saturate(1.12) contrast(1.03) brightness(1.18);
    animation: hero-crossfade 24s ease-in-out infinite,
               hero-kenburns 24s ease-in-out infinite;
    will-change: opacity, transform;
}

.hero-slide:nth-child(1) { animation-delay: 0s, 0s; }
.hero-slide:nth-child(2) { animation-delay: 8s, 8s; }
.hero-slide:nth-child(3) { animation-delay: 16s, 16s; }

@keyframes hero-crossfade {
    0% { opacity: 0; }
    6% { opacity: 1; }
    33% { opacity: 1; }
    41% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes hero-kenburns {
    0% { transform: scale(1.08) translate3d(0, 0, 0); }
    50% { transform: scale(1.16) translate3d(-1.4%, -1%, 0); }
    100% { transform: scale(1.08) translate3d(0, 0, 0); }
}

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

.hero-float {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: var(--s, 0.8rem);
    height: var(--s, 0.8rem);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.15) 68%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
    opacity: 0.35;
    animation: hero-float 9s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    will-change: transform, opacity;
}

@keyframes hero-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.25; }
    50% { transform: translate3d(0, -26px, 0) scale(1.18); opacity: 0.9; }
}

.hero-sway {
    animation: hero-sway-left 12s ease-in-out infinite;
    will-change: transform;
}

.hero-sway-slow {
    animation: hero-sway-right 16s ease-in-out infinite;
    will-change: transform;
}

@keyframes hero-sway-left {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-12deg); }
    50% { transform: translate3d(0, -16px, 0) rotate(-6deg); }
}

@keyframes hero-sway-right {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(0, -20px, 0) rotate(8deg); }
}

.hero-glow {
    animation: hero-glow-pulse 10s ease-in-out infinite;
}

@keyframes hero-glow-pulse {
    0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.9; transform: translateX(-50%) scale(1.14); }
}

.hero-title {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35), 0 0 44px rgba(168, 196, 176, 0.30);
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-float,
    .hero-sway,
    .hero-sway-slow,
    .hero-glow {
        animation: none;
    }

    .hero-slide:first-child {
        opacity: 1;
    }
}