:root {
  --motion-ease: ease;
  --motion-page-duration: 0.7s;
  --motion-soft-duration: 0.7s;
  --motion-media-duration: 0.8s;
  --motion-interaction-fast: 0.22s;
  --motion-interaction: 0.35s;
  --motion-interaction-slow: 0.45s;
}

.motion-page-fade {
  animation: pageFadeIn var(--motion-page-duration) var(--motion-ease) both;
}

.motion-soft-reveal {
  animation: softReveal var(--motion-soft-duration) var(--motion-ease) both;
}

.motion-media-reveal {
  animation: mediaReveal var(--motion-media-duration) var(--motion-ease) both;
}

.motion-interactive {
  transition: color var(--motion-interaction) var(--motion-ease),
    background-color var(--motion-interaction) var(--motion-ease),
    border-color var(--motion-interaction) var(--motion-ease),
    box-shadow var(--motion-interaction) var(--motion-ease),
    opacity var(--motion-interaction) var(--motion-ease),
    transform var(--motion-interaction) var(--motion-ease);
}

.motion-hover-lift:hover {
  transform: translateY(-3px);
}

.motion-focus-ring:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes softReveal {
  from {
    filter: blur(8px);
    opacity: 0;
  }

  to {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes mediaReveal {
  from {
    filter: blur(10px);
    opacity: 0;
  }

  to {
    filter: blur(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------
   Canonical scroll-reveal wrapper
   - Single source of truth for one-shot, GPU-friendly on-scroll reveals
   - Gating class .page-motion-ready is added by shared-reveal.js so that
     SSR / no-JS users see static, fully-rendered content.
   - Match the home/about motion language:
     cubic-bezier(0.22, 1, 0.36, 1) at 0.72s with translate3d transitions.
------------------------------------------------------------------ */
.page-motion-ready [data-reveal] {
  opacity: 0;
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.page-motion-ready [data-reveal="fade-up"] {
  transform: translate3d(0, 26px, 0);
}

.page-motion-ready [data-reveal="slide-left"] {
  transform: translate3d(30px, 0, 0);
}

.page-motion-ready [data-reveal="slide-right"] {
  transform: translate3d(-30px, 0, 0);
}

.page-motion-ready [data-reveal="slide-right"].is-visible {
  margin-top: 0;
}

.page-motion-ready [data-reveal="fade-in"] {
  transform: scale(0.985);
}

.page-motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Staggered card lists — children only animate when their parent becomes
   visible, so the IntersectionObserver only needs to track the container.
   The JS computes --reveal-card-delay per child (index * 90ms, capped 360ms). */
.page-motion-ready .benefit-list .benefit-card,
.page-motion-ready .philosophy-grid .philosophy-tab,
.page-motion-ready .philosophy-grid .philosophy-card,
.page-motion-ready .map-cards .map-card,
.page-motion-ready .story-list .story-point,
.page-motion-ready .timeline-years a,
.page-motion-ready .history-swiper .history-slide-inner,
.page-motion-ready .products-catalog-grid .products-catalog-card {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-card-delay, 0ms);
  will-change: opacity, transform;
}

.page-motion-ready .benefit-list.is-visible .benefit-card,
.page-motion-ready .philosophy-grid.is-visible .philosophy-tab,
.page-motion-ready .philosophy-grid.is-visible .philosophy-card,
.page-motion-ready .map-cards.is-visible .map-card,
.page-motion-ready .story-list.is-visible .story-point,
.page-motion-ready .timeline-years.is-visible a,
.page-motion-ready .history-swiper.is-visible .history-slide-inner,
.page-motion-ready .products-catalog-grid.is-visible .products-catalog-card {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .page-motion-ready [data-reveal],
  .page-motion-ready [data-reveal].is-visible,
  .page-motion-ready .benefit-list .benefit-card,
  .page-motion-ready .philosophy-grid .philosophy-tab,
  .page-motion-ready .philosophy-grid .philosophy-card,
  .page-motion-ready .map-cards .map-card,
  .page-motion-ready .story-list .story-point,
  .page-motion-ready .timeline-years a,
  .page-motion-ready .history-swiper .history-slide-inner,
  .page-motion-ready .benefit-list.is-visible .benefit-card,
  .page-motion-ready .philosophy-grid.is-visible .philosophy-tab,
  .page-motion-ready .philosophy-grid.is-visible .philosophy-card,
  .page-motion-ready .map-cards.is-visible .map-card,
  .page-motion-ready .story-list.is-visible .story-point,
  .page-motion-ready .timeline-years.is-visible a,
  .page-motion-ready .history-swiper.is-visible .history-slide-inner,
  .page-motion-ready .products-catalog-grid .products-catalog-card,
  .page-motion-ready .products-catalog-grid.is-visible .products-catalog-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}