.hero-anvil {
    position: absolute;
    width: min(58vw, 900px);
    aspect-ratio: 16 / 9;
    left: 43%;
    top: 47%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}
.hero-anvil img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero .hero-scene { opacity: .22; }
.anvil-intro { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.anvil-intro[hidden] { display: none; }
.anvil-intro-backdrop { position: absolute; inset: 0; background: #0e1015; }
#anvil-film {
    position: absolute;
    width: min(1120px, 100vw);
    height: auto;
    aspect-ratio: 16 / 9;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    will-change: transform;
}
.anvil-intro-hint {
    position: absolute; bottom: 7vh; left: 0; width: 100%; text-align: center;
    font: 10px var(--mono); letter-spacing: .12em; color: #8b949e;
}
.anvil-in-flight #anvil-hero { visibility: hidden; }
@media (max-width: 850px) {
    .hero-anvil { width: 64vw; left: 36%; top: 68%; }
}
@media (max-width: 560px) {
    .hero-anvil { width: 116%; left: -8%; top: 660px; }
    .hero-main { align-items: flex-start; }
    .hero-aside { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .anvil-intro { display: none !important; }
    .anvil-in-flight #anvil-hero { visibility: visible; }
}