/* Propane Safety Pro — /safety-app/ motion pass (Mira, 2026-08-12)
 * Kassia REVISE gate: zero scroll-triggered motion + no motion spec on file.
 * See MOTION-SPEC.md at repo root. Full spec detail lives there; this file is
 * the implementation only.
 *
 * Mechanism: native CSS scroll-driven animation (animation-timeline: view()),
 * reusing the exact pattern from tankspotter-io-rebuild /field-worker-os
 * pillar spine (site/app/globals.css lines ~259-291) per Kassia's routing
 * note — do not invent a new mechanism per page. Compositor-thread only,
 * zero main-thread JS, zero INP cost, no library.
 *
 * Scope — ONE signature motion moment for this page, per design-constitution
 * Article 5: a single reveal treatment (same keyframe, same tokens) applied
 * to the two content blocks Kassia named as the natural candidates — the
 * 4-step process row and the testimonial section. This counts as one system,
 * not two separate motion ideas. Hero, headline, and everything else on the
 * page stays static by design.
 *
 * Testimonial section: the reveal is applied to the SECTION CONTAINER
 * (.testimonial-section), not the individual owl-carousel .item elements —
 * owl-carousel already manages its own transform/opacity on carousel
 * internals (autoplay slide transitions, clone items for the loop); animating
 * individual items independently would fight that. One block-level entrance
 * for the whole section avoids the conflict and is the more restrained choice
 * anyway.
 */

@supports (animation-timeline: view()) {
  .process-section .step-col,
  .testimonial-section {
    animation: psp-reveal linear both;
    animation-timeline: view();
    animation-range: entry;
  }

  /* Slight per-column offset so the 4 steps read left-to-right rather than
   * as one flat block, without any JS/stagger hack — each column's own
   * animation-range start is nudged later in sequence. */
  .process-section .step-col:nth-child(2) { animation-range: entry 5% entry 65%; }
  .process-section .step-col:nth-child(3) { animation-range: entry 10% entry 70%; }
  .process-section .step-col:nth-child(4) { animation-range: entry 15% entry 75%; }
}

@keyframes psp-reveal {
  from {
    /* Fail-visible: never starts from opacity:0. If the timeline never
     * advances (unsupported browser without this block applying at all,
     * or a headless/throttled render that never fires a frame), content
     * still reads as legible and correctly positioned, just slightly faded
     * and offset — never invisible. */
    opacity: 0.5;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion (WCAG 2.3.3): collapse to instant final state, no movement.
 * Belt-and-suspenders with the @supports gate above — browsers that don't
 * support animation-timeline never run the animation at all; browsers that
 * do, but have reduced-motion set, get this override instead. */
@media (prefers-reduced-motion: reduce) {
  .process-section .step-col,
  .testimonial-section {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Color-restraint ruling, Sera 2026-08-12 (psp-safety-app-accent-ruling):
 * single-accent = green, reused from this page's own H1 (.container h1,
 * custom.css). Replaces dead-code .orange (no CSS rule existed for it).
 * Selector scoped to the real DOM structure (.step-col h4 span.psp-step-number)
 * rather than a bare .psp-step-number class: the theme's own
 * `h4 > span:not(.nocolor):not(.badge)` rule (style.css) carries specificity
 * (0,2,2) and would otherwise silently win over a single class (0,1,0)
 * regardless of load order. This is the same intent, matched to the actual
 * markup, not a new color decision.
 *
 * Contrast: rendered .step-col h4 span.psp-step-number computes 18px/700 at
 * desktop width (1280px) — under the 18.66px-bold large-text threshold, so
 * #0d9525 (3.93:1) fails normal-text AA there even though it passes at
 * narrower widths (20px/700 at ~500px). Per the ruling's fallback
 * instruction, using #0a5c17 (same hue family, 8.21:1) instead, which
 * passes AA at every measured size. */
.step-col h4 span.psp-step-number {
  color: #0a5c17;
  font-weight: 700;
}

/* App-store/Google-Play download badges (slide 22, 2026-08-12): the combined
 * PNG was split into two separately-linked images so each badge is its own
 * accessible, independently-clickable target. display:inline-block keeps the
 * link's box tight to the image (no stray hit area); the focus ring reuses
 * this page's one established accent (#0a5c17) rather than adding a new
 * color, per the single-accent ruling above.
 *
 * !important is required here to beat the theme's sitewide
 * `:active,:focus { outline: none !important; }` (style.css:61) — a
 * pre-existing site-wide defect, out of scope to fix in this task (flagged
 * in the handoff), but this task explicitly requires a visible focus state
 * on these two links, so the override is scoped ONLY to .app-badge-link. */
.app-badge-link {
  display: inline-block;
  border-radius: 6px;
}
.app-badge-link:focus-visible {
  outline: 3px solid #0a5c17 !important;
  outline-offset: 3px;
}