/* site-fx.css - Dream Financial / Loanora shared animation layer (logo colours: navy, green, gold) */
:root{--sfx-navy:#0f3d78;--sfx-blue:#1a4f8a;--sfx-green:#2f9e44;--sfx-gold:#d9a441;--sfx-ease:cubic-bezier(.16,1,.3,1)}

/* ---------- 1. SPLASH LOADER (first visit of the session) ---------- */
html.sfx-load{background:#061633}
html.sfx-load body{visibility:hidden;animation:sfxFail 0s 6s forwards}
@keyframes sfxFail{to{visibility:visible}}
#sfxLoader{position:fixed;inset:0;z-index:2147483000;visibility:visible;display:grid;place-items:center;overflow:hidden;cursor:pointer;
 background:radial-gradient(60% 50% at 18% 20%,rgba(47,158,68,.40),transparent 70%),radial-gradient(55% 45% at 85% 85%,rgba(217,164,65,.28),transparent 70%),linear-gradient(135deg,#061633 0%,#0f3d78 55%,#1a4f8a 100%);
 clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.77,0,.18,1)}
#sfxLoader.out{clip-path:inset(0 0 100% 0)}
#sfxLoader::before{content:"";position:absolute;width:140vmax;height:140vmax;left:50%;top:50%;margin:-70vmax;opacity:.07;
 background:conic-gradient(from 0deg,transparent,#fff,transparent 25%,#fff,transparent 50%,#fff,transparent 75%);animation:sfxSpin 24s linear infinite}
@keyframes sfxSpin{to{transform:rotate(360deg)}}
.sfx-box{position:relative;text-align:center;color:#fff;font-family:"Plus Jakarta Sans","Outfit",system-ui,sans-serif;transition:transform .7s ease,opacity .5s ease}
#sfxLoader.out .sfx-box{transform:scale(1.12);opacity:0}
.sfx-logo{position:relative;width:150px;height:150px;margin:0 auto 26px;border-radius:34px;background:#fff;display:grid;place-items:center;
 box-shadow:0 24px 70px rgba(0,0,0,.4);animation:sfxPop .9s cubic-bezier(.34,1.56,.64,1) both}
.sfx-logo img{width:130px;height:130px;object-fit:contain;border-radius:22px}
.sfx-logo::before,.sfx-logo::after{content:"";position:absolute;inset:-14px;border-radius:46px;border:2px solid rgba(255,255,255,.4);animation:sfxRing 2s ease-out infinite}
.sfx-logo::after{animation-delay:1s;border-color:rgba(217,164,65,.6)}
@keyframes sfxRing{from{transform:scale(.92);opacity:1}to{transform:scale(1.35);opacity:0}}
@keyframes sfxPop{from{transform:scale(.4) rotate(-8deg);opacity:0}}
.sfx-name{font:800 46px/1 "Outfit","Plus Jakarta Sans",sans-serif;letter-spacing:7px;text-transform:uppercase;margin:0 0 8px;animation:sfxUp .8s .35s var(--sfx-ease) both}
.sfx-name em{font-style:normal;background:linear-gradient(90deg,#5fd07b,#e8b954);-webkit-background-clip:text;background-clip:text;color:transparent}
.sfx-tag{font-size:12.5px;letter-spacing:3px;text-transform:uppercase;opacity:.8;margin-bottom:30px;animation:sfxUp .8s .5s var(--sfx-ease) both}
@keyframes sfxUp{from{opacity:0;transform:translateY(22px)}}
.sfx-track{width:min(320px,70vw);height:5px;margin:0 auto 10px;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden}
.sfx-track i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#2f9e44,#d9a441)}
.sfx-pct{font:700 13px "Plus Jakarta Sans",sans-serif;opacity:.85}

/* ---------- 2. PAGE FADE ---------- */
body{animation:sfxBodyIn .45s ease both}
@keyframes sfxBodyIn{from{opacity:0}}
html.sfx-leave body{opacity:0;transition:opacity .2s ease}

/* ---------- 3. PROGRESS BAR + BACK TO TOP ---------- */
#sfxProg{position:fixed;top:0;left:0;height:3px;width:100%;z-index:2147482000;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#2f9e44,#1a4f8a,#d9a441);pointer-events:none}
#sfxTop{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border:0;border-radius:50%;z-index:4900;cursor:pointer;background:#fff;color:var(--sfx-navy);
 box-shadow:0 10px 28px rgba(15,61,120,.25);display:grid;place-items:center;scale:0;opacity:0;transition:scale .35s cubic-bezier(.34,1.56,.64,1),opacity .3s,box-shadow .3s}
#sfxTop.on{scale:1;opacity:1}#sfxTop:hover{box-shadow:0 14px 34px rgba(47,158,68,.35)}
#sfxTop svg{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg)}
#sfxTop circle{fill:none;stroke-width:3}#sfxTop .t{stroke:#e3e9f3}#sfxTop .p{stroke:url(#sfxG);stroke-linecap:round;stroke-dasharray:125.7;stroke-dashoffset:125.7}
#sfxTop b{position:relative;font-size:18px;line-height:1}

/* ---------- 4. NAVBAR ---------- */
.navbar.sfx-hide{translate:0 -110%}
.navbar.sfx-glass{box-shadow:0 10px 34px rgba(15,61,120,.14)}

/* ---------- 5. HERO ---------- */
.sfx-hero{isolation:isolate}
.sfx-kb{position:absolute;inset:-5%;z-index:-3;background-size:cover;background-position:center;animation:sfxKB 20s ease-in-out infinite alternate}
@keyframes sfxKB{from{transform:scale(1)}to{transform:scale(1.08)}}
.sfx-ov{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.3;background:linear-gradient(110deg,rgba(6,22,51,.78),rgba(15,61,120,.38) 60%,rgba(47,158,68,.12))}
html.sfx-go .sfx-ov{animation:sfxOv 1.8s ease forwards}
@keyframes sfxOv{to{opacity:.85}}
.sfx-parts{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sfx-p{position:absolute;border-radius:50%;opacity:.3;animation:sfxDrift var(--t,18s) ease-in-out infinite alternate}
@keyframes sfxDrift{to{transform:translate(var(--dx),var(--dy))}}
.sfx-w{display:inline-block;font-style:normal;will-change:transform,opacity}
.sfx-hero .hero-floating{animation:sfxFloat 4s ease-in-out infinite,sfxTilt 6s ease-in-out infinite alternate!important}
@keyframes sfxFloat{50%{translate:0 -8px}}
@keyframes sfxTilt{from{rotate:-1deg}to{rotate:1deg}}
.sfx-hero .btn-glass{position:relative}
.sfx-hero .btn-glass::after{content:"";position:absolute;left:22px;right:22px;bottom:9px;height:2px;border-radius:2px;background:linear-gradient(90deg,#5fd07b,#e8b954);scale:0 1;transform-origin:left;transition:scale .45s var(--sfx-ease)}
.sfx-hero .btn-glass:hover::after{scale:1 1}

/* ---------- 6. SECTIONS + CARDS ---------- */
.sfx-pre{opacity:0}
.sfx-card{transition:translate .4s var(--sfx-ease),scale .15s ease,box-shadow .4s var(--sfx-ease),transform .4s var(--sfx-ease),background-color .3s,border-color .3s!important}
.sfx-card:hover{translate:0 -6px;box-shadow:0 20px 44px rgba(37,99,235,.16),0 4px 12px rgba(15,61,120,.08)!important}
.sfx-card.sfx-press{scale:.98}
.sfx-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
 background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.12),transparent 60%)}
.sfx-card:hover>.sfx-spot{opacity:1}
.sfx-card:hover [class*="icon"]{animation:sfxWiggle .6s ease}
@keyframes sfxWiggle{30%{rotate:8deg}60%{rotate:-6deg}}

/* ---------- 7. CALCULATOR ---------- */
.panel.active>.card:nth-child(odd){animation:sfxInL .7s var(--sfx-ease) both}
.panel.active>.card:nth-child(even){animation:sfxInR .7s .08s var(--sfx-ease) both}
@keyframes sfxInL{from{opacity:0;translate:-60px 0}}
@keyframes sfxInR{from{opacity:0;translate:60px 0}}
input:focus,select:focus,textarea:focus{border-color:#1a4f8a!important;box-shadow:0 0 0 4px rgba(26,79,138,.16)!important;transition:box-shadow .2s ease,border-color .2s ease}
input[type=range].sfx-pulse::-webkit-slider-thumb{animation:sfxGlow .5s ease}
input[type=range].sfx-pulse::-moz-range-thumb{animation:sfxGlow .5s ease}
@keyframes sfxGlow{40%{box-shadow:0 0 0 10px rgba(37,99,235,.28),0 0 22px rgba(37,99,235,.55)}}
.submit{position:relative;overflow:hidden;transition:scale .12s ease,filter .2s}
.submit:active{scale:.96}
.submit::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);translate:-120% 0;animation:sfxSheen 3.2s ease-in-out infinite;pointer-events:none}
@keyframes sfxSheen{55%,100%{translate:120% 0}}
.bar>div{transition:width 1s cubic-bezier(.65,0,.35,1)}
.sfx-d{display:inline-block;animation:sfxFlip .5s both}
@keyframes sfxFlip{from{opacity:0;transform:perspective(300px) rotateX(-90deg)}}
.result-hero .value{transition:text-shadow .6s}
.sfx-glow{text-shadow:0 0 22px rgba(37,99,235,.55)}
/* locked foreclosure card */
.sfx-locked{position:relative;overflow:hidden}
.sfx-locked::before{content:"";position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(26,79,138,.14),transparent 58%);animation:sfxBg 3s ease-in-out infinite alternate}
@keyframes sfxBg{to{transform:scale(1.07)}}
.placeholder .big{position:relative;display:block;width:72px;height:72px;margin:0 auto 14px;line-height:0}
.sfx-lock{transform-origin:50% 12%;animation:sfxShake 3s ease-in-out infinite}
@keyframes sfxShake{0%,76%,100%{rotate:0deg}80%{rotate:-3deg}85%{rotate:3deg}90%{rotate:-2deg}95%{rotate:2deg}}
.sfx-lock.sfx-unlock{animation:sfxUnlock .6s ease forwards}
@keyframes sfxUnlock{to{scale:1.3;opacity:0}}
.sfx-check{position:absolute;inset:0;width:72px;height:72px}
.sfx-check circle,.sfx-check path{fill:none;stroke:#22c55e;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:150;stroke-dashoffset:150;animation:sfxDraw .7s .3s ease forwards}
.sfx-check path{stroke-dasharray:50;stroke-dashoffset:50;animation-delay:.6s}
@keyframes sfxDraw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){.sfx-kb,.sfx-p,.sfx-lock,.submit::after,.sfx-hero .hero-floating{animation:none!important}body{animation:none}}