/* ==========================================================================
   UltraWideCheck — Motion
   Transform/opacity only. Respects prefers-reduced-motion via base.css.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 60ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 120ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 180ms; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 240ms; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Hero backdrop drift ---- */

@keyframes hero-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
}

.hero-backdrop {
  animation: hero-drift 22s var(--ease-in-out) infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .hero-backdrop { animation: none; }
}

/* ---- Status pulse (used sparingly, once, on the hero result state) ---- */

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--status-excellent-soft); }
  100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}

.pulse-once { animation: pulse-ring 1.6s var(--ease-out) 1; }

/* ---- Sticky storytelling section ---- */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}

.story__visual {
  position: sticky;
  top: 96px;
  aspect-ratio: 32 / 15;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
}

.story__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vw, 96px);
}

.story__step {
  opacity: 0.35;
  transition: opacity var(--dur-base) var(--ease-out);
  padding-block: 8px;
  border-left: 2px solid var(--border-subtle);
  padding-left: 24px;
}

.story__step.is-active {
  opacity: 1;
  border-left-color: var(--accent-9);
}

.story__step h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.story__step p {
  color: var(--text-secondary);
  max-width: 46ch;
}

.story__frame {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.story__frame.is-active { opacity: 1; }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story__visual { position: relative; top: 0; aspect-ratio: 32 / 18; }
}

/* ---- Scale-in on hover for interactive rows ---- */

.hoverable {
  transition: background var(--dur-fast) var(--ease-out);
}
.hoverable:hover { background: var(--bg-panel-hover); }