/* ============================================================
   52-hero-walkthrough.css — animated walkthrough background

   Brandon asked for an animated background showing generic
   walkthroughs of granny flats etc. Implemented as a CSS-only
   ken-burns slideshow: six high-quality architectural photos
   (exterior, interior, kitchen, bedroom, living, garden)
   stacked behind the hero, each fading in for ~5s with a
   subtle pan-and-zoom, then crossfading to the next.

   Why CSS instead of video:
   - No bandwidth hit (videos are 5-15 MB each, photos are 300-700 KB)
   - Reliable autoplay across iOS/Safari (HTML5 video autoplay
     is increasingly restricted)
   - One file, no hosting concerns
   - Reduce-motion compliance is trivial

   To apply: add `.hero-walkthrough` to the hero <section>.
   The existing background-image on the hero becomes the
   reduced-motion fallback (browsers with prefers-reduced-motion
   ignore the slideshow entirely).
   ============================================================ */

.hero-walkthrough {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The slideshow layer sits BEHIND the hero copy + the dark gradient
   overlay. Each slide is positioned absolutely + stacked, sized to
   cover the hero, and z-indexed below content. */
.hero-walkthrough::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Strong dark gradient overlay so the hero copy stays legible
     regardless of which photo is currently visible. */
  background: linear-gradient(135deg, rgba(15, 37, 64, 0.78) 0%, rgba(13, 14, 18, 0.72) 100%);
  pointer-events: none;
}

/* The slideshow container. JS not required — we generate the
   slides via ::before + ::after + the existing parallax wrapper
   gymnastics. Six slides via a single wrapper that animates
   background-image. */
.hero-walkthrough-slides {
  position: absolute;
  inset: 0;
  z-index: -1;       /* sit BEHIND the hero's ::before overlay */
  pointer-events: none;
}

.hero-walkthrough-slides .wt-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  /* Ken-burns: subtle pan + zoom over the visible window */
  animation: wt-pan 30s linear both infinite, wt-fade 30s linear both infinite;
  /* `will-change: opacity, transform` was promoting all six slides
     to permanent GPU compositor layers (~8MB each at 1920×1080 =
     ~50MB held even when offscreen). Modern browsers auto-promote
     during the animation itself, so the manual hint is unnecessary
     and was a real mobile-memory hit. Caught by the production
     code review 2026-05-19. */
}

/* Stagger each slide so they cycle smoothly. Six slides × 5s
   visible time each = 30s loop. Each slide has its OWN delay
   so it appears at the right point in the loop. */
.hero-walkthrough-slides .wt-slide:nth-child(1) { animation-delay:   0s, 0s;       background-image: url("../images/walkthrough/wt-01-exterior.jpg"); }
.hero-walkthrough-slides .wt-slide:nth-child(2) { animation-delay:  -5s, -5s;      background-image: url("../images/walkthrough/wt-02-interior.jpg"); }
.hero-walkthrough-slides .wt-slide:nth-child(3) { animation-delay: -10s, -10s;     background-image: url("../images/walkthrough/wt-03-kitchen.jpg"); }
.hero-walkthrough-slides .wt-slide:nth-child(4) { animation-delay: -15s, -15s;     background-image: url("../images/walkthrough/wt-04-bedroom.jpg"); }
.hero-walkthrough-slides .wt-slide:nth-child(5) { animation-delay: -20s, -20s;     background-image: url("../images/walkthrough/wt-05-livingroom.jpg"); }
.hero-walkthrough-slides .wt-slide:nth-child(6) { animation-delay: -25s, -25s;     background-image: url("../images/walkthrough/wt-06-garden.jpg"); }

/* Fade animation: each slide is visible for ~5s, fades over
   ~0.8s on each end, hidden for the remaining 23.4s while the
   other slides take their turn.
   Timeline (% of 30s = 0.3s per %):
     0%   → 0   (just starting fade-in)
     3%   → 1   (~0.9s in, fully visible)
     17%  → 1   (~5.1s in, still fully visible)
     20%  → 0   (~6.0s in, fully faded)
     100% → 0   (rest of cycle, hidden) */
@keyframes wt-fade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  17%  { opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Ken-burns pan + zoom — dramatic camera-walkthrough motion.
   Each slide starts wide, then dollies in 18% while drifting
   diagonally over the visible window. Reads as a camera moving
   into a space, not just a static photo. */
@keyframes wt-pan {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  20%  { transform: scale(1.18) translate3d(-2.5%, -2%, 0); }
  100% { transform: scale(1.18) translate3d(-2.5%, -2%, 0); }
}
/* Alternate slides drift the OTHER direction so the camera never
   feels like it's always walking the same way. */
.hero-walkthrough-slides .wt-slide:nth-child(even) {
  animation-name: wt-pan-rev, wt-fade;
}
@keyframes wt-pan-rev {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  20%  { transform: scale(1.18) translate3d(2.5%, -2%, 0); }
  100% { transform: scale(1.18) translate3d(2.5%, -2%, 0); }
}
.hero-walkthrough-slides .wt-slide:nth-child(3n) {
  animation-name: wt-pan-up, wt-fade;
}
@keyframes wt-pan-up {
  0%   { transform: scale(1.02) translate3d(0, 1%, 0); }
  20%  { transform: scale(1.20) translate3d(0, -3%, 0); }
  100% { transform: scale(1.20) translate3d(0, -3%, 0); }
}

/* Push hero content + parallax + scroll-hint ABOVE the slideshow layers */
.hero-walkthrough .container,
.hero-walkthrough .hero-copy,
.hero-walkthrough .hero-card,
.hero-walkthrough .hero-scroll-hint {
  position: relative;
  z-index: 2;
}

/* ============================================================
   REDUCED MOTION + LOW-POWER FALLBACK
   - prefers-reduced-motion: drop slideshow, show first slide only
   - prefers-reduced-data (where supported): same
   - mobile (≤720px): show first slide only (mobile data savings)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-walkthrough-slides .wt-slide {
    animation: none;
    opacity: 0;
  }
  .hero-walkthrough-slides .wt-slide:nth-child(1) {
    opacity: 1;
  }
}

/* Mobile: keep the slideshow but slow it down + skip a few slides
   to save data + battery */
@media (max-width: 720px) {
  .hero-walkthrough-slides .wt-slide {
    animation-duration: 40s, 40s;
  }
  /* Hide bedroom + garden on mobile to cut bandwidth */
  .hero-walkthrough-slides .wt-slide:nth-child(4),
  .hero-walkthrough-slides .wt-slide:nth-child(6) {
    display: none;
  }
}