/* ===========================================================
   ATLAS EQUIPEMENTS HYDRAULIQUES — custom styles & animations
   (Tailwind handles utility classes; this file holds the
   keyframes, scroll-reveal logic, and a few bespoke effects
   Tailwind's CDN build can't express on its own.)
   =========================================================== */

:root{
  --blue-deep:#06204a;
  --blue-900:#0b2d5c;
  --blue-700:#1450a3;
  --blue-600:#1d63c9;
  --blue-light:#3aa0f0;
  --sky:#7cc7f7;
  --sky-soft:#eaf5ff;
}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
}

h1,h2,h3,h4,.font-display{
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.22s;}
.reveal-delay-3{transition-delay:.34s;}
.reveal-delay-4{transition-delay:.46s;}

/* ---------- Animated gradient hero background ---------- */
.hero-gradient{
  background:linear-gradient(120deg,var(--blue-deep) 0%,var(--blue-700) 45%,var(--blue-600) 75%,var(--blue-light) 100%);
  background-size:200% 200%;
  animation:gradientShift 14s ease infinite;
}
@keyframes gradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ---------- Floating blobs ---------- */
.blob{
  position:absolute;
  border-radius:9999px;
  filter:blur(40px);
  opacity:.35;
  animation:float 9s ease-in-out infinite;
}
.blob-1{animation-duration:11s;}
.blob-2{animation-duration:8s; animation-delay:1.2s;}
.blob-3{animation-duration:13s; animation-delay:2.4s;}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(18px,-26px) scale(1.08);}
}

/* ---------- Soft pulse for icon badges ---------- */
@keyframes softPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(58,160,240,.35);}
  50%{box-shadow:0 0 0 14px rgba(58,160,240,0);}
}
.pulse-ring{animation:softPulse 2.6s ease-out infinite;}

/* ---------- Slow drifting grid pattern on hero ---------- */
.grid-pattern{
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:42px 42px;
  animation:gridDrift 30s linear infinite;
}
@keyframes gridDrift{
  0%{background-position:0 0;}
  100%{background-position:420px 420px;}
}

/* ---------- Hero slideshow crossfade ---------- */
.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}
.hero-slide.active{opacity:1;}

/* ---------- Card hover lift ---------- */
.lift-card{
  transition:transform .35s ease, box-shadow .35s ease;
}
.lift-card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 45px -18px rgba(11,45,92,.35);
}

/* ---------- Underline grow on link hover ---------- */
.nav-link{position:relative;}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--sky);
  transition:width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after{width:100%;}

/* ---------- Marquee for partners / trust strip (optional use) ---------- */
.marquee-track{
  display:flex;
  animation:marquee 22s linear infinite;
}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ---------- Mobile menu transition ---------- */
#mobile-menu{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
#mobile-menu.open{max-height:600px;}

/* ---------- Counter number font ---------- */
.counter{font-variant-numeric:tabular-nums;}

/* ---------- Sticky header shadow on scroll ---------- */
header.scrolled{
  box-shadow:0 8px 24px -12px rgba(11,45,92,.25);
}

/* ---------- Back to top button ---------- */
#back-to-top{
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  transform:translateY(10px);
}
#back-to-top.show{
  opacity:1; pointer-events:auto;
  transform:translateY(0);
}

/* ---------- White section with subtle logo watermark ---------- */
.brand-watermark{
  position:relative;
  isolation:isolate;
  background-color:#ffffff;
  overflow:hidden;
}
.brand-watermark::before{
  content:'';
  position:absolute;
  right:-50px;
  bottom:-60px;
  width:340px;
  height:340px;
  background-image:url('../logopng.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.05;
  z-index:-1;
  pointer-events:none;
}

/* ---------- Mobile bottom navigation bar ---------- */
#bottom-nav{
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px -14px rgba(11,45,92,.22);
}
.bottom-nav-link{
  color: rgba(11,45,92,.45);
  transition: color .2s ease;
}
.bottom-nav-link.active{
  color: var(--blue-700);
}
.bottom-nav-link svg{
  width: 22px;
  height: 22px;
}

/* ---------- Hero / banner background video ---------- */
.hero-video-wrap{position:absolute; inset:0; overflow:hidden;}
.hero-video-wrap video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero-video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(6,32,74,.92) 0%, rgba(20,80,163,.82) 45%, rgba(58,160,240,.6) 100%);
}