/* Motion & micro-interactions — transform/opacity only; progressive (html.js) */

/* Smooth in-page anchors already set on html; honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* —— Hover / focus polish (buttons, cards, tiles, nav, links) —— */
.btn {
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 10px 26px rgba(200, 16, 46, .35);
}

.service-tile,
.card,
.trust-card,
.ba-pair,
.gallery-item,
.faq-item,
.process-step,
.why-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-tile:hover,
.service-tile:focus-visible,
.card:hover,
.trust-card:hover,
.ba-pair:hover,
.gallery-item:hover,
.process-step:hover,
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .1);
}

.site-nav a,
.nav-submenu-toggle,
.header-phone,
.logo-link,
.town-list a,
.site-footer a,
.text-link {
  transition: color .18s ease, background-color .18s ease, transform .18s ease, opacity .18s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.nav-submenu-toggle:hover,
.nav-submenu-toggle:focus-visible {
  transform: translateY(-1px);
}
.header-phone:hover,
.header-phone:focus-visible {
  transform: translateY(-1px);
}
.town-list a:hover,
.town-list a:focus-visible {
  transform: translateY(-1px);
}

/* —— Scroll reveal: hidden only when JS marked <html class="js"> —— */
html.js .reveal {
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0);
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
html.js .reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
/* Stagger children inside a revealed group (cards/tiles) */
html.js .reveal-stagger > .reveal {
  transition-delay: calc(var(--reveal-i, 0) * 55ms);
}

/* —— Gentle hero entrance —— */
html.js .hero-bleed .hero-kicker,
html.js .hero-bleed h1,
html.js .hero-bleed .hero-actions {
  opacity: 0;
  transform: translate3d(0, .85rem, 0);
  animation: hero-enter .7s cubic-bezier(.22, 1, .36, 1) forwards;
}
html.js .hero-bleed .hero-kicker { animation-delay: .08s; }
html.js .hero-bleed h1 { animation-delay: .18s; }
html.js .hero-bleed .hero-actions { animation-delay: .3s; }

html.js .page-hero .container > * {
  opacity: 0;
  transform: translate3d(0, .7rem, 0);
  animation: hero-enter .6s cubic-bezier(.22, 1, .36, 1) forwards;
}
html.js .page-hero .container > *:nth-child(1) { animation-delay: .06s; }
html.js .page-hero .container > *:nth-child(2) { animation-delay: .16s; }
html.js .page-hero .container > *:nth-child(3) { animation-delay: .26s; }

@keyframes hero-enter {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* —— Reduced motion: no animation, content fully visible —— */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .service-tile,
  .card,
  .trust-card,
  .ba-pair,
  .gallery-item,
  .faq-item,
  .process-step,
  .why-card,
  .site-nav a,
  .nav-submenu-toggle,
  .header-phone,
  .logo-link,
  .town-list a,
  .site-footer a,
  .text-link {
    transition: none !important;
  }
  .btn:hover,
  .btn:focus-visible,
  .btn:active,
  .service-tile:hover,
  .service-tile:focus-visible,
  .card:hover,
  .trust-card:hover,
  .ba-pair:hover,
  .gallery-item:hover,
  .process-step:hover,
  .why-card:hover,
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .nav-submenu-toggle:hover,
  .nav-submenu-toggle:focus-visible,
  .header-phone:hover,
  .header-phone:focus-visible,
  .town-list a:hover,
  .town-list a:focus-visible {
    transform: none !important;
  }
  html.js .reveal,
  html.js .reveal.is-in,
  html.js .reveal-stagger > .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js .hero-bleed .hero-kicker,
  html.js .hero-bleed h1,
    html.js .hero-bleed .hero-actions,
  html.js .page-hero .container > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}