/* Continuous descent: surface → caldera walls → molten depths. */
.volcano-depth{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;contain:strict}
.volcano-interior,.volcano-near-wall{position:absolute;inset:-15%;background:#090605 url('environment/volcano-interior.png') center 64%/cover no-repeat;transform-origin:50% 68%;will-change:transform}
.volcano-near-wall{mask-image:linear-gradient(90deg,#000,transparent 28%,transparent 74%,#000);-webkit-mask-image:linear-gradient(90deg,#000,transparent 28%,transparent 74%,#000);opacity:.22;mix-blend-mode:screen}
.volcano-depth:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#08060644,transparent 75%),linear-gradient(180deg,#07050544,transparent 30%,#07050540);pointer-events:none}
.magma-radiance{position:absolute;left:-15%;right:-15%;bottom:-45%;height:100%;background:radial-gradient(ellipse at 52% 70%,#ff6a102e,#f82c0b0f 32%,transparent 65%);mix-blend-mode:screen;transform-origin:50% 80%;will-change:opacity,transform}
.volcanic-particles{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.world-scene .volcano-backdrop{will-change:transform,opacity}
/* Interaction uses individual transforms, preserving scroll choreography. */
button,.portfolio-link,.service-project-link,.cta,.topnav a{touch-action:manipulation}
.interaction-surface{position:relative;isolation:isolate;translate:var(--button-x,0px) var(--button-y,0px);scale:var(--button-scale,1);transition:translate .35s cubic-bezier(.2,.75,.2,1),scale .25s cubic-bezier(.2,.75,.2,1),border-color .3s,color .3s,box-shadow .3s;}
.interaction-surface.is-pressed{--button-scale:.96}
.cta,.navcontact,.hero-hint,.inline-actions button,.hero-projects,.close{overflow:hidden}
.cta,.navcontact,.hero-hint{box-shadow:0 0 0 0 #ff362000}
.cta:before,.navcontact:before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),#fff3,transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none}
.interaction-ripple{position:absolute;left:var(--ripple-x);top:var(--ripple-y);width:12px;height:12px;margin:-6px;border-radius:50%;pointer-events:none;background:#fff8;mix-blend-mode:screen;animation:button-ripple .65s cubic-bezier(.15,.7,.25,1) forwards;z-index:3}
@keyframes button-ripple{from{transform:scale(.2);opacity:.5}to{transform:scale(var(--ripple-size,24));opacity:0}}
.topnav button,.topnav a{position:relative;min-height:28px}
.topnav button:after,.topnav a:after{content:'';height:1px;position:absolute;left:0;right:0;bottom:0;background:#ff4a38;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.topnav .active:after{transform:scaleX(1);transform-origin:left}
.portfolio-link,.service-project-link{transition:translate .35s,color .3s,border-color .3s;}
.language-switch button{transition:color .25s,scale .25s,background .25s;border-radius:20px}
.language-switch button[aria-pressed=true]{color:#fff}
.rail button{transition:scale .25s,box-shadow .3s,background .3s}
.rail button.active{scale:1.4}
button:focus-visible,.interaction-surface:focus-visible{outline:2px solid #ff7262;outline-offset:5px}
@media(hover:hover) and (pointer:fine){
 .cta:hover{box-shadow:0 8px 34px #ff301c38}
 .cta:hover:before,.navcontact:hover:before{opacity:1}
 .navcontact:hover,.hero-hint:hover,.inline-actions button:hover{border-color:#ff6650;box-shadow:0 0 24px #ff301c20;color:#fff}
 .topnav button:hover:after,.topnav a:hover:after{transform:scaleX(1);transform-origin:left}
 .portfolio-link:hover,.service-project-link:hover{color:#ff9b86;border-color:#ff9b86}
 .language-switch button:hover{background:#ffffff0d;scale:1.08}
 .rail button:hover{scale:2;background:#ff7460}
 .music-cover:hover .mv-play{transform:scale(1.1);box-shadow:0 0 28px #ff48243d}
 .close:hover{background:#ff3024;color:#fff;rotate:90deg}
}
.close{transition:rotate .3s,background .25s,scale .25s}
.mv-play{transition:background .3s,transform .4s,box-shadow .4s}
@media(max-width:700px){.volcano-interior,.volcano-near-wall{inset:-12%;background-position:53% 67%}.volcano-near-wall{display:none}.interaction-surface{translate:none}.world-scene .volcano-backdrop{will-change:transform,opacity}}
@media(prefers-reduced-motion:reduce){
 .volcano-interior,.volcano-near-wall,.magma-radiance{will-change:auto;transform:none!important}
 .volcanic-particles{display:none}.volcano-near-wall{display:none}
 .interaction-surface,.rail button,.mv-play,.close,.language-switch button{transition:none;translate:none!important;scale:1!important;rotate:none!important}
 .interaction-ripple{display:none}.topnav button:after,.topnav a:after{transition:none}
}
/* Preserve the authored position of controls that float over the scene. */
.hero-hint.interaction-surface,.inline-play-fallback.interaction-surface{position:absolute}
.cta.interaction-surface,#contact .cta.interaction-surface{transition:translate .35s cubic-bezier(.2,.75,.2,1),scale .25s cubic-bezier(.2,.75,.2,1),background .2s,transform .3s,border-color .3s,color .3s,box-shadow .3s}
@media(prefers-reduced-motion:reduce){.cta.interaction-surface,#contact .cta.interaction-surface{transition:none}}

/* Visible live fire, flowing light and ascending embers, even while the page is idle. */
.world-scene .embers{display:block;opacity:.85;z-index:3}
.world-scene .embers i{animation:ember-rise-live var(--d) var(--delay) linear infinite;animation-play-state:running;width:3px;height:5px;background:#ffbc69;box-shadow:0 0 9px #ff4817;will-change:transform,opacity}
@keyframes ember-rise-live{0%{transform:translate3d(0,35vh,0) scale(.4);opacity:0}18%{opacity:.85}75%{opacity:.65}100%{transform:translate3d(65px,-80vh,0) scale(.2);opacity:0}}
.lava-flow{position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse at 18% 95%,#ff48173d,transparent 45%),radial-gradient(ellipse at 85% 100%,#ff861c44,transparent 40%);animation:lava-breathe 5s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes lava-breathe{from{opacity:.35;transform:scale(1) translateY(1%)}to{opacity:.95;transform:scale(1.09) translateY(-2%)}}
.flame-bed{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;opacity:.65}
.flame-bed i{position:absolute;bottom:-17vh;left:-5%;width:24vw;height:45vh;border-radius:55% 45% 20% 20%;background:radial-gradient(ellipse at 50% 95%,#ffd18a80,#ff5c1a55 25%,#df230b1a 52%,transparent 70%);filter:blur(12px);transform-origin:50% 100%;animation:flame-lift 3.4s ease-in-out infinite alternate}
.flame-bed i:nth-child(2){left:12%;height:35vh;animation-delay:-1.2s;animation-duration:2.8s}.flame-bed i:nth-child(3){left:64%;height:39vh;animation-delay:-2s}.flame-bed i:nth-child(4){left:84%;height:52vh;animation-delay:-.7s;animation-duration:4.1s}.flame-bed i:nth-child(5){left:-12%;bottom:18vh;width:13vw;height:31vh;animation-delay:-2.8s}.flame-bed i:nth-child(6){left:93%;bottom:20vh;width:14vw;height:35vh;animation-delay:-1.7s}
@keyframes flame-lift{0%{transform:translate3d(-2%,7%,0) scale(.8,.8) skewX(-7deg);opacity:.35}45%{opacity:.85}100%{transform:translate3d(6%,-12%,0) scale(1.1,1.18) skewX(8deg);opacity:.65}}
@media(max-width:700px){.world-scene .embers{display:block}.world-scene .embers i:nth-child(2n){display:none}.flame-bed{opacity:.5}.flame-bed i{width:38vw;filter:blur(8px)}.flame-bed i:nth-child(2),.flame-bed i:nth-child(3){display:none}}
@media(prefers-reduced-motion:reduce){.world-scene .embers,.flame-bed{display:none}.lava-flow{animation:none;opacity:.4}}