/* Loaded only by the Halloween home page. All overrides are seasonal and scoped. */
.halloween-home { background: #07050c; color: #f3ece4; overflow: clip; }
.halloween-home .home-ticker > div { background: #ff8c1a !important; border-color: #0a0710 !important; }
.halloween-home .halloween-highlights-social { background: #0a0710 url('https://media.veefriends.com/image/upload/f_auto,q_auto/v1793204194/veefriends/v3/assets/halloween-pumpkin-bg.png') center / cover; }
.halloween-home .home-news > div { background: transparent !important; }
.halloween-home .home-comics,
.halloween-home .home-characters,
.halloween-home .home-cta { position: relative; }
.halloween-home .home-comics { border-block: 24px solid transparent; border-image: repeating-linear-gradient(-45deg,#ff8c1a 0 22px,#0a0710 22px 44px) 24; }
.halloween-home .home-comics > div:first-child { background: #1a0a04 url('https://media.veefriends.com/image/upload/f_auto,q_auto/v1793203693/veefriends/v3/assets/spiral-halloween-bg.png') center 35% / cover no-repeat; }
.halloween-home .home-comics a[href='/comics'] { background: #ff8c1a; color: #0a0710; }
.halloween-home .halloween-decorations { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: clip; }
.halloween-decorations img { height: auto; object-fit: contain; }
.halloween-spider { position: absolute; top: 0; right: 5%; width: 100px; display: flex; align-items: center; flex-direction: column; transform-origin: top center; animation: halloween-swing 4s ease-in-out infinite; }
.halloween-spider > span { width: 2px; height: 110px; background: #fff9; }
.halloween-spider img { width: 100%; }
.halloween-monster { position: absolute; left: 7%; top: 8px; width: 104px; animation: halloween-bob 2s ease-in-out infinite; }
.halloween-jolly { position: absolute; right: 10%; bottom: 0; width: 118px; animation: halloween-swing 3s ease-in-out infinite; }
.halloween-vampire { position: absolute; left: 4%; bottom: 12px; width: 150px; animation: halloween-peek 7s ease-in-out infinite; }
.halloween-home .home-cta .halloween-spider { left: 38%; right: auto; width: 6%; }
.halloween-home .home-cta .halloween-spider > span { height: 70px; }
.halloween-ghost { position: absolute; left: 53%; top: 78%; width: 7.5%; animation: halloween-bob 5s ease-in-out infinite; }
.halloween-home .home-newsletter > div { background: #e2560a url('https://media.veefriends.com/image/upload/v1793130811/veefriends/v3/assets/Moonlit_Halloween_Dash.png') right center / cover no-repeat; border-top: 4px solid #0a0710; }
.halloween-home .home-newsletter .halloween-newsletter-title { margin: 0; font: 80px/.92 Anton, sans-serif; text-transform: uppercase; color: white; text-shadow: 5px 5px 0 #0a0710; }
.halloween-home .home-newsletter p { color: #0a0710; }
.halloween-home .home-newsletter button[type=submit] { background: #0a0710; color: #ff8c1a; box-shadow: 5px 5px 0 #8b3dff; }
.halloween-home .home-newsletter input:not([type=checkbox]) { background: white; color: #0a0710; }
body:has(.halloween-home) footer { background: #07050c; border-color: #ff8c1a; }
body:has(.halloween-home) footer h3 { color: #ff8c1a; }
@keyframes halloween-swing { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes halloween-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes halloween-peek { 0%,100% { transform: translateY(18%); } 20%,75% { transform: translateY(0); } }
@media (max-width: 1023px) {
    .halloween-spider { width: 70px; }
    .halloween-monster { width: 72px; }
    .halloween-home .home-newsletter > div { background-position: 65% center; }
    .halloween-home .home-newsletter > div > div { height: auto; min-height: 0; padding-bottom: 220px; }
    .halloween-home .home-newsletter .halloween-newsletter-title { font-size: 60px; }
}
@media (max-width: 600px) {
    .halloween-home .home-newsletter > div { background-position: 60% bottom; background-size: auto 100%; }
    .halloween-home .home-newsletter form,
    .halloween-home .home-newsletter p { background: #e2560ae8; border-radius: 12px; padding: 12px; }
    .halloween-spider { width: 48px; }
    .halloween-spider > span { height: 60px; }
    .halloween-vampire { width: 85px; }
    .halloween-jolly { width: 75px; }
}
@media (prefers-reduced-motion: reduce) {
    .halloween-home .halloween-decorations * { animation: none; }
}

.halloween-home .home-comics h2 { font-family: Anton, sans-serif; }
.halloween-web { position: absolute; top: 0; right: 0; width: min(300px, 30%); }

/* Character motion follows the supplied index.html rather than a static seasonal overlay. */
.halloween-monster { animation: halloween-monster-bounce 1.8s ease-in-out infinite; }
.halloween-spider > span { animation: halloween-thread 5s ease-in-out infinite; }
.halloween-spider img { transform-origin: 50% 0; animation: halloween-swing 1.2s ease-in-out infinite; }
@keyframes halloween-monster-bounce { 0%,100% { transform: translateY(0) scale(1.06,.94); } 30% { transform: translateY(-22px) scale(.96,1.05); } 55% { transform: translateY(0) scale(1.08,.92); } 70% { transform: translateY(-8px); } }
@keyframes halloween-thread { 0%,100% { height: 60px; } 50% { height: 170px; } }
@media (max-width: 1023px) {
}
@media (prefers-reduced-motion: reduce) {
    .halloween-home .halloween-decorations * { animation: none; }
}

/* The Halloween news and social cards flow normally: no fixed-height spacer or overlap. */
.halloween-home .halloween-news { padding: 24px 0 8px; }
.halloween-home .halloween-news-track { position: relative; padding: 0; }
.halloween-home .halloween-news-cards { position: relative; z-index: 1; min-height: 395px; }
.halloween-home .home-social { padding: 32px 24px 64px; }
.halloween-home .halloween-social-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; max-width: 1440px; margin: 0 auto; }
.halloween-home .halloween-connect-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(110px,32%); grid-template-rows: auto 1fr auto; gap: 20px 16px; min-width: 0; padding: 28px; border: 4px solid #0a0710; border-radius: 24px; position: relative; isolation: isolate; }
.halloween-home .halloween-connect-live { background: #ff8c1a; color: #0a0710; box-shadow: 7px 7px 0 #8b3dff; }
.halloween-home .halloween-connect-follow { background: #3b1478; color: #f3ece4; border-color: #a86bff; box-shadow: 7px 7px 0 #ff8c1a; }
.halloween-home .halloween-connect-card p { grid-column: 1; grid-row: 2; margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.halloween-home .halloween-social-links { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; align-content: end; gap: 10px; max-width: 280px; position: relative; z-index: 2; }
.halloween-home .halloween-connect-follow .halloween-social-links { display: grid; grid-template-columns: repeat(4,44px); width: max-content; }
.halloween-home .halloween-social-links a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; box-sizing: border-box; border: 2px solid #0a0710; border-radius: 50%; background: #0a0710; box-shadow: 0 3px 0 #0a0710; transition: transform .15s ease; }
.halloween-home .halloween-social-links a:hover { transform: translateY(-3px); background: #26163c; }
.halloween-home .halloween-social-links a:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.halloween-home .halloween-social-links img.halloween-social-icon { display: block; width: 24px; height: 24px; min-width: 24px; max-width: 24px; max-height: 24px; object-fit: contain; pointer-events: none; }
.halloween-home .halloween-connect-art { grid-column: 2; grid-row: 2 / 4; align-self: end; min-width: 0; pointer-events: none; }
.halloween-home .halloween-connect-art img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
@media (min-width: 768px) { .halloween-home .halloween-news-cards { min-height: 520px; } }
@media (max-width: 1099px) { .halloween-home .halloween-social-grid { grid-template-columns: minmax(0,1fr); max-width: 720px; } }
@media (max-width: 600px) {
    .halloween-home .home-social { padding: 24px 16px 48px; }
    .halloween-home .halloween-connect-card { padding: 20px 16px; gap: 16px 12px; grid-template-columns: minmax(0,1fr) minmax(85px,30%); border-radius: 20px; }
    .halloween-home .halloween-connect-card p { font-size: 15px; }
    .halloween-home .halloween-social-links { gap: 8px; }
    .halloween-home .home-hero > div { min-height: 320px; }
    .halloween-home .home-comics img[alt='VeeFriends Comics'] { max-width: 100%; }
    .halloween-home .home-newsletter .halloween-newsletter-title { font-size: clamp(40px,12vw,60px); }
    .halloween-home .home-newsletter > div > div { min-height: 0; padding-bottom: 220px; }
    .halloween-home .home-newsletter form { background: #e2560aeb; }
}
@media (max-width: 480px) {
    .halloween-home .halloween-connect-follow { grid-template-columns: minmax(0,1fr); }
    .halloween-home .halloween-connect-follow .halloween-connect-art { grid-column: 1; grid-row: 4; width: 100px; justify-self: end; }
}
@media (max-width: 359px) {
    .halloween-home .halloween-connect-card { grid-template-columns: minmax(0,1fr); }
    .halloween-home .halloween-connect-art { grid-column: 1; grid-row: 4; width: 100px; justify-self: end; }
}

/* Reuse the standard H3 typography and keep both social illustrations still. */
.halloween-home .halloween-connect-title { grid-column: 1 / -1; min-width: 0; margin: 0; }
.halloween-home .halloween-connect-art { animation: none; transform: none; }
.halloween-home .halloween-connect-live { grid-template-columns: minmax(0,1fr) minmax(150px,44%); }
.halloween-home .halloween-connect-live .halloween-connect-art img { max-height: 320px; }
@media (max-width: 600px) {
    .halloween-home .halloween-connect-live { grid-template-columns: minmax(0,1fr) minmax(110px,40%); }
}
@media (max-width: 359px) {
    .halloween-home .halloween-connect-live { grid-template-columns: minmax(0,1fr); }
    .halloween-home .halloween-connect-live .halloween-connect-art { width: 180px; max-width: 100%; }
}

/* Reserve a small character area above the Comics logo on phones. */
@media (max-width: 767px) {
    .halloween-home .home-comics .halloween-monster { width: 56px; top: 12px; left: 24px; }
    .halloween-home .home-comics .halloween-spider > span { height: 48px; animation: none; }
    .halloween-home .home-comics > div:first-child > div:first-child { padding-top: 152px; }
}