/* Scroll reveals, hero motion, hovers — active when html.motion-js (see app.js) */

@keyframes heroDrift {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.07) translate3d(-0.6%, 0.4%, 0);
  }
}

@keyframes heroShine {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.88;
  }
}

@keyframes goldBarPulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.88;
    filter: brightness(1.08);
  }
}

@keyframes fabBreathe {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45), 0 0 0 1px rgba(44, 30, 23, 0.15);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 14px 36px rgba(37, 211, 102, 0.55), 0 0 0 2px rgba(184, 151, 93, 0.35);
  }
}

html.motion-js .hero-media {
  animation: heroDrift 32s ease-in-out infinite alternate;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .product-card,
  .nav-card,
  .utility-card,
  .metric-card,
  .contact-card,
  .post-item,
  .green-pillar {
    will-change: transform;
  }
}

html.motion-js .hero-overlay {
  animation: heroShine 8s ease-in-out infinite;
}

html.motion-js .metric-card::before {
  animation: goldBarPulse 4s ease-in-out infinite;
}

html.motion-js .fab {
  animation: fabBreathe 3.2s ease-in-out infinite;
}

html.motion-js .fab:hover {
  animation: none;
}

/* --- Scroll reveal --- */
html.motion-js .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition:
    opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

html.motion-js .motion-reveal--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Section title gold rule: draws in when section becomes visible */
.section-head h2::after {
  transform-origin: center;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-head-left h2::after {
  transform-origin: left center;
}

html.motion-js .section-head.motion-reveal:not(.motion-reveal--visible) h2::after {
  transform: scaleX(0);
}

html.motion-js .section-head.motion-reveal--visible h2::after {
  transform: scaleX(1);
}

/* Containers that only stagger children (no fade on wrapper) */
html.motion-js .motion-reveal.motion-reveal--stagger-children {
  opacity: 1;
  transform: none;
  transition: none;
}

html.motion-js .product-grid.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .product-tile,
html.motion-js .product-catalog.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .product-card,
html.motion-js .utilities-grid.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .utility-card,
html.motion-js .green-pillars.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .green-pillar,
html.motion-js .nav-cards.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .nav-card,
html.motion-js .metrics.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .metric-card,
html.motion-js .page-media-grid.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .page-media,
html.motion-js .contact-grid.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .contact-card {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}

html.motion-js .product-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .product-tile,
html.motion-js .product-catalog.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .product-card,
html.motion-js .utilities-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .utility-card,
html.motion-js .green-pillars.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .green-pillar,
html.motion-js .nav-cards.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .nav-card,
html.motion-js .metrics.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .metric-card,
html.motion-js .page-media-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .page-media,
html.motion-js .contact-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .contact-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion-js .product-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .product-tile:nth-child(1) {
  transition-delay: 0ms;
}
html.motion-js .product-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .product-tile:nth-child(2) {
  transition-delay: 90ms;
}
html.motion-js .product-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .product-tile:nth-child(3) {
  transition-delay: 180ms;
}
html.motion-js .product-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .product-tile:nth-child(4) {
  transition-delay: 270ms;
}

html.motion-js .product-catalog.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .product-card:nth-child(1) {
  transition-delay: 0ms;
}
html.motion-js .product-catalog.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .product-card:nth-child(2) {
  transition-delay: 100ms;
}
html.motion-js .utilities-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .utility-card:nth-child(1) {
  transition-delay: 0ms;
}
html.motion-js .utilities-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .utility-card:nth-child(2) {
  transition-delay: 70ms;
}
html.motion-js .utilities-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .utility-card:nth-child(3) {
  transition-delay: 140ms;
}
html.motion-js .utilities-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .utility-card:nth-child(4) {
  transition-delay: 210ms;
}
html.motion-js .utilities-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .utility-card:nth-child(5) {
  transition-delay: 280ms;
}

html.motion-js .nav-cards.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .nav-card:nth-child(1) {
  transition-delay: 0ms;
}
html.motion-js .nav-cards.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .nav-card:nth-child(2) {
  transition-delay: 100ms;
}
html.motion-js .nav-cards.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .nav-card:nth-child(3) {
  transition-delay: 200ms;
}
html.motion-js .nav-cards.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .nav-card:nth-child(4) {
  transition-delay: 300ms;
}

html.motion-js .metrics.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .metric-card:nth-child(1) {
  transition-delay: 0ms;
}
html.motion-js .metrics.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .metric-card:nth-child(2) {
  transition-delay: 80ms;
}
html.motion-js .metrics.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .metric-card:nth-child(3) {
  transition-delay: 160ms;
}
html.motion-js .metrics.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .metric-card:nth-child(4) {
  transition-delay: 240ms;
}
html.motion-js .metrics.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .metric-card:nth-child(5) {
  transition-delay: 320ms;
}
html.motion-js .metrics.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .metric-card:nth-child(6) {
  transition-delay: 400ms;
}

html.motion-js .contact-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .contact-card:nth-child(1) {
  transition-delay: 0ms;
}
html.motion-js .contact-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .contact-card:nth-child(2) {
  transition-delay: 90ms;
}
html.motion-js .contact-grid.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .contact-card:nth-child(3) {
  transition-delay: 180ms;
}

/* Spec table rows */
html.motion-js .spec-table.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .spec-row {
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
}

html.motion-js .spec-table.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .spec-row {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion-js .spec-table.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .spec-row:nth-child(1) {
  transition-delay: 0ms;
}
html.motion-js .spec-table.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .spec-row:nth-child(2) {
  transition-delay: 55ms;
}
html.motion-js .spec-table.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .spec-row:nth-child(3) {
  transition-delay: 110ms;
}
html.motion-js .spec-table.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .spec-row:nth-child(4) {
  transition-delay: 165ms;
}
html.motion-js .spec-table.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .spec-row:nth-child(5) {
  transition-delay: 220ms;
}
html.motion-js .spec-table.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .spec-row:nth-child(6) {
  transition-delay: 275ms;
}
html.motion-js .spec-table.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .spec-row:nth-child(7) {
  transition-delay: 330ms;
}

/* Facility split */
html.motion-js .split.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .split-text,
html.motion-js .split.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) .split-media {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}

html.motion-js .split.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .split-text,
html.motion-js .split.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .split-media {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion-js .split.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible .split-media {
  transition-delay: 120ms;
}

/* Facility wide image */
html.motion-js .facility-wide.motion-reveal.motion-reveal--stagger-children:not(.motion-reveal--visible) img {
  opacity: 0;
  transform: scale(1.03);
}

html.motion-js .facility-wide.motion-reveal.motion-reveal--stagger-children.motion-reveal--visible img {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reduced motion: disable scroll choreography & ambient loops --- */
@media (prefers-reduced-motion: reduce) {
  html.motion-js .hero-media,
  html.motion-js .hero-overlay,
  html.motion-js .metric-card::before,
  html.motion-js .fab {
    animation: none !important;
  }

  html.motion-js .motion-reveal,
  html.motion-js .motion-reveal--visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.motion-js .section-head h2::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  html.motion-js .product-grid .product-tile,
  html.motion-js .product-catalog .product-card,
  html.motion-js .utilities-grid .utility-card,
  html.motion-js .green-pillars .green-pillar,
  html.motion-js .nav-cards .nav-card,
  html.motion-js .metrics .metric-card,
  html.motion-js .contact-grid .contact-card,
  html.motion-js .spec-table .spec-row,
  html.motion-js .split .split-text,
  html.motion-js .split .split-media,
  html.motion-js .facility-wide img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}