/* cinematic-homepage.css - replaces static hero effects with real-time atmosphere */

.hero-refined{
  --hero-zoom:1;
  --hero-shift:0px;
  --mouse-x:0px;
  --mouse-y:0px;
  isolation:isolate;
}

.hero-refined::before{
  content:"";
  position:absolute;
  inset:-3%;
  z-index:0;
  background-image:url("../images/hero/hero-home.webp");
  background-size:cover;
  background-position:center;
  transform:
    translate3d(var(--mouse-x), calc(var(--hero-shift) + var(--mouse-y)), 0)
    scale(var(--hero-zoom));
  transition:transform .18s ease-out;
  will-change:transform;
}

.hero-refined::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 18% 44%,rgba(63,35,71,.38),transparent 34%),
    linear-gradient(90deg,rgba(8,5,10,.92) 0%,rgba(8,5,10,.76) 38%,rgba(8,5,10,.2) 72%),
    linear-gradient(180deg,rgba(8,5,10,.1),rgba(8,5,10,.88));
  pointer-events:none;
}

.hero-smoke,
.hero-gold-dust,
#embers,
.hero-panel,
.scroll-cue{
  position:relative;
  z-index:3;
}

.hero-smoke,
.hero-gold-dust,
#embers{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.hero-smoke{
  z-index:2;
  background:
    url("../images/overlays/smoke-medium.png"),
    url("../images/overlays/smoke-soft.png");
  background-size:120% auto, cover;
  background-position:50% 65%, center;
  opacity:.42;
  mix-blend-mode:screen;
  animation:smokeDrift 24s ease-in-out infinite alternate;
  will-change:transform,opacity;
}

.hero-gold-dust{
  z-index:2;
  background:
    url("../images/overlays/gold-dust.png"),
    url("../images/overlays/embers-gold.png");
  background-size:cover, cover;
  background-position:center;
  opacity:.2;
  mix-blend-mode:screen;
  animation:dustFloat 18s ease-in-out infinite alternate;
}

.ember-particle{
  position:absolute;
  left:0;
  top:0;
  display:block;
  border-radius:999px;
  background:
    radial-gradient(circle,rgba(255,239,185,1) 0%,rgba(255,179,76,.9) 42%,rgba(255,89,22,.1) 78%,transparent 100%);
  box-shadow:
    0 0 8px rgba(255,181,86,.75),
    0 0 18px rgba(255,109,31,.35);
  will-change:transform,opacity;
}

.hero-panel{
  z-index:4;
  transition:opacity .12s linear;
  will-change:transform,opacity;
}

.scroll-cue{
  z-index:4;
}

@keyframes smokeDrift{
  0%{transform:translate3d(-2%,2%,0) scale(1);opacity:.32}
  50%{opacity:.48}
  100%{transform:translate3d(3%,-2%,0) scale(1.05);opacity:.38}
}

@keyframes dustFloat{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.12}
  100%{transform:translate3d(-2%,-3%,0) scale(1.04);opacity:.24}
}

@media(prefers-reduced-motion:reduce){
  .hero-refined::before,
  .hero-smoke,
  .hero-gold-dust,
  .ember-particle{
    animation:none!important;
    transition:none!important;
  }
}

@media(max-width:900px){
  .hero-refined::after{
    background:
      linear-gradient(rgba(8,5,10,.76),rgba(8,5,10,.9)),
      radial-gradient(circle at center,rgba(63,35,71,.28),transparent 60%);
  }

  .hero-smoke{
    opacity:.28;
  }
}