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

/* =============================================
   Neale Publishing — Halloween Theme (homepage)
   Loaded only when index.php sets $pageStyles; everything is scoped to
   body.theme-halloween and the decorative hw-* markup, so no content,
   headings or links change.
   ============================================= */
.theme-halloween {
    --pumpkin: #ff7a1a;
    --pumpkin-dark: #c4500a;
    --witch: #5b1f8a;
    --witch-light: #b46cff;
    --night: #12081f;
    --ghost: #f6f1ff;
    --candle: #ffd54a;
    --font-spooky: "Creepster", var(--font-heading);

    --bat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cpath d='M60 16L55 6L53 17C45 13 37 15 33 23C27 13 14 9 0 14C9 19 13 27 13 37C19 31 27 31 31 37C35 31 43 31 47 39C51 36 56 40 60 48C64 40 69 36 73 39C77 31 85 31 89 37C93 31 101 31 107 37C107 27 111 19 120 14C106 9 93 13 87 23C83 15 75 13 67 17L65 6Z'/%3E%3C/svg%3E");
    --ghost-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cpath fill='%23f6f1ff' d='M40 4C18 4 8 22 8 44L8 92L18 84L28 94L40 84L52 94L62 84L72 92L72 44C72 22 62 4 40 4Z'/%3E%3Cellipse cx='29' cy='40' rx='5' ry='7' fill='%231d1030'/%3E%3Cellipse cx='51' cy='40' rx='5' ry='7' fill='%231d1030'/%3E%3Cellipse cx='40' cy='58' rx='5' ry='7' fill='%231d1030'/%3E%3C/svg%3E");
    --pumpkin-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%233f6b25' d='M47 24C46 15 49 8 57 5L60 10C55 12 53 17 54 24Z'/%3E%3Cellipse cx='30' cy='60' rx='24' ry='31' fill='%23c94f0c'/%3E%3Cellipse cx='70' cy='60' rx='24' ry='31' fill='%23c94f0c'/%3E%3Cellipse cx='50' cy='60' rx='25' ry='34' fill='%23f07418'/%3E%3Cg fill='%23ffd54a'%3E%3Cpath d='M31 51L43 51L37 40Z'/%3E%3Cpath d='M57 51L69 51L63 40Z'/%3E%3Cpath d='M27 66Q50 88 73 66L67 68L64 73L58 69L54 75L50 70L46 75L42 69L36 73L33 68Z'/%3E%3C/g%3E%3C/svg%3E");
}

.theme-halloween ::selection {
    background: var(--pumpkin);
    color: var(--night);
}

.hw-sprite {
    display: none;
}

html:has(body.theme-halloween) {
    scrollbar-color: var(--pumpkin) var(--night);
}

/* ---------- Preloader ---------- */
.theme-halloween .page-preloader {
    background: radial-gradient(circle at 50% 42%, #3a1460 0%, var(--night) 70%);
}

.theme-halloween .preloader-ring span,
.theme-halloween .preloader-ring span:nth-child(3) {
    border-top-color: var(--pumpkin);
    border-right-color: var(--pumpkin);
}

.theme-halloween .preloader-ring span:nth-child(2) {
    border-top-color: var(--witch-light);
    border-right-color: var(--witch-light);
}

.theme-halloween .preloader-ring::after {
    content: '';
    position: absolute;
    inset: 40px;
    background: var(--pumpkin-img) center / contain no-repeat;
    animation: hwFlicker 1.8s ease-in-out infinite;
}

.theme-halloween .preloader-text {
    font-family: var(--font-spooky);
    font-weight: 400;
}

.theme-halloween .preloader-text span:last-child {
    color: var(--pumpkin);
}

/* ---------- Cursor ---------- */
.theme-halloween .cursor1 {
    border-color: var(--pumpkin);
    mix-blend-mode: normal;
    box-shadow: 0 0 14px rgba(255, 122, 26, 0.55);
}

.theme-halloween .cursor2:not(.is-hovered) {
    background-color: var(--pumpkin);
    mix-blend-mode: normal;
    box-shadow: 0 0 10px var(--pumpkin);
}

.theme-halloween .cursor1.is-hovered {
    border-color: var(--witch-light);
}

/* ---------- Header ---------- */
.theme-halloween .top-bar {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--pumpkin), var(--witch-light), var(--pumpkin)) 1;
}

.theme-halloween .main-nav .nav-link.active {
    background: var(--pumpkin);
    box-shadow: 0 0 16px rgba(255, 122, 26, 0.55);
}

/* ---------- Shared type & buttons ---------- */
.theme-halloween .main-sub-title,
.theme-halloween .testimonial-sec .sub-title {
    color: var(--pumpkin-dark);
}

.theme-halloween .blue-sec .main-sub-title,
.theme-halloween .welcome-content-main h3 {
    color: var(--pumpkin);
}

.theme-halloween .main-sub-title::before,
.theme-halloween .testimonial-sec .sub-title::before {
    content: '';
    display: inline-block;
    width: 1.7em;
    height: 0.75em;
    margin-right: 0.45em;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: var(--bat-icon) center / contain no-repeat;
    mask: var(--bat-icon) center / contain no-repeat;
    animation: hwFlapIcon 0.5s ease-in-out infinite alternate;
}

.theme-halloween .blue-sec .main-title {
    text-shadow: 0 0 22px rgba(255, 122, 26, 0.35);
}

.theme-halloween .btn-primary,
.theme-halloween .btn-gradient,
.theme-halloween .btn-submit {
    background: linear-gradient(180deg, #ffb35c 0%, var(--pumpkin) 50%, var(--pumpkin-dark) 100%);
    color: var(--night);
}

.theme-halloween .btn-secondary {
    background: var(--night);
    box-shadow: inset 0 0 0 1px rgba(180, 108, 255, 0.55);
}

.theme-halloween .btn-primary:hover,
.theme-halloween .btn-primary:focus,
.theme-halloween .btn-gradient:hover,
.theme-halloween .btn-submit:hover {
    color: var(--night);
    box-shadow: 0 0 24px rgba(255, 122, 26, 0.75);
}

.theme-halloween .btn-secondary:hover,
.theme-halloween .btn-secondary:focus {
    color: var(--white);
    box-shadow: inset 0 0 0 1px var(--witch-light), 0 0 24px rgba(180, 108, 255, 0.6);
}

.theme-halloween .banner-btns .btn-primary,
.theme-halloween .cta-sec .btn-primary {
    animation: hwGlow 2.6s ease-in-out infinite;
}

.theme-halloween .accordion-item {
    box-shadow: -4px 0 0 var(--pumpkin);
}

/* ---------- Hero ---------- */
.hw-hero {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hw-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 35% at 8% 100%, rgba(255, 122, 26, 0.32), transparent 70%),
        linear-gradient(180deg, rgba(58, 20, 96, 0.55) 0%, rgba(18, 8, 31, 0.2) 60%, rgba(18, 8, 31, 0.45) 100%);
}

.hw-moon {
    position: absolute;
    top: 7%;
    left: 44%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 34%, #fffbe8 0%, #ffe7a3 48%, #f0c165 100%);
    box-shadow: 0 0 40px 10px rgba(255, 220, 140, 0.45), 0 0 120px 40px rgba(255, 160, 60, 0.18);
    animation: hwMoonGlow 6s ease-in-out infinite;
}

.hw-moon::before,
.hw-moon::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(200, 150, 70, 0.28);
}

.hw-moon::before {
    width: 22%;
    height: 22%;
    top: 26%;
    left: 52%;
}

.hw-moon::after {
    width: 14%;
    height: 14%;
    top: 60%;
    left: 30%;
}

.hw-moon-cta {
    top: 12%;
    left: auto;
    right: 30%;
    width: 150px;
    height: 150px;
}

/* Stars */
.hw-stars i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);
    animation: hwTwinkle 3s ease-in-out infinite;
}

.hw-stars i:nth-child(1) { left: 8%; top: 12%; }
.hw-stars i:nth-child(2) { left: 22%; top: 6%; animation-delay: 0.6s; }
.hw-stars i:nth-child(3) { left: 35%; top: 18%; animation-delay: 1.4s; }
.hw-stars i:nth-child(4) { left: 52%; top: 4%; animation-delay: 0.3s; }
.hw-stars i:nth-child(5) { left: 58%; top: 24%; animation-delay: 2.1s; }
.hw-stars i:nth-child(6) { left: 66%; top: 6%; animation-delay: 1s; }
.hw-stars i:nth-child(7) { left: 78%; top: 15%; animation-delay: 1.8s; }
.hw-stars i:nth-child(8) { left: 91%; top: 8%; animation-delay: 0.9s; }
.hw-stars i:nth-child(9) { left: 14%; top: 30%; animation-delay: 2.4s; }
.hw-stars i:nth-child(10) { left: 72%; top: 32%; animation-delay: 0.2s; }
.hw-stars i:nth-child(11) { left: 86%; top: 27%; animation-delay: 1.6s; }
.hw-stars i:nth-child(12) { left: 42%; top: 34%; animation-delay: 2.8s; }

/* Bats in flight */
.hw-svg {
    display: block;
}

.hw-flock {
    position: absolute;
    inset: 0;
}

.hw-flyer {
    position: absolute;
    left: 0;
    top: 14%;
    animation: hwFly 16s linear infinite;
    will-change: transform;
}

.hw-flyer:nth-child(2) { top: 22%; animation-duration: 19s; animation-delay: -6s; }
.hw-flyer:nth-child(3) { top: 9%; animation-duration: 13s; animation-delay: -9s; }
.hw-flyer:nth-child(4) { top: 30%; animation-duration: 22s; animation-delay: -3s; }
.hw-flyer:nth-child(5) { top: 17%; animation-duration: 17s; animation-delay: -12s; }

.hw-flyer:nth-child(3) .hw-bat,
.hw-flyer:nth-child(5) .hw-bat {
    width: 30px;
    height: 13px;
}

.hw-flock-slow .hw-flyer {
    animation-duration: 24s;
}

.hw-bat {
    width: 46px;
    height: 20px;
    color: #07030c;
    filter: drop-shadow(0 0 4px rgba(180, 108, 255, 0.7));
    transform-origin: 50% 40%;
    animation: hwFlap 0.22s ease-in-out infinite alternate;
}

/* Cobwebs */
.hw-web {
    position: absolute;
    width: 180px;
    height: 180px;
    color: rgba(255, 255, 255, 0.32);
    animation: hwSway 7s ease-in-out infinite alternate;
}

.hw-web-tl { top: 0; left: 0; }
.hw-web-tr { top: 0; right: 0; transform: scaleX(-1); }
.hw-web-br { bottom: 0; right: 0; transform: scale(-1); }

.about-sec .hw-web,
.featured-sec .hw-web,
.blog-sec .hw-web {
    color: rgba(18, 8, 31, 0.16);
}

/* Fog */
.hw-fog {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    overflow: hidden;
}

.hw-fog i {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 100%;
    background:
        radial-gradient(ellipse 18% 55% at 12% 100%, rgba(225, 215, 255, 0.34), transparent 70%),
        radial-gradient(ellipse 14% 45% at 33% 100%, rgba(225, 215, 255, 0.26), transparent 70%),
        radial-gradient(ellipse 20% 60% at 62% 100%, rgba(225, 215, 255, 0.3), transparent 70%),
        radial-gradient(ellipse 15% 45% at 86% 100%, rgba(225, 215, 255, 0.24), transparent 70%);
    animation: hwFog 48s linear infinite;
}

.hw-fog i:last-child {
    opacity: 0.6;
    bottom: -12%;
    animation-duration: 70s;
    animation-direction: reverse;
}

/* Jack-o'-lanterns */
.hw-patch {
    position: absolute;
    left: 2%;
    bottom: 1%;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.hw-pumpkin {
    width: 70px;
    height: 70px;
    animation: hwPumpkinGlow 2.4s ease-in-out infinite;
}

.hw-pumpkin-lg { width: 110px; height: 110px; animation-delay: -0.8s; }
.hw-pumpkin-md { width: 78px; height: 78px; animation-delay: -1.5s; }
.hw-pumpkin-sm { width: 54px; height: 54px; }

.hw-pumpkin-face {
    animation: hwFlicker 1.9s ease-in-out infinite;
}

/* Ghost peeking over the banner form */
.theme-halloween .banner-form-frame::after {
    content: '';
    position: absolute;
    top: -62px;
    right: 48px;
    width: 64px;
    height: 80px;
    background: var(--ghost-img) center / contain no-repeat;
    filter: drop-shadow(0 0 10px rgba(180, 108, 255, 0.75));
    animation: hwPeek 7s ease-in-out infinite;
}

.theme-halloween .banner-form::before {
    background: linear-gradient(90deg, var(--pumpkin-dark), var(--pumpkin));
}

.theme-halloween .banner-form-card::before {
    background: var(--witch);
    border-right-color: var(--pumpkin);
}

.theme-halloween .banner-form-btn {
    background: linear-gradient(90deg, var(--night), var(--witch));
}

.theme-halloween .banner-form-btn:hover,
.theme-halloween .banner-form-btn:focus {
    background: var(--pumpkin);
    color: var(--night);
}

.theme-halloween .banner-form-input:focus,
.theme-halloween .banner-form-textarea:focus {
    border-color: var(--pumpkin);
}

.theme-halloween .banner-title .highlight-text,
.theme-halloween h4.banner-sub-title {
    color: var(--pumpkin);
    text-shadow: 0 0 18px rgba(255, 122, 26, 0.45);
}

/* ---------- Sponsors strip ---------- */
.theme-halloween .sponsors,
.theme-halloween .sponsors::before,
.theme-halloween .sponsors::after {
    background: linear-gradient(90deg, var(--pumpkin-dark), var(--pumpkin) 50%, var(--pumpkin-dark));
}

/* ---------- Section decoration layers ---------- */
.theme-halloween .about-sec,
.theme-halloween .services-sec,
.theme-halloween .publishing-partner,
.theme-halloween .featured-sec,
.theme-halloween .blog-sec,
.theme-halloween .testimonial-sec,
.theme-halloween .trust-sec,
.theme-halloween .cta-sec {
    position: relative;
    isolation: isolate;
}

.hw-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.theme-halloween .blue-sec {
    background-color: #4b1a7a;
    background-blend-mode: luminosity;
}

.hw-patch-left {
    left: 1%;
    bottom: 12px;
}

/* Floating ghosts */
.hw-float {
    position: absolute;
    width: 66px;
    animation: hwFloat 5s ease-in-out infinite;
}

.hw-float .hw-ghost {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    filter: drop-shadow(0 6px 14px rgba(91, 31, 138, 0.45));
}

.hw-float-about { top: 28px; right: 3%; }
.hw-float-a { top: 34px; right: 5%; }
.hw-float-b { bottom: 40px; left: 2%; width: 48px; animation-delay: -2.5s; }

/* Spider on a thread */
.hw-drop {
    position: absolute;
    top: -200px;
    left: 7%;
    width: 1px;
    height: 280px;
    background: rgba(18, 8, 31, 0.35);
    animation: hwDrop 6s ease-in-out infinite alternate;
}

.hw-spider {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7));
}

.hw-drop .hw-spider {
    position: absolute;
    bottom: -32px;
    left: -19px;
}

/* ---------- Special welcome (50% off) ---------- */
.theme-halloween .welcome-content-main {
    background:
        radial-gradient(ellipse 60% 45% at 50% 115%, rgba(255, 122, 26, 0.4), transparent 70%),
        linear-gradient(160deg, var(--night) 0%, #3a1460 100%);
}

.theme-halloween .welcome-content-main .discount-title {
    color: var(--pumpkin) !important;
    font-family: var(--font-spooky);
    font-weight: 400;
    letter-spacing: 2px;
    /* filter, not text-shadow: the split-word spans clip shadows into boxes */
    filter: drop-shadow(0 0 14px rgba(255, 122, 26, 0.65));
    animation: hwFlicker 3.2s ease-in-out infinite;
}

.hw-welcome {
    z-index: 1000;
}

.hw-tag {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: 50% -20px;
    animation: hwTagSwing 3s ease-in-out infinite alternate;
}

.hw-tag::before {
    content: 'Halloween Special';
    display: block;
    padding: 4px 22px;
    border-radius: 30px;
    background: var(--pumpkin);
    color: var(--night);
    font-family: var(--font-spooky);
    font-size: 22px;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 0 24px rgba(255, 122, 26, 0.65);
}

.hw-witch {
    position: absolute;
    top: 8%;
    left: 0;
    width: 170px;
    color: #07030c;
    filter: drop-shadow(0 0 6px rgba(255, 190, 110, 0.85));
    animation: hwWitch 18s linear infinite;
}

.hw-witch.is-scrubbed {
    animation: none;
}

.hw-witch-svg {
    width: 100%;
    height: auto;
    aspect-ratio: 200 / 110;
}

.hw-dangle {
    position: absolute;
    top: 0;
    width: 56px;
    height: 170px;
    transform-origin: 50% 0;
    animation: hwSwing 3.4s ease-in-out infinite alternate;
}

.hw-dangle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 120px;
    background: rgba(255, 255, 255, 0.6);
}

.hw-dangle .hw-pumpkin {
    position: absolute;
    bottom: 0;
    width: 56px;
    height: 56px;
}

.hw-dangle-left { left: 4%; }
.hw-dangle-right { right: 4%; height: 130px; animation-delay: -1.7s; }

/* ---------- Cards ---------- */
.theme-halloween .book-card:hover {
    filter: drop-shadow(0 12px 22px rgba(255, 122, 26, 0.45));
}

.theme-halloween .testimonial-card {
    border-top: 3px solid var(--pumpkin);
    transition: var(--transition);
}

.theme-halloween .testimonial-card:hover,
.theme-halloween .blog-card:hover {
    box-shadow: 0 14px 34px rgba(91, 31, 138, 0.22), 0 0 0 1px rgba(255, 122, 26, 0.35);
}

.theme-halloween .testimonial-card .stars,
.theme-halloween .rating-score i {
    color: var(--pumpkin);
}

/* ---------- Graveyard into the footer ---------- */
.hw-graveyard {
    line-height: 0;
    margin-bottom: -1px;
    background: linear-gradient(180deg, transparent 40%, rgba(91, 31, 138, 0.1));
}

.hw-graveyard svg {
    display: block;
    width: 100%;
    height: 140px;
}

.hw-grave-pumpkin {
    filter: drop-shadow(0 0 8px rgba(255, 122, 26, 0.8));
}

.theme-halloween .main-footer a:hover {
    color: var(--pumpkin);
}

/* ---------- Page-wide layer (spider, peeking ghost, bat swarms, embers) ---------- */
.hw-fixed {
    position: fixed;
    inset: 0;
    z-index: 1040;
    overflow: hidden;
    pointer-events: none;
}

.hw-thread {
    position: absolute;
    top: 0;
    right: 26px;
    width: 1px;
    height: 60vh;
    background: linear-gradient(180deg, rgba(140, 140, 160, 0.2), rgba(140, 140, 160, 0.75));
    transform: translateY(calc(var(--hw-drop, 70px) - 100%));
    transition: transform 0.35s ease-out;
}

.hw-thread .hw-spider {
    position: absolute;
    bottom: -30px;
    left: -19px;
    transform-origin: 50% 0;
    animation: hwWiggle 1.6s ease-in-out infinite alternate;
}

.hw-peek-ghost {
    position: absolute;
    left: 24px;
    bottom: 0;
    width: 72px;
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hw-peek-ghost.is-peeking {
    transform: translateY(30%);
}

.hw-peek-ghost .hw-ghost {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    filter: drop-shadow(0 0 12px rgba(180, 108, 255, 0.8));
    animation: hwWiggle 1.2s ease-in-out infinite alternate;
}

.hw-swarm-bat {
    position: absolute;
    animation: hwScatter var(--t, 1.8s) ease-out forwards;
}

.hw-swarm-bat .hw-bat {
    width: 34px;
    height: 15px;
}

.hw-ember {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--candle) 0%, var(--pumpkin) 55%, transparent 75%);
    animation: hwEmber 0.9s ease-out forwards;
}

/* ---------- Keyframes ---------- */
@keyframes hwFly {
    0% { transform: translate(-12vw, 0); }
    25% { transform: translate(18vw, -34px); }
    50% { transform: translate(48vw, 12px); }
    75% { transform: translate(80vw, -26px); }
    100% { transform: translate(112vw, 0); }
}

@keyframes hwFlap {
    from { transform: scaleY(1); }
    to { transform: scaleY(0.35); }
}

@keyframes hwFlapIcon {
    from { transform: scaleY(1); }
    to { transform: scaleY(0.6); }
}

@keyframes hwTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes hwMoonGlow {
    0%, 100% { box-shadow: 0 0 40px 10px rgba(255, 220, 140, 0.45), 0 0 120px 40px rgba(255, 160, 60, 0.18); }
    50% { box-shadow: 0 0 55px 16px rgba(255, 220, 140, 0.6), 0 0 150px 55px rgba(255, 160, 60, 0.25); }
}

@keyframes hwSway {
    from { rotate: -1.5deg; }
    to { rotate: 1.5deg; }
}

@keyframes hwFog {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes hwPumpkinGlow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 122, 26, 0.5)); }
    45% { filter: drop-shadow(0 0 22px rgba(255, 160, 50, 0.85)); }
    55% { filter: drop-shadow(0 0 14px rgba(255, 122, 26, 0.6)); }
}

@keyframes hwFlicker {
    0%, 100% { opacity: 1; }
    42% { opacity: 1; }
    45% { opacity: 0.6; }
    48% { opacity: 1; }
    72% { opacity: 0.85; }
    75% { opacity: 1; }
}

@keyframes hwGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 122, 26, 0); }
    50% { box-shadow: 0 0 24px rgba(255, 122, 26, 0.7); }
}

@keyframes hwPeek {
    0%, 30% { transform: translateY(56px) rotate(0); }
    40% { transform: translateY(0) rotate(-6deg); }
    55% { transform: translateY(0) rotate(6deg); }
    65%, 100% { transform: translateY(56px) rotate(0); }
}

@keyframes hwFloat {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-16px) rotate(4deg); }
}

@keyframes hwDrop {
    from { transform: translateY(0); }
    to { transform: translateY(110px); }
}

@keyframes hwTagSwing {
    from { transform: translateX(-50%) rotate(-4deg); }
    to { transform: translateX(-50%) rotate(4deg); }
}

@keyframes hwWitch {
    0% { transform: translate(-220px, 40px) rotate(-6deg); }
    50% { transform: translate(50vw, -10px) rotate(4deg); }
    100% { transform: translate(110vw, 30px) rotate(-6deg); }
}

@keyframes hwSwing {
    from { transform: rotate(-7deg); }
    to { transform: rotate(7deg); }
}

@keyframes hwWiggle {
    from { transform: rotate(-8deg); }
    to { transform: rotate(8deg); }
}

@keyframes hwScatter {
    0% { transform: translate(0, 0) scale(0.3); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(var(--s, 1)); opacity: 0; }
}

@keyframes hwEmber {
    from { transform: translate(0, 0) scale(1); opacity: 1; }
    to { transform: translate(var(--dx, 0), -34px) scale(0.2); opacity: 0; }
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1199px) {
    .hw-moon { left: auto; right: 6%; top: 4%; width: 80px; height: 80px; }
    .hw-moon-cta { right: 8%; }
    .hw-dangle { display: none; }
}

@media only screen and (max-width: 991px) {
    .hw-web { width: 110px; height: 110px; }
    .hw-patch { display: none; }
    .hw-witch { width: 120px; }
    .hw-float { width: 46px; }
    .hw-flyer:nth-child(n + 4) { display: none; }
    .theme-halloween .banner-form-frame::after { width: 48px; height: 60px; top: -46px; }
}

@media only screen and (max-width: 767px) {
    /* the 50%-off hexagon has no spare room on phones */
    .hw-tag,
    .hw-witch { display: none; }
}

@media only screen and (max-width: 575px) {
    .hw-moon { width: 56px; height: 56px; }
    .hw-thread { right: 12px; }
    .hw-spider { width: 28px; height: 28px; }
    .hw-thread .hw-spider { left: -14px; bottom: -22px; }
    .hw-peek-ghost { width: 52px; left: 12px; }
    .hw-tag::before { font-size: 17px; padding: 3px 16px; }
    .hw-graveyard svg { height: 90px; }
}

/* Motion-sensitive visitors get the static look only */
@media (prefers-reduced-motion: reduce) {
    .theme-halloween [class*="hw-"],
    .theme-halloween [class*="hw-"]::before,
    .theme-halloween .main-sub-title::before,
    .theme-halloween .banner-form-frame::after,
    .theme-halloween .discount-title,
    .theme-halloween .btn-primary,
    .theme-halloween .preloader-ring::after {
        animation: none !important;
        transition: none !important;
    }

    .hw-flock,
    .hw-swarm,
    .hw-peek-ghost,
    .hw-witch {
        display: none;
    }
}