/* Halloween artwork stays in decorative layers around the existing landing-page content. */
html.halloween {
    color-scheme: dark;
    --ink: #fff1d7;
    --ink-secondary: #d0c2dd;
    --ink-muted: #b2a0c5;
    --surface: #170f25;
    --surface-raised: #21152f;
    --line: #4e345c;
    --accent: #ffae57;
    --accent-glow: #ffae5726;
}

.halloween body {
    background: radial-gradient(ellipse at 76% 7%, #51304e77, transparent 35%), linear-gradient(180deg, #1b112c, #25152f 38%, #171020 75%, #29192d);
}

.halloween main {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.halloween .header {
    background: #190f26d9;
    border-color: #c98d5330;
}

.halloween .logo-icon { width: 34px; height: 34px; }
.halloween .nav a::after { background: var(--accent); }
.halloween .mobile-menu,
.halloween .lang-switcher-menu { background: #281a37; border-color: var(--line); }
.halloween .lang-switcher-menu :is(a, button):hover,
.halloween .lang-switcher-menu .active { background: #ffae571a; color: var(--ink); }
.halloween :is(a, button):focus-visible { outline: 2px solid #ffca86; outline-offset: 5px; }

.halloween .hero { position: relative; padding-top: 112px; padding-bottom: 100px; }
.halloween .hero-content { position: relative; z-index: 2; }
.halloween .hero h1 { color: #fff1d7; text-shadow: 0 2px 26px #170f25; }
.halloween .hero p { text-shadow: 0 1px 12px #170f25; }
.halloween .btn-primary {
    background: linear-gradient(135deg, #ffd18b, #ffa74e);
    color: #2c1421;
    box-shadow: 0 4px 24px #ff991e24, inset 0 1px 0 #ffe0b9;
}
.halloween .btn-primary:hover { background: linear-gradient(135deg, #ffdda6, #ffb45f); box-shadow: 0 5px 32px #ff991e45; }
.halloween .btn-secondary { background: #24172ed9; color: var(--ink); box-shadow: inset 0 0 0 1px #b48ac566; }
.halloween .btn-secondary:hover { background: #38223f; box-shadow: inset 0 0 0 1px #c9a8d2; }

.hw-decor { position: absolute; pointer-events: none; user-select: none; }
.hw-art { display: block; object-fit: contain; max-width: none; }
.hw-firelit { display: block; }
.hw-base-art { width: 100%; height: 100%; }
/* The firelight filter selects warm highlights from the existing artwork, and these masks restrict them to the carved faces and candle flames. */
.hw-firelight { position: absolute; inset: 0; width: 100%; height: 100%; filter: url(#hw-firelight); opacity: .3; animation: hw-fire-flicker var(--hw-flicker-duration, 3.7s) var(--hw-flicker-delay, -1.2s) linear infinite; mask-image: linear-gradient(transparent 64%, #000 72%); }
:is(.hw-editor-harvest, .hw-footer-harvest) .hw-firelight { mask-image: radial-gradient(ellipse 12% 18% at 15% 67%, #000 65%, transparent), radial-gradient(ellipse 17% 20% at 55% 51%, #000 65%, transparent), radial-gradient(ellipse 10% 15% at 88% 75%, #000 65%, transparent), radial-gradient(ellipse 4% 18% at 31% 28%, #000 65%, transparent), radial-gradient(ellipse 4% 18% at 76% 28%, #000 65%, transparent); }
.hw-sky { inset: 0 0 auto; height: 1050px; z-index: -1; overflow: hidden; }
.hw-moon { position: absolute; width: clamp(220px, 26vw, 380px); right: max(4%, calc((100vw - 1320px) / 2)); top: 3px; opacity: .93; filter: drop-shadow(0 0 45px #d9bbff18); }
.hw-tree { position: absolute; top: clamp(5px, calc((1100px - 100vw) * .18), 128px); width: auto; height: clamp(540px, calc(45vw + 400px), 850px); opacity: .86; mask-image: linear-gradient(90deg, #000 40%, transparent 90%); }
.hw-tree-left { left: 0; transform: translateX(-31%); }
.hw-tree-right { right: 0; transform: translateX(27%) scaleX(-1); }
.hw-stars { position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(circle, #ffdc9e 1px, transparent 1.7px), radial-gradient(circle, #e6c5fb 1px, transparent 1.5px); background-size: 173px 151px, 293px 239px; background-position: 33px 25px, 90px 80px; mask-image: linear-gradient(#000, transparent 75%); }
.hw-mist { position: absolute; width: 140%; height: 230px; left: -20%; background: radial-gradient(ellipse at 24% 70%, #ad8ac42b, transparent 48%), radial-gradient(ellipse at 76% 60%, #c3a4d524, transparent 43%); filter: blur(14px); animation: hw-mist-drift 20s ease-in-out infinite alternate; }
.hw-mist-one { top: 250px; }
.hw-mist-two { top: 610px; animation-delay: -9s; opacity: .7; }
.hw-bat { position: absolute; width: 45px; color: #0c0814; filter: drop-shadow(0 1px 1px #9d72b344); animation: hw-bat-drift 9s ease-in-out infinite; }
.hw-bat-figure { display: block; position: relative; width: 100%; aspect-ratio: 100 / 45; }
.hw-bat-figure svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hw-bat-wing, .hw-bat-body { position: absolute; inset: 0; }
.hw-bat-wing { width: 100%; height: 100%; will-change: transform; animation: hw-wingbeat var(--hw-wing-duration, .68s) var(--hw-wing-delay, -.2s) ease-in-out infinite; }
.hw-bat-wing-left { transform-origin: 43% 51%; --hw-wing-up: 28deg; --hw-wing-down: -24deg; }
.hw-bat-wing-right { transform-origin: 57% 51%; --hw-wing-up: -28deg; --hw-wing-down: 24deg; }
.hw-bat-one { right: 33%; top: 50px; transform: rotate(-13deg); }
.hw-bat-two { right: 9%; top: 275px; width: 32px; animation-delay: -4s; --hw-wing-duration: .54s; --hw-wing-delay: -.6s; }
.hw-bat-three { left: 22%; top: 65px; width: 23px; animation-delay: -2s; --hw-wing-duration: .61s; --hw-wing-delay: -.9s; }
.hw-lanterns { inset: 0; overflow: hidden; }
.hw-lantern { position: absolute; width: 95px; height: 270px; top: -105px; transform-origin: 50% 0; animation: hw-lantern-sway 3.6s -1.8s ease-in-out infinite alternate; filter: drop-shadow(0 5px 14px #ff950f24); }
.hw-lantern-one { left: max(16px, calc((100vw - 1300px) / 2)); top: clamp(-185px, calc((100vw - 1100px) * .22 - 185px), -105px); }
.hw-lantern-two { right: max(16px, calc((100vw - 1300px) / 2)); top: clamp(-205px, calc((100vw - 1100px) * .4 - 205px), -65px); width: 110px; height: 290px; --hw-lantern-lift: 12px; --hw-flicker-duration: 4.3s; --hw-flicker-delay: -2.8s; animation: hw-lantern-bob 4.8s -2.7s ease-in-out infinite alternate; }
.hw-lantern-three { left: 47%; width: 65px; height: 190px; top: -108px; --hw-lantern-lift: 8px; --hw-flicker-duration: 3.1s; --hw-flicker-delay: -.4s; animation: hw-lantern-bob 3.8s -.9s ease-in-out infinite alternate; opacity: .8; }

.halloween .screenshot-section { position: relative; padding-bottom: 115px; }
.halloween .chinese-frame { isolation: isolate; }
.halloween .screenshot-wrapper { position: relative; z-index: 1; background: linear-gradient(140deg, #714359, #34203f 45%, #95623e); border: 1px solid #efb56b80; box-shadow: 0 0 0 5px #110b1d, 0 0 0 6px #bc834940, 0 30px 80px #09051080, 0 0 55px #d9821f12; }
.hw-editor-scene { inset: 0; }
.hw-editor-harvest { position: absolute; bottom: -74px; left: -62px; width: 340px; z-index: 3; filter: drop-shadow(0 0 16px #fbaa3520); animation: hw-candlelight 5s ease-in-out infinite; }
.hw-peeking-ghost { position: absolute; right: -8px; top: 0; width: clamp(115px, 12.5vw, 180px); aspect-ratio: 558 / 850; translate: 0 -72%; opacity: 0; transform: translateY(24px) rotate(12deg); transition: opacity 1s, transform 1.8s cubic-bezier(.2,.8,.2,1); }
.hw-peeking-ghost.is-revealed { opacity: 1; transform: translateY(0) rotate(8deg); }
.hw-peeking-ghost.is-encounter { animation: hw-ghost-peek 6s ease-in-out both; }
.hw-reader { width: 100%; height: 100%; animation: hw-ghost-float 6s ease-in-out infinite; }
.hw-art-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.hw-cobweb { position: absolute; top: 0; width: 156px; z-index: 3; overflow: hidden; }
/* The generated webs have subpixel silk and dark edge pixels, so the filter strengthens their alpha and colors only the strands pale lavender. */
.hw-web-art { width: 100%; height: auto; filter: url(#hw-web-visibility); }
.hw-cobweb-left { left: 0; border-top-left-radius: 12px; }
.hw-cobweb-right { right: 0; width: 120px; border-top-right-radius: 12px; }

.halloween .features { position: relative; background: linear-gradient(180deg, #36203b70, #21152fbb); border-color: #b4825438; }
.halloween :is(.features, .how-it-works, .cta-section) > .container { position: relative; z-index: 2; }
.halloween :is(.feature-card, .video-step) { background: linear-gradient(145deg, #32213eeb, #22172feb); border-color: #b98ac032; box-shadow: 0 8px 30px #09051025; }
.halloween :is(.feature-card, .video-step):hover { border-color: #d4a06e88; box-shadow: 0 8px 32px #09051050, 0 0 22px #eea4500d; }
.halloween .features h2,
.halloween .how-it-works h2 { color: #ffd19c; }
.halloween .video-step-video { background: #72506b; }
.halloween .video-step-number { color: #eab278; }
.hw-feature-scene { inset: 0; }
.hw-raven { position: absolute; width: 160px; right: 3%; top: -104px; transform: rotate(-5deg); }
.hw-watching-creature { position: absolute; width: 180px; height: 118px; left: 50%; top: -82px; opacity: 0; transform: translate(-50%, 24px); transition: opacity 1.2s .25s, transform 1.6s .25s; }
.hw-watcher { width: 100%; height: 100%; }
.is-revealed .hw-watching-creature { opacity: 1; transform: translate(-50%, 0); }
.hw-spider { position: absolute; top: 0; left: max(20px, calc((100vw - 1280px) / 2)); width: 84px; height: 180px; --hw-spider-drop: 28; --hw-thread-length: 113; transform: translateY(-160px); opacity: 0; transition: transform 2s cubic-bezier(.25,.7,.25,1.15), opacity 1s; }
.hw-spider-line, .hw-spider-body { animation: hw-spider-climb 2.6s -1.3s ease-in-out infinite alternate; }
.hw-spider-line { position: absolute; top: 0; left: 50%; height: calc(var(--hw-thread-length) * 1px); width: 1px; background: linear-gradient(#c8a1bf15, #c8a1bf99); transform-origin: top center; animation-name: hw-thread-extend; }
.hw-spider-body { position: absolute; bottom: 0; width: 100%; height: 78px; }
.is-revealed .hw-spider { opacity: 1; transform: translateY(0); }

.halloween .how-it-works { position: relative; padding-top: 112px; padding-bottom: 200px; }
.hw-story-scene { inset: 0; overflow: hidden; }
.hw-floating-reader { position: absolute; width: 180px; top: 26%; left: max(-60px, calc((100vw - 1380px) / 2)); opacity: .8; animation: hw-ghost-float 8s ease-in-out infinite; }
.hw-story-lantern { position: absolute; width: 105px; height: 290px; top: 57%; right: max(-30px, calc((100vw - 1340px) / 2)); --hw-lantern-lift: 14px; --hw-flicker-duration: 4.7s; --hw-flicker-delay: -3.1s; animation: hw-lantern-bob 5.6s -1s ease-in-out infinite alternate; }
.hw-story-mist { top: 55%; opacity: .7; }
.halloween .cta-section { position: relative; padding-top: 100px; padding-bottom: 150px; background: radial-gradient(ellipse at center bottom, #8b493a33, transparent 70%), #1a1125; border-top: 1px solid #c299603b; }
.hw-final-scene { inset: 0; }
.hw-creature-reveal { position: absolute; left: 50%; top: -160px; width: 370px; height: 200px; transform: translate(-50%, 100px); opacity: 0; transition: transform 1.8s cubic-bezier(.18,.85,.25,1), opacity 1s; }
.hw-final-scene.is-revealed .hw-creature-reveal { transform: translate(-50%, 0); opacity: 1; }
.hw-creature { width: 100%; height: 100%; filter: drop-shadow(0 0 16px #9d73c225); }
.hw-final-scene.is-encounter .hw-creature { animation: hw-creature-emerge 5s ease-in-out both; }
.hw-passing-shadow { position: absolute; width: 480px; left: -600px; top: 0; color: #06040a; opacity: 0; filter: blur(5px); }
.hw-final-scene.is-encounter .hw-passing-shadow { animation: hw-shadow-pass 2.4s .3s ease-in-out both; }
.hw-footer-harvest { position: absolute; width: 280px; bottom: -15px; right: 5%; opacity: .95; --hw-flicker-duration: 4.1s; --hw-flicker-delay: -2.2s; animation: hw-candlelight 5s -2s ease-in-out infinite; }
.hw-final-mist { bottom: -20px; }
.halloween .footer { position: relative; background: #140d1d; border-color: #ba8d5533; }

.hw-decor :is(img, .hw-firelit, .hw-mist, .hw-bat, .hw-bat-wing, .hw-spider-line) { animation-play-state: paused; }
.hw-decor.is-in-view :is(img, .hw-firelit, .hw-mist, .hw-spider-line) { animation-play-state: running; }
.hw-bat.is-in-view, .hw-bat.is-in-view .hw-bat-wing, .hw-final-scene.is-in-view .hw-bat-wing { animation-play-state: running; }
.hw-paused .hw-decor * { animation-play-state: paused !important; }

@keyframes hw-lantern-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes hw-lantern-bob { from { transform: translateY(calc(-1 * var(--hw-lantern-lift))); } to { transform: translateY(var(--hw-lantern-lift)); } }
@keyframes hw-spider-climb { from { transform: translateY(0); } to { transform: translateY(calc(var(--hw-spider-drop) * 1px)); } }
@keyframes hw-thread-extend { from { transform: scaleY(1); } to { transform: scaleY(calc(1 + var(--hw-spider-drop) / var(--hw-thread-length))); } }
@keyframes hw-mist-drift { from { transform: translateX(-4%); opacity: .55; } to { transform: translateX(4%); opacity: .9; } }
@keyframes hw-bat-drift { 0%,100% { translate: 0 0; rotate: -8deg; } 50% { translate: 20px -14px; rotate: 5deg; } }
@keyframes hw-wingbeat { 0%,100% { transform: rotate(var(--hw-wing-up)); } 36% { transform: rotate(var(--hw-wing-down)); } }
@keyframes hw-fire-flicker { 0%,100% { opacity: .35; } 8% { opacity: .65; } 13% { opacity: .24; } 19% { opacity: .55; } 31% { opacity: .42; } 36% { opacity: .7; } 43% { opacity: .3; } 57% { opacity: .58; } 64% { opacity: .4; } 72% { opacity: .68; } 79% { opacity: .28; } 91% { opacity: .5; } }
@keyframes hw-ghost-float { 0%,100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -13px; rotate: 3deg; } }
@keyframes hw-candlelight { 0%,100% { filter: drop-shadow(0 0 9px #ffac3620); } 35% { filter: drop-shadow(0 0 17px #ffac3645); } 70% { filter: drop-shadow(0 0 12px #ffac3630); } }
@keyframes hw-ghost-peek { 0% { opacity: 0; transform: translateY(24px) rotate(12deg); } 35%,65% { opacity: 1; transform: translateY(-6px) rotate(-5deg); } 78% { transform: translateY(8px) rotate(12deg); } 100% { opacity: 1; transform: translateY(0) rotate(8deg); } }
@keyframes hw-creature-emerge { 0% { translate: 0 45px; scale: .94; } 45% { translate: 0 -8px; scale: 1.03; } 65%,100% { translate: 0 0; scale: 1; } }
@keyframes hw-shadow-pass { 0% { translate: 0 40px; opacity: 0; } 25%,65% { opacity: .55; } 100% { translate: calc(100vw + 1200px) -100px; opacity: 0; } }

/* Keep the hanging spider above the heading when the desktop side gutter narrows. */
@media (max-width: 1280px) {
    .hw-spider { left: 18px; width: 66px; height: 75px; --hw-spider-drop: 14; --hw-thread-length: 22; }
    .hw-spider-body { height: 62px; }
}

@media (max-width: 1100px) {
    .hw-moon { width: 240px; top: 35px; right: -40px; }
    .hw-editor-harvest { left: -10px; width: 280px; bottom: -64px; }
    .hw-watching-creature { width: 160px; height: 105px; top: -73px; }
    .hw-raven { right: 25px; width: 125px; top: -85px; }
    .hw-floating-reader { width: 120px; left: -65px; opacity: .5; }
    .hw-story-lantern { width: 75px; right: -35px; opacity: .6; }
}

@media (max-width: 640px) {
    /* Halloween artwork needs a clear band above the mobile feature heading. */
    .halloween .features { padding-top: 72px; }
    /* The mobile ghost needs room above the editor frame to show its book without covering the hero buttons. */
    .halloween .hero { padding-top: 145px; padding-bottom: 150px; }
    .halloween .hero-content { max-width: 100%; }
    .halloween .hero h1 { font-size: 2.4rem; }
    .hw-sky { height: 1100px; }
    .hw-moon { width: 160px; top: 0; right: 35px; opacity: .9; }
    .hw-lantern-one { width: 80px; height: 230px; left: 6px; top: -105px; }
    .hw-lantern-two { width: 60px; height: 180px; right: 0; top: -95px; }
    .hw-lantern-three { display: none; }
    .hw-bat-one { right: 50%; top: 100px; width: 25px; }
    .hw-bat-two { right: 8%; top: 135px; width: 23px; }
    .hw-bat-three { left: 25%; top: 32px; width: 19px; }
    .hw-editor-harvest { width: 210px; left: -30px; bottom: -55px; }
    .hw-cobweb { width: 108px; }
    .hw-cobweb-right { width: 88px; }
    .hw-raven { width: 100px; top: -64px; right: 20px; }
    .hw-watching-creature { width: 130px; height: 85px; top: -58px; }
    .hw-spider { left: 12px; width: 54px; height: 55px; --hw-spider-drop: 12; --hw-thread-length: 12; }
    .hw-spider-body { height: 50px; }
    .hw-floating-reader { top: 30%; width: 90px; left: -52px; opacity: .45; }
    .hw-story-lantern { width: 58px; right: -30px; }
    .halloween .how-it-works { padding-bottom: 170px; }
    .hw-creature-reveal { width: 270px; height: 155px; top: -125px; }
    .halloween .cta-section { padding-top: 85px; padding-bottom: 150px; }
    .hw-footer-harvest { width: 200px; right: -15px; bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .halloween .hw-decor *, .halloween .hw-decor { animation: none !important; transition: none !important; }
    .halloween .hw-passing-shadow { display: none; }
}
.hw-reduced-motion .hw-decor *, .hw-reduced-motion .hw-decor { animation: none !important; transition: none !important; }
.hw-reduced-motion .hw-passing-shadow { display: none; }