/*
 FableGlade homepage hero video overlay.
 Existing hero image stays visible until a real MP4 frame is already playing.
 Same smooth fade on desktop and mobile.
*/

.landing-page .hero-video-layer{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}

.landing-page .hero-video-layer.is-ready{
  visibility:visible;
  opacity:1;
  transition:opacity 1.5s cubic-bezier(.22,.61,.36,1);
}

.landing-page .hero-background-video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border:0;
  background:transparent;
}

.landing-page .hero-video-layer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(5,20,35,.86) 0%,
    rgba(5,20,35,.64) 38%,
    rgba(5,20,35,.08) 72%
  );
}

.landing-page .hero.hero-video-active > .ambient-magic{
  opacity:0!important;
  visibility:hidden!important;
}

/* Mobile: shift video crop right so the child remains visible */
@media (max-width:720px){
  .landing-page .hero-background-video{
    object-position:72% center;
  }
}