/* ============================================================
   The Calm Mama Co — shared motion (css/motion.css)
   Pair with js/motion.js. Nothing is hidden unless js/motion.js has
   added .js-motion to <html>, and all hiding/animation lives inside
   (prefers-reduced-motion: no-preference), so reduced-motion visitors
   and visitors without JavaScript always see the finished page.

   Markup hooks
   - Arch outline:  <div data-arch="load|view"><div data-arch-frame>…<img>…</div></div>
                    load = draws on page load (or when first scrolled to, if it starts off-screen)
                    view = draws when it, or the [data-reveal] element around it, enters the viewport
   - Hero text:     <div data-motion-hero> children fade up 12px in sequence on load
   - Scroll reveal: data-reveal="up"   fade up 16px
                    data-reveal="row"  first child fades in, the rest 150ms later
                    data-reveal-group="name" data-reveal-step="150"  stagger within a batch
                    data-reveal-last   starts after the others revealed in the same batch
   ============================================================ */

@keyframes m-draw { from { stroke-dashoffset: 1; } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-up12 { from { opacity: 0; transform: translateY(12px); } }
@keyframes m-up16 { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Arch outline (SVG overlay built by js/motion.js) ---------- */
[data-arch] { position: relative; }
.m-arch-line { display: none; position: absolute; overflow: visible; pointer-events: none;
  transform-origin: 50% 50%; transition: transform .5s ease; }
.m-arch-line path { fill: none; stroke: #B89552; stroke-width: 3; vector-effect: non-scaling-stroke; }
/* with JS the SVG replaces the frame's CSS outline (the outline stays as the no-JS fallback) */
.js-motion [data-arch] [data-arch-frame] { outline: none; }
.js-motion [data-arch] .m-arch-line { display: block; }
/* linked cards: the outline tightens on hover, like the blog arches' outline-offset hover */
a:hover [data-arch] .m-arch-line { transform: scale(var(--m-sx, 1), var(--m-sy, 1)); }

@media (prefers-reduced-motion: no-preference) {
  /* 1. Arch draws in over 1.6s; the image fades in over 0.9s from 1.2s, as the line completes */
  .js-motion [data-arch] .m-arch-line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js-motion [data-arch].is-drawn .m-arch-line path { stroke-dashoffset: 0; animation: m-draw 1.6s ease-in-out var(--m-d, 0ms) backwards; }
  .js-motion [data-arch]:not(.is-drawn) [data-arch-frame] img { opacity: 0; }
  .js-motion [data-arch].is-drawn [data-arch-frame] img { animation: m-fade .9s ease calc(var(--m-d, 0ms) + 1.2s) backwards; }

  /* 2. Hero text fades up 12px in sequence: 0.8s each, 120ms apart, from 0.3s */
  .js-motion [data-motion-hero] > * { animation: m-up12 .8s ease backwards; }
  .js-motion [data-motion-hero] > :nth-child(1) { animation-delay: .3s; }
  .js-motion [data-motion-hero] > :nth-child(2) { animation-delay: .42s; }
  .js-motion [data-motion-hero] > :nth-child(3) { animation-delay: .54s; }
  .js-motion [data-motion-hero] > :nth-child(4) { animation-delay: .66s; }
  .js-motion [data-motion-hero] > :nth-child(5) { animation-delay: .78s; }
  .js-motion [data-motion-hero] > :nth-child(6) { animation-delay: .9s; }

  /* 3. Scroll reveal; --m-d (the stagger delay) is set per element by js/motion.js */
  .js-motion [data-reveal="up"]:not(.is-in),
  .js-motion [data-reveal="row"]:not(.is-in) > * { opacity: 0; }
  .js-motion [data-reveal="up"].is-in { animation: m-up16 .8s ease var(--m-d, 0ms) backwards; }
  .js-motion [data-reveal="row"].is-in > :first-child { animation: m-fade .7s ease var(--m-d, 0ms) backwards; }
  .js-motion [data-reveal="row"].is-in > :not(:first-child) { animation: m-fade .7s ease calc(var(--m-d, 0ms) + 150ms) backwards; }
}
/* 4. Reduced motion: none of the rules above apply, so everything is visible,
      the outline is fully drawn and nothing animates. */