/* ===================================================================== Elite Property — FX pack (animations + extra UI elements) Layered on top of the Elite Property Homepage plugin. Layout untouched. Everything is gated behind html.fx (added in ) so nothing hides if JavaScript fails. ===================================================================== */ /* ---------- page-load orchestration ---------- */ .fx .site-header .bar{animation:fxDrop .9s cubic-bezier(.2,.7,.2,1) both} @keyframes fxDrop{from{opacity:0;transform:translateY(-120%)}to{opacity:1;transform:none}} .fx .hero .hero-grid>.fade:first-child>*{animation:fxRise .9s cubic-bezier(.2,.7,.2,1) both} .fx .hero .hero-grid>.fade:first-child>:nth-child(1){animation-delay:.1s} .fx .hero .hero-grid>.fade:first-child>:nth-child(2){animation-delay:.2s} .fx .hero .hero-grid>.fade:first-child>:nth-child(3){animation-delay:.3s} .fx .hero .hero-grid>.fade:first-child>:nth-child(4){animation-delay:.4s} .fx .hero .hero-grid>.fade:first-child>:nth-child(5){animation-delay:.52s} .fx .hero .hero-grid>.fade:first-child>:nth-child(6){animation-delay:.64s} .fx .hero .hero-grid>.fade:first-child>:nth-child(7){animation-delay:.76s} @keyframes fxRise{from{opacity:0;transform:translateY(26px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}} .fx .hero .checks li{animation:fxSlideR .7s cubic-bezier(.2,.7,.2,1) both} .fx .hero .checks li:nth-child(1){animation-delay:.75s} .fx .hero .checks li:nth-child(2){animation-delay:.87s} .fx .hero .checks li:nth-child(3){animation-delay:.99s} @keyframes fxSlideR{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}} .fx .hero .checks .mark.ok{animation:fxPopIn .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:inherit} @keyframes fxPopIn{from{transform:scale(0)}to{transform:scale(1)}} /* hero headline shimmer on the serif phrase */ .fx .hero .h-display .serif{background:linear-gradient(100deg,#fff 0%,#fff 35%,#a1baff 48%,#fff 60%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxTextShine 6s ease-in-out infinite} @keyframes fxTextShine{0%,30%{background-position:100% 0}70%,100%{background-position:0 0}} /* ---------- richer scroll reveals ---------- */ .fx .fade{filter:blur(6px);transition:opacity .85s ease,transform .95s cubic-bezier(.2,.7,.2,1),filter .85s ease} .fx .fade.in{filter:none} .fx .fade.fx-l{transform:translateX(-44px)} .fx .fade.fx-r{transform:translateX(44px)} .fx .fade.fx-s{transform:translateY(30px) scale(.94)} .fx .fade.in.fx-l,.fx .fade.in.fx-r,.fx .fade.in.fx-s{transform:none} /* headline word split (for headings not already using .wr) */ .fx-words .fw{display:inline-block;opacity:0;transform:translateY(.45em) rotate(3deg);filter:blur(6px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .7s ease} .fx-words.in .fw{opacity:1;transform:none;filter:none} /* brush underline that draws under serif phrases in section titles */ .fx .fx-ul{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C40 3.5 90 2.5 198 6.5' fill='none' stroke='%23a1baff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 100%;background-size:0% .32em;padding-bottom:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s cubic-bezier(.7,0,.2,1) .35s} .fx .fx-ul.in{background-size:100% .32em} /* image wipe reveal in dotted frames */ .fx .dotframe{position:relative;overflow:hidden} .fx .dotframe img{clip-path:inset(0 0 100% 0 round .55rem);transform:scale(1.18);transition:clip-path 1.15s cubic-bezier(.75,0,.2,1),transform 1.6s cubic-bezier(.2,.7,.2,1),filter .5s ease} .fx .dotframe.fx-in img{clip-path:inset(0 0 0 0 round .55rem);transform:none} .fx .dotframe:hover img{filter:saturate(1.15) brightness(1.05)} .fx-sheen{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;border-radius:inherit} .fx-sheen::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-160%) skewX(-18deg)} .dotframe:hover .fx-sheen::before,.fx-tilt:hover .fx-sheen::before{transform:translateX(420%) skewX(-18deg);transition:transform 1s ease} /* 3D tilt + glare */ .fx-tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform} .fx-tilt.tilting{transition:transform .08s linear} .fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;opacity:0;transition:opacity .35s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 55%);mix-blend-mode:soft-light} .fx-tilt:hover .fx-glare{opacity:1} /* staggered list reveals inside cards */ .fx .vcard .checks li,.fx .final .dots li,.fx .letter .lchecks li{opacity:0;transform:translateX(-14px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1)} .fx .vcard.in .checks li,.fx .final .card.in .dots li,.fx .fx-in .lchecks li{opacity:1;transform:none} .fx .vcard .checks li:nth-child(1),.fx .final .dots li:nth-child(1),.fx .lchecks li:nth-child(1){transition-delay:.35s} .fx .vcard .checks li:nth-child(2),.fx .final .dots li:nth-child(2),.fx .lchecks li:nth-child(2){transition-delay:.45s} .fx .vcard .checks li:nth-child(3),.fx .final .dots li:nth-child(3),.fx .lchecks li:nth-child(3){transition-delay:.55s} .fx .vcard .checks li:nth-child(4),.fx .lchecks li:nth-child(4){transition-delay:.65s} .fx .vcard .checks li:nth-child(5){transition-delay:.75s} .fx .vcard.in .mark.no{animation:fxShake .5s ease both} .fx .vcard.in .checks li:nth-child(1) .mark.no{animation-delay:.5s} .fx .vcard.in .checks li:nth-child(2) .mark.no{animation-delay:.6s} .fx .vcard.in .checks li:nth-child(3) .mark.no{animation-delay:.7s} .fx .vcard.in .checks li:nth-child(4) .mark.no{animation-delay:.8s} .fx .vcard.in .checks li:nth-child(5) .mark.no{animation-delay:.9s} @keyframes fxShake{0%,100%{transform:none}25%{transform:translateX(-3px) rotate(-8deg)}50%{transform:translateX(3px) rotate(8deg)}75%{transform:translateX(-2px)}} .fx .vcard.in .mark.ok{animation:fxPopIn .45s cubic-bezier(.3,1.6,.5,1) both} .fx .vcard.in .checks li:nth-child(1) .mark.ok{animation-delay:.4s} .fx .vcard.in .checks li:nth-child(2) .mark.ok{animation-delay:.5s} .fx .vcard.in .checks li:nth-child(3) .mark.ok{animation-delay:.6s} .fx .vcard.in .checks li:nth-child(4) .mark.ok{animation-delay:.7s} .fx .vcard.in .checks li:nth-child(5) .mark.ok{animation-delay:.8s} .vcard .tag:not(.risk){position:relative;animation:fxTagGlow 2.4s ease-in-out infinite} @keyframes fxTagGlow{0%,100%{box-shadow:0 0 0 0 rgba(161,186,255,.55)}50%{box-shadow:0 0 0 6px rgba(161,186,255,0)}} .fx-ripple-ring{position:absolute;inset:0;border-radius:inherit;border:1.5px solid rgba(161,186,255,.7);pointer-events:none;animation:fxCompRipple 3.2s ease-out infinite} .fx-ripple-ring.d2{animation-delay:1.6s} @keyframes fxCompRipple{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.045)}} /* star pop */ .fx .fade.in .stars svg,.fx .trust .stars svg{animation:fxStar .5s cubic-bezier(.3,1.6,.5,1) both} .fx .stars svg:nth-child(2){animation-delay:.08s!important} .fx .stars svg:nth-child(3){animation-delay:.16s!important} .fx .stars svg:nth-child(4){animation-delay:.24s!important} .fx .stars svg:nth-child(5){animation-delay:.32s!important} @keyframes fxStar{from{transform:scale(0) rotate(-90deg);opacity:0}to{transform:none;opacity:1}} /* offer numbers pop + icon float */ .fx .ocard.in .num{animation:fxNum .9s cubic-bezier(.3,1.4,.5,1) .25s both} @keyframes fxNum{from{opacity:0;transform:scale(.55);filter:blur(10px)}to{opacity:1;transform:none;filter:none}} .fx .ocard .icon-orb,.fx .vcard .icon-orb{animation:fxBob 4.5s ease-in-out infinite} .fx .ocard:nth-child(2) .icon-orb{animation-delay:-1.5s}.fx .ocard:nth-child(3) .icon-orb{animation-delay:-3s} .fx .vcard:nth-child(2) .icon-orb{animation-delay:-2.2s} @keyframes fxBob{0%,100%{translate:0 0}50%{translate:0 -7px}} /* stat cards: metallic sheen */ .fx .stat{position:relative;overflow:hidden;isolation:isolate} .fx .stat::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(161,186,255,.16),transparent);transform:translateX(-120%) skewX(-15deg);animation:fxMetal 7s ease-in-out infinite;pointer-events:none;z-index:-1} .fx .stat:nth-child(2)::after{animation-delay:1.2s}.fx .stat:nth-child(3)::after{animation-delay:2.4s} @keyframes fxMetal{0%,65%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(320%) skewX(-15deg)}} /* process: glowing tip on progress bar + active number gradient */ .phase-bar i{position:relative} .phase-bar i::after{content:"";position:absolute;left:50%;bottom:-5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(161,186,255,.35),0 0 22px 6px rgba(161,186,255,.7)} @media(min-width:900px){.fx .process .phase.active .n{background:linear-gradient(180deg,#fff 30%,#a1baff);-webkit-background-clip:text;background-clip:text;color:transparent}} .fx .process .phase h3{transition:transform .5s cubic-bezier(.2,.7,.2,1)} @media(min-width:900px){.fx .process .phase.active h3{transform:translateX(8px)}} /* ---------- rotating conic glow border ---------- */ .fx-border{position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:6;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .fx-border i,.fx-border-glow i{position:absolute;left:50%;top:50%;width:var(--d,150%);height:var(--d,150%);margin:calc(var(--d,150%) / -2) 0 0 calc(var(--d,150%) / -2);background:conic-gradient(transparent 0deg,transparent 250deg,rgba(161,186,255,.9) 300deg,#fff 330deg,rgba(161,186,255,.9) 345deg,transparent 360deg);animation:fxRot 6s linear infinite paused;will-change:transform} .fx-border.slow{opacity:.7}.fx-border.slow i{animation-duration:10s} .fx-vis>.fx-border i,.fx-vis>.fx-border-glow i{animation-play-state:running} @keyframes fxRot{to{transform:rotate(360deg)}} .fx-border-glow{position:absolute;inset:-14px;border-radius:inherit;pointer-events:none;z-index:-1;overflow:hidden;filter:blur(20px);opacity:.8} .fx-border-glow i{background:conic-gradient(transparent 0deg 250deg,rgba(66,116,255,.6) 320deg,transparent 360deg)} /* ---------- buttons ---------- */ .btn,.opt,.round-btn,.pill-more{overflow:hidden;isolation:isolate} .btn,.round-btn,.rbadge,.menu-btn{translate:var(--mgx,0) var(--mgy,0);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,translate .35s cubic-bezier(.2,.7,.2,1)} .fx-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(66,116,255,.35);transform:scale(0);animation:fxRip .65s ease-out forwards;z-index:0} .btn-ghost .fx-rip,.round-btn .fx-rip,.pill-more .fx-rip,.opt .fx-rip{background:rgba(255,255,255,.28)} @keyframes fxRip{to{transform:scale(1);opacity:0}} /* CTA pulse (Conversion Factory style) */ .fx .hero .btn-row .btn-primary,.fx .header-actions .btn-primary{animation:fxCta 2.2s ease-out infinite} @keyframes fxCta{0%{outline:2px solid rgba(255,255,255,.55);outline-offset:0}80%,100%{outline:2px solid rgba(255,255,255,0);outline-offset:9px}} .fx .hero .btn-row .btn-primary:focus-visible,.fx .header-actions .btn-primary:focus-visible{animation:none} /* periodic nav CTA shimmer */ .fx .header-actions .btn-primary::after,.fx .hero .btn-row .btn-primary::after{animation:fxNavShim 5.5s ease-in-out infinite} @keyframes fxNavShim{0%,86%{left:-60%;opacity:0}88%{opacity:.6}100%{left:130%;opacity:.6}} /* arrow nudge */ .fx .btn-primary .arrow{animation:fxNudge 2.4s ease-in-out infinite} @keyframes fxNudge{0%,70%,100%{transform:none}80%{transform:translateX(4px)}90%{transform:translateX(0)}} /* rotating badge ripple bursts */ .fx-burst{position:absolute;width:3.2rem;height:3.2rem;left:calc(50% - 1.6rem);top:calc(50% - 1.6rem);border-radius:50%;border:1.5px solid rgba(255,91,102,.55);pointer-events:none;animation:fxBurst 4.5s ease-out infinite} .fx-burst:nth-child(2){animation-delay:.45s}.fx-burst:nth-child(3){animation-delay:.9s} @keyframes fxBurst{0%{opacity:.7;transform:scale(1)}40%,100%{opacity:0;transform:scale(2.7)}} .fx .rbadge .core{animation:fxCoreBeat 4.5s ease-in-out infinite} @keyframes fxCoreBeat{0%,100%{scale:1}6%{scale:1.12}12%{scale:1}} /* ---------- hero extras ---------- */ .fx-float{position:absolute;z-index:8;pointer-events:none;display:none} @media(min-width:1024px){.fx-float{display:flex}} .fx-float .fx-card{display:flex;align-items:center;gap:.55rem;padding:.5rem .8rem .5rem .5rem;border-radius:999px;background:rgba(10,14,50,.72);border:1px solid rgba(161,186,255,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px rgba(0,0,40,.45),inset 0 1px 0 rgba(255,255,255,.12);font-size:.72rem;color:#fff;white-space:nowrap;animation:fxFloatY 5s ease-in-out infinite} .fx-float .fx-card small{display:block;font-size:.62rem;color:var(--white-60)} .fx-float .fx-ic{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#4274ff,#001bd1);box-shadow:0 0 0 3px rgba(66,116,255,.25)} .fx-float .fx-ic svg{width:.9rem;height:.9rem;color:#fff} .fx-float.f1{top:-1.35rem;right:1.5rem;animation:fxRise .9s cubic-bezier(.2,.7,.2,1) 1.1s both} .fx-float.f2{left:-2.4rem;top:44%;animation:fxRise .9s cubic-bezier(.2,.7,.2,1) 1.3s both} .fx-float.f2 .fx-card{animation-delay:-2s;flex-direction:column;padding:.7rem;border-radius:1rem;gap:.35rem;text-align:center} .fx-float.f3{right:-1.6rem;top:30%;animation:fxRise .9s cubic-bezier(.2,.7,.2,1) 1.5s both} .fx-float.f3 .fx-card{animation-delay:-3.5s;border-radius:1rem;flex-direction:column;padding:.6rem .7rem;gap:.25rem} @keyframes fxFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .fx-rot{display:inline-block;transition:opacity .4s,transform .4s} .fx-rot.out{opacity:0;transform:translateY(6px)} .fx-gauge{width:3.6rem;height:.3rem;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden} .fx-gauge i{display:block;height:100%;width:28%;border-radius:inherit;background:linear-gradient(90deg,#7dffb0,#a1baff);animation:fxGauge 3.2s ease-in-out infinite} @keyframes fxGauge{0%,100%{width:18%}50%{width:34%}} .fx-timer{position:relative;width:2.3rem;height:2.3rem} .fx-timer svg{width:100%;height:100%;transform:rotate(-90deg)} .fx-timer circle.run{stroke-dasharray:100;animation:fxTimer 30s linear infinite} @keyframes fxTimer{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} .fx-timer b{position:absolute;inset:0;display:grid;place-items:center;font-size:.58rem;font-weight:700} .fx-spark{position:absolute;width:10px;height:10px;pointer-events:none;z-index:0;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:fxTwinkle 3.6s ease-in-out infinite} @keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(90deg)}} .fx-bub{position:absolute;border-radius:50%;pointer-events:none;z-index:9;border:1px solid rgba(255,255,255,.7);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.75),rgba(255,255,255,.08) 35%,transparent 65%);animation:fxBub .9s cubic-bezier(.2,.7,.2,1) forwards} @keyframes fxBub{from{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(1);opacity:0}} /* before/after hint pill */ .fx-hint{position:absolute;left:50%;bottom:1rem;z-index:3;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;border-radius:99px;font-size:.72rem;color:#fff;background:rgba(13,12,12,.72);border:1px solid var(--white-15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;transition:opacity .4s,transform .4s} .fx-hint svg{width:.85rem;height:.85rem;animation:fxSway 1.6s ease-in-out infinite} .fx-hint.gone{opacity:0;transform:translate(-50%,8px)} @keyframes fxSway{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}} .ba .knob{transition:transform .25s} .ba:hover .knob{transform:scale(1.12)} .ba .knob::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:fxKnob 2s ease-out infinite} @keyframes fxKnob{from{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.5)}} /* ---------- offers countdown ---------- */ .fx-count{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin:2rem auto 0} .fx-count>span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--white-60)} .fx-count .cells{display:flex;gap:.5rem} .fx-count .cell{min-width:3.9rem;padding:.55rem .4rem .45rem;border-radius:.8rem;background:linear-gradient(180deg,#0b1030,#0d0c0c);border:1px solid rgba(66,116,255,.35);box-shadow:0 10px 30px rgba(0,0,30,.35),inset 0 1px 0 rgba(255,255,255,.08);text-align:center;overflow:hidden} .fx-count .cell b{display:block;font-family:var(--font-heading);font-weight:500;font-size:1.6rem;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .fx-count .cell b.tick{animation:fxFlip .45s cubic-bezier(.2,.7,.2,1)} .fx-count .cell small{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--white-50)} @keyframes fxFlip{from{transform:translateY(-60%);opacity:0}to{transform:none;opacity:1}} /* ---------- kinetic ribbons between sections ---------- */ .fx-ribbon{position:relative;z-index:3;height:0;pointer-events:none} .fx-ribbon .band{position:absolute;left:-10vw;right:-10vw;top:-1.6rem;height:3.2rem;display:flex;align-items:center;overflow:hidden;white-space:nowrap} .fx-ribbon .band.a{transform:rotate(-2.2deg);background:#fff;color:var(--navy-800);box-shadow:0 18px 40px rgba(0,0,40,.35)} .fx-ribbon .band.b{transform:rotate(1.8deg);background:var(--ink);color:#fff;border-block:1px solid rgba(66,116,255,.4)} .fx-ribbon .row{display:flex;gap:2.2rem;padding-right:2.2rem;font-family:var(--font-heading);font-weight:600;font-size:1rem;letter-spacing:-.01em;will-change:transform} .fx-ribbon .row>span{display:inline-block;white-space:nowrap} .fx-ribbon .row{align-items:center} .fx-ribbon .row em{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:1.15rem} .fx-ribbon .row i{display:inline-block;width:.7rem;height:.7rem;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:.7} @media(max-width:639px){.fx-ribbon .band{height:2.5rem;top:-1.25rem}.fx-ribbon .row{font-size:.85rem}} /* ---------- floating UI ---------- */ /* cursor */ .fx-cur,.fx-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:9998;border-radius:50%;opacity:0;transition:opacity .3s} .fx-cur{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;transition:width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1),margin .3s cubic-bezier(.2,.7,.2,1),background-color .3s,border-color .3s,opacity .3s} .fx-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff} .fx-cur b{font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-800);opacity:0;transition:opacity .2s} .fx-cur-on .fx-cur,.fx-cur-on .fx-dot{opacity:1} .fx-cur.hov{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.9)} .fx-cur.lbl{width:72px;height:72px;margin:-36px 0 0 -36px;background:#fff;border-color:#fff} .fx-cur.lbl b{opacity:1} .fx-cur.lbl~.fx-dot,.fx-cur.hov~.fx-dot{opacity:0} .fx-cur.down{width:30px;height:30px;margin:-15px 0 0 -15px} /* back to top w/ progress ring */ .fx-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:45;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:rgba(10,14,50,.75);border:1px solid var(--white-15);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .35s,visibility .35s,transform .35s,background-color .2s} .fx-top.show{opacity:1;visibility:visible;transform:none} .fx-top:hover{background:rgba(0,36,255,.9)} .fx-top svg.ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg)} .fx-top svg.ring circle{fill:none;stroke-width:2} .fx-top svg.arr{width:1rem;height:1rem;transition:transform .25s} .fx-top:hover svg.arr{transform:translateY(-3px)} @media(max-width:759px){.fx-top{bottom:5.2rem;right:.8rem;width:2.6rem;height:2.6rem}} /* side section dots */ .fx-side{position:fixed;right:1.2rem;top:50%;z-index:40;display:none;flex-direction:column;gap:.7rem;transform:translateY(-50%);opacity:0;transition:opacity .4s} .fx-side.show{opacity:1} @media(min-width:1280px){.fx-side{display:flex}} .fx-side a{position:relative;display:block;width:.55rem;height:.55rem;border-radius:99px;background:rgba(255,255,255,.3);transition:height .35s cubic-bezier(.2,.7,.2,1),background-color .3s} .fx-side a.on{height:1.7rem;background:#fff} .fx-side a span{position:absolute;right:1.3rem;top:50%;transform:translate(6px,-50%);white-space:nowrap;font-size:.7rem;padding:.25rem .6rem;border-radius:99px;background:rgba(10,14,50,.85);border:1px solid var(--white-15);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s} .fx-side a:hover span,.fx-side a:focus-visible span{opacity:1;transform:translate(0,-50%)} .menu-open .fx-side,.menu-open .fx-top,.menu-open .fx-mbar,.menu-open .fx-toast{opacity:0!important;pointer-events:none} /* mobile sticky CTA bar */ .fx-mbar{position:fixed;left:.6rem;right:.6rem;bottom:calc(.6rem + env(safe-area-inset-bottom));z-index:46;display:flex;gap:.5rem;padding:.45rem;border-radius:999px;background:rgba(6,12,70,.82);border:1px solid rgba(161,186,255,.3);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 40px rgba(0,0,30,.5);transform:translateY(160%);transition:transform .5s cubic-bezier(.2,.7,.2,1)} .fx-mbar.show{transform:none} .fx-mbar .btn{flex:1;padding:.7rem .8rem;min-height:44px} .fx-mbar .btn-ghost{flex:0 0 auto;color:#fff} @media(min-width:760px){.fx-mbar{display:none}} .fx-mbar svg{width:1rem;height:1rem;flex:none}.fx-mbar .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap} /* review toast */ .fx-toast{position:fixed;left:1.2rem;bottom:1.2rem;z-index:44;width:20rem;padding:.95rem 1rem .9rem;border-radius:1rem;background:rgba(13,12,12,.9);border:1px solid rgba(66,116,255,.35);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 50px rgba(0,0,30,.5);transform:translateX(-120%);opacity:0;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s} .fx-toast.show{transform:none;opacity:1} .fx-toast .top{display:flex;align-items:center;gap:.5rem;font-size:.68rem;color:var(--white-55);margin-bottom:.45rem} .fx-toast .top img{width:1rem;height:1rem;border-radius:50%;background:#fff;padding:1px} .fx-toast blockquote{margin:0 0 .5rem;font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:.95rem;line-height:1.4;color:var(--parchment)} .fx-toast .by{font-size:.72rem;color:#fff;font-weight:500} .fx-toast .x{position:absolute;top:.5rem;right:.5rem;width:1.6rem;height:1.6rem;border-radius:50%;border:0;background:rgba(255,255,255,.06);color:var(--white-60);cursor:pointer;display:grid;place-items:center} .fx-toast .x:hover{color:#fff;background:rgba(255,255,255,.14)} .fx-toast .bar{position:absolute;left:1rem;right:1rem;bottom:0;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden} .fx-toast .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4274ff,#a1baff);transform-origin:0 50%} .fx-toast.show .bar i{animation:fxToastBar 7s linear forwards} @keyframes fxToastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}} @media(max-width:1023px){.fx-toast{display:none}} /* footer wordmark */ .fx-wordmark{margin-top:2.5rem;font-family:var(--font-heading);font-weight:600;font-size:clamp(3.2rem,13.5vw,12rem);line-height:.85;letter-spacing:-.06em;text-align:center;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(161,186,255,.35);background:linear-gradient(90deg,#fff,#a1baff) no-repeat 0 0/0% 100%;-webkit-background-clip:text;background-clip:text;transition:background-size 1.8s cubic-bezier(.7,0,.2,1);user-select:none;overflow:hidden} .fx-wordmark.fx-in{background-size:100% 100%} .fx-wordmark .serif{font-weight:300;letter-spacing:-.03em} /* FAQ smooth accordion */ .faq details{transition:background-color .3s} .faq details[open]{background:rgba(66,116,255,.06)} .faq details .fx-ans{overflow:hidden} .faq summary{transition:color .2s} .faq summary:hover{color:#a1baff} .faq summary .pm{transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .3s} .faq details[open] summary .pm{background:#fff;color:var(--navy-800)} /* misc micro-interactions */ .fx .scard h3,.fx .rcase h3{transition:color .25s,transform .35s cubic-bezier(.2,.7,.2,1)} .fx .scard:hover h3,.fx .rcase:hover h3{color:#a1baff;transform:translateX(4px)} .fx .rcard{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s} .fx .rev-rows .rcard:hover{transform:translateY(-6px) rotate(-.6deg);border-color:rgba(66,116,255,.45);box-shadow:0 20px 40px rgba(0,0,40,.4)} .fx .awards img{transition:transform .4s cubic-bezier(.3,1.5,.5,1)} .fx .awards img:hover{transform:translateY(-6px) rotate(-3deg) scale(1.06)} .fx .logo-row img{transition:opacity .3s,transform .3s,filter .3s} .fx .logo-row img:hover{opacity:1;transform:scale(1.08)} .fx .pain{transition:transform .35s cubic-bezier(.2,.7,.2,1)} .fx .pain:hover{transform:translateX(8px)} .fx .pain:hover .arr{animation:fxNudge .9s ease-in-out infinite} .fx .q-progress i{position:relative;overflow:hidden} .fx .q-progress i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:fxBarShine 2s ease-in-out infinite} @keyframes fxBarShine{to{transform:translateX(100%)}} .fx .opt .ic{transition:transform .3s cubic-bezier(.3,1.5,.5,1),background-color .3s} .fx .opt:hover .ic{transform:rotate(-8deg) scale(1.08)} .fx .opt:has(input:checked) .ic{background:rgba(66,116,255,.35);transform:scale(1.1)} .fx .opt:has(input:checked) .tick{animation:fxPopIn .35s cubic-bezier(.3,1.6,.5,1)} .fx .icon-orb svg{transition:transform .4s cubic-bezier(.3,1.5,.5,1)} .fx .ocard:hover .icon-orb svg,.fx .vcard:hover .icon-orb svg{transform:scale(1.15) rotate(-8deg)} .fx .team-photo img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .fx .team-photo:hover img{transform:scale(1.03)} .fx .letter{transition:transform .6s cubic-bezier(.2,.7,.2,1)} .fx .letter:hover{transform:rotate(-.6deg) translateY(-4px)} .fx .site-footer ul a{position:relative;transition:color .2s} .fx .site-footer ul a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)} .fx .site-footer ul a:hover::after{transform:scaleX(1);transform-origin:left} .fx .eyebrow.fx-scr{font-variant-numeric:tabular-nums} .fx .final .media img.bg{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)} .fx .final .media:hover img.bg{transform:scale(1.06)} .fx .final .media .chip{animation:fxBob 4s ease-in-out infinite} .fx .q-done.active .icon-orb{animation:fxPopIn .6s cubic-bezier(.3,1.6,.5,1) both} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ .fx *,.fx *::before,.fx *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .fx .fade,.fx-words .fw{filter:none!important} .fx .dotframe img{clip-path:none;transform:none} .fx-cur,.fx-dot,.fx-spark,.fx-float{display:none!important} } /* ===================================================================== Conversion Factory background: spun royal metal, tint, sheen, vignette and mouse-driven 3D tilt. Replaces the plugin's beams/grain. ===================================================================== */ body.eph-home{background:#0019a8} .bgfx{background:#0019a8} .bgfx .beam,.bgfx .grain,.bgfx .guides{display:none} .hero{background:radial-gradient(60% 55% at 22% 38%,rgba(66,116,255,.18),transparent 70%)!important} .cfbg{position:absolute;inset:0;transform-origin:center center;transform:perspective(1200px) rotateX(0deg) rotateY(0deg) scale(1.08);will-change:transform} .cfbg .tex{position:absolute;inset:0;mix-blend-mode:overlay;opacity:0;transition:opacity 1.2s ease} .cfbg .tex.on{opacity:.25} .cfbg .tex img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(.7px) contrast(2.2)} .cfbg .tint{position:absolute;inset:0;background:rgba(0,36,255,.4)} .cfbg .sheen-wrap{position:absolute;inset:0;overflow:hidden} .cfbg .sheen{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(100deg,transparent 0%,transparent 35%,rgba(255,255,255,.5) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.5) 55%,transparent 65%,transparent 100%);background-size:50% 100%;animation:cfSheen 6s ease-in-out infinite} @keyframes cfSheen{0%{transform:translate(-100%) skew(-15deg)}100%{transform:translate(200%) skew(-15deg)}} .cfbg .vig{position:absolute;inset:0;box-shadow:inset 0 0 250px 100px rgba(0,0,0,.4)} @media(max-width:759px){.cfbg .vig{box-shadow:inset 0 0 120px 40px rgba(0,0,0,.4)}} @media (prefers-reduced-motion: reduce){.cfbg .sheen{animation:none;opacity:.12}} /* ---------- performance: lighter effects on phones / touch ---------- */ .fx-lite .fade{filter:none!important;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .fx-lite .fx-words .fw{filter:none} .fx-lite .hero .hero-grid>.fade:first-child>*{animation-name:fxRiseLite} @keyframes fxRiseLite{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} .fx-lite .hero .h-display .serif{animation:none;background:none;color:inherit;-webkit-background-clip:border-box;background-clip:border-box} .fx-lite .fx-sheen,.fx-lite .fx-glare{display:none} .fx-lite .stat::after{display:none} .fx-lite .fx-mbar,.fx-lite .fx-top{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,12,70,.94)} .fx-lite .fx-count .cell b.tick{animation:none} .cfbg .tex canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(.7px) contrast(2.2)} .cfbg .tex.baked canvas{filter:none} /* ---------- performance: hero paints instantly, no waiting for JavaScript ---------- */ .fx .hero .fade{opacity:1;transform:none;filter:none;transition:none} @keyframes fxRise{from{opacity:.2;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes fxRiseLite{from{opacity:.2;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes fxSlideR{from{opacity:.2;transform:translateX(-18px)}to{opacity:1;transform:none}} @keyframes fxDrop{from{transform:translateY(-100%)}to{transform:none}} .fx .hero #quote{animation:fxRise .9s cubic-bezier(.2,.7,.2,1) .2s both}