/* Financify motion layer - animation and micro-interaction polish only.
   Uses opacity / translate / scale properties exclusively: no layout, colour or spacing changes.
   Everything is disabled for visitors who prefer reduced motion. */

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

  /* ---- Scroll progress bar (fixed, does not affect layout) ---- */
  .fm-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:2147483000;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--fm-progress,0));background:linear-gradient(90deg,#5b4ab0,#347b7b);opacity:.9}

  /* ---- Scroll reveal ---- */
  .fm-r{opacity:0;translate:0 26px}
  .fm-r.fm-in{animation:fmUp .8s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--fm-d,0s)}
  .fm-r.fm-left{translate:-28px 0}.fm-r.fm-left.fm-in{animation-name:fmLeft}
  .fm-r.fm-zoom{translate:0 0;scale:.94}.fm-r.fm-zoom.fm-in{animation-name:fmZoom}
  @keyframes fmUp{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  @keyframes fmLeft{from{opacity:0;translate:-28px 0}to{opacity:1;translate:0 0}}
  @keyframes fmZoom{from{opacity:0;scale:.94}to{opacity:1;scale:1}}

  /* ---- Hero: slow cinematic drift + parallax, staggered intro, CTA shimmer ---- */
  .fin-hero-poster{animation:fmKen 26s ease-in-out infinite alternate;translate:0 var(--fm-py,0px);will-change:scale,translate}
  @keyframes fmKen{from{scale:1}to{scale:1.08}}
  .fin-hero-content>*{animation:fmUp .9s cubic-bezier(.22,.8,.3,1) both}
  .fin-hero-content>*:nth-child(1){animation-delay:.05s}
  .fin-hero-content>*:nth-child(2){animation-delay:.18s}
  .fin-hero-content>*:nth-child(3){animation-delay:.32s}
  .fin-hero-content>*:nth-child(4){animation-delay:.46s}
  .fin-hero-primary{position:relative;overflow:hidden}
  .fin-hero-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);translate:-120% 0;animation:fmShine 5.5s ease-in-out 2.2s infinite;pointer-events:none}
  @keyframes fmShine{0%,60%{translate:-120% 0}100%{translate:120% 0}}
  .fin-hero-dot{animation:fmDot 3s ease-in-out infinite}
  @keyframes fmDot{50%{scale:1.5;opacity:.6}}

  /* ---- Card hover polish (lift only) ---- */
  .fin-service-card,.fin-bank-card,.fin-review-card,.fin-why-card-v2,.fin-insight-card,.fin-complex-card,.fin-knowledge-card,.fin-comparison-card,.fin-bank-box{transition:translate .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease}
  .fin-service-card:hover,.fin-bank-card:hover,.fin-review-card:hover,.fin-why-card-v2:hover,.fin-insight-card:hover,.fin-complex-card:hover,.fin-knowledge-card:hover,.fin-comparison-card:hover,.fin-bank-box:hover{translate:0 -5px;box-shadow:0 18px 38px rgba(46,30,107,.13)}

  /* ---- Buttons: tactile press ---- */
  button,[role=button],.fin-hero-primary,.fin-hero-secondary,.fin-digital-cta{transition-property:translate,scale,transform,box-shadow,background-color,border-color,color,opacity;transition-duration:.25s}
  button:active,.fin-hero-primary:active,.fin-hero-secondary:active,.fin-digital-cta:active{scale:.97}

  /* ---- Calculator polish ---- */
  .fin-calc-section input[type=range]{cursor:pointer}
  .fin-calc-section input[type=range]::-webkit-slider-thumb{transition:scale .2s ease,box-shadow .2s ease}
  .fin-calc-section input[type=range]::-moz-range-thumb{transition:scale .2s ease,box-shadow .2s ease}
  .fin-calc-section input[type=range]:hover::-webkit-slider-thumb{scale:1.15}
  .fin-calc-section input[type=range]:active::-webkit-slider-thumb{scale:1.3;box-shadow:0 0 0 8px rgba(91,74,176,.15)}
  .fin-calc-section input[type=range]:hover::-moz-range-thumb{scale:1.15}
  .fin-calc-section input[type=range]:active::-moz-range-thumb{scale:1.3;box-shadow:0 0 0 8px rgba(91,74,176,.15)}
  .fin-calc-section input:not([type=range]),.fin-calc-section select{transition:box-shadow .25s ease,border-color .25s ease}
  .fin-calc-section input:not([type=range]):focus,.fin-calc-section select:focus{box-shadow:0 0 0 4px rgba(91,74,176,.14)}
  .fin-calc-results{transition:box-shadow .5s ease}
  .fin-calc-results.fm-tick{animation:fmTick .9s ease-out}
  @keyframes fmTick{0%{box-shadow:0 0 0 0 rgba(91,74,176,.35)}100%{box-shadow:0 0 0 18px rgba(91,74,176,0)}}
  .fin-value-box{transition:translate .25s ease,box-shadow .25s ease}
  .fin-value-box:hover{translate:0 -2px;box-shadow:0 8px 20px rgba(46,30,107,.08)}
  .fin-repayment-donut.fm-r{translate:0 0;scale:.8;rotate:-90deg}
  .fin-repayment-donut.fm-r.fm-in{animation:fmDonut 1.1s cubic-bezier(.22,.8,.3,1) both}
  @keyframes fmDonut{from{opacity:0;scale:.8;rotate:-90deg}to{opacity:1;scale:1;rotate:0deg}}
  .fin-repayment-legend>div{animation:fmUp .6s ease both}
  .fin-repayment-legend>div:nth-child(2){animation-delay:.12s}

  /* ---- Bank logo strip + FAQ ---- */
  .fin-bank-box img{transition:scale .35s ease,filter .35s ease}
  .fin-bank-box:hover img{scale:1.06}
  .fin-faq-item{transition:background-color .3s ease,box-shadow .3s ease}
  .fin-faq-item:hover{box-shadow:0 10px 24px rgba(46,30,107,.07)}

  /* ---- Floating WhatsApp button: gentle attention pulse ---- */
  .fin-whatsapp-logo{animation:fmFloat 4s ease-in-out infinite}
  @keyframes fmFloat{50%{translate:0 -4px}}

  html{scroll-behavior:smooth}
}