/* ===== HERO FALLBACK (temporary) =====
   Lives only inside #hero-stage. Replace this file with the Opus hero/hero.css
   when the animation arrives. See HERO-SWAP.md. */
#hero-stage{position:absolute;inset:0;overflow:hidden;background:#0b0806}
#hero-stage .hf-photo{position:absolute;inset:-4%;}
#hero-stage .hf-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;
  animation:hf-burns 26s ease-in-out infinite alternate;transform-origin:55% 40%;will-change:transform;
  filter:saturate(1.08) contrast(1.05)}
@keyframes hf-burns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-2%,-2.5%,0)}}
/* warm stage-light sweep */
#hero-stage .hf-sweep{position:absolute;inset:-20% -60%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(255,196,110,.0) 42%,rgba(255,196,110,.28) 50%,rgba(255,220,160,.0) 58%,transparent 62%);
  animation:hf-sweep 9s cubic-bezier(.45,.05,.35,1) infinite;will-change:transform}
@keyframes hf-sweep{0%{transform:translate3d(-45%,0,0)}55%,100%{transform:translate3d(45%,0,0)}}
#hero-stage .hf-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 30%,rgba(255,170,70,.18),transparent 70%)}
#hero-stage .hf-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,4,.55) 0%,rgba(8,6,4,.15) 35%,rgba(8,6,4,.55) 70%,#0a0806 100%)}
/* Desktop/landscape: photo sits on the right, text block on the left, so Louis's face stays clear */
@media (min-aspect-ratio:4/5){
  #hero-stage .hf-photo{inset:-3% -3% -3% 34%}
  #hero-stage .hf-photo img{object-position:50% 30%}
  #hero-stage .hf-shade{background:linear-gradient(90deg,#0a0806 0%,#0a0806 34%,rgba(10,8,6,.55) 46%,rgba(10,8,6,0) 62%),linear-gradient(180deg,rgba(8,6,4,.45) 0%,rgba(8,6,4,0) 30%,rgba(8,6,4,.25) 75%,#0a0806 100%)}
  #hero-stage .hf-glow{background:radial-gradient(45% 55% at 68% 30%,rgba(255,170,70,.16),transparent 70%)}
}
/* Portrait/phone: lift the photo so his face sits in the top third, above the text */
@media (max-aspect-ratio:4/5){
  #hero-stage .hf-photo{inset:-9% -4% 22% -4%}
  #hero-stage .hf-photo img{object-position:50% 18%}
  #hero-stage .hf-shade{background:linear-gradient(180deg,rgba(8,6,4,.5) 0%,rgba(8,6,4,0) 18%,rgba(8,6,4,0) 40%,rgba(10,8,6,.85) 58%,#0a0806 72%)}
}
@media (prefers-reduced-motion:reduce){#hero-stage .hf-photo img,#hero-stage .hf-sweep{animation:none}#hero-stage .hf-sweep{display:none}}