/* =================== More motion =================== */
body{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body.leaving{opacity:0;transition:opacity .22s ease}

/* headline word-by-word reveal */
.hero-title .w{display:inline-block;-webkit-text-fill-color:#fff;opacity:0}
.carousel-item.active .hero-title .w{animation:wordIn .7s calc(var(--i) * 80ms + .35s) cubic-bezier(.2,.9,.3,1.2) both}
@keyframes wordIn{from{opacity:0;transform:translateY(40px) rotate(4deg) scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* floating icons in hero */
.float-icon{position:absolute;z-index:2;color:rgba(255,255,255,.2);pointer-events:none;animation:floaty var(--dur,14s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes floaty{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(24px,-34px) rotate(14deg)}66%{transform:translate(-18px,-12px) rotate(-10deg)}}

/* soft light that follows the cursor */
#cursorGlow{position:fixed;left:0;top:0;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle,rgba(232,89,12,.14),rgba(123,92,255,.07) 45%,transparent 70%)}
#cursorGlow.on{opacity:1}

/* magnetic buttons + click ripple */
.btn-brand,.btn-glass,.btn-outline-brand{translate:var(--bx,0) var(--by,0);transition:translate .25s ease,transform .3s,box-shadow .3s,background .3s,color .3s}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .65s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(3.2);opacity:0}}

/* stat tiles */
.stat-glass:hover{transform:translateY(-6px) scale(1.04);background:rgba(255,255,255,.22)}

/* card image sheen + badge glow */
.card-img::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);transition:left .8s;pointer-events:none}
.card-x:hover .card-img::after{left:130%}
.badge-x{animation:badgeGlow 3s ease-in-out infinite}
@keyframes badgeGlow{50%{box-shadow:0 4px 22px rgba(232,89,12,.8)}}

/* links, icons, nav micro-interactions */
.main-nav .nav-link{transition:color .25s,transform .25s}
.main-nav .nav-link:hover{transform:translateY(-2px)}
.socials a:hover i,.mini-soc a:hover i{animation:wiggle .5s}
@keyframes wiggle{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.read-more{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .35s;padding-bottom:2px}
.read-more:hover{background-size:100% 2px}
.bottom-nav a:active i{animation:tap .35s}
@keyframes tap{50%{transform:scale(1.35) translateY(-4px)}}
.sec-head h2{background:linear-gradient(90deg,var(--dark) 0%,var(--primary) 50%,var(--dark) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:textflow 8s linear infinite}
.sec-head.light h2{background:linear-gradient(90deg,#fff 0%,#ffb27d 50%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text}
.counter-box i,.stat-glass i{animation:icBob 3.6s ease-in-out infinite}
.hero-stats{animation:bob 7s ease-in-out infinite}

/* parallax hook */
[data-parallax]{translate:0 var(--ty,0)}

html.no-motion #cursorGlow,html.no-motion .float-icon{display:none}
html.no-motion .hero-title .w{opacity:1;filter:none}
html.no-motion .sec-head h2{-webkit-text-fill-color:var(--dark);background:none}
html.no-motion .sec-head.light h2{-webkit-text-fill-color:#fff}
@media(prefers-reduced-motion:reduce){.hero-title .w{opacity:1}.sec-head h2{-webkit-text-fill-color:var(--dark);background:none}.sec-head.light h2{-webkit-text-fill-color:#fff}}
@media(hover:none){#cursorGlow{display:none}}