/* ═══════════════════════════════════════════════
   SERASMAC v2 — Motion & Reveal
   Data contract: data-sm-reveal, data-sm-reveal-delay
   Visible state: .is-visible
   ═══════════════════════════════════════════════ */

/* ── Reveal system ── */
[data-sm-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--sm-duration-slow) var(--sm-ease-out),
              transform var(--sm-duration-slow) var(--sm-ease-out);
  will-change: opacity, transform;
}

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

/* stagger: each child gets data-sm-reveal-delay */

/* ── Hover depth on cards ── */
.sm-card--interactive {
  transition: transform var(--sm-duration-normal) var(--sm-ease-out),
              box-shadow var(--sm-duration-normal) var(--sm-ease-out),
              border-color var(--sm-duration-normal) var(--sm-ease-out);
}
.sm-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--sm-shadow-lg);
}

/* ── Process rail line ── */
.sm-process__step {
  position: relative;
}
.sm-process__step::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: -24px;
  width: 1.5px;
  background: var(--sm-line);
  transition: background var(--sm-duration-slow) var(--sm-ease-out);
}
.sm-process__step:last-child::before {
  display: none;
}
.sm-process__step.is-visible::before {
  background: var(--sm-teal);
}

/* ── FAQ transition ── */
.sm-faq details[open] .sm-faq__answer {
  animation: sm-fade-in var(--sm-duration-normal) var(--sm-ease-out);
}

@keyframes sm-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-sm-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sm-card--interactive:hover {
    transform: none;
  }
  .sm-faq details[open] .sm-faq__answer {
    animation: none;
  }
}