/* Financify motion layer 3: modern calculator motion + site-wide polish, and small accessibility fixes.
   Purely visual (opacity / translate / scale / rotate / shadow). No layout, text or function changes. */

/* ---- accessibility: comfortable tap/click targets for inline text links (WCAG 2.5.8) ---- */
.fin-reviews-shell a[href*="local/reviews"],a[href*="Financify FAQs"],a[href*="Financify Privacy"],a[href^="mailto:"]{display:inline-block;min-height:24px;line-height:24px;padding-block:1px}
a.scpf[href^="mailto:"]{display:inline-block}

@media (prefers-reduced-motion: no-preference) {

  /* ============ CALCULATOR ============ */
  /* ambient breathing glow around the calculator card */
  .fin-calc-shell{animation:fm3Glow 7s ease-in-out infinite alternate}
  @keyframes fm3Glow{from{box-shadow:0 10px 36px rgba(46,30,107,.08)}to{box-shadow:0 18px 60px rgba(52,123,123,.17)}}

  /* slider thumb: live ping while focused or dragged */
  .fin-calc-section input[type=range]:focus-visible::-webkit-slider-thumb,.fin-calc-section input[type=range]:active::-webkit-slider-thumb{animation:fm3Ping 1.3s ease-out infinite}
  .fin-calc-section input[type=range]:focus-visible::-moz-range-thumb,.fin-calc-section input[type=range]:active::-moz-range-thumb{animation:fm3Ping 1.3s ease-out infinite}
  @keyframes fm3Ping{0%{box-shadow:0 0 0 0 rgba(91,74,176,.45)}100%{box-shadow:0 0 0 12px rgba(91,74,176,0)}}

  /* inputs: animated focus line */
  .fin-calc-section input:not([type=range]):focus,.fin-calc-section select:focus{box-shadow:0 0 0 4px rgba(91,74,176,.14),inset 0 -2px 0 #5b4ab0}

  /* repayment donut: soft breathing ring + legend dots */
  .fin-repayment-donut{animation:fm3Ring 4s ease-in-out infinite}
  @keyframes fm3Ring{0%,100%{box-shadow:0 0 0 0 rgba(91,74,176,.22)}50%{box-shadow:0 0 0 10px rgba(91,74,176,0)}}
  .fin-chart-key{animation:fm3Dot 2.8s ease-in-out infinite}
  .fin-chart-key-interest{animation-delay:.9s}
  @keyframes fm3Dot{50%{scale:1.35}}

  /* primary CTA in the results card: sheen sweep + arrow nudge */
  .fin-calc-results>a{position:relative;overflow:hidden}
  .fin-calc-results>a::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);translate:-120% 0;animation:fmShine 6s ease-in-out 1.5s infinite;pointer-events:none}
  .fin-calc-results>a:hover{translate:0 -2px;box-shadow:0 14px 30px rgba(46,30,107,.28)}
  .fin-calc-results>a{transition:translate .25s ease,box-shadow .25s ease}

  /* mode switch + toggle chips: smooth colour glide and press */
  .fin-calc-switch button,.fin-calc-toggle-button,.fin-preset-row button{transition:translate .2s ease,scale .2s ease,background-color .35s ease,color .35s ease,box-shadow .35s ease,border-color .35s ease}
  .fin-preset-row button:focus-visible,.fin-calc-toggle-button:focus-visible{box-shadow:0 0 0 4px rgba(91,74,176,.22)}

  /* "Calculate with DBR": gentle attention breathing until used */
  .fin-borrower-toggle{animation:fm3Breathe 3.2s ease-in-out infinite}
  @keyframes fm3Breathe{50%{box-shadow:0 0 0 6px rgba(91,74,176,.10)}}

  /* result rows: soft hover highlight */
  .fin-calc-results>div[style*="justify-content"]{transition:background-color .25s ease,translate .25s ease}
  @media (hover:hover){.fin-calc-results>div[style*="justify-content"]:hover{translate:3px 0}}

  /* sparkle burst particles (created by JS on CTA click) */
  .fm-spark{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:2147483600;translate:-50% -50%;animation:fm3Spark .75s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes fm3Spark{to{translate:calc(-50% + var(--dx)) calc(-50% + var(--dy));opacity:0;scale:.2}}

  /* ============ SITE-WIDE ============ */
  /* header */
  .fin-global-logo img{transition:scale .35s cubic-bezier(.22,.8,.3,1)}
  .fin-global-logo:hover img{scale:1.05}
  .fin-global-header nav a,.fin-global-header a{transition:translate .2s ease,background-color .25s ease,color .25s ease,box-shadow .25s ease}
  @media (hover:hover){.fin-global-header nav a:hover{translate:0 -1px}}

  /* hero: floating shapes, flowing gradient headline accent, arrow nudge */
  .fin-hero>div[style*="rotate(18deg)"]{animation:fm3Float 10s ease-in-out infinite}
  .fin-hero>div[style*="rotate(-12deg)"]{animation:fm3Float 12s ease-in-out -4s infinite reverse}
  @keyframes fm3Float{50%{translate:10px -16px;rotate:6deg}}
  @supports (background-clip:text) or (-webkit-background-clip:text){
    .fin-hero h1 span:nth-child(2){background:linear-gradient(100deg,#5b4ab0 15%,#2e9c92 50%,#5b4ab0 85%) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;animation:fm3Text 7s linear infinite}
    @keyframes fm3Text{to{background-position:-220% 0}}
  }
  .fin-hero-primary span:last-child,.fin-hero-secondary span:last-child,.fin-services-calc span:last-child{transition:translate .25s ease;display:inline-block}
  .fin-hero-primary:hover span:last-child,.fin-hero-secondary:hover span:last-child,.fin-services-calc:hover span:last-child{translate:5px 0}

  /* background orbs: very slow drift */
  .fin-reviews-orbit,.fin-services-orbit{animation:fm3Spin 90s linear infinite}
  @keyframes fm3Spin{to{rotate:360deg}}

  /* images: gentle zoom on card hover */
  .fin-service-visual,.fin-knowledge-image{overflow:hidden}
  .fin-service-visual img,.fin-knowledge-image img{transition:scale .7s cubic-bezier(.22,.8,.3,1)}
  .fin-service-card:hover .fin-service-visual img,.fin-knowledge-card:hover .fin-knowledge-image img{scale:1.07}

  /* icons, list items and links */
  .fin-why-icon{transition:scale .35s ease,rotate .35s ease}
  .fin-why-card-v2:hover .fin-why-icon{scale:1.12;rotate:-6deg}
  .fin-doc-vault-list>*{transition:translate .3s ease}
  @media (hover:hover){.fin-doc-vault-list>*:hover{translate:5px 0}}
  footer a{transition:translate .2s ease,color .2s ease,opacity .2s ease}
  @media (hover:hover){footer a:hover{translate:3px 0}}
  .fin-whatsapp-logo{transition:scale .25s ease}.fin-whatsapp-logo:hover{scale:1.1}

  /* inner pages (service pages, about, FAQs ...): entrance + hover polish */
  .fin-service-hero>div>*{animation:fmUp .8s cubic-bezier(.22,.8,.3,1) backwards}
  .fin-service-hero>div>*:nth-child(2){animation-delay:.08s}.fin-service-hero>div>*:nth-child(3){animation-delay:.16s}
  .fin-service-hero>div>*:nth-child(4){animation-delay:.24s}.fin-service-hero>div>*:nth-child(5){animation-delay:.32s}
  .fin-service-hero>img{animation:fm3Img 1s cubic-bezier(.22,.8,.3,1) backwards}
  @keyframes fm3Img{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
  .fin-service-point,.fin-related-services a,.fin-service-checklist{transition:translate .3s cubic-bezier(.22,.8,.3,1),box-shadow .3s ease}
  @media (hover:hover){.fin-service-point:hover,.fin-related-services a:hover{translate:0 -4px;box-shadow:0 14px 30px rgba(46,30,107,.1)}}
  details>p{animation:fm2Faq .45s cubic-bezier(.22,.8,.3,1) both}
  details summary{transition:color .25s ease}
  .fin-primary-button,.fin-secondary-button{transition:translate .25s ease,box-shadow .25s ease,scale .2s ease}
  .fin-primary-button:hover,.fin-secondary-button:hover{translate:0 -2px}
  .fin-primary-button:active,.fin-secondary-button:active{scale:.97}
}

/* ---- footer logo: no white plate, soft white glow instead ---- */
body footer .fin-footer-logo-plate{background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
body footer .fin-footer-logo-plate img{filter:drop-shadow(0 0 7px rgba(255,255,255,1)) drop-shadow(0 0 20px rgba(255,255,255,.8)) drop-shadow(0 0 38px rgba(255,255,255,.4))!important}
@media (prefers-reduced-motion: no-preference){
  body footer .fin-footer-logo-plate img{animation:fm3LogoGlow 5s ease-in-out infinite alternate}
  @keyframes fm3LogoGlow{from{filter:drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 16px rgba(255,255,255,.65)) drop-shadow(0 0 30px rgba(255,255,255,.3))}to{filter:drop-shadow(0 0 9px rgba(255,255,255,1)) drop-shadow(0 0 24px rgba(255,255,255,.9)) drop-shadow(0 0 44px rgba(255,255,255,.5))}}
}

/* ---- Hero area: extra ambient motion (opacity / translate / scale / rotate / shadow only; no layout change) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* soft moving light across the hero photo */
  .fin-hero::before{content:"";position:absolute;inset:-20%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 30% 40%,rgba(255,255,255,.22),transparent 55%),radial-gradient(ellipse at 75% 65%,rgba(108,92,224,.16),transparent 55%);animation:fm4Light 16s ease-in-out infinite alternate}
  @keyframes fm4Light{from{translate:-4% -2%;opacity:.7}to{translate:4% 3%;opacity:1}}
  /* the two decorative corner blocks float and slowly turn */
  .fin-hero>div[style*="rotate(18deg)"]{animation:fm4Float 9s ease-in-out infinite alternate}
  .fin-hero>div[style*="rotate(-12deg)"]{animation:fm4Float 11s ease-in-out -3s infinite alternate-reverse}
  @keyframes fm4Float{from{translate:0 0;rotate:0deg}to{translate:14px 18px;rotate:6deg}}
  /* top badge: breathing halo */
  .fin-hero-content>span:first-child{animation:fmUp .9s cubic-bezier(.22,.8,.3,1) .05s both,fm4Halo 3.4s ease-in-out 1.2s infinite}
  @keyframes fm4Halo{0%,100%{box-shadow:0 0 0 0 rgba(108,92,224,.0)}50%{box-shadow:0 0 0 7px rgba(108,92,224,.12)}}
  /* headline: second line gently glows */
  .fin-hero-content h1 span:last-child{animation:fm4Glow 4.5s ease-in-out 1.4s infinite alternate}
  @keyframes fm4Glow{from{text-shadow:0 0 0 rgba(108,92,224,0)}to{text-shadow:0 2px 24px rgba(108,92,224,.38)}}
  /* buttons: arrow nudge + lift on hover */
  .fin-hero-primary span,.fin-hero-secondary span:last-child{display:inline-block;transition:translate .3s cubic-bezier(.22,.8,.3,1)}
  .fin-hero-primary:hover span{translate:3px -3px}
  .fin-hero-secondary:hover span:last-child{translate:5px 0}
  .fin-hero-primary:hover,.fin-hero-secondary:hover{translate:0 -3px;box-shadow:0 14px 28px rgba(46,30,107,.22)}
  /* intro: paragraph + buttons rise with a soft blur-in */
  .fin-hero-content>p{animation:fmUp .9s cubic-bezier(.22,.8,.3,1) .32s both,fm4Blur .9s ease .32s both}
  @keyframes fm4Blur{from{filter:blur(6px)}to{filter:blur(0)}}
}

/* ---- Home page: more ambient motion (opacity / translate / scale / rotate / shadow only; no layout change) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* lender logos: gentle staggered float */
  .fin-bank-box img{animation:fm5Bob 4.2s ease-in-out infinite}
  .fin-bank-box:nth-child(3n+2) img{animation-delay:-1.4s}
  .fin-bank-box:nth-child(3n) img{animation-delay:-2.8s}
  @keyframes fm5Bob{50%{translate:0 -3px}}
  /* reviews orbit slowly turns */
  .fin-reviews-orbit{animation:fm5Spin 60s linear infinite}
  @keyframes fm5Spin{to{rotate:360deg}}
  /* section kickers: soft breathing glow */
  .fin-reviews-kicker,.fin-bank-strip-intro>span,.fin-why-intro>span{animation:fm5Kick 3.6s ease-in-out infinite}
  @keyframes fm5Kick{0%,100%{box-shadow:0 0 0 0 rgba(108,92,224,0)}50%{box-shadow:0 0 0 6px rgba(108,92,224,.1)}}
  /* review stars twinkle */
  .fin-review-card [aria-label*="star" i],.fin-review-card .fin-stars{animation:fm5Twinkle 3s ease-in-out infinite}
  @keyframes fm5Twinkle{50%{scale:1.06;opacity:.85}}
  /* primary links / buttons: shine sweep on hover */
  .fin-primary-button,.fin-header-cta{position:relative;overflow:hidden}
  .fin-primary-button:hover,.fin-header-cta:hover{translate:0 -2px;box-shadow:0 10px 22px rgba(46,30,107,.2)}
  /* nav links nudge */
  .fin-global-links a{transition:translate .25s ease}
  .fin-global-links a:hover{translate:0 -2px}
  /* FAQ question arrow/summary lift */
  details>summary{transition:translate .25s ease}
  details>summary:hover{translate:4px 0}
  /* why-cards and services: icon-style first child wiggle on hover */
  .fin-why-card-v2:hover>:first-child,.fin-service-card:hover>:first-child{animation:fm5Wiggle .6s ease}
  @keyframes fm5Wiggle{25%{rotate:-4deg}75%{rotate:4deg}}
}

/* lender marquee: 17 logos now, so a longer loop keeps the original scroll speed */
.fin-banks>div>div{animation-duration:50s!important}

/* Installed "Mortgage Calculator" app (home-screen mode): keep it focused on the calculator */
@media (display-mode: standalone) {
  .fin-global-links,.fin-more,.fin-menu-toggle,.fin-header-cta,footer,.fin-footer,fin-footer{display:none!important}
}