/* Rain on glass, late light, and the small things that remain after a voice stops. */
#sensory-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.echo-control{position:absolute;left:3.4%;top:3%;z-index:29;display:flex;align-items:center;gap:12px;background:#302b20d9;border:1px solid #bca470;padding:11px 18px;color:#e9d7b2;font-size:clamp(12px,1.2vw,18px);letter-spacing:3px}
.echo-icon{position:relative;width:25px;height:24px;display:flex;align-items:center;justify-content:center;gap:4px}
.echo-icon i{display:block;width:1px;background:#d2bb88;height:10px}.echo-icon i:nth-child(2){height:21px}.echo-icon i:nth-child(3){height:15px}
.echo-control:hover .echo-icon i{animation:echo-beat 1.2s ease-in-out infinite}.echo-control:hover .echo-icon i:nth-child(2){animation-delay:.2s}
.companion{position:absolute;width:21%;height:26%;left:39%;bottom:25%;object-fit:contain;object-position:center bottom;z-index:2;pointer-events:none;filter:drop-shadow(0 4px 3px #211a1277);animation:dog-breathe 5s ease-in-out infinite}
.character[data-character^="d3-boy"]{height:59%;width:26%;bottom:24%}.character.left[data-character^="d3-boy"]{left:8%}.character.right[data-character^="d3-boy"]{right:8%}
.character[data-character="d3-boy-memory-bust"]{height:70%;width:32%;bottom:13%}
.memory-mode:after{content:'';position:absolute;inset:0;pointer-events:none;border:14px solid #58472b22;box-shadow:inset 0 0 95px #58472b55;z-index:3;animation:memory-arrive 1.7s ease-out}
.background-previous{position:absolute;inset:0;background-position:center;background-size:cover;z-index:-4;pointer-events:none;opacity:0}
.background-previous.changing{animation:scene-dissolve 1.15s ease-in-out both}
.mist-bank{position:absolute;left:-40%;top:8%;width:155%;height:65%;background:radial-gradient(ellipse,#eee7c94d,transparent 65%);filter:blur(20px);animation:mist-pass 24s linear infinite}.mist-far{top:24%;opacity:.55;animation-duration:33s;animation-delay:-15s}
.sea-shimmer{position:absolute;left:0;right:0;top:30%;height:25%;background:repeating-linear-gradient(0deg,transparent 0 12px,#f6db9e12 13px 14px,transparent 15px 28px);mask-image:linear-gradient(90deg,transparent,#0005,transparent);animation:sea-shimmer 7s ease-in-out infinite}
.grass-shadow{position:absolute;left:-4%;bottom:20%;width:45%;height:15%;background:linear-gradient(110deg,transparent 20%,#292c1416 40%,transparent 60%);transform-origin:bottom;animation:grass-sway 6s ease-in-out infinite}
.conveyor-glint{position:absolute;left:-20%;top:16%;width:20%;height:45%;background:linear-gradient(100deg,transparent,#eff4dc18,transparent);transform:skewX(-20deg);animation:conveyor-pass 14s linear infinite}
.rising-steam{position:absolute;left:calc(18% + var(--i)*14%);bottom:43%;width:14%;height:34%;background:radial-gradient(ellipse,#e8e7d348,transparent 68%);filter:blur(16px);animation:steam-drift calc(6s + var(--i)*.6s) ease-out infinite;animation-delay:calc(var(--i)*-1.8s)}.old-steam{background:radial-gradient(ellipse,#ccc6a84d,transparent 67%);height:45%;bottom:24%}
.factory-sunbeam{position:absolute;inset:-15%;background:linear-gradient(119deg,transparent 25%,#fae2a91c 32%,transparent 40%);animation:factory-light 14s ease-in-out infinite}
.factory-dust{position:absolute;width:2px;height:2px;background:#e9d6aa9c;border-radius:50%;left:calc(10% + var(--i)*6%);top:calc(14% + var(--i)*3%);animation:factory-dust calc(9s + var(--i)*.4s) linear infinite;animation-delay:calc(var(--i)*-.8s)}
.night-lamplight{position:absolute;inset:0;background:radial-gradient(ellipse at 74% 37%,#e9b75619,transparent 60%);animation:lamp-breathe 8s ease-in-out infinite}
.listen-prompt{position:absolute;z-index:25;left:34%;right:34%;bottom:33%;text-align:center}.listen-prompt button{width:100%;background:#302d23e8;border:1px solid #c9b17d;padding:15px 20px;letter-spacing:4px;font-size:clamp(14px,1.4vw,21px);box-shadow:0 3px 24px #15120c77}.listen-prompt button:before{content:'◌';display:inline-block;margin-right:13px;animation:listen-circle 4s linear infinite}
.echo-intro{display:flex;align-items:center;gap:18px;color:#cbb78f;font-size:14px;line-height:1.9;margin:0 0 22px}.echo-line{height:1px;flex:1;background:linear-gradient(90deg,transparent,#b39a68)}
.echo-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.echo-card{position:relative;min-height:200px;padding:19px 12px 15px;border:1px solid #b299655e;background:linear-gradient(135deg,#bfa16b22,#30291b55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:background .3s,transform .3s}.echo-card:hover:not(:disabled){background:#a68d4e36;transform:translateY(-3px)}.echo-card img{width:100%;height:117px;object-fit:contain;filter:drop-shadow(0 3px 3px #17130988)}.echo-card strong{font-size:15px;font-weight:400;letter-spacing:2px}.echo-card small{font-size:11px;color:#c0ad84;letter-spacing:2px}.echo-number{position:absolute;left:10px;top:8px;font:11px Georgia;color:#cbb688}.echo-card.sealed{opacity:.45;gap:27px;font-size:12px}.sealed-ripple{width:46px;height:46px;border:1px solid #ac956655;border-radius:50%;box-shadow:0 0 0 10px #ac95660a,0 0 0 20px #ac956605}
.echo-detail{position:relative;text-align:center}.echo-detail>img{height:300px;max-width:100%;object-fit:contain}.echo-detail p{font-size:calc(16px * var(--reading-scale,1));line-height:2.1;margin:15px auto;max-width:530px;color:#e2cfaa}.echo-goodnight{position:absolute;top:115px;left:42%;font-size:34px;color:#4c493d;transform:rotate(-3deg)}
.echo-wave{height:38px;display:flex;gap:5px;align-items:center;justify-content:center;opacity:.45}.echo-wave i{width:1px;height:calc(6px + mod(var(--i),5)*5px);background:#d7bd85;transform:scaleY(.4)}.echo-playing .echo-wave i{animation:echo-beat calc(.55s + var(--i)*.035s) ease-in-out infinite alternate}
.listening{--heard:0;text-align:center}.listening-window{position:relative;height:350px;overflow:hidden;background:#1c201d;border:1px solid #a68d5d;box-shadow:inset 0 0 40px #100f0b88}.listening-window>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.listening-present{filter:brightness(.72) saturate(.75)}.listening-memory{opacity:var(--heard);clip-path:ellipse(calc(8% + var(--heard)*85%) calc(12% + var(--heard)*85%) at 50% 50%);filter:sepia(.13);transform:scale(calc(1.06 - var(--heard)*.06));transition:opacity .3s}.listening-edge{position:absolute;inset:0;box-shadow:inset 0 0 80px #171b17a1}
.listening-ripples{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .4s}.is-listening .listening-ripples{opacity:.75}.listening-ripples i{position:absolute;width:90px;height:90px;border:1px solid #e4d0a72b;border-radius:50%;animation:listen-ripple 3.6s ease-out infinite}.listening-ripples i:nth-child(2){animation-delay:-1.2s}.listening-ripples i:nth-child(3){animation-delay:-2.4s}
.listening-words{min-height:75px;display:grid;place-items:center;padding:13px 8px}.listening-words p{margin:0;color:#e5d2ac;font-size:calc(16px * var(--reading-scale,1));line-height:1.9;letter-spacing:1px;transition:opacity .5s}.listen-hold{position:relative;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;min-width:240px;min-height:76px;margin:0 auto 8px;padding:14px 28px;background:#a38c5420;border:1px solid #b59c65;touch-action:none;user-select:none;overflow:hidden}.listen-hold>span:not(.listen-ring),.listen-hold small{position:relative;z-index:1}.listen-hold small{color:#bda77e;font-size:11px;letter-spacing:2px}.listen-ring{position:absolute;inset:0;background:linear-gradient(90deg,#bda06544,#d7ba7e22);transform:scaleX(var(--heard));transform-origin:left}.listening-complete .listening-memory{clip-path:none}.listening-complete .listening-words p{color:#f2dfb8}.listening #listen-confirm{margin-bottom:8px}
.chapter-transition.sensory-transition{background:#202725f7;overflow:hidden}.sensory-transition .hall-shadow,.sensory-transition .chapter-window{display:none}.sensory-transition:before,.sensory-transition:after{content:'';position:absolute;left:50%;top:50%;border:1px solid #c1ad7b45;border-radius:50%;width:40vw;height:40vw;transform:translate(-50%,-50%);animation:chapter-water 2s ease-out both}.sensory-transition:after{animation-delay:.22s}.sensory-transition #chapter-from{color:#aeac8f}.sensory-transition #chapter-to{color:#ead7ad;text-shadow:0 0 28px #bca16b55}
.doorbell-ring #background{animation:doorbell-shiver .9s ease-out}.homeward-motion #background{animation:homeward 2.6s ease-in-out both}
.glass-interaction{position:absolute;left:9%;right:9%;top:13%;bottom:34%;z-index:12;border:1px solid #b7ba9f55;transition:opacity .65s;box-shadow:0 0 35px #dce2cf22}.glass-interaction canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.glass-interaction button{position:absolute;bottom:12px;right:16px;padding:7px 13px;background:#343b2be3;border:1px solid #b9bc9566;color:#ebedcc;font-size:12px;letter-spacing:3px}.glass-interaction.glass-clear{opacity:0;pointer-events:none}
@keyframes echo-beat{from{transform:scaleY(.25)}to{transform:scaleY(1.3)}}@keyframes dog-breathe{50%{transform:translateY(-1px)}}
@keyframes scene-dissolve{0%{opacity:1}100%{opacity:0}}@keyframes memory-arrive{from{opacity:0}to{opacity:1}}@keyframes mist-pass{to{transform:translateX(25%)}}
@keyframes sea-shimmer{50%{transform:translateX(3%) translateY(3px);opacity:.4}}@keyframes grass-sway{50%{transform:skewX(5deg)}}@keyframes conveyor-pass{to{left:110%}}
@keyframes steam-drift{0%{opacity:0;transform:translateY(20px) scale(.6)}30%{opacity:.75}100%{opacity:0;transform:translateY(-100px) scale(1.5)}}
@keyframes factory-light{50%{opacity:.5;transform:translateX(3%)}}@keyframes factory-dust{to{transform:translate(25px,-60px);opacity:0}}@keyframes lamp-breathe{50%{opacity:.45}}
@keyframes listen-circle{to{transform:rotate(360deg)}}@keyframes listen-ripple{0%{transform:scale(.4);opacity:0}20%{opacity:1}100%{transform:scale(5);opacity:0}}@keyframes chapter-water{0%{transform:translate(-50%,-50%) scale(.25);opacity:0}35%{opacity:1}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}
@keyframes doorbell-shiver{0%,100%{transform:translateX(0)}12%,35%{transform:translateX(2px)}24%,48%{transform:translateX(-2px)}}@keyframes homeward{50%{transform:scale(1.045) translateY(-2px)}100%{transform:scale(1.08)}}
@media(max-width:700px) and (orientation:portrait){.echo-control{left:5%;top:2.5%;font-size:12px;padding:9px 12px}.echo-icon{width:18px;height:20px}.echo-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.echo-card{min-height:168px;padding:20px 8px 12px}.echo-card img{height:90px}.echo-card strong{font-size:13px;letter-spacing:1px}.echo-card small{font-size:10px}.echo-intro{font-size:12px;gap:10px}.echo-detail>img{height:240px}.echo-detail p{font-size:calc(15px * var(--reading-scale,1))}.echo-goodnight{top:93px;left:40%;font-size:25px}.listening-window{height:260px}.listening-words{min-height:90px}.listening-words p{font-size:calc(15px * var(--reading-scale,1))}.listen-hold{min-width:220px}.listen-prompt{left:19%;right:19%;bottom:calc(232px + 9%)}.listen-prompt button{font-size:15px;padding:14px}.character[data-character^="d3-boy"]{height:50%;width:69%;bottom:26%}.character.left[data-character^="d3-boy"]{left:-21%}.character.right[data-character^="d3-boy"]{right:-21%}.character[data-character="d3-boy-memory-bust"]{height:60%;width:83%;bottom:18%}.companion{width:40%;height:17%;left:30%;bottom:34%}.background-previous{background-position:52% center}.memory-mode:after{border-width:7px}.sensory-transition:before,.sensory-transition:after{width:90vw;height:90vw}}
@media(prefers-reduced-motion:reduce){#sensory-layer *,.companion,.memory-mode:after,.background-previous.changing,.listening-ripples i,.echo-wave i,.echo-control .echo-icon i,.listen-prompt button:before{animation:none!important}.background-previous.changing{opacity:0}.listening-memory{transition:none}.sensory-transition:before,.sensory-transition:after{animation:none}.doorbell-ring #background,.homeward-motion #background{animation:none}}

.listening-rain{opacity:var(--heard);clip-path:ellipse(calc(8% + var(--heard)*85%) calc(12% + var(--heard)*85%) at 50% 50%)}