:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--motion-ease), transform 0.75s var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-reveal:nth-child(even) {
  transform: translateY(28px) translateX(12px);
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.api-stage,
.auth-panel {
  animation: surface-arrive 0.9s var(--motion-ease) both;
}

.route-map .node {
  animation: node-breathe 3s ease-in-out infinite;
}

.route-map .node:nth-of-type(2n) {
  animation-delay: -1.5s;
}

.model-list span,
.rice-mark i {
  animation: alternate-float 3.6s ease-in-out infinite;
}

.model-list span:nth-child(even),
.rice-mark i:nth-child(even) {
  animation-direction: reverse;
  animation-delay: -1.8s;
}

.button,
.submit-button {
  position: relative;
  overflow: hidden;
}

.button::after,
.submit-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.16);
  transform: translateX(-105%) skewX(-18deg);
  transition: transform 0.55s var(--motion-ease);
}

.button:hover::after,
.submit-button:hover::after {
  transform: translateX(105%) skewX(-18deg);
}

.chart-day i {
  transform-origin: bottom;
  animation: bar-rise 0.75s var(--motion-ease) both;
}

.chart-day:nth-child(2) i { animation-delay: 80ms; }
.chart-day:nth-child(3) i { animation-delay: 160ms; }
.chart-day:nth-child(4) i { animation-delay: 240ms; }
.chart-day:nth-child(5) i { animation-delay: 320ms; }
.chart-day:nth-child(6) i { animation-delay: 400ms; }
.chart-day:nth-child(7) i { animation-delay: 480ms; }
.chart-day:nth-child(8) i { animation-delay: 560ms; }

.donut {
  animation: donut-arrive 1s var(--motion-ease) both;
}

.view.active {
  animation: view-enter 0.42s var(--motion-ease) both;
}

.dash-nav button,
.model-card,
.metric-card,
.feature,
.catalog-card {
  transition: transform 0.25s var(--motion-ease), box-shadow 0.25s var(--motion-ease), border-color 0.25s ease;
}

.model-card:hover,
.metric-card:hover,
.feature:hover,
.catalog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 24px rgba(52, 48, 42, 0.08);
}

.auth-art .art-node {
  animation: node-breathe 2.8s ease-in-out infinite;
}

.auth-art .art-node:nth-child(2) { animation-delay: -0.9s; }
.auth-art .art-node:nth-child(3) { animation-delay: -1.8s; }

@keyframes surface-arrive {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes node-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes alternate-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes bar-rise {
  from { transform: scaleY(0); opacity: 0.35; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes donut-arrive {
  from { transform: rotate(-35deg) scale(0.7); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}

@keyframes view-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

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