/* ==========================================================================
   HOMEPAGE HERO — cinematic image rotation
   --------------------------------------------------------------------------
   Scoped EXCLUSIVELY to the homepage hero (class .hero-cinema, added only
   on index.html). Built on the existing Greenlink hero rules in site.css:
   - keeps the existing dark gradient overlay (.hero-media:after)
   - keeps the existing cinematic saturate/contrast treatment
   - keeps the existing text reveal animations and parallax
   Only the background image treatment changes: 3 images, slow crossfades.
   ========================================================================== */

/* Stacked slides */
.hero-cinema .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:heroCinema 21s var(--ease) infinite;will-change:opacity,transform}

/* First slide visible by default (also the reduced-motion / pre-animation state) */
.hero-cinema .hero-media img:first-child{opacity:1}

/* Per-slide timing — each visible ~7s, ~1.8s crossfade, 21s cycle.
   Negative delays start the cycle already in motion so slide 1 shows on load
   with no blank frame. */
.hero-cinema .hero-media img:nth-child(1){animation-delay:-1.5s}
.hero-cinema .hero-media img:nth-child(2){animation-delay:-8.5s}
.hero-cinema .hero-media img:nth-child(3){animation-delay:-15.5s}

/* Per-slide intelligent composition — desktop
   Slide 1: floor repair — worker(s) centre-lower → bias slightly low
   Slide 2: water tanks — tank line upper-centre → keep tank band prominent
   Slide 3: dark industrial — subject centre-lower → bias slightly low      */
.hero-cinema .hero-media img:nth-child(1){object-position:center 55%}
.hero-cinema .hero-media img:nth-child(2){object-position:center 42%}
.hero-cinema .hero-media img:nth-child(3){object-position:center 58%}

/* Slow cinematic crossfade + very subtle zoom (Ken Burns) */
@keyframes heroCinema{
  0%    {opacity:0; transform:scale(1.045)}
  8.5%  {opacity:1; transform:scale(1.05)}
  24.8% {opacity:1; transform:scale(1.095)}
  33.33%{opacity:0; transform:scale(1.095)}
  100%  {opacity:0; transform:scale(1.095)}
}

/* Mobile — each image individually composed for portrait screens.
   On phones the hero box is much taller than wide, so the crop behaves
   differently per image and each slide gets its own position. */
@media(max-width:700px){
  .hero-cinema .hero-media img:nth-child(1){object-position:55% 50%}
  .hero-cinema .hero-media img:nth-child(2){object-position:50% 50%}
  .hero-cinema .hero-media img:nth-child(3){object-position:50% 50%}
}

/* Reduced motion — static first slide, no rotation */
@media(prefers-reduced-motion:reduce){
  .hero-cinema .hero-media img{animation:none;opacity:0}
  .hero-cinema .hero-media img:first-child{opacity:1}
}