/* Shared curve from the original landing. Motion is limited to feedback and state changes. */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }
html[data-input="pointer"] .button {
  transition: background-color 160ms ease, transform 140ms var(--ease-out), opacity 100ms var(--ease-out);
}
html[data-input="pointer"] .button:active:not(:disabled) {
  transform: scale(.98);
  transition-duration: 100ms;
}
html[data-input="keyboard"] .button { transition: none; }
.hero-visual { animation: hero-arrive 280ms var(--ease-out) both; }
@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-visual { animation: hero-fade 100ms var(--ease-out) both !important; }
  html[data-input="pointer"] .button { transition: opacity 100ms var(--ease-out) !important; }
  html[data-input="pointer"] .button:active:not(:disabled) { transform: none; opacity: .88; }
}

/* The vertical plus stroke merges into the minus, reversing from its current frame. */
.faq-icon::after { transition:transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
html[data-input="keyboard"] .faq-icon::after { transition:none; }
@media(prefers-reduced-motion:reduce) {
 .faq-icon::after { transform:rotate(90deg) !important; transition:opacity 100ms var(--ease-out); }
 html[data-input="keyboard"] .faq-icon::after { transition:none; }
}

/* One-time directional cue: no loop and no movement of the readable cards. */
.steps-arrived .step-arrow svg { animation:step-arrive 180ms var(--ease-out) both; }
.steps-arrived .step-arrow:nth-child(4) svg { animation-delay:60ms; }
@keyframes step-arrive { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:translateX(0); } }
@media(prefers-reduced-motion:reduce) {
 .steps-arrived .step-arrow svg { animation:hero-fade 100ms var(--ease-out) both !important; }
}

/* One explanatory reveal; the original image remains the no-JS fallback. */
.violations-art { display:block; width:100%; height:auto; }
.violations-arrived .violations-panel { animation:violations-panel-in 240ms var(--ease-out) both; }
.violations-arrived .violations-warning,
.violations-arrived .violations-glow { animation:hero-fade 180ms var(--ease-out) 240ms both; }
@keyframes violations-panel-in {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce) {
  .violations-arrived .violations-panel,
  .violations-arrived .violations-warning,
  .violations-arrived .violations-glow { animation:hero-fade 100ms var(--ease-out) both !important; }
}