/* ==========================================================================
   Daylight — motion layer

   Scroll-driven 3D, built on the native CSS scroll timeline. No GSAP, no
   ScrollTrigger, no Lenis, no three.js — nothing is downloaded to make this
   work. `animation-timeline: view()` ties an animation's progress directly to
   an element's position in the viewport, which is what libraries spend 70KB
   emulating, and the browser runs it off the main thread.

   ONE IDEA, APPLIED EVERYWHERE: everything arrives from behind the screen.
   Elements start pushed back on Z, rotated a few degrees off the horizontal
   axis, and settle flat as they enter. Because every element moves on the
   same axis, the page reads as one camera move rather than fifteen unrelated
   effects. That distinction is the whole difference between cinematic and
   busy.

   PROGRESSIVE ENHANCEMENT, NON-NEGOTIABLE: every rule here is inside
   @supports and a prefers-reduced-motion guard. Where the timeline is
   unsupported — Firefox at time of writing — the page renders fully static
   and complete. Nothing is hidden by default, so content can never be
   trapped behind an animation that will not run.
   ========================================================================== */

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

    /* ----------------------------------------------------------------------
       The camera. A single shared depth reveal.
       ---------------------------------------------------------------------- */

    @keyframes dl-arrive {
      from {
        opacity: 0;
        transform: perspective(1400px) translate3d(0, 46px, -110px) rotateX(7deg);
      }
      to {
        opacity: 1;
        transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg);
      }
    }

    .card,
    .promise,
    .tier,
    .fear,
    .phase,
    .choice,
    .section-head,
    .ratecard,
    .glossary div,
    .matrix-scroll {
      animation: dl-arrive linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
      transform-origin: 50% 100%;
      will-change: transform, opacity;
    }

    /* Stagger across a row. Scroll-driven animations have no delay, so the
       stagger is expressed as a later start on the timeline instead. Each
       column begins its arrival slightly further into the scroll. */
    .grid > *:nth-child(2),
    .tiers > *:nth-child(2),
    .promises > *:nth-child(2) { animation-range: entry 6% cover 30%; }

    .grid > *:nth-child(3),
    .tiers > *:nth-child(3),
    .promises > *:nth-child(3) { animation-range: entry 10% cover 34%; }

    .grid > *:nth-child(4),
    .promises > *:nth-child(4) { animation-range: entry 14% cover 38%; }

    /* ----------------------------------------------------------------------
       The rate card. The one element that earns a bespoke move, because it
       is the page's whole argument: it settles from a tilted card into a
       flat printed sheet, which is the gesture of putting something down on
       a table in front of someone.
       ---------------------------------------------------------------------- */

    @keyframes dl-settle {
      from {
        opacity: 0;
        transform: perspective(1100px) translate3d(0, 30px, -140px) rotateX(13deg) rotateZ(-1.1deg);
        box-shadow: 0 40px 70px -40px rgba(22, 32, 42, 0.55);
      }
      to {
        opacity: 1;
        transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg);
        box-shadow: 0 1px 2px rgba(22, 32, 42, 0.04), 0 12px 32px -18px rgba(22, 32, 42, 0.28);
      }
    }

    .hero .ratecard {
      animation-name: dl-settle;
      animation-range: entry 0% cover 22%;
    }

    /* ----------------------------------------------------------------------
       Parallax. Dark bands drift slower than the page, which reads as
       distance. Scrub animations use linear easing — anything else fights
       the scroll and feels like lag.
       ---------------------------------------------------------------------- */

    @keyframes dl-drift {
      from { transform: translate3d(0, -2.2%, 0) scale(1.045); }
      to   { transform: translate3d(0,  2.2%, 0) scale(1.045); }
    }

    .on-ink > .wrap {
      animation: dl-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* ----------------------------------------------------------------------
       Section headings hold a little longer than the content under them, so
       the eye lands on the heading first. A tiny difference, and it is most
       of what makes a sequence feel directed.
       ---------------------------------------------------------------------- */

    .section-head { animation-range: entry 0% cover 18%; }

    /* ----------------------------------------------------------------------
       Reading progress. Tied to the document scroll timeline rather than an
       element's view.
       ---------------------------------------------------------------------- */

    @keyframes dl-progress {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0 0 auto 0;
      height: 3px;
      z-index: 300;
      background: var(--sun);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: dl-progress linear both;
      animation-timeline: scroll(root block);
      pointer-events: none;
    }

    /* ----------------------------------------------------------------------
       Hero copy arrives on load, once. Not scroll-driven — it is already in
       view, and a scroll timeline would leave it invisible until the visitor
       moved.
       ---------------------------------------------------------------------- */

    @keyframes dl-lift {
      from { opacity: 0; transform: translate3d(0, 20px, 0); }
      to   { opacity: 1; transform: none; }
    }

    .hero > .wrap > div:first-child > * {
      animation: dl-lift 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .hero > .wrap > div:first-child > *:nth-child(1) { animation-delay: 40ms; }
    .hero > .wrap > div:first-child > *:nth-child(2) { animation-delay: 110ms; }
    .hero > .wrap > div:first-child > *:nth-child(3) { animation-delay: 180ms; }
    .hero > .wrap > div:first-child > *:nth-child(4) { animation-delay: 250ms; }
    .hero > .wrap > div:first-child > *:nth-child(5) { animation-delay: 320ms; }
  }
}

/* ==========================================================================
   Hover depth — supported everywhere, costs nothing, and gives the cards a
   physical quality the scroll work implies. Pointer devices only: on touch,
   :hover sticks after a tap and the card stays lifted.
   ========================================================================== */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card,
  .tier {
    transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
                border-color 260ms var(--ease);
  }
  .card:hover,
  .tier:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 18px 34px -22px rgba(22, 32, 42, 0.32);
    border-color: var(--rule-2);
  }
}