/* ============================================================================
   recipes-v2.css: the device floor for the V2 recipe pages.
   ----------------------------------------------------------------------------
   The full scrollcraft.css token sheet themes a whole standalone page (dark
   canvas on :root, its own type ramp). The recipes V2 pages are Tailwind
   pages in the shop's plaster world, so they load only the device rules the
   engine needs: pre-paint states for flow reveals, wipes, counts and
   parallax, plus the reduced-motion floor. Adapted from scrollcraft.css; the
   engine itself is never edited.

   Every hidden initial state is scoped to html.rv2-sc, which init.js adds
   immediately before a successful engine mount. Without JavaScript (or if
   the engine never arrives) nothing on the page is hidden: recipes are SEO
   content and must read as a plain document.
   ========================================================================== */

:root {
  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* counts read as figures, not jittering digits */
:where([data-sc-count]) { font-variant-numeric: tabular-nums; }

/* reveal + parallax */
.rv2-sc [data-sc-reveal] { will-change: clip-path; }
.rv2-sc [data-sc-parallax] { will-change: transform; }

/* flow reveal (fires once) */
.rv2-sc [data-sc-in], .rv2-sc [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
.rv2-sc [data-sc-in].sc-in, .rv2-sc [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  .rv2-sc [data-sc-in], .rv2-sc [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  .rv2-sc [data-sc-parallax] { transform: none !important; }
  /* A wipe is a position change too. Show reveal content settled. */
  .rv2-sc [data-sc-reveal] { clip-path: none !important; }
}