/* ==========================================================================
   EliteBlocc — Motion States
   File: assets/css/global/eb-motion.css
   Version: 2.0

   Renamed from gsap-states.css. Cleaned and consolidated.
   Defines initial (hidden) states for GSAP reveal hooks.
   Actual animation is driven by eb-motion-core.js via GSAP.

   HOOK CLASSES
   .gsap-reveal          fade up
   .gsap-reveal-left     slide from left
   .gsap-reveal-right    slide from right
   .gsap-reveal-scale    scale + fade
   .gsap-reveal-clip     clip-path wipe
   .gsap-stagger > *     children stagger
   .gsap-fade            opacity only
   .gsap-hero-line       hero H1 line (SplitText)

   PAGE-SPECIFIC IO-DRIVEN REVEALS
   .eb-sus-reveal        sustainability page
   .eb-ct-reveal         contact page

   REDUCED MOTION
   All reveal classes resolve to visible immediately.
   Motion is an enhancement, never required for usability.

   BUTTON EFFECTS (retained from v1)
   .dh-glow-btn, .dh-sheen-text — premium button overlays
   ========================================================================== */

/* ── Reduced motion safety — must be first ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .gsap-reveal,
  .gsap-reveal-left,
  .gsap-reveal-right,
  .gsap-reveal-scale,
  .gsap-reveal-clip,
  .gsap-fade,
  .gsap-stagger > *,
  .gsap-hero-line,
  .eb-sus-reveal,
  .eb-ct-reveal {
    opacity:    1 !important;
    transform:  none !important;
    clip-path:  none !important;
  }
}

/* ── GSAP reveal initial states ──────────────────────────────────────────── */

.gsap-reveal {
  opacity:      0;
  transform:    translateY(32px);
  will-change:  transform, opacity;
}

.gsap-reveal-left {
  opacity:      0;
  transform:    translateX(-40px);
  will-change:  transform, opacity;
}

.gsap-reveal-right {
  opacity:      0;
  transform:    translateX(40px);
  will-change:  transform, opacity;
}

.gsap-reveal-scale {
  opacity:      0;
  transform:    scale(0.93);
  will-change:  transform, opacity;
}

.gsap-reveal-clip {
  clip-path:   inset(0 0 100% 0);
  will-change: clip-path;
}

.gsap-fade {
  opacity:     0;
  will-change: opacity;
}

.gsap-stagger > * {
  opacity:     0;
  transform:   translateY(24px);
  will-change: transform, opacity;
}

.gsap-hero-line {
  opacity:      0;
  transform:    translateY(20px) skewY(2deg);
  will-change:  transform, opacity;
  display:      block;
  overflow:     hidden;
}

/* ── Delay modifier classes ──────────────────────────────────────────────── */

.gsap-delay-1 { transition-delay: 0.10s; }
.gsap-delay-2 { transition-delay: 0.20s; }
.gsap-delay-3 { transition-delay: 0.30s; }

/* ── Sustainability page — IO-driven reveals ─────────────────────────────── */

.eb-sus-reveal {
  opacity:     0;
  transform:   translateY(28px);
  will-change: transform, opacity;
}

.eb-sus-reveal.is-visible {
  opacity:    1;
  transform:  none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.eb-sus-reveal--delay-1.is-visible { transition-delay: 0.10s; }
.eb-sus-reveal--delay-2.is-visible { transition-delay: 0.20s; }
.eb-sus-reveal--delay-3.is-visible { transition-delay: 0.30s; }

/* ── Contact page — IO-driven reveals ───────────────────────────────────── */

.eb-ct-reveal {
  opacity:     0;
  transform:   translateY(20px);
  will-change: transform, opacity;
}

.eb-ct-reveal.is-visible {
  opacity:    1;
  transform:  none;
  transition: opacity 0.50s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.50s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Button effects ──────────────────────────────────────────────────────── */

/* Premium glow overlay on primary buttons */
.dh-glow-btn {
  position: relative;
  overflow: hidden;
}

.dh-glow-btn--primary::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(255, 255, 255, 0.06);
  opacity:    0;
  transition: opacity var(--eb-duration-normal) var(--eb-ease-out);
}

.dh-glow-btn--primary:hover::after {
  opacity: 1;
}

/* Sheen text animation — hero use only */
.dh-sheen-text {
  background:              linear-gradient(
                             90deg,
                             rgba(220, 235, 225, 0.4) 0%,
                             rgba(255, 255, 255, 0.9) 50%,
                             rgba(220, 235, 225, 0.4) 100%
                           );
  background-size:         200% auto;
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
  animation:               eb-sheen-move 4s linear infinite;
}

@keyframes eb-sheen-move {
  from { background-position: 200% center; }
  to   { background-position:   0% center; }
}

@media (prefers-reduced-motion: reduce) {
  .dh-sheen-text {
    animation: none;
    background-position: 50% center;
  }
}

/* ── Hero badge ──────────────────────────────────────────────────────────── */

.eb-hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-family:    var(--eb-font-mono);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(16, 185, 129, 0.70);
  border:         0.5px solid rgba(16, 185, 129, 0.22);
  border-radius:  var(--eb-radius-full);
  padding:        5px 14px;
  background:     rgba(16, 185, 129, 0.05);
  margin-bottom:  20px;
}