/* Motion added 2026-10-28 (animation audit). Everything here is off when the visitor asks for reduced motion.
   Only opacity and transform move, so nothing shifts the layout, and no headline or hero photo starts hidden. */

/* 1. Homepage hero: the three promises light up one at a time (all three stay readable). */
.hero3__vals.is-cycle li{animation:none;opacity:.55;transition:opacity .6s ease}
.hero3__vals.is-cycle li.is-on{opacity:1}
.hero3__vals li::after{content:"";position:absolute;left:16px;right:0;bottom:-8px;height:2px;background:var(--red-on-black);transform:scaleX(0);transform-origin:left;transition:transform .6s ease}
.hero3__vals.is-cycle li.is-on::after{transform:scaleX(1)}

/* 2. Calculator: homepage bars grow in; result button slides in on /net-proceeds. */
.js .calc-card li i{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.js .fade.in .calc-card li i{transform:none}
.js .fade.in .calc-card li:nth-child(2) i{transition-delay:.25s}
.js .fade.in .calc-card li:nth-child(3) i{transition-delay:.5s}
.js .fade.in .calc-card li:nth-child(4) i{transition-delay:.85s}
.calc__next{margin:4px 0 0;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.calc__next.is-on{opacity:1;transform:none;pointer-events:auto}
#c-net.is-tick{color:var(--red-on-white)}
#c-net{transition:color .4s ease}

/* 3. Home value form: progress bar and sending state. */
.fprog{height:4px;background:#333;margin:0 0 14px;overflow:hidden}
.fprog i{display:block;height:100%;background:var(--red-on-black);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn.is-sending{opacity:.85;cursor:progress}
.btn.is-sending::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:mSpin .8s linear infinite}
@keyframes mSpin{to{transform:rotate(360deg)}}

/* 4. Thanks pages: a red check draws once. */
.tcheck{display:block;width:76px;height:76px;margin:0 auto 18px}
.tcheck circle{fill:none;stroke:var(--red-on-black);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;animation:mDraw .9s ease-out .2s forwards}
.tcheck path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:mDraw .5s ease-out 1s forwards}
@keyframes mDraw{to{stroke-dashoffset:0}}

/* 5 and 9. Route maps on Moving to Barrie and community pages. */
.rmap{margin:0 0 36px;background:#eef3f6;border-radius:14px;overflow:hidden}
.rmap svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;font-family:inherit}
.rmap--tall svg{max-width:420px}
.rm__w{fill:#c9dceb}
.rm__wl{fill:#5d7f99;font-style:italic}
.rm__r{fill:none;stroke:#C8102E;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1}
.js .rm__r{stroke-dashoffset:1}
.rm__r--soft{stroke:#9aa7b1;stroke-width:1.4;opacity:.7}
.rm__t{fill:#C8102E;opacity:0;offset-distance:0%}
.rm__c circle{fill:#1b1b1b;stroke:#fff;stroke-width:1.5}
.rm__c text{font-weight:600;fill:#1b1b1b;paint-order:stroke;stroke:#eef3f6;stroke-width:3px;stroke-linejoin:round}
.rm__c--soft circle{fill:#7d8a94}
.rm__c--soft text{fill:#5b6770;font-weight:500}
.rm__c--on circle{fill:#C8102E}
.rm__c--on text{font-weight:700}
.js .rm__c{opacity:0}
.rm__p{fill:none;stroke:#C8102E;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.rmap figcaption{font-size:.85rem;color:#555;padding:0 16px 12px;margin:0}
.rmap.is-go .rm__r{animation:mDraw 1.3s ease-out var(--d,0s) forwards}
.rmap.is-go .rm__t{animation:rmMove 1.3s ease-out var(--d,0s) forwards}
.rmap.is-go .rm__c{animation:rmPop .5s ease-out var(--d,0s) forwards}
.rmap.is-go .rm__p{animation:rmPulse 2.6s ease-out 1.6s infinite}
.rmap.is-paused *{animation-play-state:paused!important}
@keyframes rmMove{0%{opacity:1;offset-distance:0%}90%{opacity:1}100%{opacity:0;offset-distance:100%}}
@keyframes rmPop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes rmPulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}

/* 6. Step plans: the numbered circles turn red one after another. */
.js .psec.fade.in .psteps li::before{animation:mStep .6s ease forwards}
.js .psec.fade.in .psteps li:nth-child(2)::before{animation-delay:.4s}
.js .psec.fade.in .psteps li:nth-child(3)::before{animation-delay:.8s}
.js .psec.fade.in .psteps li:nth-child(4)::before{animation-delay:1.2s}
.js .psec.fade.in .psteps li:nth-child(5)::before{animation-delay:1.6s}
.js .psec.fade.in .psteps li:nth-child(6)::before{animation-delay:2s}
@keyframes mStep{0%{background:#000;transform:scale(1)}55%{transform:scale(1.15)}100%{background:#C8102E;transform:scale(1)}}

/* 7. Inner page banners: the photo zooms very slowly. */
.pbanner{overflow:hidden}
.pbanner__bg{position:absolute;inset:0;z-index:0;background:#111 center/cover no-repeat;will-change:transform}
.pbanner::before{z-index:1}
.pbanner__in{z-index:2}
@media (prefers-reduced-motion:no-preference){.pbanner__bg{animation:mZoom 32s ease-in-out infinite alternate}}
@keyframes mZoom{from{transform:scale(1)}to{transform:scale(1.08)}}

/* 8. Homepage three steps: a red line draws across from step 1 to step 3. */
.steps li{position:relative}
.steps li::after{content:"";position:absolute;left:0;right:-28px;top:-3px;height:3px;background:var(--red-on-white);transform:scaleX(0);transform-origin:left}
.steps li:last-child::after{right:0}
.js .fade.in .steps li::after{animation:mLine .7s linear forwards}
.js .fade.in .steps li:nth-child(1)::after{animation-delay:.3s}
.js .fade.in .steps li:nth-child(2)::after{animation-delay:1s}
.js .fade.in .steps li:nth-child(3)::after{animation-delay:1.7s}
@keyframes mLine{to{transform:scaleX(1)}}
@media (max-width:980px){.steps li::after{right:0}}

/* 10. Blog posts: reading bar, and the closing home value box slides up. */
.readbar{position:fixed;left:0;top:0;right:0;height:3px;z-index:1200;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none}
.js .post-cta.m-rise{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .post-cta.m-rise.in{opacity:1;transform:none}

/* 11. Listings: soft placeholders while homes load, then the cards fade in. */
.pfeed.is-loading{min-height:340px}
.pskel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.pskel span{display:block;height:300px;border-radius:12px;background:linear-gradient(100deg,#eee 30%,#f7f7f7 50%,#eee 70%);background-size:300% 100%;animation:mShimmer 1.4s ease-in-out infinite}
@keyframes mShimmer{from{background-position:100% 0}to{background-position:0 0}}
.pfeed.is-in>*{animation:rmPop .6s ease both}

/* 12. Phone bottom bar: Home Value glows once, halfway down the page. */
.mobile-bar a.m-glow{animation:mGlow 1.8s ease-in-out 1}
@keyframes mGlow{0%,100%{background:transparent;box-shadow:none}45%{background:rgba(200,16,46,.85);box-shadow:0 0 18px rgba(255,59,78,.6)}}

/* 13. Homepage photo cards: the photo zooms a little on hover or tap. */
.tile,.pcard{isolation:isolate}
.zbg{position:absolute;inset:0;z-index:-1;background:center/cover no-repeat;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile:hover .zbg,.tile:focus-visible .zbg,.pcard:hover .zbg,.pcard:focus-visible .zbg{transform:scale(1.07)}

@media (prefers-reduced-motion:reduce){
  .hero3__vals li::after,.js .calc-card li i{transform:none!important;transition:none}
  .tcheck circle,.tcheck path{animation:none;stroke-dashoffset:0}
  .js .rm__r{stroke-dashoffset:0}.js .rm__c{opacity:1}.rm__t,.rm__p{display:none}
  .js .psec.fade.in .psteps li::before{animation:none}
  .steps li::after{display:none}
  .readbar{display:none}
  .js .post-cta.m-rise{opacity:1;transform:none}
  .pskel span{animation:none}
  .zbg{transition:none}
}
@media (max-width:600px){.pskel span:nth-child(n+2){display:none}}