@keyframes pageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes heroCopyIn {
  from { opacity: 0; transform: translate3d(-44px, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes heroVisualIn {
  from { opacity: 0; transform: scale(1.075); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes buttonShine {
  from { transform: translateX(-190%) skewX(-18deg); }
  to { transform: translateX(290%) skewX(-18deg); }
}

@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(17, 190, 95, 0.35); }
  75%, 100% { box-shadow: 0 0 0 14px rgba(17, 190, 95, 0); }
}

body { animation: pageFade 0.42s ease both; }

.hero-copy {
  animation: heroCopyIn 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.hero-visual { overflow: hidden; }
.hero-visual > img {
  animation: heroVisualIn 1.15s cubic-bezier(0.2, 0.75, 0.2, 1) both;
  transform: translateY(var(--hero-shift, 0));
  transition: transform 0.15s linear;
}

.hero-benefits > div {
  animation: softFloat 3.5s ease-in-out infinite;
}
.hero-benefits > div:nth-child(2) { animation-delay: 0.35s; }
.hero-benefits > div:nth-child(3) { animation-delay: 0.7s; }

.motion-reveal {
  opacity: 0;
  transform: translate3d(0, 54px, 0) scale(0.96);
  transition:
    opacity 0.82s ease var(--motion-delay, 0ms),
    transform 0.82s cubic-bezier(0.2, 0.72, 0.2, 1) var(--motion-delay, 0ms);
}

.motion-reveal.motion-right { transform: translate3d(38px, 0, 0); }
.motion-reveal.motion-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 36px rgba(5, 69, 48, 0.16);
  backdrop-filter: blur(12px);
}

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  left: 0;
  width: 35%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: translateX(-190%) skewX(-18deg);
}
.btn:hover::after { animation: buttonShine 0.82s ease; }

.product-card,
.custom-vest-card,
.category-grid > a,
.compliance-grid article,
.industry-grid > div,
.testimonial-grid article,
.process-grid article,
.video-card,
.faq article,
.contact-list > a {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.72, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.product-card:hover,
.custom-vest-card:hover,
.category-grid > a:hover,
.compliance-grid article:hover,
.testimonial-grid article:hover,
.video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(7, 70, 51, 0.15);
}

.industry-grid > div:hover,
.faq article:hover,
.contact-list > a:hover {
  transform: translateY(-4px);
}

.product-card img,
.custom-vest-card img,
.category-grid img,
.about-image img,
.video-thumb {
  transition: transform 0.65s cubic-bezier(0.2, 0.72, 0.2, 1), filter 0.65s ease;
}
.product-card:hover img,
.custom-vest-card:hover img,
.category-grid > a:hover img,
.video-card:hover .video-thumb {
  transform: scale(1.055);
  filter: saturate(1.05);
}
.about-image { overflow: hidden; }
.about-image:hover img { transform: scale(1.035); }

.eyebrow i {
  transform-origin: left center;
  transition: transform 0.45s ease;
}
.motion-visible .eyebrow i,
.eyebrow.motion-visible i { transform: scaleX(1.25); }

.process-top span { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.process-grid article:hover .process-top span {
  transform: rotate(-7deg) scale(1.08);
  box-shadow: 0 0 0 9px #e7f6f0;
}
.process-icon { transition: transform 0.35s ease, background-color 0.35s ease; }
.process-grid article:hover .process-icon {
  transform: rotate(5deg) scale(1.08);
  background: #dff4eb;
}

.video-thumb span { transition: transform 0.3s ease, background-color 0.3s ease; }
.video-card:hover .video-thumb span { transform: scale(1.12); }

.float-action.whatsapp { animation: pulseRing 2.3s infinite; }
.float-action svg { transition: transform 0.25s ease; }
.float-action:hover svg { transform: rotate(-8deg) scale(1.08); }

.custom-gallery-track,
.video-track {
  transition: transform 0.62s cubic-bezier(0.22, 0.75, 0.2, 1) !important;
  will-change: transform;
}

.modal.open .modal-card,
.legal-modal.open .legal-card {
  animation: heroVisualIn 0.35s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

@media (max-width: 700px) {
  .hero-copy { animation-duration: 0.65s; }
  .hero-benefits > div { animation: none; }
  .product-card:hover,
  .custom-vest-card:hover,
  .category-grid > a:hover,
  .video-card:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .motion-reveal { opacity: 1; transform: none; }
  .hero-visual > img { transform: none; }
}