/* Seasonal layer only. Remove these two asset includes to restore the normal site. */
:root {
  --red: #ff812b;
  --red-dark: #a13d10;
  --red-soft: rgba(255,129,43,.12);
  --bg: #080706;
  --panel: #100d0a;
  --panel-soft: #15100c;
  --line: #35291f;
  --line-soft: #221b15;
  --text: #f6ede3;
  --muted: #a99a8b;
  --live: #ffc276;
}
body {
  background: radial-gradient(ellipse at 50% 400px, #48200c55, transparent 650px),
    radial-gradient(ellipse at 0 2300px, #35180955, transparent 900px), #080706;
}
::selection { background: #ff812b; color: #120b06; }
.site-noise { opacity: .13; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #f6c28812 3px 4px); }
.site-header { border-color: #50301b; background: #0d0b09ed; }
.tools-brand-logo, .product-logo { border-color: #83481f; background: radial-gradient(circle, #ff812b20, transparent 75%), #0c0907; }
.tools-brand-logo b, .brand-name em { color: var(--red); text-shadow: 0 0 22px #ff812b40; }
.hero { min-height: 1080px; padding-top: 45px; padding-bottom: 130px; display: flex; flex-direction: column; justify-content: center; isolation: isolate; }
.hero-grid { opacity: .35; background-image: radial-gradient(circle, #dba05c66 0 .7px, transparent .9px); }
.hero-glow, .buy-glow { background: #ee6a19; opacity: .14; }
/* Fade the light itself, not the content. Its transparent rim stays inside
   the clipped hero even at the widest point of the breathing animation. */
.hero .hero-glow {
  width: 100%; height: 680px; border-radius: 0; filter: none;
  background: radial-gradient(ellipse 43% 48% at 50% 50%, #ee6a198c 0%, #ee6a1944 30%, #ee6a1914 58%, transparent 100%);
  animation: hw-glow-breathe 6s ease-in-out infinite;
}
@keyframes hw-glow-breathe { 0%,100% { opacity: .42; transform: scale(.98); } 50% { opacity: .58; transform: scale(1.035); } }
.hw-motion-paused .hero-glow, .hw-page-hidden .hero-glow { animation-play-state: paused; }
.hero-title-wrap { padding-top: 45px; padding-bottom: 35px; }
.hero-copy > .eyebrow { margin-bottom: 50px; }
h1 strong { text-shadow: 0 0 36px #ff812b44, 2px 0 #ffb86b33; }
h1 strong::after { text-shadow: -3px 0 #ff812b, 3px 0 #ffdeaa; }
.hero-lead { color: #b6a798; }
.hero-update-badge, .hero-update-badge--live, .hero-update-badge:hover, .hero-update-badge--live:hover {
  border-color: #77421f; background: linear-gradient(110deg, #47210f, #100c09 75%); box-shadow: 0 0 24px #ff812b0d;
}
.hero-update-badge--live .hero-update-signal, .hero-update-badge--live .hero-update-copy small { color: #ffc276; }
.hero-update-badge--live .hero-update-signal i { background: #ffc276; }
.tech-button { border-color: #664024; background-color: #120d09; }
.tech-button:hover { border-color: #ffaf64; background: #2e1b0d; box-shadow: 0 0 28px #ff812b20; }
.tech-button--primary, .checkout-button { color: #ffe9d5; border-color: #ff812b; background: linear-gradient(115deg, #77361166, #211309); box-shadow: inset 0 0 22px #ff812b0d, 0 0 24px #ff812b0d; }
.product-switcher { border-color: #50331f; background: linear-gradient(110deg, #27170eaa, #0c0a08f5); box-shadow: 0 18px 45px #0005; }
.product-switcher-head { color: #b38e70; }
.product-switcher-head i { background: linear-gradient(90deg, #895125, transparent); }
.product-switch { border-color: #3a2a1e; background: #100c09; }
.product-switch:hover, .product-switch.is-active { border-color: #ff812b; background: linear-gradient(135deg, #ff812b16, transparent), #160f0a; box-shadow: inset 0 0 24px #ff812b08; }
.product-logo--text img { filter: hue-rotate(34deg); }
.subtitle-wave span { background: linear-gradient(180deg, #ffac55, #a14714); box-shadow: 0 0 12px #ff812b22; }
.object-curve-showcase canvas { filter: hue-rotate(34deg); }
.subtitle-update-card--released::after { background: linear-gradient(90deg, #ff812b, #ff812b33, #ffcf8a66, transparent); }
.subtitle-update-card, .subtitle-update-card--released, .buy-panel { border-color: #644024; background: radial-gradient(ellipse at 80% 40%, #ff812b0e, transparent 60%), linear-gradient(120deg, #1f140d, #0b0907 55%); box-shadow: 0 24px 70px #0004; }
.subtitle-update-card::before { background-image: radial-gradient(circle, #ff812b55 0 .65px, transparent .9px); }
.feature-card { background: linear-gradient(145deg, #1b120d55, #0b0907); border-color: #3f2d20; }
.feature-card:hover { border-color: #a86732; }
.section-line { background: linear-gradient(90deg, #a76735, #34241a, transparent); }
.site-footer { border-color: #59371e; }
.cookie-consent { border-color: #764923; background: #120e0af5; }
.cookie-settings-button { border-color: #754723; background: #140e09; }
.hw-emblem { width: 240px; height: 235px; margin: 0 auto 28px; position: relative; display: grid; place-items: center; flex-shrink: 0; }
.hw-emblem::before { content: ''; position: absolute; width: 188px; height: 188px; border: 1px solid #b267273b; border-radius: 50%; box-shadow: 0 0 100px #ff812b18; }
.hw-emblem::after { content: ''; position: absolute; inset: 14px 16px 30px; border: 1px dashed #b2672726; border-radius: 50%; }
.hw-emblem img { width: 220px; height: 193px; position: relative; z-index: 1; image-rendering: pixelated; filter: drop-shadow(0 12px 24px #0007); animation: hw-hover 7s steps(4,end) infinite; }
.hw-edition { position: absolute; bottom: 0; color: #e8a76d; font: 9px var(--mono); letter-spacing: .25em; white-space: nowrap; }
.hw-coordinate { position: absolute; left: 22px; top: 80px; writing-mode: vertical-rl; font: 9px var(--mono); letter-spacing: .22em; color: #af7947; }
.hw-bats { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.hw-bat { position: absolute; width: 86px; height: 44px; color: #8d562b; opacity: .45; animation: hw-drift 9s ease-in-out infinite alternate; }
.hw-bat:nth-child(1) { left: 14%; top: 18%; transform: rotate(-22deg); }
.hw-bat:nth-child(2) { right: 15%; top: 11%; width: 115px; animation-delay: -4s; }
.hw-bat:nth-child(3) { right: 9%; top: 28%; width: 50px; animation-delay: -2s; }
.hw-bat:nth-child(4) { left: 5%; top: 40%; width: 43px; animation-delay: -7s; }
.hw-bat:nth-child(5) { right: 22%; top: 38%; width: 34px; opacity: .2; }
.hw-footer-mark { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 35px 16px; color: #c79161; font: 10px var(--mono); letter-spacing: .2em; }
.hw-footer-mark img { width: 58px; height: 51px; }
.hw-replay { border: 0; border-bottom: 1px solid #6a4224; background: transparent; color: #d5a77e; padding: 7px 0; font: 10px var(--mono); cursor: pointer; }
.hw-replay:hover { color: #fff0d5; }
.hw-intro {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; outline: 0; color: #ffe7ce; overflow: hidden; background: #090807;
  animation: hw-failsafe 5s forwards;
}
.hw-intro::backdrop { background: #090807; }
.hw-intro[open] { display: grid; place-items: center; }
.hw-intro::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 460px 320px at 50% 49%, #ad4e1224, transparent 85%), repeating-linear-gradient(0deg, transparent 0 3px, #ffc28802 3px 4px); pointer-events: none; }
.hw-skip { position: absolute; right: max(32px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); min-height: 44px; padding: 12px 4px; background: transparent; border: 0; color: #a59b91; font: 10px var(--mono); letter-spacing: .06em; cursor: pointer; z-index: 3; }
.hw-skip span { margin-left: 12px; color: #db9d65; }
.hw-skip:hover { color: #ffe7ce; }
.hw-skip:focus-visible, .hw-replay:focus-visible { outline: 2px solid #ffad62; outline-offset: 5px; }
.hw-intro-center { width: min(540px, 90vw); height: 240px; position: relative; display: grid; place-items: center; animation: hw-impact .38s 1.18s both; }
.hw-intro-pumpkin { position: absolute; width: 200px; max-width: 52vw; aspect-ratio: 8 / 7; animation: hw-pumpkin-presence 1.52s both; filter: drop-shadow(0 0 16px #ff812b45) drop-shadow(0 0 42px #f7651420); }
.hw-intro-pumpkin img, .hw-pumpkin-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hw-pumpkin-chuckle { position: relative; width: 100%; height: 100%; animation: hw-chuckle .28s .2s 4 steps(1,end); }
.hw-pumpkin-chuckle > .hw-pumpkin-art, .hw-pumpkin-chuckle > img { animation: hw-pumpkin-cut .34s 1.18s steps(1,end) both; }
.hw-grin-open { opacity: 1; animation: hw-grin-open .28s .2s steps(1,end) infinite; }
.hw-grin-closed { opacity: 0; animation: hw-grin-closed .28s .2s steps(1,end) infinite; }
@keyframes hw-grin-open { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hw-grin-closed { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes hw-chuckle { 0%,100% { transform: none; } 25% { transform: translate(-1px,-2px); } 50% { transform: translate(1px,1px); } 75% { transform: translate(0,-1px); } }
.hw-pumpkin-slice { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hw-pumpkin-slice--a { clip-path: inset(29% 0 58%); animation: hw-slice-a .3s 1.18s steps(1,end) both; }
.hw-pumpkin-slice--b { clip-path: inset(63% 0 25%); animation: hw-slice-b .3s 1.18s steps(1,end) both; }
.hw-intro-word { position: absolute; text-align: center; opacity: 0; animation: hw-word-presence .32s 1.36s both; }
.hw-intro-word strong, .hw-word-slice { display: block; width: clamp(236px, 40vw, 420px); max-width: 82vw; }
.hw-wordmark-art { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 16px #ff923f17); }
.hw-intro-word strong { animation: hw-word-cut .28s 1.36s steps(1,end) both; }
.hw-word-slice { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; }
.hw-word-slice--a { clip-path: inset(22% 0 65%); text-shadow: 2px 0 #ff792b66; animation: hw-slice-a .28s 1.36s steps(1,end) both; }
.hw-word-slice--b { clip-path: inset(62% 0 26%); text-shadow: -2px 0 #ffca8533; animation: hw-slice-b .28s 1.36s steps(1,end) both; }
.hw-intro-word small { display: block; margin-top: 20px; font: 8px var(--mono); letter-spacing: .34em; color: #bda18a; animation: hw-subtitle .4s 1.65s both; }
.hw-intro.is-leaving { opacity: 0; transition: opacity .32s ease; }
.hw-intro-aura { position: absolute; width: 340px; max-width: 85vw; height: 250px; border-radius: 50%; background: radial-gradient(ellipse, #ff8e3447 0, #e3541420 30%, #dd551009 52%, transparent 72%); pointer-events: none; animation: hw-aura 2.65s both; }
.hw-intro-sparks { position: absolute; width: 260px; height: 210px; pointer-events: none; }
.hw-intro-sparks i { position: absolute; left: calc(18px + var(--spark) * 31px); bottom: 25px; width: 2px; height: 2px; background: #ffb566; box-shadow: 0 0 7px #ff812b; opacity: 0; animation: hw-intro-spark 1.5s calc(.25s + var(--spark) * .045s) both; }
.hw-intro-scan { position: absolute; width: 260px; max-width: 72vw; height: 1px; background: linear-gradient(90deg, transparent, #ffb36699, transparent); box-shadow: 0 0 10px #ff812b55; pointer-events: none; opacity: 0; animation: hw-scan .42s 1.18s both; }
@keyframes hw-impact { 0%,100% { transform: none; } 14% { transform: translate(-3px,1px); } 28% { transform: translate(2px,-2px); } 43% { transform: translate(-2px,-1px); } 59% { transform: translate(1px,1px); } 78% { transform: translate(-1px,0); } }
@keyframes hw-aura { 0% { opacity: 0; transform: scale(.8); } 18%,40% { opacity: .8; transform: scale(1); } 49% { opacity: 1; transform: scale(1.12); } 64%,100% { opacity: .45; transform: scale(1.2,.75); } }
@keyframes hw-intro-spark { 0% { opacity: 0; transform: translate(0,0); } 25% { opacity: .65; } 100% { opacity: 0; transform: translate(12px,-120px); } }
@keyframes hw-scan { 0% { opacity: 0; transform: translateY(-65px) scaleX(.65); } 24% { opacity: .7; } 100% { opacity: 0; transform: translateY(55px) scaleX(1.1); } }
@keyframes hw-hover { 50% { transform: translateY(-8px); } }
@keyframes hw-drift { to { translate: 14px -18px; rotate: 9deg; } }
/* One restrained 460ms hand-off: sliced pumpkin -> sliced title -> clean lockup. */
@keyframes hw-pumpkin-presence {
  0% { opacity: 0; transform: translateY(6px); }
  20%,83% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes hw-pumpkin-cut { 0%,20% { clip-path: inset(0); } 21%,60% { clip-path: polygon(0 0,100% 0,100% 29%,0 29%,0 42%,100% 42%,100% 63%,0 63%,0 75%,100% 75%,100% 100%,0 100%); } 61%,90% { clip-path: inset(42% 0 26%); } 91%,100% { clip-path: inset(49% 0 49%); } }
@keyframes hw-word-presence { 0% { opacity: 0; } 30% { opacity: .8; } 100% { opacity: 1; } }
@keyframes hw-word-cut { 0%,38% { clip-path: inset(40% 0 30%); } 39%,72% { clip-path: polygon(0 0,100% 0,100% 22%,0 22%,0 35%,100% 35%,100% 62%,0 62%,0 74%,100% 74%,100% 100%,0 100%); } 73%,100% { clip-path: inset(0); } }
@keyframes hw-slice-a { 0%,100% { opacity: 0; transform: none; } 12% { opacity: .85; transform: translateX(-8px); } 42% { opacity: .65; transform: translateX(5px); } 70% { opacity: .3; transform: translateX(-2px); } 88% { opacity: 0; transform: none; } }
@keyframes hw-slice-b { 0%,100% { opacity: 0; transform: none; } 22% { opacity: .75; transform: translateX(10px); } 48% { opacity: .55; transform: translateX(-4px); } 75% { opacity: .3; transform: translateX(2px); } 90% { opacity: 0; transform: none; } }
@keyframes hw-subtitle { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes hw-failsafe { 0%,92% { visibility: visible; } 100% { visibility: hidden; } }
/* Ambient motion is bounded, non-interactive, and paused outside the viewport. */
.hw-wing { transform-box: view-box; transform-origin: 60px 30px; animation: hw-wingbeat .9s ease-in-out infinite alternate; }
.hw-wing--right { animation-delay: -.08s; }
.hw-ambient { position: fixed; inset: 0; z-index: 21; pointer-events: none; overflow: hidden; contain: strict; }
.hw-ember { position: absolute; left: var(--ember-x); top: 105%; width: 2px; height: 3px; background: #ffae62; box-shadow: 0 0 6px #ff812b88; opacity: 0; animation: hw-rise var(--ember-duration) var(--ember-delay) linear infinite; }
.hw-season-section { position: relative; }
.hw-night-sky { position: absolute; inset: 0 0 auto; height: 200px; z-index: -1; overflow: hidden; pointer-events: none; }
.hw-moon { position: absolute; top: 32px; right: 15%; width: 62px; height: 62px; border: 1px solid #e4a86a44; border-radius: 50%; background: radial-gradient(circle at 30% 35%, #ffb76b15, #ff812b04); box-shadow: inset 9px -4px 0 #ffb97925, 0 0 54px #ff812b13; animation: hw-moon-breathe 12s ease-in-out infinite; }
.hw-star { position: absolute; left: calc(10% + var(--star) * 16%); top: calc(28px + var(--star) * 19px); width: 2px; height: 2px; background: #e7b583; box-shadow: 0 0 7px #ffab64; opacity: .2; animation: hw-star-glimmer 8s calc(var(--star) * -1.7s) ease-in-out infinite; }
/* Fade the fog itself in every direction, not the foreground content. The
   previous one-way mask left an opaque bottom edge at the hero's clip. */
.hw-low-fog { position: absolute; inset: auto 0 0; height: 190px; z-index: -1; overflow: hidden; pointer-events: none; contain: paint; mask-image: radial-gradient(ellipse at 50% 48%, #000 12%, #0009 42%, transparent 72%); }
.hw-low-fog i { position: absolute; inset: -20% -10%; background: radial-gradient(ellipse at 25% 50%, #f18a4140, transparent 48%), radial-gradient(ellipse at 75% 55%, #ebbe8e29, transparent 48%); filter: blur(24px); opacity: .35; animation: hw-fog-flow 18s ease-in-out infinite alternate; }
.hw-low-fog i:nth-child(2) { animation-delay: -9s; animation-duration: 23s; opacity: .2; }
.hw-low-fog i:nth-child(3) { animation-delay: -5s; animation-duration: 27s; opacity: .14; }
.hw-season-mask::before { content: ''; position: absolute; width: 1px; height: 14px; background: #c69c6c55; left: 50%; top: -13px; }
.hw-haunt { position: absolute; left: 40%; top: 3px; width: 38px; height: 46px; pointer-events: none; opacity: .55; animation: hw-haunt-drift 10s var(--season-delay) ease-in-out infinite; }
.hw-ghost-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 7px #ffae5c16); }
.hw-haunted-card { position: relative; overflow: hidden; }
.hw-card-bat { position: absolute; top: 16px; right: 16px; width: 34px; height: 17px; opacity: .2; pointer-events: none; }
.hw-card-bat .hw-bat { position: static; width: 100%; height: 100%; color: #d19c69; opacity: 1; transform: none; animation: none; }
.hw-haunted-card:focus-within .hw-card-bat { animation: hw-card-flight .8s ease-out; }
@media (hover: hover) { .hw-haunted-card:hover .hw-card-bat { animation: hw-card-flight .8s ease-out; } }
@keyframes hw-moon-breathe { 0%,100% { opacity: .5; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-3px); } }
@keyframes hw-star-glimmer { 0%,100% { opacity: .15; } 45%,60% { opacity: .55; } }
@keyframes hw-fog-flow { from { transform: translateX(-4%) scale(1); } to { transform: translateX(5%) scale(1.08, .95); } }
@keyframes hw-haunt-drift { 0%,100% { opacity: .2; transform: translate(-4px, 5px) rotate(-6deg); } 45% { opacity: .65; transform: translate(10px, -2px) rotate(4deg); } 70% { opacity: .35; transform: translate(4px, 1px); } }
@keyframes hw-card-flight { 0% { opacity: .2; transform: none; } 35% { opacity: .8; transform: translate(-7px, -4px) rotate(-8deg); } 80% { opacity: 0; transform: translate(-30px, -12px) rotate(-14deg); } 100% { opacity: .2; transform: none; } }
.hw-season-strip { position: absolute; top: 12px; right: 0; width: min(320px, 65%); height: 62px; pointer-events: none; overflow: hidden; contain: layout paint; }
.hw-season-lantern { position: absolute; right: 22px; bottom: 2px; width: 48px; height: 42px; animation: hw-lantern 5s ease-in-out infinite; }
.hw-season-lantern img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 0 8px #ff812b44); }
.hw-season-mask { width: 42px; height: 56px; transform-origin: 50% 0; animation: hw-mask-sway 7s ease-in-out infinite; }
.hw-season-mask img { object-fit: contain; filter: drop-shadow(0 0 7px #ffc88f22); }
.hw-mask--ghostface { animation: hw-ghost-hover 8s ease-in-out infinite; }
.hw-mask--myers { animation: hw-myers-turn 11s ease-in-out infinite; }
.hw-season-strip[data-mask] .hw-season-glow { animation: hw-mask-lamp 9s var(--season-delay) ease-in-out infinite; background: radial-gradient(ellipse, #ffc38b25, #ff812b09 42%, transparent 72%); }
.hw-footer-masks { display: flex; align-items: center; gap: 12px; padding-inline: 4px; }
.hw-footer-masks img { width: 27px; height: 38px; object-fit: contain; animation: hw-ghost-hover 8s ease-in-out infinite; }
.hw-footer-masks img:nth-child(2) { animation-delay: -2.5s; }
.hw-footer-masks img:nth-child(3) { animation-delay: -5s; }
.hw-cobweb { position: absolute; top: 0; left: 0; width: 110px; height: 60px; stroke: #d7b190; stroke-width: .8; animation: hw-web-shimmer 9s ease-in-out infinite; }
.hw-spider-thread { position: absolute; top: 0; left: 86px; width: 1px; height: 22px; background: #c99c7166; transform-origin: top; animation: hw-spider-thread 12s ease-in-out infinite; }
.hw-web-spider { position: absolute; top: 20px; left: 80px; width: 13px; height: 13px; stroke: #b88a5f; stroke-width: 1.4; animation: hw-spider-drop 12s ease-in-out infinite; }
.hw-web-spider path:last-child { fill: #9d6439; stroke: none; }
@keyframes hw-mask-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.hw-season-glow { position: absolute; right: 2px; bottom: -23px; width: 95px; height: 85px; background: radial-gradient(ellipse, #ff812b27, transparent 70%); animation: hw-coal 5s ease-in-out infinite; }
.hw-flyer { position: absolute; top: 7px; left: 5px; width: 46px; height: 25px; opacity: 0; animation: hw-flyby 15s var(--season-delay) linear infinite; }
.hw-flyer--small { top: 28px; width: 27px; height: 15px; animation-name: hw-flyby-small; animation-delay: calc(var(--season-delay) - 1.5s); animation-duration: 19s; }
.hw-flyer .hw-bat { position: static; width: 100%; height: 100%; color: #ca8548; opacity: .75; transform: none; animation: none; }
.hw-season-trail { position: absolute; left: 8px; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #9d542535, #ff9d4455, transparent); transform-origin: right; animation: hw-coal 6s ease-in-out infinite; }
.hw-footer-mark img { image-rendering: pixelated; filter: drop-shadow(0 0 10px #ff812b33); animation: hw-lantern 5s ease-in-out infinite; }
.hw-emblem::before { animation: hw-coal 5s ease-in-out infinite; }
.hw-emblem:hover img { animation: hw-impact .38s 2; }
.feature-card, .edition-card { transition: border-color .3s, box-shadow .3s; }
.feature-card:hover, .edition-card:hover { border-color: #a86732; box-shadow: inset 0 0 28px #ff812b08, 0 0 20px #ff812b0a; }
.hw-motion-toggle:disabled { opacity: .6; cursor: default; }
@keyframes hw-wingbeat { from { transform: scaleY(1); } to { transform: scaleY(.5); } }
@keyframes hw-rise { 0% { opacity: 0; transform: translate(0,0); } 12% { opacity: .4; } 30% { opacity: .3; transform: translate(var(--ember-sway),-32vh); } 60% { opacity: .24; transform: translate(0,-66vh); } 95%,100% { opacity: 0; transform: translate(var(--ember-sway),-110vh); } }
@keyframes hw-flyby { 0% { opacity: 0; transform: translate(-45px,15px) rotate(-8deg); } 8% { opacity: .55; } 20% { opacity: .45; transform: translate(90px,-2px) rotate(4deg); } 34% { opacity: 0; transform: translate(250px,-12px) rotate(-6deg); } 100% { opacity: 0; transform: translate(250px,-12px); } }
@keyframes hw-lantern { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hw-coal { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes hw-ghost-hover { 0%,100% { transform: translateY(0) rotate(-2deg); } 45% { transform: translateY(-5px) rotate(2deg); } 70% { transform: translateY(-2px) rotate(0); } }
@keyframes hw-myers-turn { 0%,25%,100% { transform: rotate(-2deg); } 50%,65% { transform: rotate(4deg) translateY(-2px); } 85% { transform: rotate(0); } }
@keyframes hw-mask-lamp { 0%,100% { opacity: .5; } 38% { opacity: .9; } 54% { opacity: .6; } 72% { opacity: .85; } }
@keyframes hw-web-shimmer { 0%,100% { opacity: .18; } 50% { opacity: .32; } }
@keyframes hw-spider-thread { 0%,25%,100% { transform: scaleY(1); } 55%,70% { transform: scaleY(1.45); } }
@keyframes hw-spider-drop { 0%,25%,100% { transform: translateY(0); } 55%,70% { transform: translateY(10px); } }
@keyframes hw-flyby-small { 0% { opacity: 0; transform: translate(-30px,-12px) rotate(3deg); } 10% { opacity: .5; transform: translate(40px,0) rotate(-4deg); } 24% { opacity: .4; transform: translate(140px,12px) rotate(5deg); } 42%,100% { opacity: 0; transform: translate(250px,-9px) rotate(-5deg); } }
.hw-motion-zone:not(.hw-in-view) *, .hw-motion-zone:not(.hw-in-view)::before,
.hw-page-hidden .hw-motion-zone *, .hw-page-hidden .hw-motion-zone::before, .hw-page-hidden .hw-ambient *,
.hw-motion-paused .hw-motion-zone *, .hw-motion-paused .hw-motion-zone::before, .hw-motion-paused .hw-ambient * { animation-play-state: paused !important; }
.hw-motion-paused .hw-ambient, .hw-motion-paused .hw-flyer { visibility: hidden; }
/* One continuous, seeded flight on both pages; no captured controls or audio. */
@view-transition { navigation: auto; }
/* Swap the content under the opaque veil, not through a ghosted text crossfade. */
::view-transition-group(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(root) { display: none; }
/* Keep the live swarm separate from the captured content: no doubled silhouettes. */
::view-transition-group(hw-swarm), ::view-transition-new(hw-swarm) { animation: none; }
::view-transition-old(hw-swarm) { display: none; }
::view-transition-new(hw-swarm) { mix-blend-mode: normal; }
::view-transition { pointer-events: none; }
.hw-flight-landing::after { content: ''; position: fixed; inset: 0; z-index: 9999; background: #080706; pointer-events: none; animation: hw-landing-failsafe 1.6s both; }
@keyframes hw-landing-failsafe { 0%,45% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.hw-page-flight { position: fixed; inset: 0; z-index: 10000; overflow: hidden; pointer-events: none; contain: strict; view-transition-name: hw-swarm; }
.hw-page-flight::before { content: ''; position: absolute; inset: 0; background: #080706; animation: hw-flight-veil 420ms cubic-bezier(.3,0,.4,1) both; }
.hw-page-flight::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 45% 60%, #ee7a2110, transparent 65%); pointer-events: none; }
.hw-page-flight.is-arriving::before { animation: hw-flight-unveil 650ms cubic-bezier(.2,.5,.4,1) both; }
.hw-flight-bat { position: absolute; left: 0; top: 0; width: var(--flight-size); aspect-ratio: 160 / 90; will-change: transform; animation: hw-flight-path var(--flight-duration) linear calc(var(--flight-delay) - var(--flight-phase)) both; }
.hw-flight-art { display: block; width: 100%; height: 100%; overflow: visible; color: #0d0a07; stroke: #c49a713d; stroke-width: .65; stroke-linejoin: round; }
.hw-flight-bat--far { z-index: 1; opacity: .42; filter: blur(.5px); }
.hw-flight-bat--mid { z-index: 2; opacity: .92; }
.hw-flight-bat--near { z-index: 3; filter: blur(.35px); }
.hw-flight-bat--near .hw-flight-art { color: #090705; stroke: #e5b48152; stroke-width: .5; }
.hw-flight-eyes { stroke: none; fill: #dda06055; }
.hw-flight-wing { transform-box: view-box; animation: hw-flight-wing var(--wing-speed) ease-in-out calc(var(--wing-phase) - var(--flight-phase)) infinite alternate; }
.hw-flight-wing--left { transform-origin: 51% 49%; }
.hw-flight-wing--right { transform-origin: 49% 49%; }
.is-handoff::before, .is-handoff .hw-flight-bat, .is-handoff .hw-flight-wing { animation-play-state: paused; }
@keyframes hw-flight-path {
  0% { transform: translate3d(var(--flight-start-x),var(--flight-start-y),0) rotate(var(--flight-bank)) scale(.72); }
  38% { transform: translate3d(var(--flight-mid-x),var(--flight-mid-y),0) rotate(var(--flight-bank)) scale(1); }
  64% { transform: translate3d(var(--flight-end-x),var(--flight-end-y),0) rotate(-16deg) scale(1.12); }
  100% { transform: translate3d(150vw,var(--flight-final-y),0) rotate(-28deg) scale(.82); }
}
@keyframes hw-flight-wing { 0% { transform: scaleY(.25) skewX(-8deg); } 100% { transform: scaleY(1) skewX(3deg); } }
@keyframes hw-flight-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes hw-flight-unveil { from { opacity: 1; } to { opacity: 0; } }
.hw-motion-paused .hw-page-flight, .hw-motion-paused.hw-flight-landing::after { display: none; }
@media (max-width: 700px) {
  .hw-flight-bat { width: var(--flight-mobile-size); }
  .hw-moon { width: 38px; height: 38px; top: 24px; right: 9%; }
  .hw-low-fog { height: 125px; }
  .hw-haunt { width: 30px; height: 38px; left: 38%; }
  .hero { min-height: 1020px; padding-top: 28px; padding-inline: 0; }
  .hw-emblem { width: 185px; height: 195px; margin-bottom: 38px; }
  .hw-emblem img { width: 185px; height: 162px; }
  .hw-emblem::before { width: 158px; height: 158px; }
  .hw-coordinate { display: none; }
  .hw-bat:nth-child(1) { left: 0; top: 12%; width: 55px; }
  .hw-bat:nth-child(2) { right: 1%; top: 4%; width: 65px; }
  .hw-skip { right: 24px; bottom: max(20px, env(safe-area-inset-bottom)); font-size: 9px; }
  .hw-intro-word small { font-size: 8px; letter-spacing: .26em; }
  .hw-footer-mark { flex-wrap: wrap; gap: 14px; font-size: 8px; }
  .hw-season-strip { width: 185px; height: 54px; top: 8px; }
  .hw-season-lantern { width: 40px; height: 35px; right: 8px; }
  .hw-season-mask { width: 36px; height: 47px; }
  .hw-ember:nth-child(n+7) { display: none; }
  .hw-intro-aura { width: 270px; height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hw-flight-landing::after { display: none; }
  .hero .hero-glow { animation: none; opacity: .42; transform: none; }
  .hw-page-flight { display: none; }
  .hw-night-sky *, .hw-low-fog *, .hw-haunt, .hw-card-bat, .hw-card-bat * { animation: none !important; }
  .hw-low-fog, .hw-haunt { display: none; }
  .hw-emblem img, .hw-bat { animation: none; }
  .hw-intro-pumpkin { display: none; }
  .hw-intro-word, .hw-intro-word strong, .hw-intro-word small { animation: none; opacity: 1; }
  .hw-pumpkin-slice, .hw-word-slice { display: none; }
  .hw-intro.is-leaving { transform: none; transition: none; }
  .hw-intro-center, .hw-intro-aura, .hw-season-strip *, .hw-wing, .hw-footer-mark img, .hw-emblem::before { animation: none !important; }
  .hw-intro-sparks, .hw-intro-scan, .hw-ambient, .hw-flyer { display: none; }
  .hw-pumpkin-chuckle, .hw-grin-open, .hw-grin-closed { animation: none !important; }
}