/* ====================================
   WATERMARK.CSS - Escudo en marca de agua
   Efecto cristal líquido animado
   IESJ Futurista Tropical
   ==================================== */

/* === KEYFRAMES DEL CRISTAL LÍQUIDO === */

@keyframes crystalFloat {
    0%   { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 0.07; }
    20%  { transform: translate(-50%, -53%) scale(1.03) rotate(-6deg); opacity: 0.09; }
    40%  { transform: translate(-52%, -50%) scale(0.98) rotate(-10deg); opacity: 0.06; }
    60%  { transform: translate(-48%, -52%) scale(1.02) rotate(-7deg); opacity: 0.08; }
    80%  { transform: translate(-51%, -48%) scale(1.01) rotate(-9deg); opacity: 0.07; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 0.07; }
}

@keyframes crystalPulse {
    0%, 100% { filter: blur(0.5px) brightness(1.2) saturate(0.6); }
    50%       { filter: blur(1.5px) brightness(1.4) saturate(0.8); }
}

@keyframes crystalLiquid {
    0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg) skew(0deg); }
    15%  { transform: translate(-50%, -50%) scale(1.02) rotate(1deg) skew(0.5deg); }
    30%  { transform: translate(-50%, -50%) scale(0.99) rotate(-0.5deg) skew(-0.3deg); }
    45%  { transform: translate(-50%, -50%) scale(1.01) rotate(0.8deg) skew(0.2deg); }
    60%  { transform: translate(-50%, -50%) scale(1.03) rotate(-1deg) skew(-0.5deg); }
    75%  { transform: translate(-50%, -50%) scale(0.98) rotate(0.5deg) skew(0.3deg); }
    90%  { transform: translate(-50%, -50%) scale(1.01) rotate(-0.3deg) skew(-0.1deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg) skew(0deg); }
}

/* === CLASE BASE PARA SECCIONES CON ESCUDO === */
body.iesj-modern .iesj-watermark-section {
    position: relative !important;
    overflow: hidden !important;
}

body.iesj-modern .iesj-watermark-section > .container,
body.iesj-modern .iesj-watermark-section > * {
    position: relative;
    z-index: 2;
}

/* === ESCUDO MARCA DE AGUA - pseudo-elemento === */
body.iesj-modern .iesj-watermark-section::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 500px !important;
    height: 500px !important;

    /* IMPORTANTE: reemplaza esta URL con la URL del escudo en tu servidor */
    background-image: url('/wp-content/themes/enfold-child/assets/images/escudo-iesj.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    pointer-events: none !important;
    z-index: 1 !important;

    animation: crystalFloat 15s ease-in-out infinite !important;
}

/* Variante: sección clara (fondo blanco/gris) */
body.iesj-modern .iesj-watermark-section.light-bg::before {
    filter: grayscale(20%) brightness(0.4) saturate(0.5) !important;
    opacity: 0.05 !important;
    animation: crystalFloat 15s ease-in-out infinite,
               crystalPulse 8s ease-in-out infinite !important;
}

/* Variante: sección oscura (fondo navy) */
body.iesj-modern .iesj-watermark-section.dark-bg::before,
body.iesj-modern .iesj-watermark-section.dark::before {
    filter: brightness(1.6) saturate(0.3) contrast(0.8) !important;
    opacity: 0.09 !important;
    animation: crystalFloat 15s ease-in-out infinite,
               crystalPulse 6s ease-in-out infinite !important;
}

/* Variante: efecto cristal líquido máximo */
body.iesj-modern .iesj-watermark-section.crystal-max::before {
    width: 700px !important;
    height: 700px !important;
    opacity: 0.12 !important;
    filter: blur(1px) brightness(1.3) saturate(0.5) !important;
    animation: crystalLiquid 20s ease-in-out infinite,
               crystalPulse 10s ease-in-out infinite !important;
}

/* === ESCUDO DECORATIVO LATERAL === */
body.iesj-modern .iesj-watermark-corner::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 250px;
    height: 250px;
    background-image: url('/wp-content/themes/enfold-child/assets/images/escudo-iesj.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.06;
    filter: grayscale(30%);
    pointer-events: none;
    z-index: 0;
    animation: crystalPulse 8s ease-in-out infinite;
}

/* === ESCUDO EN HERO DEL SLIDER === */
body.iesj-modern .avia-slideshow .avia-slide-wrap {
    position: relative;
    overflow: hidden;
}

body.iesj-modern .avia-slideshow .avia-slide-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 5%;
    width: 420px;
    height: 420px;
    background-image: url('/wp-content/themes/enfold-child/assets/images/escudo-iesj.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateY(-50%);
    opacity: 0.10;
    filter: brightness(1.5) saturate(0.4) blur(0.5px);
    pointer-events: none;
    z-index: 1;
    animation: crystalFloat 18s ease-in-out infinite;
}

/* === ESCUDO EN FOOTER === */
body.iesj-modern #footer::before,
body.iesj-modern footer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background-image: url('/wp-content/themes/enfold-child/assets/images/escudo-iesj.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%);
    opacity: 0.04;
    filter: grayscale(50%) brightness(2);
    pointer-events: none;
    z-index: 0;
    animation: crystalFloat 20s ease-in-out infinite;
}

body.iesj-modern #footer,
body.iesj-modern footer {
    position: relative;
    overflow: hidden;
}

body.iesj-modern #footer > *,
body.iesj-modern footer > * {
    position: relative;
    z-index: 2;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    body.iesj-modern .iesj-watermark-section::before {
        width: 300px !important;
        height: 300px !important;
    }

    body.iesj-modern .avia-slideshow .avia-slide-wrap::before {
        width: 200px;
        height: 200px;
        opacity: 0.07;
    }
}

@media (max-width: 480px) {
    body.iesj-modern .iesj-watermark-section::before {
        width: 200px !important;
        height: 200px !important;
        opacity: 0.05 !important;
    }
}