/* Financify motion layer 2: premium polish. Opacity / translate / scale / rotate / clip only. */
@media (prefers-reduced-motion: no-preference) {

  /* fade-out when leaving to another page (no fade-in: never risks a blank page) */
  html.fm-leave{opacity:0;transition:opacity .22s ease}

  /* headline mask reveal (no text splitting, so translations keep working) */
  .fm-hd{clip-path:inset(-12% -6% 100% -6%);translate:0 .35em;opacity:0}
  .fm-hd.fm-in{animation:fm2Head .95s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--fm-d,0s)}
  @keyframes fm2Head{from{clip-path:inset(-12% -6% 100% -6%);translate:0 .35em;opacity:0}to{clip-path:inset(-12% -6% -12% -6%);translate:0 0;opacity:1}}

  /* hero light sheen */
  .fin-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);translate:-100% 0;animation:fm2Sheen 14s ease-in-out 3s infinite}
  @keyframes fm2Sheen{0%{translate:-100% 0}45%,100%{translate:100% 0}}

  /* bank logo strip: pause on hover */
  .scpb:hover{animation-play-state:paused}

  /* reviews: spotlight cycle (desktop) */
  .fin-review-card.fm-spot{translate:0 -6px;box-shadow:0 22px 44px rgba(46,30,107,.16)}

  /* journey steps: active step glow */
  .fin-digital-features>*{transition:translate .45s cubic-bezier(.22,.8,.3,1),box-shadow .45s ease,opacity .45s ease}
  .fin-digital-features>.fm-step{translate:0 -4px;box-shadow:0 0 0 1px rgba(122,214,201,.55),0 16px 34px rgba(0,0,0,.18)}

  /* FAQ answer reveal + chevron ease */
  .fin-faq-item p{animation:fm2Faq .5s cubic-bezier(.22,.8,.3,1) both;transform-origin:top}
  @keyframes fm2Faq{from{opacity:0;translate:0 -8px;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(0 0 -4px 0)}}
  .fin-faq-item button svg,.fin-faq-item button span:last-child{transition:rotate .35s ease,transform .35s ease}

  /* calculator: slider fill colour, value bubble, valid-field tick */
  .fin-calc-section input[type=range]{accent-color:#5b4ab0}
  .fm-bubble{position:absolute;top:-30px;translate:-50% 0;padding:3px 9px;border-radius:999px;background:#2e1e6b;color:#fff;font:600 11px/1.5 Inter,Arial,sans-serif;white-space:nowrap;pointer-events:none;opacity:0;scale:.85;transition:opacity .2s ease,scale .2s ease;z-index:3}
  .fm-bubble.on{opacity:1;scale:1}
  .fin-calc-range-row{position:relative}
  .fin-calc-section input.fm-ok{box-shadow:0 0 0 3px rgba(30,158,144,.16);border-color:#1e9e90}

  /* click ripple */
  .fm-rip-host{position:relative;overflow:hidden}
  .fm-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);translate:-50% -50%;scale:0;opacity:1;pointer-events:none;animation:fm2Ripple .65s ease-out forwards}
  @keyframes fm2Ripple{to{scale:1;opacity:0}}

  /* WhatsApp nudge */
  .fin-whatsapp-logo.fm-nudge{animation:fm2Nudge 1s ease 1}
  @keyframes fm2Nudge{0%,100%{scale:1}30%{scale:1.14}55%{scale:.96}75%{scale:1.06}}

  /* 3D tilt (desktop pointers): perspective on grids */
  @media (hover:hover) and (pointer:fine){
    .fin-services-grid,.fin-why-grid,.fin-knowledge-grid,.fin-complex-grid,.fin-reviews-grid{perspective:1100px}
    .fm-tilt{transition:rotate .25s ease-out,translate .35s ease,box-shadow .35s ease}
  }
}

/* Mobile swipe carousels (layout only changes on phones) */
@media (max-width:700px){
  .fm-car.fm-car{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:84%!important;grid-template-columns:none!important;grid-template-rows:auto!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:14px!important;padding-bottom:30px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fm-car.fm-car::-webkit-scrollbar{display:none}
  .fm-car.fm-car>*{max-width:none!important;width:auto!important;scroll-snap-align:center;margin:0!important}
}

/* ---- calculator animations ---- */
@media (prefers-reduced-motion: no-preference) {
  .fm-swap .fin-calc-input-column>*{animation:fmUp .55s cubic-bezier(.22,.8,.3,1) both}
  .fm-swap .fin-calc-input-column>*:nth-child(2){animation-delay:.05s}.fm-swap .fin-calc-input-column>*:nth-child(3){animation-delay:.1s}
  .fm-swap .fin-calc-input-column>*:nth-child(4){animation-delay:.15s}.fm-swap .fin-calc-input-column>*:nth-child(5){animation-delay:.2s}
  .fm-swap .fin-calc-input-column>*:nth-child(6){animation-delay:.25s}.fm-swap .fin-calc-input-column>*:nth-child(n+7){animation-delay:.3s}
  .fm-flash{animation:fm2Flash .5s ease-out}
  @keyframes fm2Flash{0%{opacity:.3;translate:0 -3px}100%{opacity:1;translate:0 0}}
  .fin-mobile-payment strong.fm-flash{animation:fm2Pop .45s ease-out;display:inline-block}
  @keyframes fm2Pop{0%{scale:.92;opacity:.5}60%{scale:1.06}100%{scale:1;opacity:1}}
  .fm-rows .fin-calc-results>div{animation:fmUp .5s cubic-bezier(.22,.8,.3,1) both}
  .fm-rows .fin-calc-results>div:nth-child(2){animation-delay:.04s}.fm-rows .fin-calc-results>div:nth-child(3){animation-delay:.08s}
  .fm-rows .fin-calc-results>div:nth-child(4){animation-delay:.12s}.fm-rows .fin-calc-results>div:nth-child(5){animation-delay:.16s}
  .fm-rows .fin-calc-results>div:nth-child(6){animation-delay:.2s}.fm-rows .fin-calc-results>div:nth-child(7){animation-delay:.24s}
  .fm-rows .fin-calc-results>div:nth-child(8){animation-delay:.28s}.fm-rows .fin-calc-results>div:nth-child(n+9){animation-delay:.32s}
  .fin-preset-row button,.fin-calc-toggle-button,.fin-calc-switch button,.fin-borrower-toggle{transition:translate .2s ease,scale .2s ease,background-color .25s ease,color .25s ease,box-shadow .25s ease,border-color .25s ease}
  .fin-preset-row button:hover,.fin-calc-toggle-button:hover{translate:0 -2px}
  .fin-preset-row button:active,.fin-calc-toggle-button:active,.fin-calc-switch button:active{scale:.93}
  .fin-calc-section .fin-coached-field{transition:translate .25s ease}
  .fin-calc-section .fin-coached-field:focus-within{translate:0 -1px}
  .fin-calc-section .fin-coached-field:focus-within>label{color:#5b4ab0;transition:color .25s ease}
  .fin-calculator-modal{animation:fm2Modal .35s cubic-bezier(.22,.8,.3,1) both}
  @keyframes fm2Modal{from{opacity:0;scale:.96;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}
  .fin-repayment-donut{transition:scale .3s ease}
  .fin-repayment-chart:hover .fin-repayment-donut{scale:1.04}
}