/* EDEN for Sites — canonical entrance motion.
   Source of truth: eden-api/lib/eden-mcsla.js (WEB_MOTION) and
   eden-api/wiki/EDEN_Studio_MCSLA_Framework.md. Do not hand-roll motion per build.

   ============================================================================
   THE RULE THAT MUST NOT BE BROKEN: SCROLL-DRIVEN MOTION IS TRANSFORM ONLY.
   ============================================================================
   A scroll-driven animation has NO TIME COMPONENT, so every intermediate state is
   PERMANENT — a reader can stop scrolling at opacity 0.851 and it stays there.
   Measured on this palette that renders body text at 3.79:1 against a 4.5:1
   requirement, so a scroll-linked fade is a WCAG 1.4.3 failure BY CONSTRUCTION and
   no animation-range value can close the band.

   DO NOT ADD OPACITY BACK. It will look better in a demo and fail an audit.
   Established on the CKB build, 24 August 2026, and re-verified 27 August 2026.

   Time-based transitions (hover, focus, press) MAY use opacity, because they always
   run to completion and have no readable intermediate resting state.

   Second rule: animate transform and opacity only. Never width, height, top, left,
   margin or padding — those hit layout and drop frames. This is the web form of
   "never direct a move the renderer cannot execute".

   Third rule: ONE move per element. A rise plus a slide plus a scale reads as jitter.

   Everything below is gated twice — on @supports, so a browser without scroll-driven
   animation shows the content in place, and on prefers-reduced-motion, so a reader who
   asked for stillness gets it. Motion is ENTRANCE ONLY: nothing loops, nothing
   autoplays, nothing moves while it is being read.
   ============================================================================ */

:root{ --eden-motion-range: entry 0% entry 60%; }

@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){

    /* rise — sections and hero. The default. */
    main>section,
    [data-motion="rise"]{
      animation:ckb-reveal linear both;
      animation-timeline:view();
      animation-range:var(--eden-motion-range);
    }
    @keyframes ckb-reveal{ from{transform:translateY(8px)} to{transform:none} }

    /* settle — pull quotes and callouts, easing down rather than up */
    [data-motion="settle"]{
      animation:eden-settle linear both;
      animation-timeline:view();
      animation-range:var(--eden-motion-range);
    }
    @keyframes eden-settle{ from{transform:translateY(-6px)} to{transform:none} }

    /* lateral — cards entering from the side.

       IT IS SCOPED TO CARDS, NOT TO A SECTION, AND THAT IS LOAD-BEARING. Put on a
       full-bleed <section> on 1 Sep 2026 it raised "horizontal overflow at 320px:
       SECTION" on the very first live gate run, against a record of zero overflow on
       every page. translateX(10px) on an element already the full width of the viewport
       pushes 10px past it. Scroll-driven animation has no time component, so that
       overhang is a RESTING state a reader can stop at, not a flash mid-transition:
       the same failure the warning at the top of this file describes for opacity,
       arriving on the x axis.

       overflow-x:clip on the section itself was tried and did NOT fix it, which is the
       correct behaviour and worth recording: clip bounds an element's CHILDREN, not its
       own transformed box.

       The tempting fix, overflow-x on main, was REFUSED. It hides the symptom and blinds
       the reflow check to every future overflow bug on the site.

       A card sits inside .wrap's padding and has room to travel 10px. A full-bleed
       section does not. Mark the section `cards-lateral`; do not put data-motion=lateral
       on anything that reaches the viewport edge. */
    .cards-lateral .grid3>*{
      animation:eden-lateral linear both;
      animation-timeline:view();
      animation-range:var(--eden-motion-range);
    }

    /* scale — media only, and deliberately almost imperceptible */
    [data-motion="scale"]{
      animation:eden-scale linear both;
      animation-timeline:view();
      animation-range:var(--eden-motion-range);
    }
    @keyframes eden-scale{ from{transform:scale(.985)} to{transform:none} }

    /* hold — an explicit opt-out. Tables, data and legal text never move. */
    [data-motion="hold"]{ animation:none }
  }
}