/* E-GreenLife Motion CSS — progressive enhancement helpers
   Content remains visible if GSAP fails. */

/* Hero image on ::after so we can scale without layout shift */
body.eg-redesign .eg-hero {
  --eg-hero-scale: 1;
  background-image: none !important;
}

body.eg-redesign .eg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--eg-hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(var(--eg-hero-scale, 1));
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}

body.eg-redesign .eg-hero::before {
  z-index: 1;
}

body.eg-redesign .eg-hero__content {
  z-index: 2;
}

/* No CSS-hide: GSAP uses from() only — content visible without JS */

/* visibility always on; GSAP only enhances */

/* Header scroll solidification — no height change */
body.eg-redesign .eg-header {
  transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

body.eg-redesign .eg-header.eg-header--scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 0 var(--eg-color-border), var(--eg-shadow-sm);
}

/* Project / product image hover base (GSAP enhances; CSS fallback desktop) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.eg-redesign:not(.eg-motion-on) .eg-projects__featured img,
  body.eg-redesign:not(.eg-motion-on) .eg-projects__card img,
  body.eg-redesign:not(.eg-motion-on) .eg-product-card__media img {
    transition: transform 0.45s ease;
  }

  body.eg-redesign:not(.eg-motion-on) .eg-projects__featured:hover img,
  body.eg-redesign:not(.eg-motion-on) .eg-projects__card:hover img,
  body.eg-redesign:not(.eg-motion-on) .eg-product-card__media:hover img {
    transform: scale(1.025);
  }

  body.eg-redesign:not(.eg-motion-on) .eg-btn {
    transition: transform 0.28s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  body.eg-redesign:not(.eg-motion-on) .eg-btn:hover {
    transform: translateY(-2px);
  }
}

body.eg-redesign .eg-projects__featured img,
body.eg-redesign .eg-projects__card img,
body.eg-redesign .eg-product-card__media img,
body.eg-redesign .eg-blog__card-media img {
  transform-origin: center center;
  will-change: transform;
}

/* Drawer: when GSAP motion on, let GSAP own transforms */
html.eg-motion-on body.eg-redesign .eg-drawer {
  transition: none;
}

html.eg-motion-on body.eg-redesign .eg-drawer__panel {
  transition: none;
}

/* Reduced motion — everything immediate */
@media (prefers-reduced-motion: reduce) {
  html.eg-enhance .eg-header,
  html.eg-enhance .eg-hero__eyebrow,
  html.eg-enhance .eg-hero__title,
  html.eg-enhance .eg-hero__text,
  html.eg-enhance .eg-hero__actions {
    opacity: 1 !important;
    transform: none !important;
  }

  body.eg-redesign .eg-hero::after {
    transform: none !important;
  }

  body.eg-redesign .eg-header,
  body.eg-redesign .eg-btn,
  body.eg-redesign .eg-drawer,
  body.eg-redesign .eg-drawer__panel {
    transition: none !important;
  }
}