/* ===========================================================
   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;
  --ink:#090d14;
  --panel:#111a2b;
  --accent:#ff6a1a;
  --accent-dark:#e0530a;
  --accent2:#ffb020;
}

/* Base scale: shrinks every rem-based Tailwind utility (padding,
   margin, font-size, gap, radius...) uniformly, so the site reads
   at "80% zoom" density by default instead of the full-size scale. */
html{scroll-behavior:smooth; font-size:80%;}
@media (max-width:640px){
  /* Keep mobile a touch larger than 80% so tap targets/text stay usable */
  html{font-size:87.5%;}
}

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:2.5px;
  background:var(--accent);
  transition:width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after{width:100%;}
.nav-link.active{color:var(--accent2);}
.nav-link:hover{color:var(--accent2);}

/* ---------- 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%);}
}

/* ---------- Footer accordion (mobile only; open columns on sm+) ---------- */
.footer-acc-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.footer-acc.open .footer-acc-body{max-height:600px;}
.footer-acc-toggle svg{transition:transform .3s ease;}
.footer-acc.open .footer-acc-toggle svg{transform:rotate(180deg);}
@media (min-width:640px){
  .footer-acc-body{max-height:none !important; overflow:visible;}
  .footer-acc-toggle{cursor:default;}
  .footer-acc-toggle svg{display:none;}
}

/* ---------- Mobile menu transition ---------- */
#mobile-menu{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
#mobile-menu.open{max-height:600px;}
#mobile-menu a.active{color:var(--accent2);}
#mobile-menu a:hover{color:var(--accent2);}

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

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

/* ---------- 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 -10px 28px -14px rgba(0,0,0,.6);
}
.bottom-nav-link{
  position:relative;
  color: rgba(255,255,255,.45);
  transition: color .2s ease, transform .15s ease;
}
.bottom-nav-link:active{
  transform:scale(.92);
}
.bottom-nav-link.active{
  color: var(--accent2);
}
.bottom-nav-link.active::before{
  content:'';
  position:absolute;
  top:2px; left:50%;
  transform:translateX(-50%);
  width:22px; height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
}
.bottom-nav-link svg{
  width: 22px;
  height: 22px;
}

/* ---------- Product filter pills (catalogue) ---------- */
.filter-btn{
  padding:.6rem 1.35rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1.5px solid rgba(9,13,20,.12);
  color:rgba(9,13,20,.55);
  background:#fff;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  white-space:nowrap;
  flex:0 0 auto;
  cursor:pointer;
}
.filter-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(255,106,26,.06);
}
.filter-btn.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px -6px rgba(255,106,26,.55);
}
.filter-btn:active{transform:scale(.96);}
@media (max-width:640px){
  .filter-btn{padding:.5rem 1.05rem; font-size:.68rem;}
}

/* ---------- Hide scrollbar (mobile filter bar horizontal scroll) ---------- */
.no-scrollbar{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.no-scrollbar::-webkit-scrollbar{display:none;}

/* ---------- Product card image zoom on hover ---------- */
.product-card-item .photo-slot img,
.product-card-item .photo-slot .placeholder{
  transition:transform .5s ease;
}
.product-card-item:hover .photo-slot img,
.product-card-item:hover .photo-slot .placeholder{
  transform:scale(1.06);
}

/* ---------- Photo slot with graceful placeholder ---------- */
/* Used for product photos not yet supplied: shows a soft branded
   placeholder behind the <img>; if the image fails to load (404),
   JS adds .img-missing to hide it and reveal the placeholder. */
.photo-slot{position:relative;}
.photo-slot .placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  background:linear-gradient(135deg,var(--sky-soft) 0%,#ffffff 100%);
  color:rgba(11,45,92,.32);
  text-align:center;
  padding:1.5rem;
}
.photo-slot img{position:relative; z-index:1;}
.photo-slot img.img-missing{display:none;}

/* ---------- 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(9,13,20,.94) 0%, rgba(9,13,20,.68) 45%, rgba(9,13,20,.32) 100%);
}

/* ---------- Accent line along the bottom of a hero/banner ---------- */
.hero-accent-line{
  position:absolute; left:0; right:0; bottom:0;
  height:5px;
  background:linear-gradient(90deg, var(--accent), var(--accent2) 45%, var(--blue-light));
  z-index:3;
}

/* ---------- Slow cinematic zoom on hero video (Ken Burns) ---------- */
.hero-video-wrap video{
  animation:heroVideoZoom 22s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes heroVideoZoom{
  0%{transform:scale(1);}
  100%{transform:scale(1.08);}
}

/* ---------- Hero content entrance animation (plays on load, no scroll needed) ---------- */
.hero-anim{
  opacity:0;
  animation:heroIn .9s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes heroIn{
  from{opacity:0; transform:translateY(26px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-anim-1{animation-delay:.1s;}
.hero-anim-2{animation-delay:.26s;}
.hero-anim-3{animation-delay:.44s;}
.hero-anim-4{animation-delay:.6s;}
.hero-anim-5{animation-delay:.8s;}
.hero-anim-6{animation-delay:.95s;}

/* ---------- Bouncing scroll cue ---------- */
.scroll-cue{animation:scrollCueFade 1s ease .9s both;}
@keyframes scrollCueFade{from{opacity:0;} to{opacity:1;}}

/* ===========================================================
   INDUSTRIAL DARK SYSTEM — hero blocks, ghost numbers, dark
   cards, accent buttons. Layered on top of the base theme
   above so both design languages can coexist during rollout.
   =========================================================== */

/* ---------- Dark ink hero / page-banner with angled slab ---------- */
.hero-industrial{
  position:relative;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(29,99,201,.35), transparent 55%),
    var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.hero-industrial::before{
  content:'';
  position:absolute;
  top:-25%;
  right:-8%;
  width:58%;
  height:170%;
  background:linear-gradient(150deg, var(--blue-700) 0%, var(--blue-600) 45%, var(--accent) 145%);
  clip-path:polygon(38% 0, 100% 0, 100% 100%, 0% 100%);
  opacity:.92;
  z-index:-1;
}
.hero-industrial::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:5px;
  background:linear-gradient(90deg, var(--accent), var(--accent2) 45%, var(--blue-light));
  z-index:2;
}
.hero-industrial .grid-pattern{opacity:.08;}

/* ---------- Ghost / outline giant numbers (catalogue feel) ---------- */
.ghost-number{
  position:absolute;
  font-family:'Poppins', ui-sans-serif, system-ui;
  font-weight:800;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(11,45,92,.10);
  font-size:clamp(7rem, 18vw, 13rem);
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* ---------- Accent buttons ---------- */
.btn-accent{
  background:var(--accent);
  color:#fff;
  transition:background-color .25s ease, transform .2s ease;
}
.btn-accent:hover{background:var(--accent-dark);}
.btn-accent:active{transform:translateY(1px);}

/* ---------- Dark panel card ---------- */
.card-ink{
  background:linear-gradient(155deg, var(--panel) 0%, var(--ink) 100%);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
}

/* ---------- Angled section divider (top notch) ---------- */
.notch-top{
  clip-path:polygon(0 24px, 4% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- Accent-bordered stat chip ---------- */
.stat-chip{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

/* ---------- Dark watermark variant (for card-ink / hero panels) ---------- */
.brand-watermark-dark{
  position:relative;
  isolation:isolate;
  background-color:var(--ink);
  overflow:hidden;
}
.brand-watermark-dark::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:.06;
  filter:brightness(2);
  z-index:-1;
  pointer-events:none;
}