/* ========================================
   ONE PIECE 3D ANIMATIONS & THEME
   Hieu ung 3D theo phong cach One Piece
   ======================================== */

/* ============ ONE PIECE COLOR PALETTE ============ */
:root {
    /* Luffy's Straw Hat Colors */
    --op-straw-yellow: #FFD93D;
    --op-straw-orange: #FF9500;

    /* Sea & Sky */
    --op-ocean-blue: #0066CC;
    --op-sky-blue: #4FC3F7;
    --op-deep-sea: #1A237E;

    /* Danger & Fire */
    --op-fire-red: #FF3D00;
    --op-blood-red: #B71C1C;

    /* Gold & Treasure */
    --op-gold: #FFD700;
    --op-treasure-gold: #FFA000;
    --op-coin-gold: #FFAB00;

    /* Wanted Poster */
    --op-wanted-bg: #F5E6C8;
    --op-wanted-border: #8B4513;

    /* Gradients */
    --op-gradient-ocean: linear-gradient(135deg, #0066CC 0%, #00BCD4 100%);
    --op-gradient-sunset: linear-gradient(135deg, #FF9500 0%, #FF3D00 100%);
    --op-gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
    --op-gradient-night: linear-gradient(135deg, #1A237E 0%, #4A148C 100%);
    --op-gradient-fire: linear-gradient(135deg, #FF3D00 0%, #FF6D00 50%, #FFD93D 100%);
}

/* ============ WANTED POSTER EFFECTS ============ */

/* Wanted Poster Card */
.wanted-poster {
    background: var(--op-wanted-bg);
    border: 8px solid var(--op-wanted-border);
    border-radius: 5px;
    box-shadow:
        0 0 0 2px #5D3A1A,
        8px 8px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wanted-poster::before {
    content: 'WANTED';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--op-blood-red);
    color: white;
    padding: 5px 20px;
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 3px;
    border-radius: 3px;
    z-index: 10;
    text-shadow: 2px 2px 0 #000;
}

.wanted-poster:hover {
    transform: perspective(1000px) rotateY(-5deg) rotateX(3deg) translateZ(20px);
    box-shadow:
        0 0 0 2px #5D3A1A,
        15px 15px 30px rgba(0, 0, 0, 0.5);
}

/* ============ PIRATE FLAG WAVE ANIMATION ============ */
@keyframes pirateFlag {

    0%,
    100% {
        transform: rotateY(0deg) skewX(0deg);
    }

    25% {
        transform: rotateY(5deg) skewX(2deg);
    }

    50% {
        transform: rotateY(0deg) skewX(-1deg);
    }

    75% {
        transform: rotateY(-5deg) skewX(2deg);
    }
}

.pirate-flag {
    animation: pirateFlag 3s ease-in-out infinite;
    transform-style: preserve-3d;
}

/* ============ TREASURE CHEST BOUNCE ============ */
@keyframes treasureBounce {

    0%,
    100% {
        transform: translateY(0) rotateZ(0deg) scale(1);
    }

    10% {
        transform: translateY(-20px) rotateZ(-5deg) scale(1.1);
    }

    20% {
        transform: translateY(0) rotateZ(5deg) scale(1);
    }

    30% {
        transform: translateY(-10px) rotateZ(-3deg) scale(1.05);
    }

    40% {
        transform: translateY(0) rotateZ(0deg) scale(1);
    }
}

.treasure-bounce {
    animation: treasureBounce 2s ease-in-out infinite;
}

/* ============ LUFFY GEAR 2 STEAM EFFECT ============ */
@keyframes gear2Steam {

    0%,
    100% {
        box-shadow:
            0 0 20px var(--op-fire-red),
            0 0 40px rgba(255, 61, 0, 0.5),
            0 0 60px rgba(255, 61, 0, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow:
            0 0 30px var(--op-fire-red),
            0 0 60px rgba(255, 61, 0, 0.7),
            0 0 90px rgba(255, 61, 0, 0.4);
        transform: scale(1.02);
    }
}

.gear2-effect {
    animation: gear2Steam 1.5s ease-in-out infinite;
    border: 3px solid var(--op-fire-red) !important;
}

/* ============ OCEAN WAVE FLOAT ============ */
@keyframes oceanWave {

    0%,
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) translateX(10px) rotate(2deg);
    }

    50% {
        transform: translateY(-5px) translateX(-5px) rotate(-1deg);
    }

    75% {
        transform: translateY(-20px) translateX(5px) rotate(1deg);
    }
}

.ocean-float {
    animation: oceanWave 4s ease-in-out infinite;
    transform-style: preserve-3d;
}

/* ============ BERRY (GOLD COIN) SPIN ============ */
@keyframes berrySpin {
    0% {
        transform: rotateY(0deg) scale(1);
    }

    50% {
        transform: rotateY(180deg) scale(1.1);
    }

    100% {
        transform: rotateY(360deg) scale(1);
    }
}

.berry-spin {
    animation: berrySpin 2s linear infinite;
    transform-style: preserve-3d;
}

.berry-spin:hover {
    animation-duration: 0.5s;
}

/* ============ HAKI GLOW EFFECT ============ */
@keyframes hakiGlow {

    0%,
    100% {
        box-shadow:
            0 0 5px #000,
            0 0 10px #1A1A2E,
            0 0 20px #16213E;
    }

    50% {
        box-shadow:
            0 0 10px #000,
            0 0 25px #1A1A2E,
            0 0 40px #16213E,
            0 0 60px #0F3460;
    }
}

.haki-effect {
    animation: hakiGlow 2s ease-in-out infinite;
    background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%) !important;
    color: white !important;
}

/* ============ DEVIL FRUIT SPIRAL ============ */
@keyframes devilFruitSpiral {
    0% {
        transform: rotate(0deg) scale(1);
        filter: hue-rotate(0deg);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
        filter: hue-rotate(180deg);
    }

    100% {
        transform: rotate(360deg) scale(1);
        filter: hue-rotate(360deg);
    }
}

.devil-fruit-spin {
    animation: devilFruitSpiral 5s linear infinite;
}

/* ============ STRAW HAT PODIUM CARDS ============ */

/* Gold - Pirate King Card */
.podium-pirate-king {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFE082 50%, #FFF9E6 100%) !important;
    border: 4px solid var(--op-gold) !important;
    position: relative;
    overflow: visible;
}

.podium-pirate-king::before {
    content: '👑';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    animation: treasureBounce 2s ease-in-out infinite;
    z-index: 100;
}

.podium-pirate-king::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 215, 0, 0.4) 50%,
            transparent 70%);
    animation: goldShine 2s linear infinite;
    pointer-events: none;
}

@keyframes goldShine {
    0% {
        transform: translateX(-200%) rotate(45deg);
    }

    100% {
        transform: translateX(200%) rotate(45deg);
    }
}

/* Silver - Yonko Card */
.podium-yonko {
    background: linear-gradient(135deg, #F5F5F5 0%, #E0E0E0 50%, #F5F5F5 100%) !important;
    border: 3px solid #9E9E9E !important;
}

/* Bronze - Shichibukai Card */
.podium-shichibukai {
    background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 50%, #FFE0B2 100%) !important;
    border: 3px solid #E65100 !important;
}

/* ============ WANTED MEDAL STYLES ============ */
.medal-op-gold {
    background: var(--op-gradient-gold) !important;
    color: #5D3A1A !important;
    border: 3px solid #B8860B !important;
    font-family: 'Impact', sans-serif;
    letter-spacing: 1px;
}

.medal-op-silver {
    background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%) !important;
    color: #424242 !important;
    border: 3px solid #757575 !important;
}

.medal-op-bronze {
    background: linear-gradient(135deg, #FFCC80 0%, #FF9800 100%) !important;
    color: #5D3A1A !important;
    border: 3px solid #E65100 !important;
}

/* ============ BOUNTY NUMBER ANIMATION ============ */
@keyframes bountyCount {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        text-shadow: 0 0 20px var(--op-gold);
    }
}

.bounty-number {
    font-family: 'Impact', 'Arial Black', sans-serif;
    animation: bountyCount 2s ease-in-out infinite;
    color: var(--op-blood-red);
    text-shadow:
        2px 2px 0 #000,
        -1px -1px 0 #000;
}

/* ============ SEA KING SHADOW ============ */
.sea-king-shadow {
    position: relative;
}

.sea-king-shadow::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 20px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
    animation: oceanWave 3s ease-in-out infinite;
}

/* ============ STRAW HAT CREW COLORS ============ */
.crew-luffy {
    --crew-color: #FF3D00;
    border-left: 4px solid var(--crew-color) !important;
}

.crew-zoro {
    --crew-color: #4CAF50;
    border-left: 4px solid var(--crew-color) !important;
}

.crew-nami {
    --crew-color: #FF9800;
    border-left: 4px solid var(--crew-color) !important;
}

.crew-usopp {
    --crew-color: #795548;
    border-left: 4px solid var(--crew-color) !important;
}

.crew-sanji {
    --crew-color: #2196F3;
    border-left: 4px solid var(--crew-color) !important;
}

.crew-chopper {
    --crew-color: #E91E63;
    border-left: 4px solid var(--crew-color) !important;
}

.crew-robin {
    --crew-color: #9C27B0;
    border-left: 4px solid var(--crew-color) !important;
}

.crew-franky {
    --crew-color: #00BCD4;
    border-left: 4px solid var(--crew-color) !important;
}

.crew-brook {
    --crew-color: #607D8B;
    border-left: 4px solid var(--crew-color) !important;
}

.crew-jinbe {
    --crew-color: #3F51B5;
    border-left: 4px solid var(--crew-color) !important;
}

/* ============ JOLLY ROGER HOVER ============ */
.jolly-roger-hover {
    position: relative;
    transition: all 0.3s ease;
}

.jolly-roger-hover:hover {
    transform: scale(1.05);
}

.jolly-roger-hover::before {
    content: '☠️';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.5rem;
    opacity: 0;
    transition: all 0.3s ease;
    transform: scale(0) rotate(-45deg);
}

.jolly-roger-hover:hover::before {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ============ MARINE VS PIRATE TABLE ============ */
.table-op tbody tr:nth-child(odd) {
    background: rgba(0, 102, 204, 0.05);
}

.table-op tbody tr:nth-child(even) {
    background: rgba(255, 149, 0, 0.05);
}

.table-op tbody tr:hover {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 149, 0, 0.1) 100%);
}

/* ============ GRAND LINE PROGRESS BAR ============ */
.grand-line-progress {
    height: 10px;
    background: linear-gradient(90deg,
            var(--op-ocean-blue) 0%,
            var(--op-sky-blue) 25%,
            var(--op-treasure-gold) 50%,
            var(--op-fire-red) 75%,
            var(--op-deep-sea) 100%);
    background-size: 200% 100%;
    animation: grandLineFlow 3s linear infinite;
    border-radius: 5px;
}

@keyframes grandLineFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* ============ SUNNY GO SHIP FLOAT ============ */
@keyframes sunnyGoFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    25% {
        transform: translateY(-10px) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(2deg);
    }

    75% {
        transform: translateY(-15px) rotate(0deg);
    }
}

.sunny-go-float {
    animation: sunnyGoFloat 4s ease-in-out infinite;
}

/* ============ 3D CARD EFFECTS ============ */
.op-card-3d {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.op-card-3d:hover {
    transform: perspective(1000px) rotateY(-8deg) rotateX(5deg) translateZ(30px);
}

.op-card-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.3) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    border-radius: inherit;
}

.op-card-3d:hover::before {
    opacity: 1;
}

/* ============ CONQUEROR'S HAKI ENTRANCE ============ */
@keyframes conquerorsHaki {
    0% {
        opacity: 0;
        transform: scale(1.5) translateY(-50px);
        filter: blur(10px);
    }

    50% {
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.conquerors-entrance {
    animation: conquerorsHaki 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ============ LAUGHTALE SPARKLE ============ */
@keyframes laughtaleSparkle {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3) drop-shadow(0 0 10px gold);
    }
}

.laughtale-sparkle {
    animation: laughtaleSparkle 2s ease-in-out infinite;
}

/* ============ MOBILE OPTIMIZATION ============ */
@media (max-width: 768px) {
    .wanted-poster::before {
        font-size: 0.9rem;
        padding: 3px 12px;
        top: -12px;
    }

    .podium-pirate-king::before {
        font-size: 1.8rem;
        top: -25px;
    }

    .ocean-float,
    .treasure-bounce,
    .gear2-effect {
        animation-duration: 5s;
    }

    .op-card-3d:hover {
        transform: scale(1.02);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    .pirate-flag,
    .treasure-bounce,
    .gear2-effect,
    .ocean-float,
    .berry-spin,
    .devil-fruit-spin,
    .sunny-go-float,
    .bounty-number,
    .grand-line-progress,
    .laughtale-sparkle {
        animation: none !important;
    }

    .wanted-poster:hover,
    .op-card-3d:hover {
        transform: none !important;
    }
}