/* Visual / motion extras (design-ratio-review “Suggested additions”).
 * Base layout/tokens stay in styles.css. Respect prefers-reduced-motion. */

/* Native scrollbar only — live WP/Impreza does not restyle the thumb. */

/* No soft page enter/leave — fading body opacity flashes navy html/body between Home ↔ About. */

/* ——— Scroll progress (Home) ——— */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 3px;
  pointer-events: none;
  background: transparent;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--navy), var(--cyan));
  transform-origin: left center;
  will-change: width;
}

/* Sticky header: live Impreza sticky_auto_hide=false — bar persists; no hide-on-scroll. */

/* ——— Ken Burns on hero / projects band ———
 * Rest framing matches WP .l-section-img: background-size cover + 50% 50%.
 * Zoom runs on ::after via transform:scale so keyframe 0% stays cover (no 108% over-crop). */
.hero-home,
.band-projects {
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
}

.hero::before {
  z-index: 1;
}

.hero-home.is-kenburns,
.band-projects.is-kenburns {
  background-image: none;
}

.hero-home.is-kenburns::after,
.band-projects.is-kenburns::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--kenburns-image);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: center center;
  animation: kenburns-zoom 32s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}

@keyframes kenburns-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

/* ——— Hero overlays ———
 * Home: flat --hero-overlay (Impreza content overlay).
 * About: keep WP l-section-overlay gradient from about.css —
 *   linear-gradient(325deg, rgba(0,0,0,0.34), #032161) → navy-weighted left,
 *   clearer photo on the right. Do NOT replace with flat --hero-overlay
 *   (that made pages.dev look evenly blue / vignetted).
 * No heavy LCP veil: a 0.9 navy flash on About→Home felt like the bad
 * cross-page void. Final overlays paint from first frame. */

/* ——— Metric icons: staggered enter + hover lift ——— */
.metric {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.metric.is-in {
  opacity: 1;
  transform: none;
}

.metrics .metric:nth-child(1).is-in {
  transition-delay: 0ms;
}

.metrics .metric:nth-child(2).is-in {
  transition-delay: 110ms;
}

.metrics .metric:nth-child(3).is-in {
  transition-delay: 220ms;
}

.metric img {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}

.metric:hover img {
  transform: translateY(-8px);
  opacity: 0.88;
}

/* ——— Extra hovers (logo, footer, band) ——— */
.site-header .logo,
.site-footer .logo {
  transition: opacity 0.3s ease;
}

.site-header .logo:hover,
.site-footer .logo:hover {
  opacity: 0.82;
}

.footer-nav a {
  transition: color 0.3s ease, opacity 0.3s ease;
}

.band-inner {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.band:hover .band-inner {
  opacity: 0.94;
  transform: translateY(-2px);
}

.scroll-cue {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.scroll-cue:hover {
  opacity: 0.85;
  transform: translateX(-50%) translateY(3px);
}

/* ——— Back to top (live Impreza .w-toplink) ——— */
.back-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 99;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.back-to-top:hover {
  background: rgba(4, 144, 221, 0.85);
  color: var(--white);
  transform: translateY(-2px);
}

.back-to-top span {
  display: block;
  width: 12px;
  height: 12px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) translateY(3px);
}

/* ——— Reduced motion: kill extras, keep layout ——— */
@media (prefers-reduced-motion: reduce) {
  .hero-home.is-kenburns,
  .band-projects.is-kenburns {
    background-image: var(--kenburns-image);
  }

  .hero-home.is-kenburns::after,
  .band-projects.is-kenburns::after {
    content: none;
    animation: none;
  }

  .hero-home,
  .band-projects {
    background-size: cover;
    background-position: 50% 50%;
  }

  .metric,
  .metric.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .metric img,
  .metric:hover img {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .band:hover .band-inner {
    opacity: 1;
    transform: none;
  }

  .scroll-progress-bar {
    transition: none;
  }

  .back-to-top,
  .back-to-top.is-visible {
    transition: none;
  }
}