/* Azhelya: fixed camera, rigid character and independent wing animation.
   The original portrait stays visible until the scene is ready. */
.hero-relief { position: absolute; inset: 0; overflow: hidden; isolation: isolate; pointer-events: none; background: #030913; }
.nephilim-card-art > .hero-relief { z-index: 1; opacity: 0; transition: opacity .35s ease; }
.nephilim-card-art > .hero-relief.is-ready { opacity: 1; }
.hero-relief img, .hero-relief canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-relief .relief-character { object-fit: contain; opacity: 0; }
.hero-relief.is-ready .relief-original { visibility: hidden; }
.hero-relief.is-ready .relief-character { opacity: 1; }
.hero-relief canvas { z-index: 2; }
.hero-relief.is-webgl .relief-character, .hero-relief.is-webgl .relief-background { visibility: hidden; }
.hero-relief.is-css .relief-character, .hero-relief.is-css .relief-background { visibility: hidden; }
.hero-relief.is-css .relief-original { visibility: visible; }
.hero-relief.is-css::after { content: ''; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 76% 33%, #ddf7ffcc, #4dc1ff44 15%, transparent 50%); }
.hero-relief.is-css.is-attacking::after { animation: azhelya-flare var(--attack-duration, 1800ms) ease both; }
.unit-sprite > .hero-relief, .card-sprite > .hero-relief { position: relative; width: 100%; height: 100%; border-radius: 10px; }
.unit .unit-sprite:has(.hero-relief) { position: relative; width: 88%; max-width: 110px; align-items: stretch; }
.unit .unit-sprite > .hero-relief { position: absolute; inset: 0; min-height: 0; }
.card-sprite > .hero-relief { aspect-ratio: 1 / 1.15; min-height: 0; }
.unit.dead .hero-relief { opacity: .32; filter: grayscale(1); }
.hero-relief-controls { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 6px; padding: 8px 0 0; }
.hero-relief-controls.hidden { display: none; }
.hero-relief-controls .btn { min-height: 40px; padding: 8px 10px; font-size: 14px; color: #d5efff; border: 1px solid #698aa98a; background: linear-gradient(145deg, #18334b, #091320); }
.hero-relief-controls .btn:first-child { letter-spacing: .035em; }
.hero-relief-controls .btn:hover:not(:disabled) { border-color: #dcbd78; box-shadow: 0 0 16px #75caff25; }
.hero-relief-controls .btn:focus-visible { outline: 2px solid #a1e3ff; outline-offset: 3px; }
.hero-relief-controls .btn:disabled { opacity: .65; cursor: default; }
#hero-relief-status { grid-column: 1 / -1; text-align: center; font-size: 12px; line-height: 1.4; color: #a9bbc9; }
@keyframes azhelya-flare { 0%,100% { opacity: 0; } 35% { opacity: .4; } 55% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .hero-relief *, .hero-relief::after { animation: none !important; transition: none !important; }
}