/* ============ RESET — removes default browser margin/padding that
   causes stray background color slivers at page edges ============ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  background-color: #0b0f2b; /* navy — matches marquee/navbar, no white/cream gap */
}

/* ============ SCROLL FIX ============ */
html, body {
  scroll-behavior: auto !important;
}
body {
  overflow-anchor: none;
}

/* ============ Include containers: fade in once loaded, no flash of empty content ============ */
[data-include] {
  overflow-anchor: none;
  opacity: 0;
  transition: opacity .2s ease;
}
[data-include].loaded {
  opacity: 1;
}

/* Navbar reserves its exact height so nothing jumps while it loads */
[data-include="partials/navbar.html"] {
  min-height: 188px;      /* set to your exact desktop navbar height */
}
@media (max-width: 1023px) {
  [data-include="partials/navbar.html"] {
    min-height: 260px;    /* set to your exact mobile/tablet navbar height */
  }
}

/* ============ Navbar link underline ============ */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0%; height: 2px;
  background: #ffffff;
  transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

.dropdown-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.dropdown-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =====================================================================
   SCROLL-TRIGGERED REVEAL SYSTEM (single source of truth)
   -----------------------------------------------------------------
   IMPORTANT: this replaced the old "@keyframes fadeUp { ... } .fade-up
   { animation: fadeUp .8s forwards }" approach. That version animated
   in on a fixed timer the instant the page loaded, with zero awareness
   of scroll position — so on fast/mobile scrolling an element could be
   scrolled past mid-animation and never actually reach full opacity,
   which is what caused text to look stuck/washed-out.

   This version is transition-based instead of animation-based, and
   stays at rest (opacity:0) until JavaScript adds the .in-view class
   (via an IntersectionObserver — see the reveal script included at
   the bottom of each page). That keeps every page's animation timing
   tied to what's actually on screen, not a load-time clock.

   Every page that uses .fade-up MUST include this reveal script
   before </body>:

     <script>
       (function () {
         const els = Array.from(document.querySelectorAll('.fade-up'));
         if (!els.length) return;
         if (!('IntersectionObserver' in window)) {
           els.forEach((el) => el.classList.add('in-view'));
           return;
         }
         const io = new IntersectionObserver((entries) => {
           entries.forEach((entry) => {
             if (entry.isIntersecting) {
               entry.target.classList.add('in-view');
               io.unobserve(entry.target);
             }
           });
         }, { threshold: 0.01, rootMargin: '0px 0px 120px 0px' });
         els.forEach((el) => io.observe(el));

         // Safety net: force-reveal anything the observer misses
         // (fast mobile flings, edge cases) so nothing stays hidden.
         let ticking = false;
         function sweep() {
           ticking = false;
           const vh = window.innerHeight || document.documentElement.clientHeight;
           els.forEach((el) => {
             if (el.classList.contains('in-view') || el.classList.contains('force-visible')) return;
             if (el.getBoundingClientRect().top < vh + 50) el.classList.add('in-view');
           });
         }
         window.addEventListener('scroll', () => {
           if (ticking) return;
           ticking = true;
           requestAnimationFrame(sweep);
         }, { passive: true });
         window.addEventListener('resize', sweep);
         setTimeout(() => els.forEach((el) => {
           if (!el.classList.contains('in-view')) el.classList.add('force-visible');
         }), 3000);
       })();
     </script>
===================================================================== */
.fade-up {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .45s ease-out, transform .45s ease-out;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.fade-up.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Escape hatch used by the JS safety net — snaps instantly to fully
   visible with no animation, guaranteeing text can never get stuck
   at partial opacity. */
.fade-up.force-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }

/* Auto-stagger any grid tagged .stagger-grid — short delays so a fast
   scroll can't outrun them before the transition finishes. */
.stagger-grid > *:nth-child(1) { transition-delay: .03s; }
.stagger-grid > *:nth-child(2) { transition-delay: .08s; }
.stagger-grid > *:nth-child(3) { transition-delay: .13s; }
.stagger-grid > *:nth-child(4) { transition-delay: .18s; }
.stagger-grid > *:nth-child(5) { transition-delay: .23s; }
.stagger-grid > *:nth-child(6) { transition-delay: .28s; }
.stagger-grid > *:nth-child(7) { transition-delay: .33s; }
.stagger-grid > *:nth-child(8) { transition-delay: .38s; }
.stagger-grid > *:nth-child(9) { transition-delay: .43s; }

@keyframes fadeScale {
  from { opacity: 0; transform: scale3d(.9,.9,1); }
  to   { opacity: 1; transform: scale3d(1,1,1); }
}
.fade-scale {
  opacity: 0;
  animation: fadeScale .7s cubic-bezier(.22,1,.36,1) forwards;
}

/* ============ Floating product images (standalone, unused by grid) ============ */
@keyframes floaty {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-14px,0); }
}
.float-img { animation: floaty 5s ease-in-out infinite; will-change: transform; }
.float-img.f2 { animation-delay: .8s; animation-duration: 6s; }
.float-img.f3 { animation-delay: 1.4s; animation-duration: 5.5s; }
.float-img.f4 { animation-delay: .4s; animation-duration: 6.5s; }

/* ============ CTA button shine sweep ============ */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-shine:hover::before { left: 125%; }

/* ============ Decorative dot pulse ============ */
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(0,151,156,.6); }
  70%  { box-shadow: 0 0 0 14px rgba(0,151,156,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,151,156,0); }
}
.pulse-dot { animation: pulseDot 2.2s ease-out infinite; will-change: box-shadow; }

/* ============ WhatsApp button pulse ============ */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.whatsapp-pulse { animation: pulseRing 2.4s ease-out infinite; will-change: box-shadow; }

/* ============ Grid image entrance + hover ============ */
.grid-img {
  transition: transform .35s ease, box-shadow .35s ease;
}
.grid-img:hover {
  transform: translate3d(0,-6px,0) scale(1.03);
  box-shadow: 0 20px 35px rgba(0,0,0,.25);
}

/* Gentle continuous float, GPU-composited via transform (not margin,
   which forces layout/reflow on every frame — a real cost during
   screen recording). */
@keyframes softFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-6px,0); }
}
.grid-img-float {
  animation: softFloat 4.5s ease-in-out infinite;
  will-change: transform;
}
.grid-img-float.f2 { animation-delay: .6s;  animation-duration: 5s; }
.grid-img-float.f3 { animation-delay: 1.2s; animation-duration: 4.8s; }
.grid-img-float.f4 { animation-delay: .3s;  animation-duration: 5.3s; }

/* ============ About/feature section image float ============ */
@keyframes sectionFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-10px,0); }
}
.section-img-float {
  animation: sectionFloat 5.5s ease-in-out infinite;
  will-change: transform;
}

/* ============ Multi-commodity section — premium effects ============ */
@keyframes commodityFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-12px,0); }
}
.commodity-img-float {
  animation: commodityFloat 5s ease-in-out infinite;
  will-change: transform;
}

@keyframes badgeFloat {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%      { transform: translate3d(0,-8px,0) rotate(-1deg); }
}
.commodity-badge {
  animation: badgeFloat 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes badgeFloatAlt {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50%      { transform: translate3d(0,8px,0) rotate(1deg); }
}
.commodity-badge-alt {
  animation: badgeFloatAlt 4.5s ease-in-out infinite;
  animation-delay: .5s;
  will-change: transform;
}

.commodity-chip {
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.commodity-chip:hover {
  transform: translate3d(0,-4px,0);
  box-shadow: 0 12px 24px rgba(0,151,156,.12);
}

/* ============ Respect reduced motion (all animated elements) ============ */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-scale, .float-img, .pulse-dot, .whatsapp-pulse,
  .grid-img-float, .section-img-float,
  .commodity-img-float, .commodity-badge, .commodity-badge-alt {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================
   Scroll-reveal styles — add this block ONCE to assets/css/style.css
   (paste at the end of the file). Works together with reveal.js.
   ========================================================== */

.fade-up{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.fade-up.in-view{ opacity: 1; transform: translateY(0); }

.delay-1{ transition-delay: .1s; }
.delay-2{ transition-delay: .2s; }
.delay-3{ transition-delay: .3s; }
.delay-4{ transition-delay: .4s; }
.delay-5{ transition-delay: .5s; }
.delay-6{ transition-delay: .6s; }

/* auto-stagger any grid of cards tagged .stagger-grid */
.stagger-grid > *:nth-child(1){ transition-delay: .05s; }
.stagger-grid > *:nth-child(2){ transition-delay: .15s; }
.stagger-grid > *:nth-child(3){ transition-delay: .25s; }
.stagger-grid > *:nth-child(4){ transition-delay: .35s; }
.stagger-grid > *:nth-child(5){ transition-delay: .45s; }
.stagger-grid > *:nth-child(6){ transition-delay: .55s; }

@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Floating decorative blobs */
.blob{
  position:absolute;
  border-radius:9999px;
  filter: blur(50px);
  opacity:.35;
  animation: float 9s ease-in-out infinite;
}
@keyframes float{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(0,-18px) scale(1.06); }
}

/* Gradient underline sweep on headings that opt in */
.heading-sweep{ position:relative; display:inline-block; }
.heading-sweep::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  height:3px; width:0;
  background: linear-gradient(90deg, #00979c, #7acacb);
  border-radius:9999px;
  transition: width .8s ease .2s;
}
.heading-sweep.in-view::after{ width:100%; }