/* ==========================================
   EXTRA ANIMATIONS — ONE PIECE HERO THEME
   Creative elements: Hat, Compass, Posters,
   Devil Fruit, Seagulls, Storm spray, Glow
========================================== */

/* ─────────────────────────────────────────
   CONTAINER
───────────────────────────────────────── */
.op-elements {
    position: absolute;
    inset: 0;
    z-index: 6;          /* above vignette, pointer-events off */
    pointer-events: none;
    overflow: hidden;
}

/* ─────────────────────────────────────────
   LUFFY STRAW HAT  (top-right)
───────────────────────────────────────── */
.op-straw-hat {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 140px;
    filter: drop-shadow(0 6px 24px rgba(201,144,42,0.65))
            drop-shadow(0 0 40px rgba(220,160,40,0.30));
    animation: hatFloat 5s ease-in-out infinite;
}

@keyframes hatFloat {
    0%,100% { transform: translateY(0px)   rotate(-4deg); }
    35%      { transform: translateY(-14px) rotate(2deg);  }
    70%      { transform: translateY(-6px)  rotate(-2deg); }
}

/* ─────────────────────────────────────────
   LOG POSE COMPASS  (bottom-left ship side)
───────────────────────────────────────── */
.op-compass {
    position: absolute;
    bottom: 18%;
    left: 4%;
    width: 88px;
    filter: drop-shadow(0 0 14px rgba(201,144,42,0.55))
            drop-shadow(0 0 30px rgba(201,144,42,0.20));
    animation: compassFloat 6s ease-in-out infinite;
}

@keyframes compassFloat {
    0%,100% { transform: translateY(0px)  rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(3deg); }
}

/* Needle spins independently */
.compass-needle-group {
    transform-origin: 45px 45px;
    animation: compassSpin 6s linear infinite;
}

@keyframes compassSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────
   MYSTERY DEVIL FRUIT  (left, ship area)
───────────────────────────────────────── */
.op-devil-fruit {
    position: absolute;
    top: 26%;
    left: 2%;
    width: 64px;
    filter: drop-shadow(0 0 18px rgba(160,80,240,0.70))
            drop-shadow(0 0 40px rgba(120,40,200,0.35));
    animation: fruitFloat 7s ease-in-out infinite;
}

@keyframes fruitFloat {
    0%,100% { transform: translateY(0px)   rotate(-4deg) scale(1);    }
    40%      { transform: translateY(-14px) rotate(5deg)  scale(1.06); }
    70%      { transform: translateY(-6px)  rotate(-2deg) scale(1.02); }
}

/* ─────────────────────────────────────────
   SEAGULLS (fly across hero sky)
───────────────────────────────────────── */
.op-bird-group {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.op-bird     { display: block; width: 44px; }
.op-bird.bird-sm { width: 32px; margin-left: 12px; }
.op-bird.bird-xs { width: 24px; margin-left: 6px; }

/* Group A: crosses from left to right slowly */
.bird-group-a {
    top: 12%;
    animation: birdsFlyRight 20s linear infinite;
}

/* Group B: a second flock, with delay, slightly lower */
.bird-group-b {
    top: 19%;
    animation: birdsFlyRight 28s linear infinite;
    animation-delay: -11s;
}

@keyframes birdsFlyRight {
    0%   { transform: translateX(-160px); opacity: 0;   }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateX(110vw);  opacity: 0; }
}

/* Wing-flap on each SVG path (subtle vertical scale) */
.op-bird {
    animation: wingFlap 1s ease-in-out infinite alternate;
}
.bird-sm { animation-delay: -0.3s; }
.bird-xs { animation-delay: -0.6s; }

@keyframes wingFlap {
    from { transform: scaleY(1);    }
    to   { transform: scaleY(-0.4); }
}

/* ─────────────────────────────────────────
   AMBIENT BOUNTY / GRAND LINE TEXT
───────────────────────────────────────── */
.op-bounty-text {
    position: absolute;
    font-family: 'Cinzel', serif;
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(201,144,42,0.12);
    letter-spacing: 12px;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    animation: ambientTextPulse 8s ease-in-out infinite;
}

.op-bounty-text {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.op-bounty-text-2 {
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(2.5rem, 5vw, 4rem);
    animation-delay: -4s;
}

@keyframes ambientTextPulse {
    0%,100% { -webkit-text-stroke: 1px rgba(201,144,42,0.08); opacity: 0.5; }
    50%      { -webkit-text-stroke: 1px rgba(244,214,109,0.22); opacity: 1; }
}

/* ─────────────────────────────────────────
   FLAG RIPPLE OVERLAY (on ship)
───────────────────────────────────────── */
.flag-ripple-overlay {
    animation: flagRipple 2.2s ease-in-out infinite alternate !important;
}

@keyframes flagRipple {
    0%   { transform: skewX(-5deg) skewY(3deg)  scaleX(0.92) scaleY(0.95); opacity: 0.25; filter: blur(0.5px); }
    30%  { transform: skewX(6deg)  skewY(-4deg) scaleX(1.06) scaleY(1.04); opacity: 1;    filter: blur(0px);   }
    65%  { transform: skewX(-4deg) skewY(5deg)  scaleX(0.97) scaleY(1.02); opacity: 0.75; filter: blur(0.3px); }
    100% { transform: skewX(5deg)  skewY(-3deg) scaleX(1.04) scaleY(0.97); opacity: 0.9;  filter: blur(0px);   }
}

/* ─────────────────────────────────────────
   STORM WATER SPRAY (ship hull area)
───────────────────────────────────────── */
.hero-storm-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.storm-drop {
    position: absolute;
    border-radius: 50% 50% 50% 0;
    background: radial-gradient(circle, rgba(180,220,255,0.95) 0%, rgba(100,180,240,0.55) 50%, transparent 100%);
    box-shadow: 0 0 4px rgba(150,210,255,0.7);
    pointer-events: none;
    animation: stormSpray 3.5s ease-out infinite;
    opacity: 0;
}

@keyframes stormSpray {
    0%   { transform: translate(0, 0)          rotate(0deg)   scale(0.4); opacity: 0; }
    10%  { opacity: 0.9; }
    60%  { opacity: 0.6; }
    100% { transform: translate(-55px, -90px)   rotate(-30deg) scale(1.3); opacity: 0; }
}

.sd1  { width:5px; height:8px;  left:12%; bottom:28%; animation-duration:2.8s; animation-delay:0s;    }
.sd2  { width:3px; height:5px;  left:18%; bottom:35%; animation-duration:3.2s; animation-delay:-0.4s; }
.sd3  { width:6px; height:10px; left:8%;  bottom:22%; animation-duration:2.4s; animation-delay:-0.8s; }
.sd4  { width:4px; height:6px;  left:22%; bottom:42%; animation-duration:3.6s; animation-delay:-1.2s; }
.sd5  { width:3px; height:5px;  left:15%; bottom:18%; animation-duration:2.6s; animation-delay:-1.6s; }
.sd6  { width:5px; height:8px;  left:5%;  bottom:30%; animation-duration:3.0s; animation-delay:-0.2s; }
.sd7  { width:4px; height:6px;  left:25%; bottom:25%; animation-duration:3.4s; animation-delay:-2.0s; }
.sd8  { width:6px; height:9px;  left:10%; bottom:40%; animation-duration:2.2s; animation-delay:-0.6s; }
.sd9  { width:3px; height:5px;  left:30%; bottom:32%; animation-duration:3.8s; animation-delay:-1.0s; }
.sd10 { width:5px; height:8px;  left:20%; bottom:15%; animation-duration:2.7s; animation-delay:-1.8s; }
.sd11 { width:4px; height:6px;  left:7%;  bottom:50%; animation-duration:3.1s; animation-delay:-0.3s; }
.sd12 { width:3px; height:5px;  left:33%; bottom:20%; animation-duration:2.9s; animation-delay:-2.4s; }
.sd13 { width:6px; height:9px;  left:14%; bottom:45%; animation-duration:3.3s; animation-delay:-0.7s; }
.sd14 { width:4px; height:7px;  left:27%; bottom:38%; animation-duration:2.5s; animation-delay:-1.4s; }
.sd15 { width:3px; height:5px;  left:4%;  bottom:20%; animation-duration:3.5s; animation-delay:-2.2s; }
.sd16 { width:5px; height:8px;  left:37%; bottom:28%; animation-duration:2.3s; animation-delay:-0.9s; }
.sd17 { width:4px; height:6px;  left:11%; bottom:55%; animation-duration:3.7s; animation-delay:-1.3s; }
.sd18 { width:3px; height:5px;  left:24%; bottom:10%; animation-duration:2.8s; animation-delay:-2.6s; }
.sd19 { width:5px; height:8px;  left:17%; bottom:60%; animation-duration:3.0s; animation-delay:-0.5s; }
.sd20 { width:6px; height:9px;  left:35%; bottom:45%; animation-duration:2.6s; animation-delay:-1.7s; }
.sd21 { width:3px; height:5px;  left:6%;  bottom:65%; animation-duration:3.2s; animation-delay:-2.1s; }
.sd22 { width:4px; height:7px;  left:29%; bottom:52%; animation-duration:2.4s; animation-delay:-0.1s; }
.sd23 { width:5px; height:8px;  left:40%; bottom:18%; animation-duration:3.6s; animation-delay:-1.9s; }
.sd24 { width:3px; height:5px;  left:9%;  bottom:35%; animation-duration:2.9s; animation-delay:-2.8s; }

/* ─────────────────────────────────────────
   EXTRA GOLD DUST mp17-mp30
───────────────────────────────────────── */
.mp17 { width:6px; height:6px; right:20%; top:30%; animation-duration:8s;  animation-delay:-1.2s; }
.mp18 { width:4px; height:4px; right:55%; top:20%; animation-duration:10s; animation-delay:-3.1s; }
.mp19 { width:7px; height:7px; right:42%; top:65%; animation-duration:9s;  animation-delay:-0.7s; }
.mp20 { width:5px; height:5px; right:14%; top:55%; animation-duration:7s;  animation-delay:-4.2s; }
.mp21 { width:4px; height:4px; right:60%; top:42%; animation-duration:11s; animation-delay:-1.9s; }
.mp22 { width:6px; height:6px; right:50%; top:28%; animation-duration:8s;  animation-delay:-5.3s; }
.mp23 { width:5px; height:5px; right:33%; top:72%; animation-duration:12s; animation-delay:-2.5s; }
.mp24 { width:3px; height:3px; right:9%;  top:42%; animation-duration:7s;  animation-delay:-6.1s; }
.mp25 { width:7px; height:7px; right:26%; top:85%; animation-duration:10s; animation-delay:-0.3s; }
.mp26 { width:4px; height:4px; right:48%; top:12%; animation-duration:9s;  animation-delay:-3.8s; }
.mp27 { width:6px; height:6px; right:37%; top:50%; animation-duration:8s;  animation-delay:-1.5s; }
.mp28 { width:5px; height:5px; right:16%; top:78%; animation-duration:11s; animation-delay:-4.7s; }
.mp29 { width:4px; height:4px; right:52%; top:58%; animation-duration:7s;  animation-delay:-2.2s; }
.mp30 { width:8px; height:8px; right:24%; top:35%; animation-duration:13s; animation-delay:-0.9s; }

/* ─────────────────────────────────────────
   HERO TEXT ACCENT ANIMATIONS
───────────────────────────────────────── */
.hero-main-title {
    animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    0%   { text-shadow: 0 0 20px rgba(201,144,42,0.3),  0 2px 12px rgba(0,0,0,.55); }
    100% { text-shadow: 0 0 50px rgba(244,214,109,0.75), 0 0 20px rgba(201,144,42,0.5), 0 2px 12px rgba(0,0,0,.55); }
}

.hero-diamond {
    animation: diamondSpin 6s ease-in-out infinite;
}

@keyframes diamondSpin {
    0%,100% { transform: rotate(0deg)   scale(1);   opacity: 0.8; }
    50%      { transform: rotate(180deg) scale(1.3); opacity: 1;   }
}

.hero-eyebrow {
    animation: eyebrowFloat 5s ease-in-out infinite alternate;
}

@keyframes eyebrowFloat {
    0%   { letter-spacing: 5px; opacity: 0.7; }
    100% { letter-spacing: 8px; opacity: 1;   }
}