/* ═══════════════════════════════════════════════════════════════
   TH3 polish layer (24 Sep 2026): micro-interactions for a more
   premium, bespoke feel. Loaded site-wide when TH3_POLISH is true
   (functions.php), or with the preview token while staged.
   Transform/opacity only (no layout shift); hero images untouched;
   everything stops for prefers-reduced-motion.
   Undo: set TH3_POLISH false (or delete this file and th3-polish.js).
   ═══════════════════════════════════════════════════════════════ */

/* 1  Page-to-page transitions (cross-document View Transitions; browsers
      without support simply load the next page as before). The header
      capsule keeps its own name so it stays put while the page changes. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:th3pOut .38s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:th3pIn .8s .08s cubic-bezier(.22,1,.36,1) both}
@keyframes th3pOut{to{opacity:0;transform:scale(.985)}}
@keyframes th3pIn{from{opacity:0;transform:translateY(34px)}}
@media (min-width:1025px){body.th3-nav2 #site-navigation{view-transition-name:th3-nav}}
@media (max-width:1024px){#mobile-header{view-transition-name:th3-mnav}}
::view-transition-group(th3-nav),::view-transition-group(th3-mnav){animation-duration:0s}

/* 3  Images ease in (fade + small rise) as they scroll into view, whether or not they were already
      cached; hero, logo and wipe-animated images are skipped (th3-polish.js adds the classes) */
img.th3p-fade{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
img.th3p-fade.th3p-in{opacity:1;transform:none}

/* 4  Forms: the label answers focus, completed fields get a green tick,
      and the success tick draws itself */
.th3ef-field > label,.th3s-grid label{transition:color .25s}
.th3ef-field:focus-within > label,.th3s-grid label:focus-within{color:var(--th3-green-ink,#3b7f2c)!important}
html body :is(.th3ef-wrap,.th3s-dlg) :is(.th3ef-form,.th3s-f) :is(input,textarea).th3p-ok.th3p-ok{ /* beats the forms' own background !important */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%235eb748' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-size:18px 18px!important;background-position:right 14px center!important;padding-right:42px!important
}
html body :is(.th3ef-wrap,.th3s-dlg) :is(.th3ef-form,.th3s-f) textarea.th3p-ok.th3p-ok{background-position:right 14px top 14px!important}
.th3ef-success:not([hidden]) svg circle,.th3s-done:not([hidden]) .th3p-tick circle{stroke-dasharray:158;stroke-dashoffset:158;animation:th3pDraw .7s .05s cubic-bezier(.65,0,.35,1) forwards}
.th3ef-success:not([hidden]) svg path,.th3s-done:not([hidden]) .th3p-tick path{stroke-dasharray:40;stroke-dashoffset:40;animation:th3pDraw .45s .6s cubic-bezier(.65,0,.35,1) forwards}
@keyframes th3pDraw{to{stroke-dashoffset:0}}
.th3s-done .th3p-tick{display:block;margin:0 0 18px}

/* 5  Services mega menu: the four columns and the consultation line arrive
      one after another when it opens */
@media (min-width:1025px){
  #site-navigation .main-nav .mega-menu > ul > li{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .65s cubic-bezier(.22,1,.36,1)}
  #site-navigation .main-nav .mega-menu:is(:hover,.sfHover,:focus-within) > ul > li{opacity:1;transform:none}
  #site-navigation .main-nav .mega-menu:is(:hover,.sfHover,:focus-within) > ul > li:nth-child(2){transition-delay:.07s}
  #site-navigation .main-nav .mega-menu:is(:hover,.sfHover,:focus-within) > ul > li:nth-child(3){transition-delay:.14s}
  #site-navigation .main-nav .mega-menu:is(:hover,.sfHover,:focus-within) > ul > li:nth-child(4){transition-delay:.21s}
  #site-navigation .main-nav .mega-menu:is(:hover,.sfHover,:focus-within) > ul > li:nth-child(5){transition-delay:.3s}
}

/* 6  Text links in running copy: the underline redraws left to right on hover */
:is(.th3sv-copy,.th3sv-a,.th3sv-step,.th3sv-feat,.th3sx-group .th3sv-pin,.th3b-svc-p,.th3a-panel,.th3b-body,.th3b-content) a:not([class]){
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  background:linear-gradient(var(--th3-green,#5eb748),var(--th3-green,#5eb748)) no-repeat 0 100% / 0 2px;transition:background-size .4s cubic-bezier(.22,1,.36,1),text-decoration-color .2s
}
:is(.th3sv-copy,.th3sv-a,.th3sv-step,.th3sv-feat,.th3sx-group .th3sv-pin,.th3b-svc-p,.th3a-panel,.th3b-body,.th3b-content) a:not([class]):hover{text-decoration-color:transparent;background-size:100% 2px}

/* 7  Keyboard focus in brand green, everywhere */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--th3-green,#5eb748)!important;outline-offset:3px;border-radius:6px}
:where(input,select,textarea):focus-visible{outline:2px solid var(--th3-green,#5eb748)!important;outline-offset:1px}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  img.th3p-fade{opacity:1!important;transition:none!important}
  #site-navigation .main-nav .mega-menu > ul > li{opacity:1!important;transform:none!important;transition:none!important}
  .th3ef-success svg *,.th3s-done .th3p-tick *{animation:none!important;stroke-dashoffset:0!important}
}