/* effects.css — shared, lightweight motion & polish (progressive enhancement).
   Everything that hides content is gated on html.js; all motion off under prefers-reduced-motion. */
:root{--fx-gold:#C9A24A;--fx-gold-2:#B8933B;--fx-navy:#0B1F3A;--fx-hdr:120px;--fx-callbar:0px}
[id]{scroll-margin-top:calc(var(--fx-hdr) + 12px)}
/* 2. Card hover lift */
.product,.post-card,.rel,.card,.form-card.calc-card,.why-item,.reason{transition:transform .25s ease,box-shadow .25s ease}
.product:hover,.post-card:hover,.related a.rel:hover,.rel:hover,.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(11,31,58,.14)}
/* 10. Thumbnail zoom (wrapper added by JS) */
.fx-thumb{display:block;overflow:hidden;border-radius:10px;margin:0 0 14px;aspect-ratio:16/9}
.fx-thumb>.post-thumb{margin:0!important;transition:transform .5s ease,filter .5s ease,opacity .5s ease}
.post-card:hover .fx-thumb>.post-thumb,.post-card:focus-visible .fx-thumb>.post-thumb{transform:scale(1.05)}
/* 3. Header shrink (only when JS confirms header is sticky) */
html.fx-hdr-on header.site-header{transition:box-shadow .3s ease,margin-bottom .3s ease}
html.fx-hdr-on header.site-header .brand img{transition:height .3s ease;width:auto!important;height:var(--fx-logo-h)}
html.fx-hdr-on header.site-header .header-inner{min-height:0!important;padding-top:var(--fx-pad,0px)!important;padding-bottom:var(--fx-pad,0px)!important}
html.fx-hdr-on header.site-header.fx-slim{box-shadow:0 8px 24px rgba(11,31,58,.16);margin-bottom:var(--fx-logo-d)}
html.fx-hdr-on header.site-header.fx-slim .brand img{height:var(--fx-logo-h-sm)}
/* 1. Scroll reveal */
.js .fx-r{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--fx-d,0s),transform .6s ease var(--fx-d,0s)}
.js .fx-r.fx-in{opacity:1;transform:none}
/* 5. Count-up */
/* 6. Form polish */
.fx-has-progress{position:relative}
.fx-progress{position:absolute;top:7px;left:24px;right:24px;display:flex;align-items:center;gap:10px;height:14px;font:600 11px/14px system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#5A6577;pointer-events:none}
.fx-progress-txt{order:2;white-space:nowrap}
.fx-progress-track{order:1;flex:1;height:4px;border-radius:99px;background:#E6E9EE;overflow:hidden}
.fx-progress-bar{height:100%;width:0;background:var(--fx-gold);border-radius:99px;transition:width .35s ease}
.thanks:not([hidden])~.fx-progress,.fx-has-progress .thanks.show~.fx-progress{display:none}
.field.fx-ok>label::after{content:"";display:inline-block;width:16px;height:16px;margin-left:8px;vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%231E8E4F'/%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:fx-pop .3s ease}
.thanks-icon.fx-anim{animation:fx-pop .5s cubic-bezier(.2,1.4,.4,1) both;box-shadow:0 0 0 0 rgba(30,142,79,.35);}
.thanks-icon.fx-anim svg{stroke-dasharray:30;stroke-dashoffset:30;animation:fx-draw .6s .25s ease forwards}
@keyframes fx-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fx-draw{to{stroke-dashoffset:0}}
/* 7. Hero motion */
.hero::after{animation:fx-drift 90s linear infinite}
@keyframes fx-drift{from{background-position:0 0}to{background-position:560px 280px}}
.hero-ctas .btn-gold{background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;background-repeat:no-repeat;animation:fx-shine 6s ease-in-out 2s infinite}
@keyframes fx-shine{0%,70%{background-position:150% 0}100%{background-position:-60% 0}}
/* 8. Blur-up images */
img.fx-blur{filter:blur(10px);opacity:.4}
img.fx-loaded{transition:filter .6s ease,opacity .6s ease}
/* 9. Back to top + reading progress */
.fx-top{position:fixed;right:18px;bottom:calc(18px + var(--fx-callbar));z-index:55;width:48px;height:48px;border-radius:50%;border:2px solid var(--fx-gold);background:var(--fx-navy);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px rgba(11,31,58,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,visibility .25s,background .2s ease}
.fx-top.fx-show{opacity:1;visibility:visible;transform:none}
.fx-top:hover{background:var(--fx-gold-2);color:var(--fx-navy)}
.fx-top:focus-visible{outline:3px solid var(--fx-gold);outline-offset:3px}
.fx-top svg{width:22px;height:22px}
.fx-read{position:fixed;left:0;top:0;height:3px;width:100%;z-index:70;background:var(--fx-gold);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .js .fx-r{opacity:1!important;transform:none!important;transition:none!important}
  .hero::after,.hero-ctas .btn-gold,.thanks-icon.fx-anim,.thanks-icon.fx-anim svg,.field.fx-ok>label::after{animation:none!important}
  .thanks-icon.fx-anim svg{stroke-dashoffset:0!important}
  img.fx-blur{filter:none!important;opacity:1!important}
  .product:hover,.post-card:hover,.rel:hover,.card:hover,.post-card:hover .fx-thumb>.post-thumb{transform:none!important}
  html.fx-hdr-on header.site-header,html.fx-hdr-on header.site-header .brand img{transition:none!important}
}
.fx-progress[hidden]{display:none}
/* 11. Header "Menu" dropdown (Oct 2026) — matches themacmillanagency.com. Native <details>, so it works without JS;
   effects.js adds aria-expanded, Esc / outside-click / link-click close and focus handling. Shown only where the nav is hidden (<=1100px). */
header .mnav{display:none;position:relative;flex:none}
header .mnav>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 18px;border:2px solid #0B1F3A;border-radius:999px;background:#fff;color:#0B1F3A;font:700 1.04rem/1.2 'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background .15s ease,border-color .15s ease,color .15s ease}
header .mnav>summary::-webkit-details-marker{display:none}
header .mnav>summary::marker{content:""}
header .mnav[open]>summary,header .mnav>summary:hover{border-color:#C9A24A;color:#A8842F;background:rgba(201,162,74,.1)}
header .mnav>summary:focus-visible{outline:3px solid #A8842F;outline-offset:2px}
header .mnav-ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
header .mnav-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:70;display:grid;width:290px;max-width:calc(100vw - 24px);max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain;padding:10px;background:#fff;border:1px solid #DDE1E6;border-radius:14px;box-shadow:0 12px 32px rgba(11,31,58,.14);text-align:left}
header .mnav-panel a{display:block;padding:11px 14px;border-radius:10px;color:#0B1F3A;font:700 1rem/1.3 'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;text-decoration:none;white-space:normal}
header .mnav-panel a:hover{background:#EEF1F5;color:#0B1F3A}
header .mnav-panel a:focus-visible{outline:3px solid #A8842F;outline-offset:-3px}
header .mnav-panel a[aria-current="page"]{background:#F7EFDC}
header .mnav-panel a.mnav-sub{padding:8px 14px 8px 30px;font-weight:600;font-size:.95rem;color:#2A3B55}
header .mnav-panel a.mnav-quote{background:#C9A24A;color:#0B1F3A;margin-bottom:6px}
header .mnav-panel a.mnav-quote:hover{background:#B8933B}
header .mnav-panel a.mnav-call{margin-top:6px;border:2px solid #0B1F3A;text-align:center}
@media (max-width:1100px){header .mnav{display:block}}
@media (max-width:1100px){header .header-inner,header .hdr{gap:12px}header .brand img,header.site-header .brand img,header .hdr .brand img{width:360px}}
@media (max-width:860px){header .brand img,header.site-header .brand img,header .hdr .brand img{width:300px}}
@media (max-width:760px){
 header .mnav>summary{width:52px;min-height:52px;padding:0}
 header .mnav>summary .mtxt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 header .brand img,header.site-header .brand img,header .hdr .brand img{width:250px}
}
@media (max-width:640px){header .brand img,header.site-header .brand img,header .hdr .brand img{width:200px}}
@media (max-width:480px){
 header .header-inner,header .hdr{position:relative}
 header .mnav{order:1;position:static}
 header .mnav>summary{width:48px;min-height:48px}
 header .mnav-panel{left:12px;right:12px;width:auto;max-width:none;top:calc(100% + 6px);max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
 header .brand{min-width:0;flex:1 1 0%!important}
 header .brand img,header.site-header .brand img,header .hdr .brand img{width:auto}
}
@media (max-width:360px){header .mnav>summary,header .hdr-actions .btn,header .hdr-actions .header-call{width:44px!important;min-height:44px!important}header .brand-mtext{font-size:1rem}header .brand{gap:8px!important}header .header-inner,header .hdr{gap:6px!important}}
@media (max-width:960px) and (min-width:481px){
 header .hdr-actions .btn,header .hdr-actions .header-call{width:52px!important;min-height:52px;padding:0!important;gap:0;font-size:0!important}
 header .hdr-actions .header-call .txt,header .hdr-actions .header-call .num{display:none!important}
}
@media (max-width:600px) and (min-width:481px){header .brand img,header.site-header .brand img,header .hdr .brand img{width:170px}header .header-inner,header .hdr{padding:0 12px!important}}