/* ==========================================================================
   CORTINA DE BANDERA REALISTA CON FILTRO DE TERCIOPELO Y FÍSICAS DE TELA
   - Filtro cinematográfico de terciopelo casino (tonos suavizados y elegantes)
   - Ondas 3D de tela con luces y sombras profundas (pliegues drapeados)
   - Borde inferior con curvatura orgánica y ribete dorado
   - Adaptación total en móvil (Francia, Italia, España, Portugal, UK 100% visibles)
   - Físicas con peso, inercia y amortiguación de tejido pesado
   ========================================================================== */

.lang-curtain-overlay,
.lang-flag-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999999;
    pointer-events: none;
    overflow: hidden;
    visibility: hidden;
}

.lang-flag-curtain.active {
    visibility: visible;
    pointer-events: auto;
}

/* Panel de la cortina con peso y sombras de profundidad */
.flag-curtain-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: translateY(-105%);
    will-change: transform;
    background: #050811;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.98);
}

/* Fase 1: Caída de telón con peso orgánico, compresión elástica y amortiguación */
.lang-flag-curtain.phase-in .flag-curtain-panel {
    animation: flagCurtainDrop 0.54s cubic-bezier(0.16, 1, 0.28, 1) forwards;
}

/* Fase 2: Recogida hacia arriba con tensión y estiramiento de tejido */
.lang-flag-curtain.phase-out .flag-curtain-panel {
    animation: flagCurtainLift 0.46s cubic-bezier(0.42, 0, 0.22, 1) forwards;
}

/* Contenedor de la tela */
.flag-curtain-cloth {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #04070f;
}

/* Bandera con filtro satinado / terciopelo suave */
.flag-curtain-image {
    width: 100vw;
    height: 100vh;
    object-fit: fill;
    object-position: center center;
    display: block;
    filter: saturate(0.82) brightness(0.80) contrast(1.10);
    opacity: 0.95;
    user-select: none;
    -webkit-user-drag: none;
}

/* 1. Filtro de armonización Casino: viñeta profunda + tono nocturno elegante */
.flag-curtain-casino-tone {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 50% 45%, rgba(13, 20, 36, 0.25) 0%, rgba(6, 10, 18, 0.60) 70%, rgba(2, 4, 8, 0.88) 100%),
        linear-gradient(180deg, rgba(4, 7, 15, 0.45) 0%, transparent 25%, transparent 75%, rgba(2, 4, 8, 0.70) 100%);
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* 2. Pliegues verticales 3D realistas (ondas de cortina con luces y valles de sombra) */
.flag-curtain-pleats {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.55) 0px,
        rgba(0, 0, 0, 0.25) 18px,
        rgba(255, 255, 255, 0.04) 38px,
        rgba(255, 255, 255, 0.18) 58px,
        rgba(255, 255, 255, 0.05) 78px,
        rgba(0, 0, 0, 0.30) 98px,
        rgba(0, 0, 0, 0.60) 120px
    );
    mix-blend-mode: overlay;
    opacity: 0.88;
    pointer-events: none;
    will-change: transform;
}

.lang-flag-curtain.phase-in .flag-curtain-pleats {
    animation: pleatWaveMotion 0.54s ease-out;
}

/* 3. Brillo satinado sedoso y textura vertical de terciopelo */
.flag-curtain-velvet-sheen {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(0, 0, 0, 0.10) 30%,
            transparent 60%,
            rgba(0, 0, 0, 0.45) 100%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.02) 4px,
            transparent 5px
        );
    mix-blend-mode: soft-light;
    opacity: 0.75;
    pointer-events: none;
}

/* Borde inferior ondulado (curvatura orgánica de cortina) */
.flag-curtain-bottom-trim {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 42px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.flag-curtain-wave-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.95));
}

/* Keyframes con físicas orgánicas de tela pesada */
@keyframes flagCurtainDrop {
    0% {
        transform: translateY(-105%) scaleY(1.04);
    }
    65% {
        transform: translateY(1.4%) scaleY(0.98);
    }
    82% {
        transform: translateY(-0.6%) scaleY(1.01);
    }
    100% {
        transform: translateY(0%) scaleY(1);
    }
}

@keyframes flagCurtainLift {
    0% {
        transform: translateY(0%) scaleY(1);
    }
    14% {
        transform: translateY(0.8%) scaleY(0.99);
    }
    100% {
        transform: translateY(-105%) scaleY(1.05);
    }
}

/* Ondulación de las ondas/pliegues durante la caída */
@keyframes pleatWaveMotion {
    0% {
        transform: scaleX(1.12) translateX(-20px) skewX(-0.8deg);
    }
    50% {
        transform: scaleX(0.95) translateX(10px) skewX(0.4deg);
    }
    100% {
        transform: scaleX(1) translateX(0) skewX(0deg);
    }
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE EN MÓVIL
   En pantallas verticales (smartphones):
   - Cada bandera muestra todos sus colores, franjas y emblemas de punta a punta.
   - Francia: Azul, Blanco y Rojo en 3 franjas verticales proporcionales.
   - Italia: Verde, Blanco y Rojo en 3 franjas verticales proporcionales.
   - España: Rojo, Amarillo con escudo y Rojo.
   - Portugal: Verde, Rojo y esfera.
   - UK: Bandera Union Jack completa.
   ========================================================================== */
@media (max-width: 768px) {
    .flag-curtain-image {
        object-fit: fill !important;
        width: 100vw !important;
        height: 100vh !important;
        object-position: center center !important;
        filter: saturate(0.82) brightness(0.82) contrast(1.10);
    }

    .flag-curtain-pleats {
        background: repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.55) 0px,
            rgba(0, 0, 0, 0.25) 12px,
            rgba(255, 255, 255, 0.04) 25px,
            rgba(255, 255, 255, 0.18) 38px,
            rgba(255, 255, 255, 0.05) 50px,
            rgba(0, 0, 0, 0.30) 62px,
            rgba(0, 0, 0, 0.60) 75px
        );
        opacity: 0.85;
    }

    .flag-curtain-bottom-trim {
        height: 32px;
    }
}