/* Immersive landscape: no blur, sharp artwork with a bounded 2.5D camera. */
.hero{height:clamp(510px,34vw,850px);min-height:0}
.hero .hero-content{padding-top:clamp(48px,4vw,110px)}
.hero-scenes{transform:none;transition:none;background:#264b65}
.scene-layer,.dark .scene-layer{transform:none!important;filter:none!important;will-change:opacity;transition:opacity 2.6s ease-in-out;background-position:65% top}
.scene-day,body.dark .scene-day{background-image:url('assets/odelia-day-v2.webp');opacity:1}
.scene-night{background-image:url('assets/odelia-night-relit.webp');opacity:0}
body.dark .scene-night{opacity:1}
/* One opaque base prevents a dark dip; JS shares the exact mix with the WebGL pass. */
.hero.scene-theme-managed .scene-night{opacity:var(--scene-night);transition:none}
.scene-depth-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;pointer-events:none;transition:opacity .45s ease}
.scene-rendered .scene-depth-canvas{opacity:1}
/* The render includes its own depth-aware particles. Avoid duplicate screen-space glitter. */
.scene-motes{display:none!important}
.hero .hero-shade{background:linear-gradient(90deg,#0b243b58 0%,#14273a25 40%,transparent 68%),linear-gradient(0deg,#0c2038c4,transparent 42%)}
.dark .hero .hero-shade{background:linear-gradient(90deg,#0b102b5c 0%,#10162b1f 40%,transparent 68%),linear-gradient(0deg,#0b1026c9,transparent 46%)}
.hero-topline{gap:20px}.hero-topline>span:nth-child(2){margin-left:auto}
.scene-motion-toggle{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;margin:0;padding:7px 10px;background:#142a3c30;border:1px solid #ffffff35;border-radius:30px;color:#f4f4ff;font:9px var(--sans);letter-spacing:.2px;backdrop-filter:blur(8px);min-height:30px}
.scene-motion-toggle:hover{background:#1a304a65;border-color:#ffffff75}
.scene-motion-toggle b{font:7px var(--sans);letter-spacing:.8px;padding-left:5px;border-left:1px solid #ffffff45;color:#d5e6c7}
.scene-motion-toggle[aria-pressed=false] b{color:#e3e4ebaa}
.motion-symbol{font-size:12px;line-height:1;color:#f0e6ff}
@media(max-width:760px){
 .hero{height:650px}
 .hero .hero-content{padding-top:235px}
 .scene-layer,.dark .scene-layer{background-position:90% top}
 .hero-topline{gap:10px;align-items:center}
 .hero-topline>span:nth-child(2){display:none}
 .scene-motion-toggle{margin-left:auto;font-size:8px;gap:5px;padding:6px 8px;min-height:29px}
 .hero .hero-shade{background:linear-gradient(0deg,#11283fee 0%,#11283fa0 33%,#11283f18 68%,transparent 85%)}
 .dark .hero .hero-shade{background:linear-gradient(0deg,#10152bee 0%,#10152ba0 33%,#10152b18 68%,transparent 85%)}
}
@media(prefers-reduced-motion:reduce){
 .scene-depth-canvas,.scene-layer{transition:none!important}
}