/* ==========================================
   ANIMATIONS — GRAND LINE THEME
========================================== */

/* Hero fade-up entry */

.hero-content{

    animation: heroFade 1.4s cubic-bezier(.22,.61,.36,1) both;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ── Flag Ripple Wind Overlay ── */

.flag-ripple-overlay {

    position: absolute;

    top: 20%;

    left: 15%;

    width: 35%;

    height: 45%;

    pointer-events: none;

    background: radial-gradient(
        ellipse at center,
        rgba(232, 184, 75, 0.12) 0%,
        rgba(139, 32, 32, 0.08) 50%,
        transparent 80%
    );

    mask-image: linear-gradient(135deg, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);

    animation: flagWaving 3.5s ease-in-out infinite alternate;

}

@keyframes flagWaving {

    0% {

        transform: skewX(-2deg) skewY(1deg) scale(0.98);

        opacity: 0.4;

    }

    50% {

        transform: skewX(3deg) skewY(-1.5deg) scale(1.03);

        opacity: 0.85;

    }

    100% {

        transform: skewX(-1.5deg) skewY(2deg) scale(1.01);

        opacity: 0.5;

    }

}

/* ── Rolling Ocean Waves ── */
/* NOTE: actual animation is handled in extra-animations.css via .wave-track-1/2/3 */
/* The classes below (.hero-wave, .wave-1 etc) were unused — HTML uses .wave-track */

/* ── Treasure Map Golden Dust Particles ── */

.map-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 3;

}

.m-particle {

    position: absolute;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(244, 214, 109, 0.95) 0%, rgba(201, 144, 42, 0.4) 60%, transparent 100%);

    box-shadow: 0 0 6px rgba(244, 214, 109, 0.6);

    pointer-events: none;

    animation: mapDustFloat 8s ease-in-out infinite;

}

/* Map Particle Positions & Timing */

.mp1  { width: 5px; height: 5px; right: 12%; top: 25%; animation-duration: 7s;  animation-delay: 0s; }
.mp2  { width: 7px; height: 7px; right: 28%; top: 40%; animation-duration: 10s; animation-delay: -2s; }
.mp3  { width: 4px; height: 4px; right: 38%; top: 18%; animation-duration: 8s;  animation-delay: -4s; }
.mp4  { width: 6px; height: 6px; right: 18%; top: 60%; animation-duration: 11s; animation-delay: -1s; }
.mp5  { width: 8px; height: 8px; right: 45%; top: 70%; animation-duration: 9s;  animation-delay: -5s; }
.mp6  { width: 4px; height: 4px; right: 22%; top: 80%; animation-duration: 6s;  animation-delay: -3s; }
.mp7  { width: 6px; height: 6px; right: 32%; top: 30%; animation-duration: 12s; animation-delay: -6s; }
.mp8  { width: 5px; height: 5px; right: 15%; top: 48%; animation-duration: 9s;  animation-delay: -7s; }
.mp9  { width: 7px; height: 7px; right: 40%; top: 55%; animation-duration: 11s; animation-delay: -2.5s; }
.mp10 { width: 4px; height: 4px; right: 25%; top: 68%; animation-duration: 8s;  animation-delay: -4.5s; }
.mp11 { width: 6px; height: 6px; right: 8%;  top: 35%; animation-duration: 10s; animation-delay: -1.5s; }
.mp12 { width: 5px; height: 5px; right: 48%; top: 38%; animation-duration: 7s;  animation-delay: -5.5s; }
.mp13 { width: 8px; height: 8px; right: 20%; top: 15%; animation-duration: 13s; animation-delay: -3.5s; }
.mp14 { width: 4px; height: 4px; right: 35%; top: 82%; animation-duration: 9s;  animation-delay: -0.5s; }
.mp15 { width: 6px; height: 6px; right: 10%; top: 75%; animation-duration: 8s;  animation-delay: -6.5s; }
.mp16 { width: 5px; height: 5px; right: 30%; top: 22%; animation-duration: 11s; animation-delay: -2.2s; }

@keyframes mapDustFloat {

    0% {

        transform: translateY(0) translateX(0) scale(0.6);

        opacity: 0;

    }

    35% {

        opacity: 0.9;

    }

    70% {

        opacity: 0.6;

    }

    100% {

        transform: translateY(-80px) translateX(-20px) scale(1.4);

        opacity: 0;

    }

}

/* Gold pulse glow on section-tag */

.section-tag{

    animation: goldPulse 4s ease-in-out infinite;

}

@keyframes goldPulse{

    0%, 100%{ text-shadow: 0 0 0 transparent; }

    50%{ text-shadow: 0 0 12px rgba(201,144,42,.35); }

}