@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Eater&family=Metal+Mania&display=swap');

/* ── Shared effect layer ───────────────────────────────────── */
.hw-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hw-fx.hw-fixed { position: fixed; z-index: 5; }
.hw-item { position: absolute; will-change: transform; user-select: none; line-height: 1; }

@keyframes hw-fly   { 0% { transform: translateX(-12vw) translateY(0) scale(var(--s,1)); }
                      25% { transform: translateX(22vw) translateY(-6vh) scale(var(--s,1)) rotate(-8deg); }
                      50% { transform: translateX(55vw) translateY(5vh) scale(var(--s,1)) rotate(8deg); }
                      75% { transform: translateX(85vw) translateY(-5vh) scale(var(--s,1)) rotate(-6deg); }
                      100% { transform: translateX(115vw) translateY(0) scale(var(--s,1)); } }
@keyframes hw-float { 0% { transform: translateY(105%) translateX(0) scale(var(--s,1)); opacity: 0; }
                      15% { opacity: .85; }
                      50% { transform: translateY(-30vh) translateX(4vw) scale(var(--s,1)); }
                      85% { opacity: .85; }
                      100% { transform: translateY(-120%) translateX(-3vw) scale(var(--s,1)); opacity: 0; } }
@keyframes hw-fall  { 0% { transform: translateY(-12vh) rotate(0deg) scale(var(--s,1)); }
                      100% { transform: translateY(112vh) rotate(var(--r,360deg)) scale(var(--s,1)); } }
@keyframes hw-dangle{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(var(--d,24vh)); } }
@keyframes hw-flash { 0%,88%,100% { opacity: 0; } 90% { opacity: .9; } 92% { opacity: .1; } 94% { opacity: .75; } 97% { opacity: 0; } }
@keyframes hw-fog   { 0% { transform: translateX(-30%); } 100% { transform: translateX(30%); } }

@keyframes hw-twinkle { 0%,100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.15); } }
.hw-twinkle { animation: hw-twinkle var(--t,3s) ease-in-out infinite; }
.hw-bat   { animation: hw-fly   var(--t,12s) linear infinite; }
.hw-ghost { animation: hw-float var(--t,14s) ease-in-out infinite; }
.hw-fall  { animation: hw-fall  var(--t,10s) linear infinite; }
.hw-spider{ animation: hw-dangle var(--t,5s) ease-in-out infinite; transform-origin: top center; }
.hw-spider::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 120vh; background: rgba(255,255,255,.55); }
.hw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: hw-flash 7s infinite; }
.hw-fogband { position: absolute; left: -30%; width: 160%; height: 45%; background: radial-gradient(ellipse at center, rgba(255,255,255,.28), transparent 70%); filter: blur(22px); animation: hw-fog var(--t,18s) ease-in-out infinite alternate; }

/* ── Page loader ───────────────────────────────────────────── */
#hw-loader { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 40%, #3a0f66 0%, #12031f 70%); color: #ff9d2e; transition: opacity .6s ease, visibility .6s ease; overflow: hidden; }
#hw-loader.hw-done { opacity: 0; visibility: hidden; }
#hw-loader .hw-moon { position: absolute; top: 9%; right: 12%; width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbe0, #f6e27a 60%, #d9b94a); box-shadow: 0 0 80px 20px rgba(246,226,122,.35); }
#hw-loader .hw-pumpkin { font-size: 110px; line-height: 1; animation: hw-bounce 1.1s ease-in-out infinite; filter: drop-shadow(0 0 28px rgba(255,140,0,.75)); }
#hw-loader .hw-text { margin-top: 18px; font-family: 'Creepster', cursive; font-size: 30px; letter-spacing: 3px; text-shadow: 0 0 14px rgba(255,140,0,.8); }
#hw-loader .hw-text i { font-style: normal; animation: hw-blink 1.4s infinite; }
#hw-loader .hw-text i:nth-child(2) { animation-delay: .25s; }
#hw-loader .hw-text i:nth-child(3) { animation-delay: .5s; }
#hw-loader .hw-bar { margin-top: 16px; width: 200px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
#hw-loader .hw-bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #ff6a00, #ffcc33); border-radius: 6px; animation: hw-slide 1.2s ease-in-out infinite; }
@keyframes hw-bounce { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-22px) rotate(4deg); } }
@keyframes hw-blink  { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes hw-slide  { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ── Home page: decorations & CTA ─────────────────────────── */
.hw-cta-wrap { margin-top: 14px; }
.hw-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 50px; font-weight: 700; font-size: 15px; text-decoration: none;
    color: #fff !important; background: linear-gradient(135deg, #ff6a00, #b31217); box-shadow: 0 0 0 0 rgba(255,106,0,.6), 0 8px 24px rgba(179,18,23,.35);
    animation: hw-pulse 2s infinite; transition: transform .2s; }
.hw-cta:hover { transform: scale(1.06) rotate(-1deg); color: #fff !important; }
@keyframes hw-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,106,0,.55), 0 8px 24px rgba(179,18,23,.35); } 70% { box-shadow: 0 0 0 16px rgba(255,106,0,0), 0 8px 24px rgba(179,18,23,.35); } 100% { box-shadow: 0 0 0 0 rgba(255,106,0,0), 0 8px 24px rgba(179,18,23,.35); } }

@media (prefers-reduced-motion: reduce) {
    .hw-item, .hw-flash, .hw-fogband, #hw-loader .hw-pumpkin { animation: none !important; }
}