/* Decoración compartida (host + tablets) */
.deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; color: #15052a; }
body > header, body > main, body > footer, #app { position: relative; z-index: 1; }
#waves { position: absolute; inset: 0; }
.logo-ico { width: 1em; height: 1em; vertical-align: -.15em; color: #fff; filter: drop-shadow(0 0 8px #ff9a1f); }

/* Telarañas que se tejen y se mecen */
.web { position: absolute; width: 24vw; aspect-ratio: 1; color: #d8c8ff; opacity: .5; transform-origin: 0 0; animation: websway 7s ease-in-out infinite; }
.web.tl { top: 0; left: 0; }
.web.br { bottom: 0; right: 0; transform: rotate(180deg); transform-origin: 100% 100%; animation-name: websway2; animation-delay: -3s; }
.web svg { width: 100%; height: 100%; overflow: visible; }
.web .strands path { stroke-dasharray: 130; stroke-dashoffset: 130; animation: weave 3s ease-out forwards; }
.web .rings path { stroke-dasharray: 160; stroke-dashoffset: 160; animation: weave 3.5s ease-out 1.2s forwards; }
.web .dew { animation: dew 3.2s ease-in-out infinite; } .web .d2 { animation-delay: -1s; } .web .d3 { animation-delay: -2s; }
@keyframes weave { to { stroke-dashoffset: 0; } }
@keyframes websway { 50% { transform: rotate(1.6deg) skewX(2deg); } }
@keyframes websway2 { 0%, 100% { transform: rotate(180deg); } 50% { transform: rotate(181.6deg) skewX(2deg); } }
@keyframes dew { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* Arañas colgando de su hilo */
.hang { position: absolute; top: 0; width: 5vw; margin-left: -2.5vw; display: flex; flex-direction: column; align-items: center; transform: translateY(calc(var(--drop) * -1)); animation: lower var(--dur) ease-in-out var(--delay, 0s) infinite alternate; }
.hang i { display: block; width: 1px; height: var(--len); background: linear-gradient(#ffffff00, #ffffffaa 30%, #ffffff77); }
.hang .sp { width: 4vw; height: 4vw; margin-top: -.4vw; transform-origin: 50% 0; animation: dangle 3s ease-in-out infinite alternate; }
@keyframes lower { to { transform: translateY(0); } }
@keyframes dangle { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

/* Arañas caminando por los bordes (con pausas) */
.walker { position: absolute; width: 3.2vw; height: 3.2vw; }
.walker svg { width: 100%; height: 100%; animation: scuttle .3s ease-in-out infinite alternate; }
.walker.w1 { bottom: .8%; left: 0; animation: walk-r 40s linear infinite; }
.walker.w2 { top: 11%; right: 0; width: 2.4vw; height: 2.4vw; animation: walk-l 52s linear -20s infinite; }
.walker.w3 { left: .6%; top: 0; width: 2.6vw; height: 2.6vw; animation: walk-d 46s linear -10s infinite; }
@keyframes scuttle { from { transform: translateX(-.12vw) rotate(-3deg); } to { transform: translateX(.12vw) rotate(3deg); } }
@keyframes walk-r { 0% { transform: translateX(-6vw) rotate(90deg); } 25% { transform: translateX(26vw) rotate(90deg); } 31% { transform: translateX(26vw) rotate(90deg); } 60% { transform: translateX(64vw) rotate(90deg); } 66% { transform: translateX(64vw) rotate(90deg); } 100% { transform: translateX(106vw) rotate(90deg); } }
@keyframes walk-l { 0% { transform: translateX(6vw) rotate(-90deg); } 30% { transform: translateX(-40vw) rotate(-90deg); } 38% { transform: translateX(-40vw) rotate(-90deg); } 100% { transform: translateX(-106vw) rotate(-90deg); } }
@keyframes walk-d { 0% { transform: translateY(-6vh) rotate(180deg); } 40% { transform: translateY(45vh) rotate(180deg); } 48% { transform: translateY(45vh) rotate(180deg); } 100% { transform: translateY(106vh) rotate(180deg); } }

/* Murciélagos */
.bat { position: absolute; left: 0; width: 6vw; height: 3vw; animation: fly 16s linear infinite; }
.bat svg { width: 100%; height: 100%; filter: drop-shadow(0 0 5px #b57bff); animation: bat-bob .5s ease-in-out infinite alternate; }
.bat.b1 { top: 12%; }
.bat.b2 { top: 60%; width: 4.5vw; height: 2.25vw; animation-duration: 22s; animation-delay: -8s; animation-direction: reverse; }
.bat.b3 { top: 32%; width: 3.5vw; height: 1.75vw; animation-duration: 19s; animation-delay: -13s; }
@keyframes bat-bob { from { transform: translateY(-.7vh) rotate(-3deg); } to { transform: translateY(.7vh) rotate(3deg); } }
@keyframes fly { 0% { transform: translate(-12vw, 0); } 20% { transform: translate(18vw, -7vh); } 40% { transform: translate(42vw, 5vh); } 60% { transform: translate(66vw, -6vh); } 80% { transform: translate(90vw, 4vh); } 100% { transform: translate(115vw, -2vh); } }

@media (prefers-reduced-motion: reduce) { .walker, .bat, .hang, .web { animation: none; } }

.web3d { position: absolute; inset: 0; }

/* Franjas diagonales en las esquinas (estilo pantalla de subida de nivel) */

/* Destellos de cuatro puntas */
.spk { position: absolute; width: 1.1vw; height: 1.1vw; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px #ffd98a); opacity: 0; animation: spk-tw 3s ease-in-out infinite; }
@keyframes spk-tw { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(45deg); } }

/* Insignia hexagonal con laureles */
.badge { position: relative; display: inline-grid; place-items: center; width: 2.9em; height: 2.9em; vertical-align: middle; }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .1em .2em #0007); }
.badge b { position: relative; font-family: "Arial Black", "Segoe UI Black", sans-serif; font-weight: 900; font-size: 1.1em; color: #fff; -webkit-text-stroke: .1em #1a0833; paint-order: stroke fill; }

/* Telarañas finas y discretas */
.web { width: 21vw; opacity: .5; color: #d8c8ff; }
.web.br { width: 15vw; }
.web svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(200,180,255,.45)); }
.web .strands path { stroke-width: .45; stroke-dasharray: 130; }
.web .rings path { stroke-width: .3; stroke-dasharray: 60; stroke-dashoffset: 60; }
.web .strands path, .web .rings path { fill: none; stroke: currentColor; stroke-linecap: round; }

/* La araña cuelga del hilo: todo el conjunto se balancea desde arriba y el hilo llega hasta su cabeza */
.hang .sw { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; animation: dangle 3.4s ease-in-out infinite alternate; }
.hang .sp { margin-top: -1.45vw; animation: none; position: relative; z-index: 1; }
.hang i { position: relative; z-index: 0; background: linear-gradient(#ffffff00, #ffffffbb 25%, #ffffffaa); }
@keyframes dangle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* Escena de Halloween de fondo */
.moon { position: absolute; width: 11vw; aspect-ratio: 1; left: 50%; top: -4.4vw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8de, #ffe3a0 55%, #e6b45e); box-shadow: 0 0 5vw 1.6vw rgba(255,214,140,.35), 0 0 16vw 6vw rgba(255,140,50,.16); opacity: .92; animation: moonpulse 6s ease-in-out infinite alternate; }
.moon i { position: absolute; border-radius: 50%; background: rgba(160,110,50,.28); box-shadow: inset 0 .15vw .3vw rgba(90,50,10,.3); }
@keyframes moonpulse { to { box-shadow: 0 0 6vw 2.2vw rgba(255,214,140,.45), 0 0 18vw 7vw rgba(255,140,50,.22); } }
.yard { position: absolute; left: 0; bottom: 0; width: 100%; height: 32vh; }
.yard .flick { animation: flick 1.6s ease-in-out infinite alternate; }
@keyframes flick { 0% { opacity: .65; } 40% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 1; } }
.fogband { position: absolute; left: -20%; width: 140%; height: 20vh; bottom: 2vh; pointer-events: none; background: radial-gradient(ellipse at 28% 62%, rgba(210,190,255,.2), transparent 60%), radial-gradient(ellipse at 74% 52%, rgba(255,170,100,.12), transparent 55%); animation: fogmove 24s ease-in-out infinite alternate; }
.fogband.f2 { bottom: 6vh; height: 16vh; opacity: .8; animation-duration: 31s; animation-direction: alternate-reverse; }
@keyframes fogmove { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.ember { position: absolute; bottom: -2vh; width: .36vw; height: .36vw; border-radius: 50%; background: #ffb347; box-shadow: 0 0 .8vw #ff9a1f; opacity: 0; animation: rise linear infinite; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(var(--dx), -108vh); opacity: 0; } }

.yard3d { position: absolute; left: 0; bottom: 0; width: 100%; height: 34vh; }

/* Escena Halloween (FBX) de fondo */
.diorama { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; filter: saturate(.85); }
.diorama.on { opacity: .6; }
.diorama::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 46% 40% at 50% 36%, rgba(16,5,38,.82), rgba(16,5,38,.35) 55%, transparent 80%), linear-gradient(180deg, rgba(16,5,38,.35), transparent 30%); }
.deco.calm .diorama.on { opacity: .28; }
.diorama canvas { display: block; width: 100%; height: 100%; }
.deco.has-diorama .moon, .deco.has-diorama .yard, .deco.has-diorama .yard3d { display: none; }

/* Fondo de las tablets: resplandor naranja desde abajo */
.glowfloor { position: absolute; left: 0; right: 0; bottom: 0; height: 45vh; background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,110,20,.28), rgba(150,40,200,.14) 45%, transparent 75%); animation: glowpulse 5s ease-in-out infinite alternate; }
@keyframes glowpulse { from { opacity: .6; } to { opacity: 1; } }