/*
 * Tema Fiestas Patrias (28 julio) - InkaBox Express
 * Confeti rojo/blanco, banderitas del Perú, serpentinas
 */

:root {
    --fp-red: #c8102e;
    --fp-red-deep: #9b0c22;
    --fp-white: #ffffff;
    --fp-gold: #d4a017;
}

body.fiestaspatrias-active {
    --fp-glow: rgba(200, 16, 46, 0.12);
}

.fiestaspatrias-effects-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

/* —— Confeti —— */
.fp-confetti {
    position: absolute;
    top: -20px;
    border-radius: 2px;
    pointer-events: none;
    animation-name: fpConfettiFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.fp-confetti.fp-round {
    border-radius: 50%;
}

@keyframes fpConfettiFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 40px)) translateX(var(--fp-drift, 40px)) rotate(var(--fp-spin, 720deg));
        opacity: 0.9;
    }
}

/* —— Banderitas Perú (rojo | blanco | rojo) —— */
.fp-flag {
    position: absolute;
    top: -40px;
    width: 28px;
    height: 18px;
    display: flex;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    animation-name: fpFlagFall;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    transform-origin: top center;
}

.fp-flag.fp-flag-lg {
    width: 42px;
    height: 28px;
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

.fp-flag.fp-flag-xl {
    width: 56px;
    height: 36px;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fp-flag.fp-flag-wave {
    animation-name: fpFlagWaveFall;
}

.fp-flag::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 1.5px;
    height: 8px;
    background: #555;
    transform: translateX(-50%);
}

.fp-flag-stripe {
    flex: 1;
    height: 100%;
}

.fp-flag-stripe.red {
    background: var(--fp-red);
}

.fp-flag-stripe.white {
    background: var(--fp-white);
}

@keyframes fpFlagFall {
    0% {
        transform: translateY(0) translateX(0) rotate(-8deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) translateX(var(--fp-drift, 30px)) rotate(12deg);
    }
    100% {
        transform: translateY(calc(100vh + 50px)) translateX(calc(var(--fp-drift, 30px) * -0.6)) rotate(-15deg);
        opacity: 0.85;
    }
}

@keyframes fpFlagWaveFall {
    0% {
        transform: translateY(0) translateX(0) rotate(-12deg) skewX(0deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) translateX(calc(var(--fp-drift, 30px) * 0.4)) rotate(8deg) skewX(4deg);
    }
    50% {
        transform: translateY(50vh) translateX(var(--fp-drift, 30px)) rotate(-10deg) skewX(-5deg);
    }
    75% {
        transform: translateY(75vh) translateX(calc(var(--fp-drift, 30px) * 0.5)) rotate(14deg) skewX(3deg);
    }
    100% {
        transform: translateY(calc(100vh + 50px)) translateX(calc(var(--fp-drift, 30px) * -0.5)) rotate(-8deg) skewX(0deg);
        opacity: 0.85;
    }
}

/* —— Escarapelas (rojo / blanco / rojo + cintas) —— */
.fp-escarapela {
    position: absolute;
    top: -50px;
    width: 36px;
    height: 36px;
    pointer-events: none;
    animation-name: fpEscarapelaFall;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.fp-escarapela.fp-esc-lg {
    width: 48px;
    height: 48px;
}

.fp-esc-rosette {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        var(--fp-red) 0 22%,
        var(--fp-white) 22% 48%,
        var(--fp-red) 48% 78%,
        var(--fp-white) 78% 88%,
        var(--fp-red) 88% 100%
    );
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.fp-esc-tail {
    position: absolute;
    top: 70%;
    width: 10px;
    height: 22px;
    border-radius: 0 0 3px 3px;
    transform-origin: top center;
}

.fp-esc-tail.left {
    left: 28%;
    background: linear-gradient(180deg, var(--fp-red) 0%, var(--fp-red-deep) 100%);
    transform: rotate(-18deg);
}

.fp-esc-tail.right {
    right: 28%;
    background: linear-gradient(180deg, var(--fp-white) 0%, #e8e8e8 100%);
    border: 1px solid rgba(200, 16, 46, 0.35);
    border-top: none;
    transform: rotate(18deg);
}

@keyframes fpEscarapelaFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(0.7);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 60px)) translateX(var(--fp-drift, 40px)) rotate(var(--fp-spin, 360deg)) scale(1);
        opacity: 0.9;
    }
}

/* —— Serpentinas —— */
.fp-serpentina {
    position: absolute;
    top: -30px;
    height: 8px;
    border-radius: 4px;
    pointer-events: none;
    transform-origin: left center;
    animation-name: fpSerpentina;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    background: repeating-linear-gradient(
        90deg,
        var(--fp-red) 0 10px,
        var(--fp-white) 10px 20px
    );
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    opacity: 0.92;
}

.fp-serpentina.fp-gold-ribbon {
    background: repeating-linear-gradient(
        90deg,
        var(--fp-gold) 0 8px,
        var(--fp-red) 8px 16px,
        var(--fp-white) 16px 24px
    );
}

@keyframes fpSerpentina {
    0% {
        transform: translateY(0) translateX(0) rotate(var(--fp-angle, -25deg)) scaleX(0.4);
        opacity: 0;
    }
    12% {
        opacity: 0.95;
    }
    100% {
        transform: translateY(calc(100vh + 60px)) translateX(var(--fp-drift, 80px)) rotate(calc(var(--fp-angle, -25deg) + 40deg)) scaleX(1);
        opacity: 0.75;
    }
}

/* Toque sutil en navbar */
body.fiestaspatrias-active .navbar {
    box-shadow: 0 2px 12px rgba(200, 16, 46, 0.18);
}

body.fiestaspatrias-active .navbar::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--fp-red) 0%, var(--fp-white) 50%, var(--fp-red) 100%);
}

@media (max-width: 768px) {
    .fp-flag {
        width: 22px;
        height: 14px;
    }
    .fp-flag.fp-flag-lg {
        width: 32px;
        height: 20px;
    }
    .fp-flag.fp-flag-xl {
        width: 40px;
        height: 26px;
    }
    .fp-escarapela {
        width: 28px;
        height: 28px;
    }
    .fp-escarapela.fp-esc-lg {
        width: 36px;
        height: 36px;
    }
}