/* hero3d: live three.js heroes (js/hero3d.js). The box reserves its aspect-ratio up front (no layout shift);
   the CSS emblem/globe inside stays visible until the first WebGL frame exists, then fades out. */
.hero-art[data-hero] { position: relative; width: 100%; max-width: var(--h3-w, 560px); margin-inline: auto; aspect-ratio: var(--h3-ar, 1.5); }
.hero-art[data-hero="lock-open"] { --h3-ar: 1.55; --h3-w: 600px; }
.hero-art[data-hero="globe"] { --h3-ar: 1; --h3-w: 480px; }
.hero-art[data-hero] > .emblem, .hero-art[data-hero] > .globe { --s: min(100%, 440px); transition: opacity .6s var(--ease, ease); }
.hero-art[data-hero="globe"] > .globe { --s: min(100%, 420px); }
.hero-art[data-hero].is-3d > .emblem, .hero-art[data-hero].is-3d > .globe { opacity: 0; pointer-events: none; }
.hero3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s var(--ease, ease); touch-action: pan-y; }
.hero-art.is-3d > .hero3d-canvas { opacity: 1; }
@media (max-width: 1100px) { .hero-art[data-hero] { margin-inline: 0; } }
@media (max-width: 560px) { .hero-art[data-hero] { --h3-ar: 1.35; } .hero-art[data-hero="lock-open"] { --h3-ar: 1.4; } .hero-art[data-hero="globe"] { --h3-ar: 1; --h3-w: 340px; } }
@media (prefers-reduced-motion: reduce) { .hero3d-canvas, .hero-art[data-hero] > .emblem, .hero-art[data-hero] > .globe { transition: none; } }
@media (min-width: 2200px) { .hero-art[data-hero] { --h3-w: 860px; } .hero-art[data-hero="lock-open"] { --h3-w: 920px; } .hero-art[data-hero="globe"] { --h3-w: 760px; } }