/**
 * Decoración Estacional: Halloween
 * Academia Britannia
 * 
 * Telaraña con arañita en la esquina superior y calabaza tallada iluminada en la parte baja a la derecha.
 */

/* Telaraña sutil y detallada en la esquina superior izquierda del logo con arañita */
.deco-logo-halloween::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    width: 52px;
    height: 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none'%3E%3C!-- Hilos radiales de la telaraña --%3E%3Cpath d='M0 0 L58 0' stroke='%2394a3b8' stroke-width='0.9' stroke-opacity='0.7'/%3E%3Cpath d='M0 0 L55 20' stroke='%2394a3b8' stroke-width='0.9' stroke-opacity='0.7'/%3E%3Cpath d='M0 0 L45 38' stroke='%2394a3b8' stroke-width='0.9' stroke-opacity='0.7'/%3E%3Cpath d='M0 0 L30 52' stroke='%2394a3b8' stroke-width='0.9' stroke-opacity='0.7'/%3E%3Cpath d='M0 0 L0 58' stroke='%2394a3b8' stroke-width='0.9' stroke-opacity='0.7'/%3E%3C!-- Arcos concéntricos --%3E%3Cpath d='M14 0 Q12 5 0 14' stroke='%2394a3b8' stroke-width='0.8' stroke-opacity='0.8' fill='none'/%3E%3Cpath d='M28 0 Q24 10 0 28' stroke='%2394a3b8' stroke-width='0.8' stroke-opacity='0.8' fill='none'/%3E%3Cpath d='M42 0 Q36 18 0 42' stroke='%2394a3b8' stroke-width='0.8' stroke-opacity='0.8' fill='none'/%3E%3Cpath d='M56 0 Q48 24 0 56' stroke='%2394a3b8' stroke-width='0.8' stroke-opacity='0.8' fill='none'/%3E%3C!-- Hilo de seda colgando con diminuta arañita --%3E%3Cline x1='40' y1='10' x2='40' y2='34' stroke='%2364748b' stroke-width='0.7' stroke-dasharray='1,1.5' stroke-opacity='0.85'/%3E%3Ccircle cx='40' cy='36' r='2.4' fill='%231e293b'/%3E%3Cpath d='M38 35 Q35 34 36 38 M42 35 Q45 34 44 38 M38 37 Q35 39 36 41 M42 37 Q45 39 44 41' stroke='%231e293b' stroke-width='0.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
    transform-origin: 0 0;
    animation: deco-web-breeze 6s ease-in-out infinite;
}

@keyframes deco-web-breeze {
    0%, 100% {
        transform: rotate(0deg);
        opacity: 0.85;
    }
    50% {
        transform: rotate(1.5deg) scale(1.02);
        opacity: 0.95;
    }
}

.logo:hover.deco-logo-halloween::before {
    opacity: 1;
}

/* Calabaza Jack-o'-Lantern tallada e iluminada en la parte baja del logo a la derecha */
.logo-deco-halloween {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3ClinearGradient id='pumpkin-grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fb923c'/%3E%3Cstop offset='60%25' stop-color='%23ea580c'/%3E%3Cstop offset='100%25' stop-color='%23c2410c'/%3E%3C/linearGradient%3E%3Cfilter id='candle-glow' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='1.6' flood-color='%23fef08a' flood-opacity='0.9'/%3E%3C/filter%3E%3C/defs%3E%3C!-- Rabito verde de la calabaza --%3E%3Cpath d='M25 12 Q23 5 28 4 Q29 8 27 12 Z' fill='%2315803d' stroke='%2314532d' stroke-width='0.6'/%3E%3C!-- Gajos laterales exteriores --%3E%3Cellipse cx='16' cy='28' rx='10' ry='15' fill='%23c2410c'/%3E%3Cellipse cx='34' cy='28' rx='10' ry='15' fill='%23c2410c'/%3E%3C!-- Gajos intermedios --%3E%3Cellipse cx='20' cy='29' rx='10' ry='15' fill='url(%23pumpkin-grad)'/%3E%3Cellipse cx='30' cy='29' rx='10' ry='15' fill='url(%23pumpkin-grad)'/%3E%3C!-- Gajo central prominente --%3E%3Cellipse cx='25' cy='30' rx='9' ry='15' fill='url(%23pumpkin-grad)' stroke='%239a3412' stroke-width='0.4'/%3E%3C!-- Cara tallada iluminada con vela interior --%3E%3Cg filter='url(%23candle-glow)'%3E%3C!-- Ojos triangulares --%3E%3Cpolygon points='16,24 22,24 19,19' fill='%23fef08a' stroke='%23f59e0b' stroke-width='0.6'/%3E%3Cpolygon points='28,24 34,24 31,19' fill='%23fef08a' stroke='%23f59e0b' stroke-width='0.6'/%3E%3C!-- Nariz triangular --%3E%3Cpolygon points='23,28 27,28 25,25' fill='%23fef08a' stroke='%23f59e0b' stroke-width='0.5'/%3E%3C!-- Sonrisa con dientes tallados --%3E%3Cpath d='M16 33 Q25 40 34 33 Q32 37 30 35 Q29 37 25 38 Q21 37 20 35 Q18 37 16 33 Z' fill='%23fef08a' stroke='%23f59e0b' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E");
    top: auto;
    bottom: -10px;
    left: 42px;
    width: 38px;
    height: 38px;
    z-index: 4;
    animation: deco-pumpkin-wobble 4s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes deco-pumpkin-wobble {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(-3deg) scale(1.04);
    }
}

/* Sutil resplandor ámbar misterioso en la palabra Britannia */
.deco-logo-halloween .logo-highlight {
    color: #f97316;
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.35);
    animation: deco-halloween-pulse 3s ease-in-out infinite alternate;
}

@keyframes deco-halloween-pulse {
    0% {
        color: #ea580c;
        text-shadow: 0 0 4px rgba(234, 88, 12, 0.2);
    }
    100% {
        color: #fb923c;
        text-shadow: 0 0 14px rgba(251, 146, 60, 0.55);
    }
}

/* Mini murciélago silueta descansando junto al texto en desktop */
.deco-logo-halloween .logo-text-desktop::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ea580c'%3E%3Cpath d='M12 9c-1.5-2-4-3-7-3-2 0-3 1-3 1s1 2 2 3c-1.5 1-2 3-2 3s2.5 0 5-1.5c.5 1.5 2 2.5 5 2.5s4.5-1 5-2.5c2.5 1.5 5 1.5 5 1.5s-.5-2-2-3c1-1 2-3 2-3s-1-1-3-1c-3 0-5.5 1-7 3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.85;
    animation: deco-bat-flutter 5s ease-in-out infinite;
}

@keyframes deco-bat-flutter {
    0%, 90%, 100% { transform: scale(1); opacity: 0.8; }
    94% { transform: scale(1.15) translateY(-2px); opacity: 1; }
    98% { transform: scale(0.95); opacity: 0.85; }
}

@media (max-width: 768px) {
    .deco-logo-halloween::before {
        top: -9px;
        left: -9px;
        width: 42px;
        height: 42px;
    }
    .logo-deco-halloween {
        bottom: -8px;
        left: 34px;
        width: 32px;
        height: 32px;
    }
}