/**
 * Antigravity Framework — Base CSS
 * All rules scoped to .div-site to prevent Flatsome conflicts.
 * We extend Flatsome's CSS variables rather than overriding them.
 */

/* ─────────────────────────────────────────────
   DIVERGENCE DESIGN TOKENS
   These complement Flatsome's native variables.
   ───────────────────────────────────────────── */
:root {
  /* Animation timing */
  --div-ease-smooth:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --div-ease-snappy:      cubic-bezier(0.16, 1, 0.3, 1);
  --div-ease-anticipate:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --div-ease-expo:        cubic-bezier(0.19, 1, 0.22, 1);

  /* Duration scale */
  --div-dur-xs:    0.2s;
  --div-dur-sm:    0.4s;
  --div-dur-md:    0.7s;
  --div-dur-lg:    1.0s;
  --div-dur-xl:    1.4s;

  /* Scroll progress (set by JS via scrub-progress animation) */
  --div-progress:  0;

  /* Z-index layers */
  --div-z-below:   -1;
  --div-z-base:    1;
  --div-z-float:   10;
  --div-z-overlay: 100;
  --div-z-modal:   1000;
}

/* ─────────────────────────────────────────────
   SMOOTH SCROLL HOST
   Lenis requires html to NOT have overflow:hidden
   and scroll-behaviour must be unset (Lenis handles it)
   ───────────────────────────────────────────── */
.div-site html {
  scroll-behavior: auto !important; /* Lenis takes over */
}

/* ─────────────────────────────────────────────
   REDUCED MOTION KILL SWITCH
   ───────────────────────────────────────────── */
.div-reduced-motion *,
.div-reduced-motion *::before,
.div-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ─────────────────────────────────────────────
   ANIMATION STAGING
   Elements pending scroll-triggered reveal
   are hidden until JS initialises.
   Use data-div-animate — the JS sets these.
   ───────────────────────────────────────────── */
.div-site [data-div-animate]:not(.div-initialised) {
  /* No visibility:hidden — avoids layout shift.
     Opacity managed by GSAP set() before animation plays. */
}

/* ─────────────────────────────────────────────
   CLIP PATH UTILITY
   Required for clip-reveal animations
   ───────────────────────────────────────────── */
.div-site .div-clip {
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   PARALLAX IMAGE CONTAINER
   Parent must be overflow:hidden for parallax-image
   ───────────────────────────────────────────── */
.div-site .div-parallax-wrap {
  overflow: hidden;
  position: relative;
}

.div-site .div-parallax-wrap img,
.div-site .div-parallax-wrap .div-parallax-inner {
  will-change: transform;
  transform-origin: center center;
}

/* ─────────────────────────────────────────────
   HORIZONTAL SCROLL SECTION
   ───────────────────────────────────────────── */
.div-site .div-h-scroll {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

.div-site .div-panel {
  width: 100vw;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   MAGNETIC ELEMENT
   ───────────────────────────────────────────── */
.div-site [data-div-animate="magnetic"] {
  display: inline-block;
  will-change: transform;
}

/* ─────────────────────────────────────────────
   PINNED SECTION
   Flatsome sections that get pinned by ScrollTrigger
   ───────────────────────────────────────────── */
.div-site .div-pin-spacer {
  /* Auto-generated by ScrollTrigger — don't add conflicting styles */
}

/* ─────────────────────────────────────────────
   SPLIT TEXT OVERFLOW MASK
   Applied via JS (split-text-slide animation)
   ───────────────────────────────────────────── */
.div-site .div-line-wrap {
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   PERFORMANCE HINTS
   Applied to elements that GSAP will animate
   ───────────────────────────────────────────── */
.div-site [data-div-animate] {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─────────────────────────────────────────────
   FLATSOME SECTION OVERRIDES
   Safe extensions — additive only, never removing Flatsome defaults.
   Always prefix with .div-site to maintain specificity hierarchy.
   ───────────────────────────────────────────── */

/* Allow overflow:visible on UX Builder rows when we need it (parallax, etc.) */
.div-site .row.div-overflow-visible {
  overflow: visible !important;
}

/* Full-bleed sections (used for immersive hero/parallax scenes) */
.div-site .div-full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ─────────────────────────────────────────────
   COUNTER ELEMENT
   ───────────────────────────────────────────── */
.div-site .div-counter {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────
   SCROLL PROGRESS BAR (optional UI element)
   Driven by --div-progress CSS var
   ───────────────────────────────────────────── */
.div-site .div-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: calc(var(--div-progress) * 100%);
  background: var(--primary-color, #000);
  z-index: var(--div-z-overlay);
  transform-origin: left;
  pointer-events: none;
}