/* public/page-studio-assets/runtimes/scroll-effects.css
   Baseline CSS for the scroll-effects.js runtime. Both the "armed"
   (hidden initial) state and the "played" state are gated behind
   attributes that ONLY the runtime sets — so JS-off or JS-failure
   degrades to natural rendering with no FOUC. */

@layer ps-components {

  /* ── Scroll reveal — one-shot, on enter ─────────────────────────── */

  [data-ps-scroll][data-ps-scroll-armed="1"] {
    --ps-se-x: 0;
    --ps-se-y: 20px;
    --ps-se-scale: 1;
    --ps-se-opacity: 0;
    opacity: var(--ps-se-opacity);
    transform: translate(var(--ps-se-x), var(--ps-se-y)) scale(var(--ps-se-scale));
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
  }

  [data-ps-scroll-preset="slide-left"][data-ps-scroll-armed="1"]  { --ps-se-x: -30px; --ps-se-y: 0; }
  [data-ps-scroll-preset="slide-right"][data-ps-scroll-armed="1"] { --ps-se-x:  30px; --ps-se-y: 0; }
  [data-ps-scroll-preset="flip-left"][data-ps-scroll-armed="1"]   { --ps-se-x: -30px; --ps-se-y: 0; }
  [data-ps-scroll-preset="flip-right"][data-ps-scroll-armed="1"]  { --ps-se-x:  30px; --ps-se-y: 0; }
  [data-ps-scroll-preset="zoom"][data-ps-scroll-armed="1"]        { --ps-se-scale: 0.9; }

  [data-ps-scroll][data-ps-scroll-state="played"] {
    --ps-se-opacity: 1;
    --ps-se-x: 0;
    --ps-se-y: 0;
    --ps-se-scale: 1;
  }

  /* ── Parallax — continuous transform, driven by scroll offset ──── */

  [data-ps-scroll][data-ps-parallax] { will-change: transform; }

}