.hero-visual { perspective: 950px; }
.hero-depth {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    transform-style: preserve-3d;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.hero-depth .hero-medallion {
    user-select: none;
    filter: drop-shadow(var(--shadow-x, 0px) 38px 45px rgba(0,0,0,.65))
        drop-shadow(0 0 28px rgba(193,139,66,.22));
}
.hero-embers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .hero-depth { transform: none; }
    .hero-embers { display: none; }
}