/* ===== Tema de Halloween de ANWI ===== Se activa con en index.html. Para apagarlo, borra ese atributo. */ /* ----- Pantalla de entrada ----- */ .spooky { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 30%, #3b0f5c 0%, #12061f 55%, #000 100%); color: #fff; padding: 24px 16px; transition: opacity .7s, visibility .7s; } .spooky.bye { opacity: 0; visibility: hidden; } .spooky__moon { position: absolute; top: 8%; right: 12%; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7d6, #fcd34d 60%, #f59e0b); box-shadow: 0 0 60px 20px rgba(252, 211, 77, .35), 0 0 140px 60px rgba(249, 115, 22, .15); animation: moonGlow 4s ease-in-out infinite; } @keyframes moonGlow { 50% { box-shadow: 0 0 80px 30px rgba(252, 211, 77, .5), 0 0 180px 80px rgba(249, 115, 22, .22); } } .spooky__inner { position: relative; z-index: 2; display: grid; gap: .8rem; justify-items: center; max-width: 420px; } .spooky__brand { display: flex; align-items: center; gap: .6rem; font-family: "Outfit", sans-serif; font-weight: 900; font-size: 2.4rem; letter-spacing: 3px; animation: hwPop 1s cubic-bezier(.2, 1.4, .4, 1) both; } .spooky__brand .logo__mark { width: 52px; height: 60px; } .spooky .logo__letter { stroke: url(#gradLogoDark); } .spooky .logo__string { stroke: #fff; } .spooky .logo__pivot { fill: #fff; } .spooky__title { font-family: "Creepster", "Outfit", cursive; font-weight: 400; font-size: clamp(2.8rem, 13vw, 4.4rem); line-height: 1; color: #f97316; text-shadow: 0 0 18px rgba(249, 115, 22, .8), 0 4px 0 #7c2d12; letter-spacing: .03em; animation: hwPop .9s .35s both, flicker 3s 1.5s infinite; } @keyframes flicker { 0%, 92%, 94%, 97%, 100% { opacity: 1; } 93% { opacity: .35; } 96% { opacity: .5; } } .spooky__text { color: #e9d5ff; font-size: 1.05rem; animation: hwRise .8s .6s both; } .spooky__btn { margin-top: .4rem; border: 0; border-radius: 999px; padding: 1rem 1.8rem; font: 800 1rem "Inter", sans-serif; cursor: pointer; background: linear-gradient(135deg, #a78bfa, #f97316); color: #fff; box-shadow: 0 0 30px rgba(167, 139, 250, .6); animation: hwRise .8s .85s both, hwPulse 2s 1.8s ease-in-out infinite; } .spooky__skip { color: #c4b5fd; font-size: .78rem; animation: hwRise .8s 1s both; } @keyframes hwPop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } } @keyframes hwRise { from { opacity: 0; transform: translateY(24px); } } @keyframes hwPulse { 50% { transform: scale(1.05); } } .spooky__ground { position: absolute; left: -5%; right: -5%; bottom: -10px; height: 26vh; z-index: 1; background: radial-gradient(ellipse at 50% 100%, #000 55%, transparent 72%); } .spooky__pumpkins { position: absolute; bottom: 5vh; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 8%; z-index: 2; font-size: 2.6rem; } .spooky__pumpkins span { animation: pumpkinGlow 1.6s ease-in-out infinite; } .spooky__pumpkins span:nth-child(2) { font-size: 1.8rem; align-self: flex-end; animation-delay: .5s; } .spooky__pumpkins span:nth-child(3) { animation-delay: 1s; } @keyframes pumpkinGlow { 50% { filter: drop-shadow(0 0 14px rgba(249, 115, 22, .9)); transform: translateY(-4px); } } /* ----- Cosas que caen de fondo ----- */ .boo-fall { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .boo-fall i { position: absolute; top: -40px; font-style: normal; opacity: .28; animation: booFall linear infinite; } @keyframes booFall { to { transform: translateY(110vh) rotate(360deg); } } /* ----- Murciélagos que cruzan la pantalla ----- */ .bat { position: fixed; z-index: 45; pointer-events: none; font-size: 26px; left: -60px; animation: batFly var(--dur, 7s) linear forwards; } .bat i { display: inline-block; font-style: normal; animation: flap .22s ease-in-out infinite alternate; } @keyframes flap { to { transform: scaleX(.55) scaleY(1.1); } } @keyframes batFly { 0% { transform: translate(0, 0) rotate(8deg); } 25% { transform: translate(28vw, -6vh) rotate(-6deg); } 50% { transform: translate(55vw, 4vh) rotate(8deg); } 75% { transform: translate(82vw, -8vh) rotate(-6deg); } 100% { transform: translate(calc(100vw + 120px), 2vh) rotate(6deg); } } .spooky .bat { position: absolute; z-index: 1; } /* ----- Araña colgando ----- */ .spider { position: fixed; top: 76px; right: 110px; z-index: 45; pointer-events: none; display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: spiderSwing 7s ease-in-out infinite; } .spider::before { content: ""; width: 1px; background: rgba(11, 11, 18, .45); animation: thread 7s ease-in-out infinite; } .spider span { font-size: 26px; margin-top: -4px; animation: spiderWiggle 1.2s ease-in-out infinite; } @keyframes thread { 0%, 100% { height: 30px; } 45%, 60% { height: 140px; } } @keyframes spiderSwing { 50% { transform: rotate(6deg); } 70% { transform: rotate(-5deg); } } @keyframes spiderWiggle { 50% { transform: rotate(12deg); } } /* ----- Telarañas en las esquinas ----- */ .web { position: absolute; width: 130px; height: 130px; pointer-events: none; z-index: 1; opacity: .28; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%230b0b12' stroke-width='1.1'%3E%3Cpath d='M0 0 L100 100 M0 0 L100 45 M0 0 L45 100 M0 0 L100 0 M0 0 L0 100'/%3E%3Cpath d='M18 0 Q18 12 12 18 Q10 12 0 18'/%3E%3Cpath d='M38 0 Q36 22 24 36 Q22 26 0 38'/%3E%3Cpath d='M60 0 Q56 30 40 52 Q32 44 0 60'/%3E%3Cpath d='M85 0 Q78 40 58 72 Q42 64 0 85'/%3E%3C/svg%3E") no-repeat; } .web--tl { top: 76px; left: 0; } .web--tr { top: 76px; right: 0; transform: scaleX(-1); } .section .web--tl, .section .web--tr { top: 0; } .section--dark .web { filter: invert(1); opacity: .2; } /* ----- Niebla al pie de la portada ----- */ .fog { position: absolute; left: -50%; right: -50%; bottom: -20px; height: 170px; z-index: 1; pointer-events: none; opacity: .55; background: radial-gradient(ellipse at 20% 60%, rgba(167,139,250,.45), transparent 60%), radial-gradient(ellipse at 60% 70%, rgba(249,115,22,.3), transparent 60%), radial-gradient(ellipse at 90% 60%, rgba(124,58,237,.35), transparent 60%); filter: blur(22px); animation: fogDrift 18s ease-in-out infinite alternate; } @keyframes fogDrift { to { transform: translateX(22%); } } /* ----- Detalles de color ----- */ .boo-tag { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .9rem .5rem; padding: .4rem .95rem; border-radius: 999px; background: rgba(249, 115, 22, .12); border: 1px solid rgba(249, 115, 22, .45); color: #c2410c; font-weight: 700; font-size: .85rem; animation: pumpkinGlow 2s ease-in-out infinite; } :root[data-tema="halloween"] .blob--2 { background: #f97316; opacity: .35; } :root[data-tema="halloween"] .blob--3 { background: #7c3aed; opacity: .35; } :root[data-tema="halloween"] .card::after, :root[data-tema="halloween"] .plan::after { content: "🕸️"; position: absolute; top: 10px; right: 12px; font-size: 1rem; opacity: .3; pointer-events: none; } :root[data-tema="halloween"] .card, :root[data-tema="halloween"] .plan { position: relative; } @media (max-width: 760px) { .web { width: 80px; height: 80px; opacity: .2; } .spider { right: 70px; } .boo-tag { margin-left: 0; } }