/**
 * Motion tokens — see DESIGN.md § Animation
 * Load after linear-theme.css
 */

:root {
  --motion-duration-fast: 120ms;
  --motion-duration-hover: 150ms;
  --motion-duration-dropdown-in: 180ms;
  --motion-duration-dropdown-out: 120ms;
  --motion-duration-reveal: 500ms;
  --motion-duration-hero: 900ms;
  --motion-stagger: 60ms;
  --motion-stagger-tight: 40ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-reveal-y: 16px;
  --motion-dropdown-y: -4px;
  --motion-nav-dim: 0.42;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-reveal: 0.01ms;
    --motion-duration-hero: 0.01ms;
    --motion-stagger: 0ms;
    --motion-stagger-tight: 0ms;
  }
}

.reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-y), 0);
  transition:
    opacity var(--motion-duration-reveal) var(--motion-ease-out),
    transform var(--motion-duration-reveal) var(--motion-ease-out);
  will-change: transform, opacity;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-on-scroll[data-reveal-delay="1"] { transition-delay: calc(var(--motion-stagger-tight) * 1); }
.reveal-on-scroll[data-reveal-delay="2"] { transition-delay: calc(var(--motion-stagger-tight) * 2); }
.reveal-on-scroll[data-reveal-delay="3"] { transition-delay: calc(var(--motion-stagger-tight) * 3); }
.reveal-on-scroll[data-reveal-delay="4"] { transition-delay: calc(var(--motion-stagger-tight) * 4); }
.reveal-on-scroll[data-reveal-delay="5"] { transition-delay: calc(var(--motion-stagger-tight) * 5); }

[data-reveal-group] .reveal-on-scroll:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group] .reveal-on-scroll:nth-child(2) { transition-delay: var(--motion-stagger); }
[data-reveal-group] .reveal-on-scroll:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); }
[data-reveal-group] .reveal-on-scroll:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); }
[data-reveal-group] .reveal-on-scroll:nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); }
[data-reveal-group] .reveal-on-scroll:nth-child(6) { transition-delay: calc(var(--motion-stagger) * 5); }
[data-reveal-group] .reveal-on-scroll:nth-child(n + 7) { transition-delay: calc(var(--motion-stagger) * 6); }

.hero-sequence .hero-seq-item {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-y), 0);
}

.hero-sequence.is-ready .hero-seq-item {
  animation: heroSeqIn var(--motion-duration-hero) var(--motion-ease-out) forwards;
}

.hero-sequence.is-ready .hero-seq-title { animation-delay: 0ms; }
.hero-sequence.is-ready .hero-seq-desc { animation-delay: 120ms; }
.hero-sequence.is-ready .hero-seq-tags { animation-delay: 220ms; }
.hero-sequence.is-ready .hero-seq-actions { animation-delay: 320ms; }
.hero-sequence.is-ready .hero-seq-visual {
  animation: heroVisualIn 560ms var(--motion-ease-out) forwards;
  animation-delay: 280ms;
}

@keyframes heroSeqIn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroVisualIn {
  from {
    opacity: 0;
    transform: scale(0.98) translate3d(0, var(--motion-reveal-y), 0);
  }
  to {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .hero-sequence .hero-seq-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

.interactive-card,
.panel-card,
.feature-card,
.solution-preview-card,
.product-card,
.scenario-card,
.case-study-card,
.ability-card,
.detail-kpi-card,
.scope-card,
.story-card,
.nephrology-module-card {
  transition:
    transform var(--motion-duration-hover) ease-out,
    border-color var(--motion-duration-hover) ease-out;
}

.interactive-card:hover,
.panel-card:hover,
.feature-card:hover,
.solution-preview-card:hover,
.product-card:hover,
.scenario-card:hover,
.case-study-card:hover,
.ability-card:hover,
.detail-kpi-card:hover,
.scope-card:hover,
.story-card:hover,
.nephrology-module-card:hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] .interactive-card:hover,
[data-theme="light"] .panel-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .solution-preview-card:hover,
[data-theme="light"] .product-card:hover,
[data-theme="light"] .scenario-card:hover,
[data-theme="light"] .case-study-card:hover,
[data-theme="light"] .ability-card:hover,
[data-theme="light"] .detail-kpi-card:hover,
[data-theme="light"] .scope-card:hover,
[data-theme="light"] .story-card:hover,
[data-theme="light"] .nephrology-module-card:hover {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.button:active {
  transform: scale(0.98);
  transition-duration: var(--motion-duration-fast);
}

.nav-dropdown-panel {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--motion-duration-dropdown-in) ease-out,
    transform var(--motion-duration-dropdown-in) ease-out;
}

.nav-dropdown.is-open .nav-dropdown-panel {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  pointer-events: auto;
}

.nav-dropdown.is-closing .nav-dropdown-panel {
  transform: translate3d(-50%, var(--motion-dropdown-y), 0);
}

.nav-dropdown.is-closing .nav-dropdown-panel {
  transition-duration: var(--motion-duration-dropdown-out);
  transition-timing-function: var(--motion-ease-in);
}

.site-nav.is-open .site-nav a,
.site-nav.is-open .nav-dropdown {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: mobileNavIn 400ms var(--motion-ease-out) forwards;
}

.site-nav.is-open .site-nav > *:nth-child(1) { animation-delay: 40ms; }
.site-nav.is-open .site-nav > *:nth-child(2) { animation-delay: 80ms; }
.site-nav.is-open .site-nav > *:nth-child(3) { animation-delay: 120ms; }
.site-nav.is-open .site-nav > *:nth-child(4) { animation-delay: 160ms; }
.site-nav.is-open .site-nav > *:nth-child(5) { animation-delay: 200ms; }
.site-nav.is-open .site-nav > *:nth-child(6) { animation-delay: 240ms; }
.site-nav.is-open .site-nav > *:nth-child(7) { animation-delay: 280ms; }
.site-nav.is-open .site-nav > *:nth-child(8) { animation-delay: 320ms; }

@keyframes mobileNavIn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.banner-product-shot img[data-hero-parallax] {
  will-change: transform;
  transition: transform 0ms linear;
}