/* Aspire hero 2.5D depth-parallax background - self-contained, LCP-safe.
   The static .hero-img poster is the LCP and paints immediately (zoomed).
   #hero-parallax mounts the WebGL depth-parallax layer ON TOP of the poster but
   BELOW the .hero::after darkening gradient and the .hero-inner text, then
   crossfades in only after three.js + the depth map have loaded.
   Single image (hero-banner), gentle auto-drift + pointer/tilt parallax, no cycling.
   Reuses the premises displacement-shader technique. Fallback = static zoomed poster. */

/* Zoom the static poster ~20% tighter than a plain cover fit. */
.hero .hero-img{
  transform:scale(1.2);
  transform-origin:50% 42%;
  transition:opacity .9s ease;
  will-change:transform;
}

/* Darkening gradient and text must sit above the parallax canvas. */
.hero::after{z-index:1;}
.hero-inner{z-index:2;}
.hero-facts{z-index:3;}

#hero-parallax{
  position:absolute;
  inset:0;
  z-index:0;            /* same layer as the poster, later in DOM so it paints on top of it */
  overflow:hidden;
  opacity:0;            /* crossfades to 1 once the canvas is ready */
  transition:opacity 1s ease;
  pointer-events:none;  /* never steal clicks from Book Now */
}
#hero-parallax.hp-ready{opacity:1;}
#hero-parallax canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
}
/* Dark veil baked into the parallax layer so the rendered image is dimmed to the
   same ~.5 feel as the poster (opacity:.5 over --ink), keeping white text legible. */
#hero-parallax .hp-veil{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:rgba(15,15,22,.44);
}

/* Once the parallax is live, fade the static poster out so two dimmed layers
   never stack (clean crossfade). */
.hero.hero-parallax-on .hero-img{opacity:0;}

@media (prefers-reduced-motion:reduce){
  #hero-parallax{display:none;}      /* static zoomed poster only, no motion */
  .hero .hero-img{transition:none;}
}