/* ==========================================================================
   Rust Busters — motion and interaction layer
   Loaded after main.css (and home.css on the front page). It changes no
   layout, color, type or spacing: only transitions, hover states, the header
   and menu behavior, and entrance/scroll reveals.

   Safety model
   - Entrance and reveal animations only run when <html> has .rb-motion. A tiny
     inline script in <head> adds it, and only when the visitor has not asked
     for reduced motion and the browser supports IntersectionObserver.
   - Nothing is hidden by CSS alone. Scroll reveals hide an element only after
     motion.js has tagged it (.rv) and is already watching it, and content that
     is on screen when the page loads is never hidden.
   - Everything animates transform, opacity or clip-path, so nothing shifts the
     layout. Animations use backwards fill and are removed when done, so the
     component's own styles (and hover states) apply afterwards untouched.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* soft, decelerating */
  --ease-out-soft: cubic-bezier(.33, 1, .68, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-hover: .22s;
  --dur-reveal: .75s;
}

/* ---------- Keyframes ---------- */
@keyframes rb-rise {
  from { opacity: .001; transform: translate3d(var(--rv-x, 0), var(--rv-y, 18px), 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes rb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rb-zoom-in { from { transform: scale(1.05); } to { transform: none; } }
@keyframes rb-unmask {
  from { clip-path: inset(5% 5% 5% 5% round 18px); opacity: .001; }
  to   { clip-path: inset(0 0 0 0 round var(--r-l)); opacity: 1; }
}
@keyframes rb-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes rb-pop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}
@keyframes rb-draw-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes rb-draw-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes rb-sheen {
  from { opacity: 1; transform: translateX(-130%) skewX(-18deg); }
  to   { opacity: 1; transform: translateX(230%) skewX(-18deg); }
}
@keyframes rb-drop {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   1. Interaction: buttons, links, cards
   ========================================================================== */
.btn {
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease,
              box-shadow .28s var(--ease-out), transform .28s var(--ease-out);
}
.btn:active { transition-duration: .08s; }
.icon-btn { transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease, transform .28s var(--ease-out); }
.text-link::after { transition: transform .28s var(--ease-out); }
a, .nav__link, .nav__trigger, .faq summary { transition: color var(--dur-hover) ease; }
.area-list a { transition: color var(--dur-hover) ease, text-decoration-color var(--dur-hover) ease; }
.service-more a, .article-services a, .link-chips a, .side-links a, .hp-needs label, .segmented button {
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease, box-shadow .3s var(--ease-out), color var(--dur-hover) ease;
}
.service-more svg, .article-services svg { transition: transform .3s var(--ease-out); }
.hp-work__picker button { transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, box-shadow var(--dur-hover) ease; }
.card, .post-card { transition: box-shadow .35s var(--ease-out), border-color .35s ease, transform .35s var(--ease-out); }
.hp-svc__panel { transition: border-color .3s ease, box-shadow .35s var(--ease-out); }
.card__media, .post-card__media { overflow: hidden; }
.card__media img, .post-card__media img { transition: transform .7s var(--ease-out); }
.wpforms-container button[type="submit"], .wpforms-container .wpforms-submit {
  transition: background-color var(--dur-hover) ease, box-shadow .28s var(--ease-out), transform .28s var(--ease-out) !important;
}

/* Hover states: only on devices that really hover, and only when motion is welcome */
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { border-color: var(--navy); }
  .service-more a:hover svg, .article-services a:hover svg { transform: translateX(3px); }
  .hp-svc__panel:hover { border-color: #CDD1D9; box-shadow: var(--sh-1); }
  .service-more a:hover, .article-services a:hover { box-shadow: var(--sh-1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn--primary:hover { box-shadow: 0 10px 22px -10px rgba(250, 94, 0, .65); }
  .btn--outline:hover { box-shadow: 0 10px 22px -12px rgba(19, 24, 48, .5); }
  .btn--text:hover { box-shadow: 0 14px 30px rgba(255, 98, 0, .42); }
  .wpforms-container button[type="submit"]:hover, .wpforms-container .wpforms-submit:hover {
    transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(250, 94, 0, .65) !important;
  }
  .card:hover, .post-card:hover { transform: translateY(-3px); }
  .card:hover .card__media img, .post-card:hover .post-card__media img { transform: scale(1.03); }
}

/* Desktop navigation: a quiet underline that draws in from the left */
@media (min-width: 1024px) {
  .nav__link, .nav__trigger { position: relative; }
  .nav__link::after, .nav__trigger::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px;
    background: var(--orange); transform: scaleX(0); transform-origin: right center;
    transition: transform .32s var(--ease-out);
  }
  .nav__trigger::after { right: 32px; }
  .nav__link:hover::after, .nav__trigger:hover::after,
  .nav__trigger[aria-expanded="true"]::after, .nav__link:focus-visible::after {
    transform: scaleX(1); transform-origin: left center;
  }
  .nav__trigger svg { transition: transform .3s var(--ease-out); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body.home .nav__link::after { left: 8px; right: 8px; }
  body.home .nav__trigger::after { left: 8px; right: 28px; }
}

/* ==========================================================================
   2. Header, dropdowns, mobile menu
   ========================================================================== */
.site-header { transition: box-shadow .35s var(--ease-out), background-color .2s ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(19, 24, 48, .04), 0 10px 28px -16px rgba(19, 24, 48, .28); }

/* Frosted header once the page scrolls. The blur sits on a pseudo-element so
   the header itself never becomes a containing block for the fixed mobile menu. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
    opacity: 0; transition: opacity .3s ease;
  }
  .site-header.is-scrolled { background-color: transparent; }
  .site-header.is-scrolled::before { opacity: 1; }
  body.nav-open .site-header { background-color: #fff; }
  body.nav-open .site-header::before { opacity: 0; }
}

/* Desktop dropdown panels fade and lift into place, and fade out on close */
@media (min-width: 1024px) {
  .nav__panel {
    display: block; visibility: hidden; opacity: 0; pointer-events: none;
    transform: translate3d(0, 8px, 0);
    transition: opacity .16s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav__trigger[aria-expanded="true"] + .nav__panel {
    visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    transition: opacity .22s ease, transform .32s var(--ease-out), visibility 0s;
  }
  .nav__panel-list a { transition: background-color .18s ease, color .18s ease; }
}

/* Mobile drawer: fades and settles in; links follow in a short cascade */
@media (max-width: 1023px) {
  .site-header__nav {
    display: flex; visibility: hidden; opacity: 0; pointer-events: none;
    transform: translate3d(0, -6px, 0);
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .site-header__nav.is-open {
    visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    transition: opacity .28s ease, transform .4s var(--ease-out), visibility 0s;
  }
  .action-bar { transition: transform .4s var(--ease-out); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .site-header__nav.is-open .nav__list > li,
  .site-header__nav.is-open .nav__mobile-cta { animation: rb-rise .5s var(--ease-out) backwards; --rv-y: 10px; }
  .site-header__nav.is-open .nav__list > li:nth-child(2) { animation-delay: .04s; }
  .site-header__nav.is-open .nav__list > li:nth-child(3) { animation-delay: .08s; }
  .site-header__nav.is-open .nav__list > li:nth-child(4) { animation-delay: .12s; }
  .site-header__nav.is-open .nav__list > li:nth-child(5) { animation-delay: .16s; }
  .site-header__nav.is-open .nav__list > li:nth-child(n+6) { animation-delay: .2s; }
  .site-header__nav.is-open .nav__mobile-cta { animation-delay: .22s; }
  .nav__trigger[aria-expanded="true"] + .nav__panel { animation: rb-drop .3s var(--ease-out); }
  .menu-toggle[aria-expanded="true"] .icon-close { animation: rb-pop .3s var(--ease-out); }
}

/* ==========================================================================
   3. Small touches that run without the reveal system
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] > .faq__answer { animation: rb-rise .45s var(--ease-out) backwards; --rv-y: 6px; }
  .region-tabs__panel:not([hidden]) { animation: rb-fade .3s ease backwards; }
  .hp-needs__answer { animation: rb-rise .4s var(--ease-out) backwards; --rv-y: 6px; }
}

/* ==========================================================================
   4. Page entrance (above the fold). CSS only, starts with the first paint,
      never blocks clicks, and finishes in under a second.
   ========================================================================== */
.rb-motion .hero__copy > *,
.rb-motion .hp-hero__copy > *,
.rb-motion .page-head .container > *,
.rb-motion .article-head .container > * {
  animation: rb-rise .8s var(--ease-out) backwards; --rv-y: 16px;
}
.rb-motion .hero__copy > :nth-child(2), .rb-motion .hp-hero__copy > :nth-child(2),
.rb-motion .page-head .container > :nth-child(2), .rb-motion .article-head .container > :nth-child(2) { animation-delay: .07s; }
.rb-motion .hero__copy > :nth-child(3), .rb-motion .hp-hero__copy > :nth-child(3),
.rb-motion .page-head .container > :nth-child(3), .rb-motion .article-head .container > :nth-child(3) { animation-delay: .15s; }
.rb-motion .hero__copy > :nth-child(4), .rb-motion .hp-hero__copy > :nth-child(4),
.rb-motion .page-head .container > :nth-child(4), .rb-motion .article-head .container > :nth-child(4) { animation-delay: .23s; }
.rb-motion .hero__copy > :nth-child(5), .rb-motion .hp-hero__copy > :nth-child(5),
.rb-motion .page-head .container > :nth-child(5), .rb-motion .article-head .container > :nth-child(5) { animation-delay: .3s; }
.rb-motion .hero__copy > :nth-child(n+6), .rb-motion .hp-hero__copy > :nth-child(n+6),
.rb-motion .page-head .container > :nth-child(n+6), .rb-motion .article-head .container > :nth-child(n+6) { animation-delay: .36s; }

/* Background photo settles in (no fade, so it paints immediately) */
.rb-motion .hero__media img { animation: rb-settle 1.8s var(--ease-out) backwards; }

/* Homepage hero: estimate card and the before/after viewer follow the headline */
.rb-motion .hp-estimate { animation: rb-rise .9s var(--ease-out) .18s backwards; --rv-y: 22px; }
.rb-motion .hp-work { animation: rb-rise .9s var(--ease-out) .3s backwards; --rv-y: 22px; }
.rb-motion .hp-ba__frame img { animation: rb-settle 1.6s var(--ease-out) .3s backwards; }
.rb-motion .hero .estimate-card { animation: rb-rise .9s var(--ease-out) .18s backwards; --rv-y: 22px; }

/* One soft light sweep across the main call to action, once */
.hp-hero__main, .hero__copy .btn-row .btn--primary:first-child, .cta-band .btn--primary {
  position: relative; overflow: hidden; isolation: isolate;
}
.hp-hero__main::after, .hero__copy .btn-row .btn--primary:first-child::after, .cta-band .btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
  opacity: 0;
}
.rb-motion .hp-hero__main::after,
.rb-motion .hero__copy .btn-row .btn--primary:first-child::after { animation: rb-sheen 1.15s var(--ease-in-out) 1.1s backwards; }
.rb-motion .cta-band .btn-row.is-in .btn--primary::after { animation: rb-sheen 1.15s var(--ease-in-out) calc(var(--rv-d, 0ms) + .55s) backwards; }

/* ==========================================================================
   5. Scroll reveals. motion.js tags elements below the fold with .rv (plus a
      variant) and adds .is-in as they enter; delays come from --rv-d so items
      that arrive together cascade. Classes are removed when finished.
   ========================================================================== */
.rb-motion .rv { opacity: 0; }
.rb-motion .rv.is-in {
  opacity: 1;
  animation: rb-rise var(--dur-reveal) var(--ease-out) var(--rv-d, 0ms) backwards;
}
.rb-motion .rv-soft { --rv-y: 12px; }
.rb-motion .rv-fade.is-in { animation-name: rb-fade; animation-duration: .9s; }
@media (min-width: 960px) {
  .rb-motion .rv-l { --rv-x: -22px; --rv-y: 0px; }
  .rb-motion .rv-r { --rv-x: 22px; --rv-y: 0px; }
}

/* Images inside cards and panels ease from a slight zoom as their card arrives */
.rb-motion .rv.is-in .card__media img,
.rb-motion .rv.is-in .post-card__media img,
.rb-motion .rv.is-in .hp-svc__media img,
.rb-motion .rv.is-in.duo__card > img,
.rb-motion .rv.is-in.why__media img {
  animation: rb-zoom-in 1.4s var(--ease-out) var(--rv-d, 0ms) backwards;
}

/* Standalone photos, diagrams and the map open from a soft inset */
.rb-motion .rv-img.is-in { animation-name: rb-unmask; animation-duration: 1.05s; }

/* Before/after pairs: the pair wipes open left to right (before, then after),
   the labels and caption follow */
.rb-motion .rv-ba.is-in { animation-name: rb-fade; animation-duration: .5s; }
.rb-motion .rv-ba.is-in .ba__pair,
.rb-motion .rv-ba.is-in .hp-pair__imgs {
  animation: rb-wipe 1.05s var(--ease-in-out) calc(var(--rv-d, 0ms) + 60ms) backwards;
}
.rb-motion .rv-ba.is-in .ba__tag,
.rb-motion .rv-ba.is-in .hp-pair__tag,
.rb-motion .rv-ba.is-in figcaption {
  animation: rb-fade .5s ease calc(var(--rv-d, 0ms) + 650ms) backwards;
}

/* Reviews: stars fill in left to right */
.rb-motion .rv.is-in .stars { animation: rb-wipe .8s var(--ease-out) calc(var(--rv-d, 0ms) + 250ms) backwards; }

/* Homepage process: number badges settle in, the connecting line draws */
.rb-motion .hp-steps > li.rv.is-in::before { animation: rb-pop .55s var(--ease-out) calc(var(--rv-d, 0ms) + 120ms) backwards; }
.rb-motion .hp-steps > li.rv.is-in::after { transform-origin: top center; animation: rb-draw-y .7s var(--ease-out) calc(var(--rv-d, 0ms) + 300ms) backwards; }
@media (min-width: 1024px) {
  .rb-motion .hp-steps > li.rv.is-in::after { transform-origin: left center; animation-name: rb-draw-x; animation-duration: .8s; }
}
@media (max-width: 1023px) {
  .rb-motion .process > li.rv.is-in::after { transform-origin: top center; animation: rb-draw-y .7s var(--ease-out) calc(var(--rv-d, 0ms) + 250ms) backwards; }
}

/* Print and reduced motion: never leave anything hidden */
@media print {
  .rv { opacity: 1 !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; }
  .rv, .rv *, .rb-motion * { animation: none !important; }
}