/* Japanese Flag - PREMIUM EDITION - Flowing Animation (Focus/Video Modes Only) */

.japanese-flag {
    display: none; /* Hidden in standard mode */
    position: fixed;
    z-index: 150;
    pointer-events: none; /* Don't block clicks */
    perspective: 1000px; /* Enable 3D */
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

/* Show only in focus and video modes */
body.focus-mode .japanese-flag,
body.video-mode .japanese-flag {
    display: block;
    animation: flagFloat 6s ease-in-out infinite, flagFadeIn 1s ease-out;
}

/* ============================================
   PLACEMENT - Bottom-Right
   ============================================ */

.japanese-flag {
    bottom: 100px;
    right: 30px;
    width: 120px;
    height: auto;
}

/* ===== PREMIUM LAYERED FABRIC ===== */

.flag-cloth {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    background: linear-gradient(135deg,
        #ffffff 0%,
        #f8f8f8 50%,
        #ffffff 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    transform-origin: left center;
    transform-style: preserve-3d;
    animation:
        flagWave 2.5s ease-in-out infinite,
        flagWave2 3.5s ease-in-out infinite reverse,
        flag3D 4s ease-in-out infinite;
}

/* Silk fabric texture overlay */
.flag-cloth::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.01) 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(0, 0, 0, 0.01) 1px,
            transparent 2px
        );
    opacity: 0.3;
    pointer-events: none;
}

/* Wind highlight shimmer */
.flag-cloth::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 25%,
        transparent 50%,
        rgba(0, 0, 0, 0.03) 75%,
        transparent 100%
    );
    animation: flagShimmer 3s linear infinite;
    mix-blend-mode: overlay;
}

/* ===== PREMIUM PULSING SUN ===== */

.flag-sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 52.5%;
    background: radial-gradient(circle,
        #D32F2F 0%,
        #BC002D 60%,
        #8B0000 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 15px rgba(188, 0, 45, 0.6),
        0 0 30px rgba(188, 0, 45, 0.3),
        inset 0 -5px 10px rgba(0, 0, 0, 0.2);
    animation: sunPulse 3s ease-in-out infinite;
}

/* Sun inner glow */
.flag-sun::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
}

/* ===== CHERRY BLOSSOM PETALS ===== */

.cherry-petal {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(ellipse at 30% 30%, #FFE5F0 0%, #FFB6D9 50%, #FF85C0 100%);
    border-radius: 50% 0 50% 0;
    opacity: 0;
    pointer-events: none;
    filter: blur(0.5px);
}

/* Generate 8 petals with staggered animations */
.japanese-flag .cherry-petal:nth-child(1) {
    animation: petalFall1 8s ease-in-out infinite;
    animation-delay: 0s;
}

.japanese-flag .cherry-petal:nth-child(2) {
    animation: petalFall2 10s ease-in-out infinite;
    animation-delay: 1s;
}

.japanese-flag .cherry-petal:nth-child(3) {
    animation: petalFall3 9s ease-in-out infinite;
    animation-delay: 2s;
}

.japanese-flag .cherry-petal:nth-child(4) {
    animation: petalFall4 11s ease-in-out infinite;
    animation-delay: 3s;
}

.japanese-flag .cherry-petal:nth-child(5) {
    animation: petalFall1 9.5s ease-in-out infinite;
    animation-delay: 4s;
}

.japanese-flag .cherry-petal:nth-child(6) {
    animation: petalFall2 10.5s ease-in-out infinite;
    animation-delay: 5s;
}

.japanese-flag .cherry-petal:nth-child(7) {
    animation: petalFall3 8.5s ease-in-out infinite;
    animation-delay: 6s;
}

.japanese-flag .cherry-petal:nth-child(8) {
    animation: petalFall4 11.5s ease-in-out infinite;
    animation-delay: 7s;
}

/* ===== PREMIUM ANIMATIONS ===== */

/* Gentle floating with variable wind */
@keyframes flagFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-12px) translateX(3px);
    }
    50% {
        transform: translateY(-6px) translateX(-2px);
    }
    75% {
        transform: translateY(-15px) translateX(4px);
    }
}

/* Primary wave pattern */
@keyframes flagWave {
    0%, 100% {
        clip-path: polygon(
            0% 0%,
            100% 3%,
            100% 97%,
            0% 100%
        );
    }
    25% {
        clip-path: polygon(
            0% 0%,
            97% 0%,
            100% 100%,
            0% 97%
        );
    }
    50% {
        clip-path: polygon(
            0% 3%,
            100% 0%,
            100% 100%,
            0% 97%
        );
    }
    75% {
        clip-path: polygon(
            0% 0%,
            100% 7%,
            97% 100%,
            0% 100%
        );
    }
}

/* Secondary wave pattern (offset frequency) */
@keyframes flagWave2 {
    0%, 100% {
        clip-path: polygon(
            0% 2%,
            98% 0%,
            100% 98%,
            0% 100%
        );
    }
    50% {
        clip-path: polygon(
            0% 0%,
            100% 5%,
            98% 100%,
            0% 95%
        );
    }
}

/* 3D rotation effect */
@keyframes flag3D {
    0%, 100% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    25% {
        transform: rotateY(-5deg) rotateX(2deg);
    }
    50% {
        transform: rotateY(3deg) rotateX(-1deg);
    }
    75% {
        transform: rotateY(-3deg) rotateX(1deg);
    }
}

/* Sun radiant pulse */
@keyframes sunPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 15px rgba(188, 0, 45, 0.6),
            0 0 30px rgba(188, 0, 45, 0.3);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow:
            0 0 25px rgba(188, 0, 45, 0.8),
            0 0 50px rgba(188, 0, 45, 0.5),
            0 0 70px rgba(188, 0, 45, 0.2);
    }
}

/* Wind shimmer across fabric */
@keyframes flagShimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

/* Cherry blossom petal falling patterns */
@keyframes petalFall1 {
    0% {
        top: -20px;
        left: 50%;
        opacity: 0;
        transform: rotate(0deg);
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        top: 150px;
        left: 60%;
        opacity: 0;
        transform: rotate(180deg);
    }
}

@keyframes petalFall2 {
    0% {
        top: -20px;
        left: 40%;
        opacity: 0;
        transform: rotate(45deg);
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.5;
    }
    100% {
        top: 160px;
        left: 30%;
        opacity: 0;
        transform: rotate(225deg);
    }
}

@keyframes petalFall3 {
    0% {
        top: -20px;
        left: 60%;
        opacity: 0;
        transform: rotate(90deg);
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        top: 155px;
        left: 70%;
        opacity: 0;
        transform: rotate(270deg);
    }
}

@keyframes petalFall4 {
    0% {
        top: -20px;
        left: 35%;
        opacity: 0;
        transform: rotate(135deg);
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        top: 165px;
        left: 45%;
        opacity: 0;
        transform: rotate(315deg);
    }
}

/* Fade in on mode entry with depth */
@keyframes flagFadeIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.7) rotateY(-20deg);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateY(0deg);
        filter: blur(0px);
    }
}

/* Stronger wave in video mode */
body.video-mode .flag-cloth {
    animation:
        flagWaveStrong 2s ease-in-out infinite,
        flagWave2 3s ease-in-out infinite reverse,
        flag3DStrong 3.5s ease-in-out infinite;
}

@keyframes flagWaveStrong {
    0%, 100% {
        clip-path: polygon(
            0% 0%,
            100% 8%,
            100% 92%,
            0% 100%
        );
    }
    25% {
        clip-path: polygon(
            0% 0%,
            92% 0%,
            100% 100%,
            0% 92%
        );
    }
    50% {
        clip-path: polygon(
            0% 8%,
            100% 0%,
            100% 100%,
            0% 92%
        );
    }
    75% {
        clip-path: polygon(
            0% 0%,
            100% 12%,
            92% 100%,
            0% 100%
        );
    }
}

@keyframes flag3DStrong {
    0%, 100% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    25% {
        transform: rotateY(-8deg) rotateX(3deg);
    }
    50% {
        transform: rotateY(5deg) rotateX(-2deg);
    }
    75% {
        transform: rotateY(-5deg) rotateX(2deg);
    }
}

/* Responsive sizing */
@media (max-width: 768px) {
    .japanese-flag {
        width: 80px !important;
    }
}