/* =====================================================================
   Zentroo — Premium UI Enhancement Layer (non-invasive)
   Adds: cinematic video heroes, glassmorphism navbar, scroll reveals,
   image slide-in, 3D card lift, mouse-follow light, gradient blobs.
   Does NOT change colors, content, or layout structure.
   ===================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Cinematic hero video + overlay + blobs ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-cinematic{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none;
}
.hero-cinematic video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55;
  transform:scale(1.05);
  filter:saturate(1.05) contrast(1.02) blur(.5px);
}
.hero-cinematic::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.0) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.92) 100%),
    linear-gradient(180deg, rgba(15,23,42,.35), rgba(15,23,42,.05) 40%, rgba(255,255,255,.0));
}
.hero > .container, .hero > .hero-inner { position:relative; z-index:2; }
.hero .hero-bg { z-index:0; }

/* Section video backgrounds */
.section-video{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.section-video video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.18; filter:blur(2px) saturate(1.1);
}
.section-video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7) 50%, rgba(255,255,255,.92));
}
.has-bgvideo { position:relative; isolation:isolate; }
.has-bgvideo > * { position:relative; z-index:1; }

/* Floating gradient blobs */
.fx-blobs{
  position:absolute; inset:-10%; z-index:0; pointer-events:none; overflow:hidden;
}
.fx-blobs span{
  position:absolute; display:block; border-radius:50%;
  filter:blur(60px); opacity:.55; mix-blend-mode:multiply;
  animation: blobFloat 18s ease-in-out infinite;
}
.fx-blobs span:nth-child(1){ width:520px; height:520px; left:-120px; top:-140px;
  background:radial-gradient(circle, #bfdbfe, transparent 60%); }
.fx-blobs span:nth-child(2){ width:460px; height:460px; right:-100px; top:-60px;
  background:radial-gradient(circle, #dbeafe, transparent 60%); animation-delay:-6s; }
.fx-blobs span:nth-child(3){ width:380px; height:380px; left:40%; bottom:-160px;
  background:radial-gradient(circle, #e0e7ff, transparent 60%); animation-delay:-12s; }
@keyframes blobFloat{
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33% { transform: translate3d(30px,-40px,0) scale(1.08); }
  66% { transform: translate3d(-25px,25px,0) scale(.95); }
}

/* Mouse-follow ambient light */
.fx-spotlight{
  position:fixed; pointer-events:none; z-index:9998;
  width:520px; height:520px; left:0; top:0;
  border-radius:50%;
  background: radial-gradient(circle, rgba(59,130,246,.16), transparent 60%);
  transform: translate(-50%,-50%);
  mix-blend-mode: multiply;
  transition: opacity .4s ease;
  opacity:0;
}
.fx-spotlight.on{ opacity:1; }

/* Floating particles */
.fx-particles{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.fx-particles i{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.55), transparent 70%);
  animation: floatUp 14s linear infinite;
}

@keyframes floatUp{
  0% { transform: translateY(20px); opacity:0; }
  10% { opacity:1; }
  100% { transform: translateY(-120vh); opacity:0; }
}

/* ---------- Navbar glassmorphism + shrink on scroll ---------- */
.nav{
  transition: padding .35s ease, background .35s ease,
              backdrop-filter .35s ease, box-shadow .35s ease, border-color .35s ease;
  will-change: padding, background;
}
.nav.scrolled{
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 10px 30px -22px rgba(15,23,42,.25);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.nav.scrolled .nav-inner{ padding-top:8px; padding-bottom:8px; }
.nav.scrolled .brand-name{ font-size:.98em; }

/* Animated underline + glow for nav links */
.nav-links a{ position:relative; transition: color .25s ease; }
.nav-links a::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-6px; height:2px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  border-radius:2px;
}
.nav-links a:hover::after,
.nav-links a.active::after{ transform: scaleX(1); transform-origin: left center; }
.nav-links a.active{
  text-shadow: 0 0 14px rgba(59,130,246,.35);
}

/* Mobile menu transition */
.nav-mobile{ transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }

/* ---------- Scroll reveal primitives ---------- */
[data-anim]{ opacity:0; will-change: opacity, transform; transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-anim="fade-up"]   { transform: translate3d(0,40px,0); }
[data-anim="fade-down"] { transform: translate3d(0,-40px,0); }
[data-anim="fade-left"] { transform: translate3d(-60px,0,0); }
[data-anim="fade-right"]{ transform: translate3d(60px,0,0); }
[data-anim="zoom-in"]   { transform: scale(.92); }
[data-anim].in{ opacity:1; transform: none; }

/* Stagger children */
[data-stagger] > *{
  opacity:0; transform: translate3d(0,30px,0);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(1){ transition-delay:.05s; }
[data-stagger].in > *:nth-child(2){ transition-delay:.12s; }
[data-stagger].in > *:nth-child(3){ transition-delay:.19s; }
[data-stagger].in > *:nth-child(4){ transition-delay:.26s; }
[data-stagger].in > *:nth-child(5){ transition-delay:.33s; }
[data-stagger].in > *:nth-child(6){ transition-delay:.40s; }
[data-stagger].in > *:nth-child(7){ transition-delay:.47s; }
[data-stagger].in > *:nth-child(8){ transition-delay:.54s; }
[data-stagger].in > *:nth-child(9){ transition-delay:.61s; }

/* Existing .reveal hook — keep working with smoother feel */
.reveal{ transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }

/* ---------- Image premium hover + slide-in ---------- */
img{ transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, filter .4s ease; }
.bench-visual, .bench, .card, .feat, .panel, .blog-card, .pricing-card, .industry-card {
  will-change: transform;
}
.card:hover, .feat:hover, .blog-card:hover, .pricing-card:hover, .industry-card:hover{
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow:
    0 30px 70px -36px rgba(15,23,42,.35),
    0 14px 30px -22px rgba(59,130,246,.28);
}
.card, .feat, .blog-card, .pricing-card, .industry-card{
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
  transform-style: preserve-3d;
  position: relative;
}
/* Animated gradient border on hover */
.card::before, .feat::before, .blog-card::before, .pricing-card::before, .industry-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(120deg, rgba(59,130,246,.0), rgba(99,102,241,.55), rgba(59,130,246,.0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .4s ease;
  pointer-events:none;
}
.card:hover::before, .feat:hover::before, .blog-card:hover::before,
.pricing-card:hover::before, .industry-card:hover::before{ opacity:1; }

/* Image float on hover */
.bench:hover .bench-visual img,
.hero-visual:hover .dash{ transform: scale(1.03) translateY(-4px); }

/* ---------- Premium section dividers ---------- */
.section + .section{ position:relative; }
.section + .section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(680px, 60%); height:1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.35), transparent);
}

/* ---------- Float cards subtle motion ---------- */
.float-card{ animation: floaty 6s ease-in-out infinite; }
.float-card.f2{ animation-delay:-2s; }
.float-card.f3{ animation-delay:-4s; }
@keyframes floaty{
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Reveal mask for headings */
.mask-reveal{ overflow:hidden; }
.mask-reveal > *{
  display:inline-block; transform: translateY(110%);
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.mask-reveal.in > *{ transform: translateY(0); }