/* ===== READING PROGRESS =====
 * The site already owns every other motion affordance:
 *   - navigation-motion.js toggles the frosted `.site-header.is-scrolled`
 *   - scroll-motion.js owns text/photo/card reveals and parallax
 *   - home.js owns the city-shortcut tilt
 * Adding a second animation or header state on those elements caused
 * double-animated titles and stuck hover states, so this file only adds
 * the one indicator the site does not have.
 */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #873f4a 0%, #ad5660 100%);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 90;
  pointer-events: none;
  transition: transform 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    transition: none;
  }
}

/* The home hero sits above the fold. The shared reveal registers after the
   first paint, so the already-visible title used to flash (and, with an old
   custom animation, briefly blur) before fading in again. Keep the hero copy
   steady; scroll depth still moves it via scroll-motion's translate values. */
body[data-page="home"] .hero-copy .wf-scroll-enter {
  animation: none !important;
}

/* ===== HOME SCROLL POP =====
 * The shared scroll-motion module skips actionable cards (any element that
 * contains a link or button), so the guide cards, stories and service cards
 * never revealed. Give those a small pop as they enter the viewport, and
 * add a touch of scale to the existing text reveal on the homepage only.
 */
@media (prefers-reduced-motion: no-preference) {
  body.home-reveal-armed :is(.home-guide-card, .story, .services-row > article, .home-trust-intro, .feature-image):not(.home-revealed) {
    opacity: 0;
    translate: 0 20px;
    scale: 0.975;
  }

  body.home-reveal-armed :is(.home-guide-card, .story, .services-row > article, .home-trust-intro, .feature-image).home-revealed {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition:
      opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
      translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
      scale 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
      border-color 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.25s ease;
    transition-delay:
      var(--home-reveal-delay, 0ms),
      var(--home-reveal-delay, 0ms),
      var(--home-reveal-delay, 0ms),
      0s, 0s, 0s;
  }
}

/* Text that scroll-motion already reveals gets a slightly springier pop. */
@keyframes wf-home-text-pop {
  0% {
    opacity: 0.1;
    translate: 0 16px;
    scale: 0.985;
  }
  70% {
    opacity: 1;
    translate: 0 -2px;
    scale: 1.002;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

body[data-page="home"] .wf-scroll-enter:not(.wf-scroll-enter-card):not(.wf-scroll-enter-photo) {
  animation-name: wf-home-text-pop;
}

@media (prefers-reduced-motion: reduce) {
  body.home-reveal-armed :is(.home-guide-card, .story, .services-row > article, .home-trust-intro, .feature-image) {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
}

/* Keyboard users must never tab into an invisible card. */
@media (prefers-reduced-motion: no-preference) {
  body.home-reveal-armed :is(.home-guide-card, .story, .services-row > article, .home-trust-intro, .feature-image):not(.home-revealed):focus-within {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
  }
}

@media print {
  body.home-reveal-armed :is(.home-guide-card, .story, .services-row > article, .home-trust-intro, .feature-image) {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
}