/* Héros vivant : brouillard, lueur Sang, overlay animé. transform/opacity seulement. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: center; }
.hero-txt { min-width: 0; }
.fog { position: absolute; left: -25%; width: 150%; height: 70%; z-index: 0; pointer-events: none; opacity: .5; will-change: transform;
  background: radial-gradient(ellipse 30% 45% at 20% 50%, rgba(127,167,201,.16), transparent 70%), radial-gradient(ellipse 25% 40% at 65% 40%, rgba(236,232,225,.09), transparent 70%), radial-gradient(ellipse 28% 50% at 90% 60%, rgba(127,167,201,.12), transparent 70%); }
.fog.f1 { top: 0; animation: fogA 38s linear infinite alternate; }
.fog.f2 { bottom: -10%; opacity: .4; animation: fogB 52s linear infinite alternate; }
.fog.f3 { top: 25%; opacity: .25; transform: scaleX(-1); animation: fogC 70s linear infinite alternate; }
.glow { position: absolute; z-index: 1; right: -8%; top: 50%; width: 640px; height: 640px; margin-top: -320px; pointer-events: none; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(200,16,46,.42), rgba(200,16,46,.12) 45%, transparent 70%); opacity: .75; animation: pulse 4.5s ease-in-out infinite; }
@keyframes fogA { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes fogB { from { transform: translateX(7%); } to { transform: translateX(-9%); } }
@keyframes fogC { from { transform: scaleX(-1) translateX(-6%); } to { transform: scaleX(-1) translateX(10%); } }
@keyframes pulse { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.05); } }

.hero-live { position: relative; width: min(340px, 100%); justify-self: end; }
.ov { background: rgba(14,15,18,.88); border: 1px solid var(--border); border-left: 3px solid var(--killer); border-radius: var(--radius); padding: 10px 12px; box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 36px rgba(200,16,46,.18); }
.ov-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font: 700 14px/1 var(--font-title); letter-spacing: .12em; text-transform: uppercase; color: var(--killer-hover); }
.ov-h i { font: 400 11px/1 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--text-2); font-style: normal; }
.ov-l { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid rgba(46,50,59,.6); transition: opacity .5s ease, transform .5s ease; }
.ov-l:last-child { border-bottom: 0; padding-bottom: 2px; }
.ov-l b { font: 700 18px/1.15 var(--font-title); letter-spacing: .03em; }
.ov-l span { color: var(--text-2); font-size: 13px; }
.ov-p b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--survivor); vertical-align: 1px; }
.ov-c { flex-direction: row; justify-content: space-between; align-items: center; }
.ov-c strong { font: 700 28px/1 var(--font-title); color: var(--text); display: inline-block; min-width: 1.2em; text-align: right; }
.ov-c strong.tick { animation: tick .45s ease; }
@keyframes tick { 0% { transform: scale(1.5); color: var(--killer-hover); } 100% { transform: scale(1); } }
/* JS actif : lignes estompées puis allumées une à une (sans JS : état final) */
.hero-live.run .ov-l { opacity: .18; transform: translateX(10px); }
.hero-live.run .ov-l.on { opacity: 1; transform: none; }
.hero-live.run.out .ov { opacity: 0; transition: opacity .6s ease; }

@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .hero-live { justify-self: start; } .glow { width: 420px; height: 420px; margin-top: -210px; right: -30%; } }
@media (prefers-reduced-motion: reduce) { .fog, .fog.f1, .fog.f2, .fog.f3, .glow, .ov-c strong.tick { animation: none !important; } .glow { opacity: .6; } .ov-l { transition: none; } }