/* Living art, v23. Original pixels remain the static, no-JS fallback.
   The letterforms, musicians, show stamp and information never move. */
.nav .links{align-items:center}
.motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 9px;border:1px solid #c2a26545;border-radius:30px;background:transparent;color:#d8c3a0;font-size:10px;line-height:1.2;letter-spacing:.4px;white-space:nowrap;cursor:pointer}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{border-color:#d8b77e;color:#f3e4c3}
.motion-toggle svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.motion-pause-icon{display:none}
[data-ambient-motion="running"] .motion-pause-icon{display:block}
[data-ambient-motion="running"] .motion-play-icon{display:none}
.motion-toggle:disabled{cursor:default;opacity:.78}
.motion-toggle:disabled svg{display:none}

/* Only the outer smoke from the approved transparent plate is reused.
   The masks stop outside the lettering; there are no new painted wisps. */
.smoke-wisp{position:absolute;inset:0;z-index:1;background:url('step-into-the-night-smoke-v16.webp') center / 100% 100% no-repeat;pointer-events:none;opacity:0;transform-origin:center;animation-play-state:paused!important;will-change:auto}
.smoke-wisp-top{-webkit-mask-image:linear-gradient(#000 0%,#000 13%,transparent 25%);mask-image:linear-gradient(#000 0%,#000 13%,transparent 25%);transform-origin:50% 27%;animation:smoke-curl-top 7s ease-in-out -1.3s infinite}
.smoke-wisp-left{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 6%,transparent 13%);mask-image:linear-gradient(90deg,#000 0%,#000 6%,transparent 13%);transform-origin:14% 55%;animation:smoke-curl-left 9s ease-in-out -3s infinite}
.smoke-wisp-right{-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 7%,transparent 14%);mask-image:linear-gradient(270deg,#000 0%,#000 7%,transparent 14%);transform-origin:85% 55%;animation:smoke-curl-right 10s ease-in-out -2.2s infinite}
[data-ambient-motion="running"] .smoke-wisp{opacity:.86;animation-play-state:running!important}
[data-ambient-motion="paused"] .smoke-wisp{opacity:.86}
@keyframes smoke-curl-top{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(10px,-21px) rotate(3.5deg)}}
@keyframes smoke-curl-left{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-17px,-9px) rotate(-3.2deg)}}
@keyframes smoke-curl-right{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(18px,-14px) rotate(3.4deg)}}

/* Three local leaf surfaces reuse precisely the displayed responsive artwork.
   Each broad feather settles back into the original edge; no face pixels move. */
.art::after{z-index:2}
.living-leaves{display:none;position:absolute;z-index:1;top:0;left:0;width:100%;height:auto;aspect-ratio:2/3;overflow:hidden;pointer-events:none;user-select:none}
[data-leaves-ready="true"][data-ambient-motion="running"] .living-leaves,[data-leaves-ready="true"][data-ambient-motion="paused"] .living-leaves{display:block}
.living-leaf{transform-box:view-box;animation-play-state:paused!important}
.living-leaf-left{transform-origin:150px 1190px;animation:leaf-left-sway 6.5s ease-in-out -1.1s infinite}
.living-leaf-center{transform-origin:285px 1334px;animation:leaf-center-breathe 7.5s ease-in-out -2s infinite}
.living-leaf-upper{transform-origin:805px 1033px;animation:leaf-upper-sway 8.5s ease-in-out -3s infinite}
[data-ambient-motion="running"] .living-leaf,[data-ambient-motion="running"] .hidden-eye-lid{animation-play-state:running!important}
@keyframes leaf-left-sway{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-6px,-8px) rotate(-1.4deg)}}
@keyframes leaf-center-breathe{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(8px,-7px) rotate(1.2deg)}}
@keyframes leaf-upper-sway{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-5px,-7px) rotate(-1.3deg)}}
/* A brief upper lid closes the existing eye, using its own green leaf texture.
   The first blink is at about 3.2 seconds, then once every 12 seconds. */
.hidden-eye-lid{transform-box:view-box;transform-origin:840px 949px;transform:scaleY(0);animation:hidden-eye-blink 12s linear infinite;animation-play-state:paused!important}
@keyframes hidden-eye-blink{0%,26%,29.5%,100%{transform:scaleY(0)}27.4%,27.9%{transform:scaleY(1)}}
[data-hero-visible="false"] .smoke-wisp,[data-hero-visible="false"] .living-leaf,[data-hero-visible="false"] .hidden-eye-lid{animation-play-state:paused!important}
@media(min-width:1450px){.living-leaves{top:-20px}}
/* Preserve pixel registration where the tablet poster has a different crop. */
@media(min-width:701px) and (max-width:1000px){.living-leaves{display:none!important}}

/* A still vignette fades in as the final illustration enters view.
   It lives inside the art layer, behind every line of readable content. */
.finale-art::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,transparent 24%,#280d20 72%,#170917);opacity:var(--night-depth,0);pointer-events:none;transition:opacity .45s linear}
@media(max-width:700px){.nav .links{gap:12px}.motion-toggle{font-size:10px;letter-spacing:0;padding:8px}.motion-toggle svg{width:12px;height:12px}}
@media(max-width:350px){.nav .links{gap:8px}.motion-toggle{gap:5px;padding:8px 7px}}
@media(prefers-reduced-motion:reduce){.smoke-wisp,.living-leaves{display:none!important;animation:none!important}.living-leaf,.hidden-eye-lid{animation:none!important}.finale-art::after{display:none;transition:none}html{scroll-behavior:auto}}
@media(forced-colors:active){.smoke-wisp,.living-leaves,.finale-art::after{display:none!important}.motion-toggle{display:none!important}}

/* Broader, overlapping atmosphere makes a continuous canvas of the scenes.
   These are paint layers only: document spacing and readable copy stay intact. */
main{background:radial-gradient(ellipse 90% 20% at 30% 25%,#46332633,transparent),radial-gradient(ellipse 100% 22% at 75% 58%,#48273b44,transparent),#110d16}
.hero{background:linear-gradient(0deg,transparent,#110d1600 180px),radial-gradient(ellipse at 13% 45%,#30221c99,transparent 65%)}
.hero:after{border-bottom:0;-webkit-mask-image:linear-gradient(#000 calc(100% - 250px),transparent);mask-image:linear-gradient(#000 calc(100% - 250px),transparent)}
.art:after{background:linear-gradient(90deg,#110d16,transparent 16%),linear-gradient(0deg,#110d16,transparent 19%)}
.music{border:0;background:radial-gradient(ellipse 90% 65% at 0 30%,#54101d28,transparent),radial-gradient(ellipse 90% 65% at 100% 45%,#39483b40,transparent)}
.music:before,.show:before{top:-145px;height:320px;opacity:1;background:radial-gradient(ellipse 58% 40% at 24% 46%,#a4845638,transparent 100%),radial-gradient(ellipse 65% 42% at 77% 53%,#627b673c,transparent 100%)}
.show{border:0;background:transparent}
.show:before{background:radial-gradient(ellipse 60% 45% at 25% 48%,#c8773340,transparent 100%),radial-gradient(ellipse 60% 43% at 74% 50%,#79536d36,transparent 100%)}
.music>.scene-mist,.show>.scene-mist{position:absolute;z-index:0;left:-4%;top:-112px;width:108%;height:255px;opacity:.16;pointer-events:none;user-select:none}
.show>.scene-mist{transform:scaleX(-1);opacity:.14}
.blood-fringe{top:-18px;opacity:.8;-webkit-mask-image:linear-gradient(transparent,#000 72%);mask-image:linear-gradient(transparent,#000 72%)}
.halloween-scene:after{border-top:0;border-bottom:0;-webkit-mask-image:linear-gradient(transparent,#000 150px,#000 calc(100% - 170px),transparent);mask-image:linear-gradient(transparent,#000 150px,#000 calc(100% - 170px),transparent)}
.finale-art{-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 77%,transparent);mask-image:linear-gradient(transparent,#000 20%,#000 77%,transparent)}
.show .finale-info{background:radial-gradient(ellipse 76% 44% at 50% 0,#55291936,transparent 90%)}
.artifact{position:relative;background:linear-gradient(transparent,#14101899 65%)}
.footer{background:#14101899;border-top:0}
@media(max-width:700px){
 .hero{background:transparent}
 .hero:after{-webkit-mask-image:linear-gradient(#000 calc(100% - 190px),transparent);mask-image:linear-gradient(#000 calc(100% - 190px),transparent)}
 .art:after{background:linear-gradient(0deg,#110d16,transparent 17%)}
 .music:before,.show:before{top:-100px;height:225px}
 .music>.scene-mist,.show>.scene-mist{top:-78px;height:175px;opacity:.17}
 .blood-fringe{top:-10px}
 .halloween-scene:after{-webkit-mask-image:linear-gradient(transparent,#000 100px,#000 calc(100% - 110px),transparent);mask-image:linear-gradient(transparent,#000 100px,#000 calc(100% - 110px),transparent)}
 .finale-art{-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent)}
}
@media(forced-colors:active){.scene-mist{display:none!important}}

/* Reflect only the existing corner strands across their shared anchor.
   The upper fans fade into the hero haze; the original hanging spiders stay below. */
.music>.transition-webs{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none;user-select:none}
.transition-webs .cobweb-mirror{transform:translateY(-100%) scaleY(-1);opacity:.58;-webkit-mask-image:linear-gradient(#000 0%,#000 16%,#0008 58%,transparent);mask-image:linear-gradient(#000 0%,#000 16%,#0008 58%,transparent)}
.transition-webs .cobweb-right{transform:translateY(-100%) scale(-1,-1);opacity:.46}
@media(max-width:700px){.transition-webs .cobweb-mirror{opacity:.43}.transition-webs .cobweb-right{opacity:.37}}
@media(forced-colors:active){.transition-webs{display:none!important}}

/* v26: running water follows the existing mountain falls, in poster pixels.
   Soft, narrow masks exclude cliffs, arches, lanterns and all four musicians.
   Two low-opacity copies of the original water travel down through the mask;
   fine irregular highlights carry the same direction without moving the art. */
.mountain-water{display:none;position:absolute;z-index:1;top:0;left:0;width:100%;height:auto;aspect-ratio:2/3;overflow:hidden;pointer-events:none;user-select:none}
[data-water-ready="true"][data-ambient-motion="running"] .mountain-water,[data-water-ready="true"][data-ambient-motion="paused"] .mountain-water{display:block}
.water-texture{transform-box:view-box;animation:water-texture-flow 3.8s linear infinite;animation-play-state:paused!important;opacity:0}
.water-texture-b{animation-delay:-1.9s}
.water-current{opacity:.52;animation:water-current-flow var(--water-speed,3.9s) linear var(--water-phase,0s) infinite;animation-play-state:paused!important}
[data-ambient-motion="running"] .water-texture,[data-ambient-motion="running"] .water-current{animation-play-state:running!important}
[data-hero-visible="false"] .water-texture,[data-hero-visible="false"] .water-current{animation-play-state:paused!important}
@keyframes water-texture-flow{0%{transform:translateY(-5px);opacity:0}50%{opacity:.4}100%{transform:translateY(5px);opacity:0}}
@keyframes water-current-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-96}}
@media(min-width:1450px){.mountain-water{top:-20px}}
/* Match the tablet image's exact object-fit:cover rather than hiding the water. */
@media(min-width:701px) and (max-width:1000px){.mountain-water{height:100%;aspect-ratio:auto}}
@media(prefers-reduced-motion:reduce){.mountain-water{display:none!important}.water-texture,.water-current{animation:none!important}}
@media(forced-colors:active){.mountain-water{display:none!important}}

/* v28: four registered lanterns, with contrast visible at phone size.
   A soft ember layer varies the original painted light; amber glow and two
   co-located flame shapes crossfade without moving any surrounding artwork.
   Opacity-only SVG animation avoids transform-box / SVG-origin differences. */
.candle-lights{display:none;position:absolute;z-index:1;top:0;left:0;width:100%;height:auto;aspect-ratio:2/3;overflow:hidden;pointer-events:none;user-select:none}
[data-leaves-ready="true"][data-ambient-motion="running"] .candle-lights,[data-leaves-ready="true"][data-ambient-motion="paused"] .candle-lights{display:block}
.candle-ember{opacity:.42;animation:candle-ember-flicker var(--candle-speed) ease-in-out var(--candle-phase) infinite}
.candle-glow{opacity:.6;animation:candle-glow-flicker var(--candle-speed) ease-in-out var(--candle-phase) infinite}
.candle-flame-a{opacity:.65;animation:candle-flame-flicker var(--flame-speed) ease-in-out var(--flame-phase) infinite}
.candle-flame-b{opacity:.28;animation:candle-flame-flicker var(--flame-speed) ease-in-out var(--flame-phase) infinite reverse}
.candle-ember,.candle-glow,.candle-flame-a,.candle-flame-b{animation-play-state:paused!important}
[data-ambient-motion="running"] .candle-ember,[data-ambient-motion="running"] .candle-glow,[data-ambient-motion="running"] .candle-flame-a,[data-ambient-motion="running"] .candle-flame-b{animation-play-state:running!important}
[data-hero-visible="false"] .candle-ember,[data-hero-visible="false"] .candle-glow,[data-hero-visible="false"] .candle-flame-a,[data-hero-visible="false"] .candle-flame-b{animation-play-state:paused!important}
/* Uneven, gently eased intervals never extinguish the painted lights.
   Each lantern has its own duration and phase, with no shared flashing beat. */
@keyframes candle-glow-flicker{0%,100%{opacity:.62}13%{opacity:.94}22%{opacity:.25}41%{opacity:.82}53%{opacity:.42}66%{opacity:1}79%{opacity:.22}90%{opacity:.76}}
@keyframes candle-ember-flicker{0%,100%{opacity:.36}13%{opacity:.1}22%{opacity:.78}41%{opacity:.2}53%{opacity:.58}66%{opacity:.06}79%{opacity:.8}90%{opacity:.25}}
@keyframes candle-flame-flicker{0%,100%{opacity:.62}17%{opacity:.96}31%{opacity:.14}48%{opacity:.76}59%{opacity:.28}77%{opacity:.9}89%{opacity:.18}}
@media(min-width:1450px){.candle-lights{top:-20px}}
/* Match object-fit:cover and centered cropping on tablet widths. */
@media(min-width:701px) and (max-width:1000px){.candle-lights{height:100%;aspect-ratio:auto}}
@media(prefers-reduced-motion:reduce){.candle-lights{display:none!important}.candle-ember,.candle-glow,.candle-flame-a,.candle-flame-b{animation:none!important}}
@media(forced-colors:active){.candle-lights{display:none!important}}