/* Independent scenery details. Background actions pause outside the viewport. */
.ambient-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#pause-tapes .scene-rehearsal,#testimonials .scene-backstage{background-image:none!important}
#pause-tapes .shoe-scene{top:-85px}
[data-ambient-scene]{position:relative;isolation:isolate}
.ambient-frame{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit}
.ambient-detail{position:absolute;display:block;pointer-events:none}
.wire-sway{transform-origin:0 53px;animation:wire-breeze 7s ease-in-out infinite}
.shoe-swing{transform-origin:1116px 183px}
.left-shoe{animation:shoe-breeze 7s ease-in-out -.4s infinite}
.right-shoe{animation:shoe-breeze 7.4s ease-in-out -1.6s infinite;--shoe-angle:2.4deg}
@keyframes wire-breeze{0%,100%{transform:rotate(-.12deg) scaleY(.99)}50%{transform:rotate(.12deg) scaleY(1.025)}}
@keyframes shoe-breeze{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(var(--shoe-angle,1.8deg))}}
.breeze-leaf{opacity:0;animation:street-leaf 16s linear infinite}
.leaf-two{animation-delay:7s;animation-duration:21s}
@keyframes street-leaf{0%,15%{transform:translate(250px,660px) rotate(-15deg);opacity:0}22%{opacity:.7}65%{opacity:.65}78%,100%{transform:translate(1250px,900px) rotate(230deg);opacity:0}}
.hat-settle{transform-origin:1430px 566px;animation:hat-land 1.25s cubic-bezier(.2,.6,.35,1) both}
@keyframes hat-land{0%{transform:translate(36px,-90px) rotate(9deg);opacity:0}20%{opacity:1}75%{transform:translate(0,0) rotate(-1deg)}88%{transform:translate(0,-4px) rotate(.6deg)}100%{transform:translate(0,0) rotate(0)}}
.hat-contact{animation:hat-shadow 1.25s ease-out both;transform-origin:1422px 565px}
@keyframes hat-shadow{from{opacity:0;transform:scale(.65)}to{opacity:.45;transform:scale(1)}}
.lamp-breathe{animation:lamp-warmth 8s ease-in-out infinite}
@keyframes lamp-warmth{0%,100%{opacity:.4}50%{opacity:1}}
.reel-glint{stroke-dasharray:30 450;animation:reel-light 11s ease-in-out infinite}
@keyframes reel-light{0%,35%{stroke-dashoffset:120;opacity:0}50%{opacity:.24}70%,100%{stroke-dashoffset:-250;opacity:0}}
.desk-lamp-pool{right:-5%;top:-8%;width:38%;height:45%;background:radial-gradient(ellipse,#ffc56624,transparent 70%);animation:desk-light 11s ease-in-out infinite;transform-origin:top right}
@keyframes desk-light{0%,100%{opacity:.35;transform:rotate(-2deg)}50%{opacity:.85;transform:rotate(2deg)}}
.cup-steam{inset:0;width:100%;height:100%;opacity:.23}
.steam-one,.steam-two{animation:cup-steam 6s ease-out infinite;transform-origin:55px 660px}.steam-two{animation-delay:-3s}
@keyframes cup-steam{0%{opacity:0;transform:translate(0,12px) scaleX(.7)}30%{opacity:.8}100%{opacity:0;transform:translate(12px,-40px) scaleX(1.2)}}
.screen-ink-glint{right:8%;top:23%;width:19%;height:41%;background:linear-gradient(115deg,transparent 40%,#bd9ad00f 48%,#e8cba118 50%,transparent 59%);background-size:350% 100%;animation:screen-glint 14s ease-in-out infinite;transform:skew(-4deg)}
@keyframes screen-glint{0%,20%{background-position:100% 0;opacity:0}35%{opacity:1}65%,100%{background-position:0 0;opacity:0}}
.platform-reflection{right:2%;top:8%;width:35%;height:28%;background:linear-gradient(105deg,transparent,#d4bca215,transparent);animation:platform-light 13s ease-in-out infinite}
@keyframes platform-light{0%,100%{opacity:.15;transform:translateX(-18px)}50%{opacity:.7;transform:translateX(18px)}}
.studio-console-glow{right:0;top:0;width:28%;height:55%;background:radial-gradient(ellipse at 70% 20%,#cb983720,transparent 60%);animation:lamp-warmth 9s ease-in-out infinite}
.stoop-breeze{inset:0;width:100%;height:100%}.stoop-leaf{animation:stoop-leaf 19s ease-in-out infinite}
@keyframes stoop-leaf{0%,20%{transform:translate(370px,935px) rotate(-10deg);opacity:0}30%,60%{opacity:.5}80%,100%{transform:translate(920px,880px) rotate(240deg);opacity:0}}
.curtain-light{left:3%;top:0;width:23%;height:100%;background:linear-gradient(90deg,transparent,#c98dee09,transparent);animation:curtain-light 12s ease-in-out infinite}
@keyframes curtain-light{0%,100%{transform:skewX(-2deg) translateX(-7px);opacity:.4}50%{transform:skewX(2deg) translateX(7px);opacity:.8}}
.invitation-window{left:0;top:0;width:35%;height:100%;background:linear-gradient(105deg,transparent 30%,#e7cee90a 33%,transparent 52%);animation:invitation-light 18s ease-in-out infinite}
@keyframes invitation-light{0%,100%{transform:translateX(-12px);opacity:.3}50%{transform:translateX(12px);opacity:.8}}
.tape-signal{right:5%;top:45px;display:flex;gap:4px;height:20px;align-items:end;opacity:.45}
.tape-signal i{width:3px;height:16px;background:#98b884;transform-origin:bottom;animation:signal-level 2.1s ease-in-out infinite}.tape-signal i:nth-child(2){animation-delay:-.6s}.tape-signal i:nth-child(3){animation-delay:-1.4s}.tape-signal i:nth-child(4){animation-delay:-.9s}
@keyframes signal-level{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.groove-light{right:5%;bottom:10%;width:160px;height:160px;border:1px solid #d9ba7022;border-radius:50%;box-shadow:0 0 0 5px #d9ba7009,0 0 0 12px #d9ba7007;animation:groove-light 10s ease-in-out infinite}
@keyframes groove-light{0%,100%{opacity:.25;transform:rotate(-8deg)}50%{opacity:.55;transform:rotate(8deg)}}
[data-ambient-scene] .ambient-scene *,[data-ambient-scene] .ambient-detail,[data-ambient-scene] .ambient-detail *{animation-play-state:paused}
[data-ambient-scene].ambient-visible .ambient-scene *,[data-ambient-scene].ambient-visible .ambient-detail,[data-ambient-scene].ambient-visible .ambient-detail *{animation-play-state:running}
.story-motion-off [data-ambient-scene] .ambient-scene *,.story-motion-off [data-ambient-scene] .ambient-detail,.story-motion-off [data-ambient-scene] .ambient-detail *{animation-play-state:paused!important}
.story-motion-off .hat-settle{animation:none;transform:none;opacity:1}
@media(max-width:700px){#pause-tapes .shoe-scene{top:0;left:60%;width:780px;height:520px;transform:translateX(-60%)}.leaf-two{display:none}}
@media(prefers-reduced-motion:reduce){.ambient-scene *,.ambient-detail,.ambient-detail *{animation:none!important}.hat-settle{opacity:1;transform:none}.breeze-leaf,.stoop-leaf,.cup-steam,.tape-signal{display:none}.hat-contact{opacity:.45}}

#listening:not(.audio-playing) .tape-signal i{animation-play-state:paused}
