:root{--depth-x:0px;--depth-y:0px}
/* Four independently moving layers; all are frozen unless music is playing. */
.depth-stage{position:relative;overflow:hidden;isolation:isolate;}.depth-frame{position:absolute;inset:0;pointer-events:none;will-change:opacity}.depth-back,.depth-front{position:absolute;inset:-4%;background-size:cover;background-position:var(--depth-position,center);background-repeat:no-repeat;backface-visibility:hidden;transform-origin:55% 55%;will-change:transform;animation:depth-camera 28s ease-in-out infinite alternate;animation-play-state:paused}.depth-front{mask-image:radial-gradient(ellipse 22% 45% at var(--subject-x,72%) 70%,#000 8%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse 22% 45% at var(--subject-x,72%) 70%,#000 8%,transparent 92%);animation-name:depth-foreground;animation-duration:21s;transform-origin:var(--subject-x,72%) 70%;opacity:.48}.depth-fog,.depth-light,.depth-dust{position:absolute;inset:-10%;z-index:3;pointer-events:none;animation-play-state:paused;will-change:transform}.depth-fog{background:radial-gradient(ellipse at 15% 88%,#93a6af25,transparent 36%),radial-gradient(ellipse at 80% 100%,#d4e1e41a,transparent 30%);mix-blend-mode:screen;opacity:.65;animation:depth-fog 31s ease-in-out infinite alternate paused}.depth-light{background:radial-gradient(ellipse at 75% 15%,#e6bb6422,transparent 58%);mix-blend-mode:screen;animation:depth-light 23s ease-in-out infinite alternate paused}.depth-dust{background-image:radial-gradient(1px 1px at 21% 44%,#f3d5a978,transparent),radial-gradient(1px 1px at 64% 70%,#d4be9870,transparent),radial-gradient(1px 1px at 87% 38%,#efe3c44a,transparent);background-size:250px 230px;opacity:.22;animation:depth-dust 39s linear infinite paused}.motion-playing .depth-visible .depth-back,.motion-playing .depth-visible .depth-front,.motion-playing .depth-visible .depth-fog,.motion-playing .depth-visible .depth-light,.motion-playing .depth-visible .depth-dust{animation-play-state:running}.motion-disabled .depth-front,.motion-disabled .depth-fog,.motion-disabled .depth-light,.motion-disabled .depth-dust{opacity:0!important}.depth-stage>img.depth-source{display:block;width:100%;height:auto;opacity:0;position:relative;pointer-events:none}.image-depth{margin:0 0 35px;border:1px solid var(--rule)}.opening .opening-image.depth-stage{position:absolute;inset:0;animation:none!important;background:none!important;--depth-position:66% center}.song-two .opening .opening-image.depth-stage{--depth-position:65% center}.cinema-image.depth-stage{position:absolute;inset:0;background:none!important;opacity:.8}.scene-panel>.depth-stage{position:absolute;inset:0;z-index:-2}.scene-panel.has-depth:before{background:none!important}.lyric-part>.image-depth img{margin:0;border:0}.lyric-part>.image-depth{width:100%}.hero-scene-controls{display:flex;align-items:center;gap:20px;margin-top:28px;max-width:650px}.hero-thumbnails{display:flex;gap:8px}.hero-thumb{position:relative;width:61px;height:42px;padding:0;background:#101820;border:1px solid #c9a66a44;cursor:pointer}.hero-thumb img{display:block;width:100%;height:100%;object-fit:cover;opacity:.55}.hero-thumb[aria-pressed=true]{border:1px solid #e9c98a;box-shadow:0 0 15px #c9a66a20}.hero-thumb[aria-pressed=true] img{opacity:1}.hero-thumb span{position:absolute;bottom:1px;right:5px;color:#f4dec1;font:9px Arial;text-shadow:0 1px 5px #000}.hero-scene-meta{font-size:8px;letter-spacing:1.5px;color:#ceb37c;max-width:140px;line-height:1.8}.hero-scene-meta strong{display:block;font-family:Georgia,serif;font-size:15px;letter-spacing:0;font-weight:400;color:#cbd0ca}.motion-button{background:#0a121c88;padding:8px 10px;border:1px solid #c9a66a44;color:#d3bb91;font-size:8px;white-space:nowrap}.opening-actions .outline-button{padding:14px 18px}.opening{padding-top:60px;padding-bottom:100px;min-height:max(860px,calc(100svh - 140px))}.portal-back{position:relative;display:flex;align-items:center;padding:9px 5%;min-height:34px;color:#d0b582;background:#0b151c;font:9px Arial;letter-spacing:1.5px;border-bottom:1px solid #c9a66a33;z-index:6}.portal-back:hover{color:#f2d8a5}.portal-footer{font-size:10px;color:#c9ad79;white-space:nowrap}
@keyframes depth-camera{0%{transform:translate(calc(var(--depth-x)*.45),calc(var(--depth-y)*.45)) scale(1.025) rotate(-.13deg)}100%{transform:translate(calc(var(--depth-x)*.45 - .5%),calc(var(--depth-y)*.45 - .3%)) scale(1.075) rotate(.13deg)}}
@keyframes depth-foreground{0%{transform:translate(calc(var(--depth-x)*1.3),calc(var(--depth-y)*1.3)) scale(1.025)}100%{transform:translate(calc(var(--depth-x)*1.3 + .6%),calc(var(--depth-y)*1.3 + .2%)) scale(1.085)}}
@keyframes depth-fog{0%{transform:translate(-3%,2%) scale(1);opacity:.35}100%{transform:translate(4%,-1%) scale(1.08);opacity:.7}}
@keyframes depth-light{0%{transform:translate(-2%,-1%);opacity:.3}100%{transform:translate(2%,2%);opacity:.65}}
@keyframes depth-dust{from{transform:translate(0,0)}to{transform:translate(-70px,-110px)}}
@media(max-width:800px){.hero-scene-controls{gap:12px;flex-wrap:wrap}.hero-thumb{width:51px;height:37px}.hero-scene-meta{font-size:7px;max-width:130px}.hero-scene-meta strong{font-size:13px}.motion-button{font-size:7px}.hero-scene-controls>.motion-button{margin-left:0}.opening-actions{gap:16px}.opening-actions .gold-button,.opening-actions .outline-button{padding:12px 14px;font-size:9px}.opening-actions .text-link{font-size:9px}}
@media(max-width:600px){.opening{min-height:930px;padding-top:310px;padding-bottom:85px}.opening .opening-image.depth-stage{--depth-position:72% top}.opening:after{background:linear-gradient(0deg,#080e13 4%,#080e13e3 32%,#080e1322 80%)}.hero-scene-controls{margin-top:24px}.hero-thumb{width:49px;height:35px}.hero-scene-meta{max-width:110px}.hero-scene-controls>.motion-button{margin-left:0}.portal-back{font-size:8px;min-height:32px;letter-spacing:1px;padding-inline:6%}.image-depth{margin-bottom:30px}.depth-stage .depth-front{opacity:.28}}
@media(prefers-reduced-motion:reduce){.depth-back,.depth-front,.depth-fog,.depth-light,.depth-dust{animation:none!important}.depth-front,.depth-fog,.depth-light,.depth-dust{opacity:0!important}}

/* Always enabled during playback, with a more visible camera and atmosphere. */
.depth-back{animation-duration:22s}.depth-front{animation-duration:19s;opacity:.38}.depth-fog{animation-duration:23s;opacity:.8}.depth-light{animation-duration:19s}.depth-dust{opacity:.3}.hero-scene-controls{gap:18px}.song-three .opening .opening-image.depth-stage{--depth-position:66% center}.song-three .memory .depth-stage{--depth-position:55% center}.song-three .departure .depth-stage{--depth-position:65% center}
@keyframes depth-camera{0%{transform:translate(calc(var(--depth-x)*.7 - .5%),calc(var(--depth-y)*.7 + .2%)) scale(1.025) rotate(-.2deg)}100%{transform:translate(calc(var(--depth-x)*.7 + 1%),calc(var(--depth-y)*.7 - 1%)) scale(1.14) rotate(.2deg)}}
@keyframes depth-foreground{0%{transform:translate(calc(var(--depth-x)*1.7 - .4%),calc(var(--depth-y)*1.7 + .3%)) scale(1.025)}100%{transform:translate(calc(var(--depth-x)*1.7 + 1.6%),calc(var(--depth-y)*1.7 - .5%)) scale(1.16)}}
@keyframes depth-fog{0%{transform:translate(-5%,3%) scale(1);opacity:.4}100%{transform:translate(6%,-2%) scale(1.16);opacity:.85}}
@keyframes depth-light{0%{transform:translate(-4%,-2%);opacity:.4}100%{transform:translate(4%,3%);opacity:.8}}
@media(max-width:600px){.song-three .opening{padding-top:310px}.song-three .opening h1{font-size:clamp(40px,10vw,62px)}}

.song-four .opening .opening-image.depth-stage{--depth-position:67% center}.song-four .memory .depth-stage{--depth-position:60% center}.song-four .opening h1{font-size:clamp(49px,6.1vw,96px)}@media(max-width:600px){.song-four .opening h1{font-size:clamp(38px,10vw,58px)}}