/* ====== VIVAA Responsive Effects Pack ====== */
:root{
  --fx-primary:#ff9900;
  --fx-primary-2:#8b5cf6;
  --fx-shadow:0 10px 30px -8px rgba(0,0,0,.35);
  --fx-glow:0 0 24px rgba(255,153,0,.45);
}

/* Smooth scroll + motion prefs */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- 1. Reveal on scroll ---------- */
.fx-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.fx-reveal.is-in{opacity:1;transform:none}
.fx-reveal.fx-left{transform:translateX(-40px)}
.fx-reveal.fx-right{transform:translateX(40px)}
.fx-reveal.fx-zoom{transform:scale(.9)}
.fx-reveal.is-in.fx-left,.fx-reveal.is-in.fx-right,.fx-reveal.is-in.fx-zoom{transform:none}

/* Stagger children */
.fx-stagger>*{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.fx-stagger.is-in>*{opacity:1;transform:none}
.fx-stagger.is-in>*:nth-child(1){transition-delay:.05s}
.fx-stagger.is-in>*:nth-child(2){transition-delay:.15s}
.fx-stagger.is-in>*:nth-child(3){transition-delay:.25s}
.fx-stagger.is-in>*:nth-child(4){transition-delay:.35s}
.fx-stagger.is-in>*:nth-child(5){transition-delay:.45s}
.fx-stagger.is-in>*:nth-child(6){transition-delay:.55s}
.fx-stagger.is-in>*:nth-child(7){transition-delay:.65s}
.fx-stagger.is-in>*:nth-child(8){transition-delay:.75s}

/* ---------- 2. Global hover polish for common elements ---------- */
a,button{transition:color .25s ease,background-color .25s ease,transform .25s ease,box-shadow .25s ease,filter .25s ease}
img{transition:transform .5s ease,filter .5s ease}

/* Cards: apply automatically to common card containers */
.card,.service-card,.pricing-card,.feature-card,.blog-card,.team-card,
[class*="rounded-2xl"],[class*="rounded-xl"]{
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;
  will-change:transform;
}
.card:hover,.service-card:hover,.pricing-card:hover,.feature-card:hover,
.blog-card:hover,.team-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--fx-shadow);
}

/* Tilt (added via JS) */
.fx-tilt{transform-style:preserve-3d;transition:transform .2s ease-out}

/* Images inside cards zoom on hover */
.card img,.service-card img,.blog-card img,.feature-card img,.fx-zoom-img{overflow:hidden}
.card:hover img,.service-card:hover img,.blog-card:hover img,.feature-card:hover img,
.fx-zoom-wrap:hover img{transform:scale(1.06)}

/* ---------- 3. Buttons ---------- */
.btn,button,a[class*="bg-"],a[class*="btn"]{position:relative;overflow:hidden}
.btn:hover,button:hover,a[class*="btn"]:hover{transform:translateY(-2px);box-shadow:var(--fx-shadow)}
.btn:active,button:active{transform:translateY(0) scale(.98)}

/* Ripple */
.fx-ripple{position:absolute;border-radius:9999px;transform:scale(0);opacity:.5;background:rgba(255,255,255,.55);pointer-events:none;animation:fxRipple .6s ease-out forwards}
@keyframes fxRipple{to{transform:scale(4);opacity:0}}

/* Gradient animated button (opt-in class) */
.fx-btn-gradient{background:linear-gradient(120deg,#ff9900,#ff5f6d,#8b5cf6,#ff9900);background-size:300% 300%;color:#fff;animation:fxGrad 6s ease infinite}
@keyframes fxGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Pulse / glow */
.fx-pulse{animation:fxPulse 2.2s ease-in-out infinite}
@keyframes fxPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,153,0,.55)}50%{box-shadow:0 0 0 14px rgba(255,153,0,0)}}
.fx-glow:hover{box-shadow:var(--fx-glow)}

/* ---------- 4. Text effects ---------- */
.fx-gradient-text{background:linear-gradient(90deg,#ff9900,#8b5cf6,#22d3ee,#ff9900);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxGrad 6s linear infinite}
.fx-underline{position:relative}
.fx-underline::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.fx-underline:hover::after{transform:scaleX(1);transform-origin:left}

/* Nav links: auto underline animation */
nav a,header a{position:relative}
nav a:not(.no-fx)::after,header a:not(.no-fx):not([class*="bg-"])::after{
  content:"";position:absolute;left:8px;right:8px;bottom:2px;height:2px;
  background:linear-gradient(90deg,#ff9900,#8b5cf6);
  transform:scaleX(0);transform-origin:right;transition:transform .3s ease;border-radius:2px;
}
nav a:hover::after,header a:hover:not([class*="bg-"])::after{transform:scaleX(1);transform-origin:left}

/* ---------- 5. Background effects ---------- */
.fx-aurora{position:relative;isolation:isolate;overflow:hidden}
.fx-aurora::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 40% at 20% 30%,rgba(255,153,0,.35),transparent 60%),radial-gradient(40% 40% at 80% 20%,rgba(139,92,246,.35),transparent 60%),radial-gradient(50% 50% at 50% 90%,rgba(34,211,238,.25),transparent 60%);filter:blur(40px);animation:fxAurora 18s ease-in-out infinite alternate}
@keyframes fxAurora{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(3%,-4%,0) scale(1.1)}}

/* Glass */
.fx-glass{background:rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.15)}

/* ---------- 6. Sticky nav shadow ---------- */
.fx-nav-scrolled{box-shadow:0 8px 24px -12px rgba(0,0,0,.5);backdrop-filter:blur(10px)}

/* ---------- 7. Back to top ---------- */
#fxTop{position:fixed;right:18px;bottom:90px;width:46px;height:46px;border-radius:9999px;background:linear-gradient(135deg,#ff9900,#8b5cf6);color:#fff;display:none;place-items:center;font-size:22px;box-shadow:var(--fx-shadow);z-index:9998;cursor:pointer;border:0;transition:transform .25s ease,opacity .25s ease}
#fxTop.show{display:grid;animation:fxFadeIn .3s ease}
#fxTop:hover{transform:translateY(-4px) scale(1.05)}
@keyframes fxFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 8. Scroll progress bar ---------- */
#fxProgress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#ff9900,#8b5cf6,#22d3ee);z-index:9999;transition:width .1s linear}

/* ---------- 9. Marquee ---------- */
.fx-marquee{display:flex;gap:2rem;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fx-marquee>*{animation:fxMarq 25s linear infinite;flex-shrink:0}
@keyframes fxMarq{to{transform:translateX(-50%)}}

/* ---------- 10. Form focus glow ---------- */
input,textarea,select{transition:box-shadow .25s ease,border-color .25s ease,transform .1s ease}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(255,153,0,.18);outline:none}
.fx-shake{animation:fxShake .45s ease}
@keyframes fxShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ---------- 11. Count-up placeholder ---------- */
.fx-count{font-variant-numeric:tabular-nums}

/* ---------- 12. Page fade-in ---------- */
body{animation:fxPageIn .5s ease}
@keyframes fxPageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 14. Image reveal ---------- */
.fx-img-reveal{position:relative;overflow:hidden}
.fx-img-reveal::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,#ff9900,#8b5cf6);transform:translateX(0);transition:transform 1s cubic-bezier(.77,0,.18,1)}
.fx-img-reveal.is-in::after{transform:translateX(101%)}

/* ---------- 15. Skeleton shimmer ---------- */
.fx-skeleton{background:linear-gradient(90deg,#1f2937 0%,#374151 40%,#1f2937 80%);background-size:200% 100%;animation:fxShimmer 1.4s infinite}
@keyframes fxShimmer{to{background-position:-200% 0}}

/* ---------- 16. Logo: disable all hover/transform effects ---------- */
header a[href="index.html"], header a[href="index.html"] *,
a.site-logo, a.site-logo *, .site-logo, .site-logo *,
img[src*="vivaa-solutions-logo"], a:has(> img[src*="vivaa-solutions-logo"]),
a:has(> img[src*="vivaa-solutions-logo"]) *{
  transform:none!important;
  transition:none!important;
  filter:none!important;
  animation:none!important;
  box-shadow:none!important;
}
a:has(> img[src*="vivaa-solutions-logo"])::after,
header a[href="index.html"]::after{content:none!important;display:none!important}
a:has(> img[src*="vivaa-solutions-logo"]):hover,
header a[href="index.html"]:hover{transform:none!important;box-shadow:none!important}

/* ---------- 17. Floating WhatsApp button — always visible on top ---------- */
a[href^="https://wa.me/"].fixed,
a[href*="wa.me/"][class*="fixed"]{
  position:fixed!important;
  right:1.25rem!important;
  bottom:1.5rem!important;
  z-index:2147483000!important;
  opacity:1!important;
  visibility:visible!important;
  display:flex!important;
  align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:9999px!important;
  background:#25d366!important;color:#fff!important;
  box-shadow:0 12px 30px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.6)!important;
  animation:fxWaPulse 2.2s ease-in-out infinite!important;
  overflow:visible!important;
}
a[href*="wa.me/"][class*="fixed"] svg{width:26px!important;height:26px!important;fill:#fff!important}
@keyframes fxWaPulse{
  0%,100%{box-shadow:0 12px 30px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.55)}
  50%{box-shadow:0 12px 30px rgba(37,211,102,.55),0 0 0 16px rgba(37,211,102,0)}
}
a[href*="wa.me/"][class*="fixed"]:hover{transform:scale(1.08)!important}

/* ---------- 18. Broader hover effects for images & boxes ---------- */
section img:not([src*="logo"]):not(.no-fx),
main img:not([src*="logo"]):not(.no-fx),
article img:not([src*="logo"]):not(.no-fx){
  transition:transform .5s ease, filter .5s ease, box-shadow .5s ease;
}
section img:not([src*="logo"]):not(.no-fx):hover,
main img:not([src*="logo"]):not(.no-fx):hover,
article img:not([src*="logo"]):not(.no-fx):hover{
  transform:scale(1.04);
  filter:brightness(1.05);
}

/* Generic boxes/panels get lift on hover */
[class*="rounded-2xl"]:not(header):not(nav):not(.no-fx),
[class*="rounded-xl"]:not(header):not(nav):not(.no-fx),
[class*="rounded-lg"]:not(header):not(nav):not(.no-fx),
.panel,.box,.tile,[class*="bg-panel"]:not(header):not(nav):not(body):not(.no-fx){
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
[class*="rounded-2xl"]:not(header):not(nav):not(a):not(.no-fx):hover,
[class*="rounded-xl"]:not(header):not(nav):not(a):not(.no-fx):hover,
.panel:hover,.box:hover,.tile:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.4);
}

/* Mobile header visibility and safe sizing */
@media (max-width: 640px) {
  #navbar > div:first-child {
    gap: .5rem !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  #navbar a[href="index.html"] {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  #navbar a[href="index.html"] > img.logo-img {
    display: block !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
  }
  #navbar a[href="index.html"] > div {
    display: block !important;
    min-width: 0 !important;
  }
  #navbar a[href="index.html"] > div > div:first-child {
    font-size: .82rem !important;
    white-space: nowrap !important;
  }
  #navbar a[href="index.html"] > div > div:last-child {
    font-size: .5rem !important;
    white-space: nowrap !important;
  }
  #mob-btn {
    flex: 0 0 44px !important;
  }
}

@media (max-width: 640px) {
  html, body { overflow-x: hidden !important; }
}