/* ═══════════════════════════════════════════════════════════════
   OberoiTech — Enhanced Animations & Visual Effects
   ═══════════════════════════════════════════════════════════════ */

/* ── Scroll progress bar ──────────────────────────────────────── */
#scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#246bfd,#13c9e8,#7857ff);width:0%;z-index:2000;transition:width .1s linear;border-radius:0 2px 2px 0}

/* ── Custom cursor (desktop only) ─────────────────────────────── */
@media(pointer:fine){
  .cursor-dot{position:fixed;width:8px;height:8px;background:var(--blue,#246bfd);border-radius:50%;pointer-events:none;z-index:9998;transition:transform .1s,opacity .2s;transform:translate(-50%,-50%)}
  .cursor-ring{position:fixed;width:36px;height:36px;border:2px solid rgba(36,107,253,.45);border-radius:50%;pointer-events:none;z-index:9997;transition:transform .18s cubic-bezier(.25,.46,.45,.94),width .2s,height .2s,border-color .2s,opacity .2s;transform:translate(-50%,-50%)}
  .cursor-ring.hovering{width:52px;height:52px;border-color:rgba(36,107,253,.25);background:rgba(36,107,253,.05)}
  body.cursor-active .cursor-dot,.cursor-active .cursor-ring{opacity:1}
}

/* ── Particle canvas background ───────────────────────────────── */
#particle-canvas{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.55}

/* ── Text reveal animation ────────────────────────────────────── */
@keyframes textReveal{from{opacity:0;transform:translateY(28px) skewY(2deg)}to{opacity:1;transform:none}}
.reveal-text{animation:textReveal .75s cubic-bezier(.22,1,.36,1) both}
.reveal-text.delay-1{animation-delay:.1s}
.reveal-text.delay-2{animation-delay:.22s}
.reveal-text.delay-3{animation-delay:.36s}

/* ── Gradient text shimmer ────────────────────────────────────── */
@keyframes gradShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.gradient-text,.section-heading h2 span,.section-copy h2 span,.contact-copy h2 span,.page-hero h1 span,.service-hero h1 span{background-size:200% auto;animation:gradShimmer 4s ease infinite}

/* ── Floating orb animation (enhanced) ───────────────────────── */
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}33%{transform:translateY(-18px) scale(1.04)}66%{transform:translateY(8px) scale(.97)}}
@keyframes orbFloat2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-22px) rotate(8deg)}}
.orb-one{animation:orbFloat 9s ease-in-out infinite}
.orb-two{animation:orbFloat2 11s ease-in-out infinite}

/* ── Magnetic button shimmer ──────────────────────────────────── */
@keyframes btnShimmer{0%{transform:translateX(-100%) skewX(-15deg)}100%{transform:translateX(250%) skewX(-15deg)}}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-100%) skewX(-15deg);transition:none}
.btn:hover::after{animation:btnShimmer .55s ease forwards}

/* ── Card lift with glow ──────────────────────────────────────── */
.service-card,.product-card,.project-card,.blog-card{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.service-card:hover{box-shadow:0 20px 55px rgba(36,107,253,.14),0 0 0 1px rgba(36,107,253,.06)}
.product-card:hover{box-shadow:0 22px 60px rgba(36,107,253,.12)}

/* ── Stagger children animation ───────────────────────────────── */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.stagger-children > *{opacity:0;animation:fadeSlideUp .55s cubic-bezier(.22,1,.36,1) forwards}
.stagger-children > *:nth-child(1){animation-delay:.05s}
.stagger-children > *:nth-child(2){animation-delay:.13s}
.stagger-children > *:nth-child(3){animation-delay:.21s}
.stagger-children > *:nth-child(4){animation-delay:.29s}
.stagger-children > *:nth-child(5){animation-delay:.37s}
.stagger-children > *:nth-child(6){animation-delay:.45s}

/* ── Pulse badge ──────────────────────────────────────────────── */
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(33,199,118,.4)}70%{box-shadow:0 0 0 8px rgba(33,199,118,0)}}
.online-dot{animation:pulse 2.2s ease-out infinite}

/* ── Number counter pop ───────────────────────────────────────── */
@keyframes counterPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.counter-popped{animation:counterPop .5s cubic-bezier(.34,1.56,.64,1)}

/* ── Hero dashboard float (enhanced) ─────────────────────────── */
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-10px) rotate(.3deg)}75%{transform:translateY(5px) rotate(-.2deg)}}
.hero-visual picture{animation:heroFloat 7s ease-in-out infinite}

/* ── Float cards (enhanced) ───────────────────────────────────── */
@keyframes cardFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(9px) rotate(.5deg)}}
@keyframes cardFloat2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(-.4deg)}}
.float-card-top{animation:cardFloat 5.5s ease-in-out infinite}
.float-card-bottom{animation:cardFloat2 6.5s ease-in-out infinite}

/* ── Spinning orbit tech chips ────────────────────────────────── */
@keyframes spinOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.orbit-a{animation:spinOrbit 18s linear infinite}
.orbit-b{animation:spinOrbit 28s linear infinite reverse}

/* ── Page transition overlay ──────────────────────────────────── */
.page-loader span{animation:spin .65s cubic-bezier(.6,.2,.4,.8) infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Typewriter cursor ────────────────────────────────────────── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.typewriter-cursor{display:inline-block;width:3px;height:1em;background:var(--blue,#246bfd);margin-left:2px;vertical-align:text-bottom;animation:blink .7s step-end infinite;border-radius:2px}

/* ── Tilt card effect (via JS) ────────────────────────────────── */
.tilt-card{transform-style:preserve-3d;transform:perspective(1000px)}
.tilt-card .tilt-inner{transform:translateZ(16px)}

/* ── Glow on hover (service icon) ────────────────────────────── */
.service-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.service-card:hover .service-icon{transform:scale(1.15) rotate(-6deg);box-shadow:0 8px 24px rgba(36,107,253,.2)}

/* ── Ripple click effect ──────────────────────────────────────── */
@keyframes ripple{from{transform:scale(0);opacity:.35}to{transform:scale(3.5);opacity:0}}
.ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;animation:ripple .55s ease-out forwards}

/* ── Marquee logo strip ───────────────────────────────────────── */
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-inner{display:flex;animation:marqueeScroll 24s linear infinite;width:max-content}
.marquee-inner:hover{animation-play-state:paused}

/* ── Section divider wave ─────────────────────────────────────── */
.wave-divider{position:absolute;bottom:-1px;left:0;width:100%;overflow:hidden;line-height:0}
.wave-divider svg{display:block;width:100%;height:50px}

/* ── Underline draw animation ─────────────────────────────────── */
.draw-underline{position:relative;display:inline-block}
.draw-underline::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:linear-gradient(90deg,var(--blue,#246bfd),var(--cyan,#13c9e8));border-radius:2px;transition:width .45s cubic-bezier(.22,1,.36,1)}
.draw-underline:hover::after,.draw-underline.active::after{width:100%}

/* ── AOS custom easing overrides ─────────────────────────────── */
[data-aos]{transition-timing-function:cubic-bezier(.22,1,.36,1)!important}

/* ── Glassmorphism card variant ───────────────────────────────── */
.glass-card{background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8)}

/* ── Gradient border ──────────────────────────────────────────── */
.grad-border{position:relative}
.grad-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#246bfd,#13c9e8,#7857ff);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ── Scroll-triggered fade for sections already using AOS ─────── */
[data-aos="fade-up"]{transform:translate3d(0,22px,0)!important}
[data-aos="fade-right"]{transform:translate3d(-22px,0,0)!important}
[data-aos="fade-left"]{transform:translate3d(22px,0,0)!important}
[data-aos="zoom-in"]{transform:scale(.94)!important}

/* ── Reduced motion: turn everything off ─────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .btn::after{display:none}
  #particle-canvas{display:none}
  .cursor-dot,.cursor-ring{display:none}
}