/* Stage 2. Homepage positions and UI remain defined by styles.css. */
.world{transform-origin:0 0;transform:matrix(1,0,0,1,0,0);transition:transform 1.25s cubic-bezier(.22,.65,.25,1)}
.world[data-scene=window]{transform-origin:0 0;transform:matrix(4.4,0,0,4.4,-926,-663)}
.world[data-scene=sofa]{transform-origin:0 0;transform:matrix(2,0,0,2,-432,-550)}
.world[data-scene=shelves]{transform-origin:0 0;transform:matrix(1.65,0,0,1.65,-1091,90)}
.world .room{transition:filter 1.25s ease}
.world[data-scene=sofa] .room{filter:blur(2px) brightness(.82)}
.world .character{transition:opacity .8s ease}
.world[data-scene=window] .character{opacity:0}
.window-depth{position:absolute;inset:0;clip-path:polygon(14.8% 5.7%,36.1% 13%,36.1% 43.8%,14.8% 45.1%);pointer-events:none}
.window-city{position:absolute;inset:0;background:url('assets/derived/home/room.webp') 0 0 / 1536px 1024px no-repeat;transform:translate(var(--city-x,0px),var(--city-y,0px));transition:transform 1.5s cubic-bezier(.2,.65,.3,1)}
.window-haze{position:absolute;left:180px;top:120px;width:420px;height:120px;background:radial-gradient(ellipse,#9b86cc13,transparent 68%);animation:window-haze 32s ease-in-out infinite}
.window-reflection{position:absolute;left:220px;top:70px;width:340px;height:395px;background:linear-gradient(111deg,transparent 30%,#c091d506 48%,transparent 63%);animation:glass-reflection 23s ease-in-out infinite}
.distant-traffic{position:absolute;left:310px;top:401px;width:5px;height:1px;border-radius:50%;background:#edafba;box-shadow:0 0 3px #e799b9;opacity:.4;animation:distant-drive 27s linear infinite}
.city-ambient i{width:.8px;height:1.3px;border-radius:1px;filter:blur(.3px);box-shadow:0 0 2px currentColor}
.canvas:has(.window:hover) .window-reflection{box-shadow:inset 0 0 12px #ff64c514}
.canvas:has(.sofa:hover) .character{filter:drop-shadow(0 4px 8px #ef4fa026)}
.gang-glow{animation:gang-halo 10.7s ease-in-out infinite}
.gang-emission{position:absolute;inset:0;background:url('assets/derived/home/room.webp') 0 0 / 1536px 1024px no-repeat;mask-image:radial-gradient(ellipse 100px 108px at 895px 199px,#000 60%,transparent 100%);mix-blend-mode:screen;pointer-events:none;animation:gang-breathe 10.7s ease-in-out infinite}
.canvas[data-mode=window] .gang-emission,.canvas[data-mode=window] .gang-glow{animation-play-state:paused}
.canvas[data-mode=sofa] .window-depth,.canvas[data-mode=sofa] .city-ambient{opacity:.6}
.canvas[data-mode=sofa] .scene-caption{display:none}
.canvas[data-mode=window] .scene-caption{background:none;border:0;box-shadow:none;bottom:45px;left:50px;text-shadow:0 2px 8px #04010d}
.canvas[data-mode=window] .scene-caption h2{font-weight:400;font-style:italic;font-size:30px;color:#f481c7}
.canvas[data-mode=sofa] .back{left:auto;right:35px;top:30px;border-radius:50px;font-size:30px;line-height:24px;background:#100c15c9}
.canvas[data-mode=sofa] .back span{font-size:12px;vertical-align:middle;margin-left:10px}
.scene-controls{z-index:9}
.sofa-intro{position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0;transition:opacity .65s ease;}
.canvas[data-mode=sofa][data-phase=open] .sofa-intro{opacity:1}
.sofa-greeting{position:absolute;left:55px;top:140px;margin:0;font-family:'Segoe Print','Comic Sans MS',cursive;font-size:38px;font-weight:400;line-height:1.5;color:#ff87cf;text-shadow:0 0 14px #da4b9e55;transform:rotate(-7deg)}
.sofa-greeting span{white-space:nowrap}
.sofa-copy{position:absolute;right:45px;top:170px;width:315px}
.sofa-motto{font-family:'Segoe Print','Comic Sans MS',cursive;font-size:30px;color:#ff86ce;line-height:1.5;transform:rotate(-5deg)}
.sofa-description{padding:20px;font-size:16px;line-height:1.75;background:#0b090edb}
.polaroids{position:absolute;left:calc(50% - 470px);bottom:42px;display:flex;gap:25px;align-items:end}
.polaroid{width:215px;padding:12px 12px 16px;background:linear-gradient(135deg,#ffe5ee,#efbdce);border:1px solid #f0c3d8;color:#321829;box-shadow:0 9px 20px #0006;transform:rotate(-8deg);pointer-events:auto;transition:transform .3s ease,box-shadow .3s ease;transform-origin:50% 95%;}
.polaroid:nth-child(2){transform:rotate(4deg);margin-bottom:7px}.polaroid:nth-child(3){transform:rotate(-3deg);margin-bottom:-7px}.polaroid:nth-child(4){transform:rotate(8deg);margin-bottom:4px}
.polaroid:hover,.polaroid:focus-visible,.polaroid[aria-expanded=true]{transform:translateY(-10px) rotate(0);color:#321829;box-shadow:0 12px 28px #09030fb0}
.polaroid-photo{display:block;width:189px;height:157px;background-color:#1c101d;background-repeat:no-repeat;box-shadow:inset 0 0 12px #0003}
.photo-story{background-image:url('assets/media/player/dovold_vibes_player.png');background-size:550px auto;background-position:-39px -46px}
.photo-work{background-image:url('assets/derived/home/room.webp');background-size:768px 512px;background-position:-360px -162px}
.photo-world{background-image:url('assets/derived/home/room.webp');background-size:768px 512px;background-position:-105px -62px}
.photo-mili{display:grid;place-items:center;color:#ba90aa;font-size:14px;background:linear-gradient(145deg,#211422,#120c17)}
.polaroid-label{display:block;white-space:nowrap;font-family:'Segoe Print','Comic Sans MS',cursive;font-size:19px;margin-top:13px}.polaroid-label i{font-family:Arial,sans-serif;font-style:normal;color:#c53886;font-size:27px;vertical-align:middle}
.polaroid-note{position:absolute;left:calc(50% - 280px);bottom:328px;width:560px;padding:16px 24px;font-size:16px;line-height:1.6;text-align:center;background:#130e17ed;pointer-events:auto}
.character-rig{object-fit:initial;filter:drop-shadow(0 9px 7px #10071188)}
.character-rig .character-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.character-surface{position:absolute;pointer-events:none;transform-origin:50% 65%;}
.eye-patch{position:absolute;pointer-events:none;overflow:hidden;mask-image:radial-gradient(ellipse,#000 42%,#000c 65%,transparent 96%)}
.eye-gaze{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.65,.3,1);transform:translate(var(--gaze-x,0px),var(--gaze-y,0px))}
.eye-gaze canvas,.eye-blink{position:absolute;inset:0;width:100%;height:100%}.eye-blink{opacity:0;transition:opacity 40ms linear}
.rig-chest{position:absolute;inset:0;animation:chest-breath 5.8s ease-in-out infinite;transform-origin:50% 65%;mask-image:radial-gradient(ellipse 31% 15% at 50% 44%,#000 25%,transparent 95%)}
.rig-chest img{width:100%;height:100%}.dov .rig-chest{animation-duration:6.7s;animation-delay:-3.1s;mask-image:radial-gradient(ellipse 25% 18% at 62% 42%,#000 25%,transparent 95%)}
.hair-detail{position:absolute;pointer-events:none;animation:hair-drift 9.3s ease-in-out infinite;transform-origin:50% 0;mask-image:radial-gradient(ellipse,#000 25%,transparent 78%);opacity:.5}
.dov .hair-detail{animation-duration:11.9s;animation-delay:-4.4s}
.rig-paused .rig-chest,.rig-paused .hair-detail{animation-play-state:paused}
.canvas[data-mode=window] .restore-vibes,.canvas[data-mode=sofa] .restore-vibes{opacity:0;pointer-events:none}
@keyframes gang-breathe{0%,100%{opacity:.025;filter:brightness(1)}35%{opacity:.2;filter:brightness(1.12)}70%{opacity:.065;filter:brightness(1.02)}}
@keyframes gang-halo{0%,100%{opacity:.35}35%{opacity:.85}70%{opacity:.42}}
@keyframes window-haze{0%,100%{transform:translate(-12px,0);opacity:.35}50%{transform:translate(14px,3px);opacity:.75}}
@keyframes glass-reflection{0%,100%{opacity:.3}50%{opacity:.8}}
@keyframes distant-drive{0%{transform:translateX(0);opacity:0}10%{opacity:.35}75%{opacity:.35}90%,100%{transform:translateX(100px);opacity:0}}
@keyframes chest-breath{0%,100%{transform:translateY(0)}45%{transform:translateY(-1.4px)}}
@keyframes hair-drift{0%,100%{transform:rotate(-.2deg) translateX(0)}50%{transform:rotate(.25deg) translateX(.45px)}}
@media(prefers-reduced-motion:reduce){.character-surface{visibility:hidden}.rig-chest,.hair-detail{display:none}.world{transition-duration:.01s}.gang-emission{opacity:.06}.window-city{transform:none!important}.sofa-intro{transition:none}.distant-traffic{opacity:.25}}
