/* ========================================
   ONE PIECE 3D ANIMATED ICONS & LOGOS
   Icons hoạt ảnh 3D sinh động One Piece
   ======================================== */

/* ============ STRAW HAT CREW ANIMATED ICONS ============ */

/* Luffy Straw Hat Icon */
.icon-luffy {
    position: relative;
    display: inline-block;
    font-size: 2rem;
    animation: luffyBounce 1s ease-in-out infinite;
}

.icon-luffy::before {
    content: '🎩';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    animation: strawHatWiggle 2s ease-in-out infinite;
}

@keyframes luffyBounce {

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

    25% {
        transform: translateY(-20px) rotate(-5deg);
    }

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

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

@keyframes strawHatWiggle {

    0%,
    100% {
        transform: translateX(-50%) rotate(-5deg);
    }

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

/* Zoro Swords Icon */
.icon-zoro {
    position: relative;
    display: inline-block;
}

.icon-zoro::before,
.icon-zoro::after {
    content: '⚔️';
    position: absolute;
    font-size: 1.5rem;
    animation: swordSlash 0.8s ease-in-out infinite;
}

.icon-zoro::before {
    top: -10px;
    left: -10px;
    animation-delay: 0s;
}

.icon-zoro::after {
    top: -10px;
    right: -10px;
    animation-delay: 0.4s;
}

@keyframes swordSlash {

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

    50% {
        transform: rotate(45deg) scale(1.2);
        opacity: 0.8;
    }
}

/* Nami Berry/Money Icon */
.icon-nami {
    position: relative;
    display: inline-block;
    animation: namiSparkle 1.5s ease-in-out infinite;
}

.icon-nami::before {
    content: '💰';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.8rem;
    animation: coinFall 1s ease-in-out infinite;
}

.icon-nami::after {
    content: '💎';
    position: absolute;
    bottom: -5px;
    left: -5px;
    font-size: 0.7rem;
    animation: coinFall 1s ease-in-out infinite 0.5s;
}

@keyframes namiSparkle {

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

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

@keyframes coinFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(20px) rotate(360deg);
        opacity: 0;
    }
}

/* Sanji Fire Kick */
.icon-sanji {
    position: relative;
    display: inline-block;
    animation: sanjiKick 0.6s ease-in-out infinite;
}

.icon-sanji::before {
    content: '🔥';
    position: absolute;
    bottom: 0;
    right: -10px;
    font-size: 1.2rem;
    animation: fireFlicker 0.3s ease-in-out infinite alternate;
}

@keyframes sanjiKick {

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

    50% {
        transform: rotate(-30deg);
    }
}

@keyframes fireFlicker {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    100% {
        transform: scale(1.2) translateY(-5px);
        opacity: 0.8;
    }
}

/* Chopper Cute */
.icon-chopper {
    animation: chopperBounce 0.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes chopperBounce {

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

    50% {
        transform: translateY(-10px) scale(1.1);
    }
}

/* Robin Hands */
.icon-robin {
    position: relative;
    display: inline-block;
}

.icon-robin::before {
    content: '✋';
    position: absolute;
    top: -10px;
    left: -15px;
    font-size: 0.8rem;
    animation: robinHand 2s ease-in-out infinite;
}

.icon-robin::after {
    content: '✋';
    position: absolute;
    top: -10px;
    right: -15px;
    font-size: 0.8rem;
    animation: robinHand 2s ease-in-out infinite 0.5s;
    transform: scaleX(-1);
}

@keyframes robinHand {

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

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Franky Super */
.icon-franky {
    position: relative;
    display: inline-block;
    animation: frankySuperPose 1s ease-in-out infinite;
}

.icon-franky::before {
    content: '⭐';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    animation: superStar 0.5s ease-in-out infinite alternate;
}

@keyframes frankySuperPose {

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

    50% {
        transform: scale(1.1);
    }
}

@keyframes superStar {
    0% {
        transform: translateX(-50%) scale(1) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) scale(1.3) rotate(180deg);
    }
}

/* Brook Music */
.icon-brook {
    position: relative;
    display: inline-block;
}

.icon-brook::before {
    content: '🎵';
    position: absolute;
    top: -15px;
    right: -5px;
    font-size: 0.8rem;
    animation: musicNote 1.5s ease-in-out infinite;
}

.icon-brook::after {
    content: '🎶';
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 0.7rem;
    animation: musicNote 1.5s ease-in-out infinite 0.5s;
}

@keyframes musicNote {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-20px) rotate(20deg);
    }
}

/* Jinbe Wave */
.icon-jinbe {
    position: relative;
    display: inline-block;
    animation: jinbeWave 2s ease-in-out infinite;
}

.icon-jinbe::before {
    content: '🌊';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    animation: waveFlow 1s ease-in-out infinite;
}

@keyframes jinbeWave {

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

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

@keyframes waveFlow {

    0%,
    100% {
        transform: translateX(-50%) scaleX(1);
    }

    50% {
        transform: translateX(-50%) scaleX(1.2);
    }
}

/* ============ SHIP ANIMATIONS ============ */

/* Thousand Sunny Ship */
.icon-sunny {
    position: relative;
    display: inline-block;
    animation: shipSail 3s ease-in-out infinite;
}

.icon-sunny::before {
    content: '🦁';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    animation: sunnyRoar 2s ease-in-out infinite;
}

.icon-sunny::after {
    content: '☀️';
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 0.8rem;
    animation: sunShine 1s ease-in-out infinite alternate;
}

@keyframes shipSail {

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

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

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

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

@keyframes sunnyRoar {

    0%,
    90%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    95% {
        transform: translateX(-50%) scale(1.3);
    }
}

@keyframes sunShine {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.2) rotate(45deg);
        opacity: 1;
    }
}

/* Going Merry Ship */
.icon-merry {
    position: relative;
    display: inline-block;
    animation: merryFloat 4s ease-in-out infinite;
}

.icon-merry::before {
    content: '🐑';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    animation: sheepBob 1s ease-in-out infinite;
}

@keyframes merryFloat {

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

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

@keyframes sheepBob {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-3px);
    }
}

/* Pirate Ship Generic */
.icon-ship {
    position: relative;
    display: inline-block;
    animation: pirateShipFloat 3s ease-in-out infinite;
}

.icon-ship::before {
    content: '🏴‍☠️';
    position: absolute;
    top: -20px;
    right: -5px;
    font-size: 1rem;
    animation: flagWave 1s ease-in-out infinite;
}

.icon-ship::after {
    content: '💨';
    position: absolute;
    bottom: 5px;
    left: -15px;
    font-size: 0.8rem;
    animation: windBlow 0.5s linear infinite;
}

@keyframes pirateShipFloat {

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

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

    50% {
        transform: translateY(-8px) rotate(3deg);
    }

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

@keyframes flagWave {

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

    50% {
        transform: rotate(10deg);
    }
}

@keyframes windBlow {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-15px);
    }
}

/* ============ SPECIAL ICONS ============ */

/* Devil Fruit */
.icon-devil-fruit {
    position: relative;
    display: inline-block;
    animation: devilFruitSpin 5s linear infinite;
}

.icon-devil-fruit::before {
    content: '✨';
    position: absolute;
    animation: fruitSparkle 0.5s ease-in-out infinite;
}

@keyframes devilFruitSpin {
    0% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }

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

@keyframes fruitSparkle {

    0%,
    100% {
        top: -5px;
        left: 50%;
        opacity: 1;
    }

    25% {
        top: 50%;
        right: -5px;
        left: auto;
    }

    50% {
        top: auto;
        bottom: -5px;
        left: 50%;
    }

    75% {
        top: 50%;
        left: -5px;
    }
}

/* Treasure Chest */
.icon-treasure {
    position: relative;
    display: inline-block;
    animation: treasureGlow 2s ease-in-out infinite;
}

.icon-treasure::before {
    content: '💎';
    position: absolute;
    top: -10px;
    left: 0;
    font-size: 0.6rem;
    animation: gemFloat 1s ease-in-out infinite;
}

.icon-treasure::after {
    content: '💰';
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 0.6rem;
    animation: gemFloat 1s ease-in-out infinite 0.3s;
}

@keyframes treasureGlow {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 5px gold);
    }

    50% {
        transform: scale(1.05);
        filter: brightness(1.2) drop-shadow(0 0 15px gold);
    }
}

@keyframes gemFloat {

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

    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Wanted Poster */
.icon-wanted {
    position: relative;
    display: inline-block;
    animation: wantedShake 3s ease-in-out infinite;
}

.icon-wanted::before {
    content: '💀';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.8rem;
    animation: skullBounce 1s ease-in-out infinite;
}

@keyframes wantedShake {

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

    92%,
    96% {
        transform: rotate(3deg);
    }

    94%,
    98% {
        transform: rotate(-3deg);
    }
}

@keyframes skullBounce {

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

    50% {
        transform: scale(1.2) rotate(10deg);
    }
}

/* Log Pose */
.icon-logpose {
    position: relative;
    display: inline-block;
    animation: logPoseSpin 4s linear infinite;
}

.icon-logpose::before {
    content: '➡️';
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0.8rem;
    transform-origin: center;
    animation: needleSpin 2s linear infinite;
}

@keyframes logPoseSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes needleSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

/* Den Den Mushi */
.icon-dendenmushi {
    position: relative;
    display: inline-block;
    animation: dendenRing 2s ease-in-out infinite;
}

.icon-dendenmushi::before {
    content: '📞';
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 0.7rem;
    animation: phoneRing 0.3s ease-in-out infinite alternate;
}

@keyframes dendenRing {

    0%,
    80%,
    100% {
        transform: translateY(0);
    }

    85%,
    95% {
        transform: translateY(-3px);
    }

    90% {
        transform: translateY(-5px);
    }
}

@keyframes phoneRing {
    0% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(15deg);
    }
}

/* Straw Hat */
.icon-strawhat {
    position: relative;
    display: inline-block;
    animation: strawHatFloat 2s ease-in-out infinite;
}

.icon-strawhat::after {
    content: '✨';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.6rem;
    animation: hatSparkle 1s ease-in-out infinite;
}

@keyframes strawHatFloat {

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

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

@keyframes hatSparkle {

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

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Jolly Roger Skull */
.icon-jollyroger {
    position: relative;
    display: inline-block;
    animation: jollyRogerPulse 1.5s ease-in-out infinite;
}

.icon-jollyroger::before {
    content: '⚔️';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    animation: crossbonesRotate 2s ease-in-out infinite;
}

@keyframes jollyRogerPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
    }
}

@keyframes crossbonesRotate {

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

    25% {
        transform: translateX(-50%) rotate(10deg);
    }

    75% {
        transform: translateX(-50%) rotate(-10deg);
    }
}

/* ============ 3D LOGO EFFECTS ============ */

/* 3D Rotating Logo */
.logo-3d-rotate {
    animation: logo3DRotate 5s linear infinite;
    transform-style: preserve-3d;
}

@keyframes logo3DRotate {
    0% {
        transform: rotateY(0deg);
    }

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

/* 3D Flip Logo */
.logo-3d-flip {
    animation: logo3DFlip 3s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes logo3DFlip {

    0%,
    100% {
        transform: perspective(500px) rotateX(0deg);
    }

    50% {
        transform: perspective(500px) rotateX(180deg);
    }
}

/* 3D Bounce Logo */
.logo-3d-bounce {
    animation: logo3DBounce 2s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes logo3DBounce {

    0%,
    100% {
        transform: perspective(500px) translateZ(0) scale(1);
    }

    50% {
        transform: perspective(500px) translateZ(50px) scale(1.1);
    }
}

/* 3D Wave Logo */
.logo-3d-wave {
    animation: logo3DWave 3s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes logo3DWave {

    0%,
    100% {
        transform: perspective(500px) rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: perspective(500px) rotateX(10deg) rotateY(10deg);
    }

    50% {
        transform: perspective(500px) rotateX(-5deg) rotateY(-10deg);
    }

    75% {
        transform: perspective(500px) rotateX(5deg) rotateY(5deg);
    }
}

/* ============ RAINBOW 3D ICON CONTAINER ============ */

.icon-rainbow-3d {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(45deg,
            #FF3D00, #FF9500, #FFD700,
            #00C853, #2979FF, #651FFF, #D500F9);
    background-size: 400% 400%;
    animation: rainbowBg 3s linear infinite;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 40px rgba(255, 61, 0, 0.3);
}

.icon-rainbow-3d::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #1a1a2e;
}

.icon-rainbow-3d>* {
    position: relative;
    z-index: 1;
}

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

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

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

/* ============ UTILITY ICON CLASSES ============ */

/* Fast Animation */
.icon-fast {
    animation-duration: 0.5s !important;
}

/* Slow Animation */
.icon-slow {
    animation-duration: 4s !important;
}

/* Pause on Hover */
.icon-pause-hover:hover {
    animation-play-state: paused;
}

/* Scale on Hover */
.icon-scale-hover:hover {
    transform: scale(1.3);
}

/* ============ MOBILE OPTIMIZATION ============ */

@media (max-width: 768px) {

    .icon-luffy,
    .icon-sunny,
    .icon-ship {
        animation-duration: 2s;
    }

    .icon-rainbow-3d {
        width: 50px;
        height: 50px;
    }
}

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

    [class*="icon-"],
    [class*="logo-3d"] {
        animation: none !important;
    }
}