/* ==========================================================================
   GR Auto Center Inc — v3 delta stylesheet
   Loaded ONLY on the v3 build, after styles.css and styles-v2.css. v3 is v2
   in every respect except the hero: instead of one static photo, three to
   five photos crossfade on a 6-seconds-per-slide clock. Pure CSS — no
   JavaScript, so the rotation (and the reduced-motion fallback) works with
   JS disabled. Do not duplicate rules that already live in styles.css or
   styles-v2.css.

   Nothing in this file is bound to a slide's position except the things that
   genuinely are positional — which slide paints first, and which dot is
   which. Framing and the clock both come from the markup that src/photos.py
   generates:

     .hero__slides.hs-N   how many slides there are  ->  --n
     .hero__slide         style="--i:K"              ->  its turn in the cycle
                          plus --focus / --focus-sm / --focus-lg

   That is the whole point of the file: reordering the photographs in
   src/photos.json used to hand slide 2's crop to whatever photo moved into
   second place. Now the crop travels with the photograph.
   ========================================================================== */

/* --- Slide stack: fills .hero__media exactly (absolute, inset:0), so the
   slideshow never changes the hero's height — .hero__media already governs
   that, on both the desktop absolute-fill layout and v2's mobile
   aspect-ratio:4/3 box. --- */
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0}
.hero__slide img{width:100%;height:100%;object-fit:cover}

/* Slide 1 must be visible at first paint — before the animation's own 0%
   keyframe (opacity:0) has had a chance to apply — so there's never a blank
   hero flash. The animation (below) takes over this value once it runs.
   This one is legitimately positional: "first" is a paint order, not a
   property of any particular photograph. */
.hero__slide:nth-child(1){opacity:1}

/* The base kenburns animation targets ".hero__media img" — every slide's
   <img> matches that selector too, so it has to be switched off here or the
   photo underneath the crossfade/zoom would double-animate. */
.hero__slides img{animation:none}

/* --- Framing, per photograph, never per position. The fallbacks restate the
   values the photo would otherwise inherit: styles.css:291-292 (center 30%,
   center 40% from 900px) and styles.v2.css:16 (center 55% under 720px), so a
   slide with no framing set renders exactly as it did before this file
   existed. --- */
.hero__slide img{object-position:var(--focus,center 30%)}
@media (max-width:719px){
  .hero__slide img{object-position:var(--focus-sm,var(--focus,center 55%))}
}
@media (min-width:900px){
  .hero__slide img{object-position:var(--focus-lg,var(--focus,center 40%))}
}

/* --- Crossfade + slow zoom, on a clock that follows the folder. Every slide
   holds for 6s, so N slides make an N x 6s cycle and slide K starts at K x 6s.
   Opacity and scale live in the same keyframes so the zoom reads as a slow
   pan across each slide's visible window, not a hard cut. Scale animates on
   the <picture class="hero__slide"> box itself (not the <img>) — cheap, and
   it avoids fighting the disabled kenburns rule on the <img>.

   Three keyframe sets rather than one, because a keyframe percentage cannot
   be computed from a custom property. Each holds its slide for one Nth of
   the cycle: N=3 -> 33.333%, N=4 -> 25%, N=5 -> 20%. --- */
.hs-3{--n:3}
.hs-4{--n:4}
.hs-5{--n:5}

@keyframes heroFade3{
  0%{opacity:0;transform:scale(1.03)}
  2%{opacity:1;transform:scale(1.03)}
  31%{opacity:1;transform:scale(1.09)}
  33.333%{opacity:0;transform:scale(1.09)}
  100%{opacity:0;transform:scale(1.09)}
}
@keyframes heroFade4{
  0%{opacity:0;transform:scale(1.03)}
  1.5%{opacity:1;transform:scale(1.03)}
  23%{opacity:1;transform:scale(1.09)}
  25%{opacity:0;transform:scale(1.09)}
  100%{opacity:0;transform:scale(1.09)}
}
@keyframes heroFade5{
  0%{opacity:0;transform:scale(1.03)}
  1.5%{opacity:1;transform:scale(1.03)}
  18%{opacity:1;transform:scale(1.09)}
  20%{opacity:0;transform:scale(1.09)}
  100%{opacity:0;transform:scale(1.09)}
}
@keyframes heroDot3{
  0%{background:rgba(244,239,227,.3)}
  2%{background:#E9C44A}
  31%{background:#E9C44A}
  33.333%{background:rgba(244,239,227,.3)}
  100%{background:rgba(244,239,227,.3)}
}
@keyframes heroDot4{
  0%{background:rgba(244,239,227,.3)}
  1.5%{background:#E9C44A}
  23%{background:#E9C44A}
  25%{background:rgba(244,239,227,.3)}
  100%{background:rgba(244,239,227,.3)}
}
@keyframes heroDot5{
  0%{background:rgba(244,239,227,.3)}
  1.5%{background:#E9C44A}
  18%{background:#E9C44A}
  20%{background:rgba(244,239,227,.3)}
  100%{background:rgba(244,239,227,.3)}
}

@media (prefers-reduced-motion:no-preference){
  .hero__slide{
    animation-duration:calc(var(--n,4) * 6s);
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-delay:calc(var(--i,0) * 6s);
    will-change:opacity,transform;
  }
  .hs-3 .hero__slide{animation-name:heroFade3}
  .hs-4 .hero__slide{animation-name:heroFade4}
  .hs-5 .hero__slide{animation-name:heroFade5}

  .hero__dots i{
    animation-duration:calc(var(--n,4) * 6s);
    animation-timing-function:linear;
    animation-iteration-count:infinite;
  }
  .hero__dots.hs-3 i{animation-name:heroDot3}
  .hero__dots.hs-4 i{animation-name:heroDot4}
  .hero__dots.hs-5 i{animation-name:heroDot5}

  /* A dot's position IS its identity — there is nothing else to key on. */
  .hero__dots i:nth-child(1){animation-delay:0s}
  .hero__dots i:nth-child(2){animation-delay:6s}
  .hero__dots i:nth-child(3){animation-delay:12s}
  .hero__dots i:nth-child(4){animation-delay:18s}
  .hero__dots i:nth-child(5){animation-delay:24s}
}

/* --- Dots: bottom-right of the hero, on the same clock as the slides. One
   <i> per slide, emitted by {{#each hero_slides}}, so a fifth photograph can
   no longer end up with no dot. --- */
.hero__dots{
  position:absolute;z-index:2;pointer-events:none;
  right:clamp(14px,4vw,44px);bottom:clamp(14px,4vw,28px);
  display:flex;gap:8px;
}
.hero__dots i{
  display:block;width:6px;height:6px;border-radius:50%;
  background:rgba(244,239,227,.3);
}
.hero__dots i:nth-child(1){background:#E9C44A}
@media (max-width:479px){
  .hero__dots{display:none}
}

/* --- Reduced motion: no animation at all. Slide 1 stays put, the rest stay
   hidden, the first dot stays gold. --- */
@media (prefers-reduced-motion:reduce){
  .hero__slide{animation:none;opacity:0;transform:none}
  .hero__slide:nth-child(1){opacity:1}
  .hero__dots i{animation:none}
}