/*
 * DigitalCraft — Motion System (css/motion.css)
 * Implements docs/motion-system.md sections 1–5.
 * Reuses tokens from craft.css (--ink, --paper, --rust, --brand-blue, --brand-navy, --ease-craft).
 * Everything here lives in the `craft.motion` layer so craft.css / style.css (unlayered) always win.
 */

@layer craft.base, craft.motion, craft.page;

/* Cross-document page transitions. MUST stay at the top level of the stylesheet —
   nested inside @layer it parses into a CSSViewTransitionRule but is ignored, and
   navigations fall back to a hard cut. Verified against the `pageswap` event. */
@view-transition { navigation: auto; }

@layer craft.motion {

  /* ---------------------------------------------------------------------
   * Motion tokens
   * ------------------------------------------------------------------- */
  :root {
    --dur-fast: .28s;
    --dur-mid: .55s;
    --dur-slow: .95s;
    --ease-out-expo: cubic-bezier(.16,1,.3,1);
  }

  /* =======================================================================
   * 1. Reveal (data-reveal / data-animate)
   * ===================================================================== */

  /* Reveal units are inserted IN PLACE around split text — nothing in the
     author's markup is moved or re-parented, so sibling-combinator selectors
     in other stylesheets (e.g. craft.css's `.craft-hero h1>span`) keep
     matching the original elements. .rv__u masks overflow (with a
     padding/negative-margin pair so descenders and Japanese glyphs aren't
     clipped); .rv__i carries the actual transform. */
  .rv__u {
    display: inline-block; overflow: hidden; vertical-align: bottom;
    padding-bottom: .2em; margin-bottom: -.2em;
  }
  .rv__i { display: inline-block; will-change: transform, opacity; }

  html.reveal-ready [data-reveal]:not(.is-revealed) .rv__i { opacity: 0; transform: translateY(105%); }
  [data-reveal].is-revealed .rv__i {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease-craft), transform .95s var(--ease-craft);
    transition-delay: var(--rv-delay, 0ms);
  }

  /* Block-level reveal for data-reveal="block" / bare data-reveal.
     (Legacy data-animate keeps using craft.css's own [data-animate] rules —
     craft-ui.js still adds .is-animated to those elements for compatibility.) */
  html.reveal-ready [data-reveal]:not([data-reveal="lines"]):not([data-reveal="words"]):not([data-reveal="chars"]):not(.is-revealed) {
    opacity: 0; transform: translateY(34px) scale(.985); filter: blur(7px); clip-path: inset(0 0 14% 0);
  }
  [data-reveal]:not([data-reveal="lines"]):not([data-reveal="words"]):not([data-reveal="chars"]) {
    transition: opacity .85s var(--ease-craft), transform 1.05s var(--ease-craft), filter .9s var(--ease-craft), clip-path 1.05s var(--ease-craft);
    transition-delay: var(--rv-delay, 0ms);
  }
  [data-reveal]:not([data-reveal="lines"]):not([data-reveal="words"]):not([data-reveal="chars"]).is-revealed {
    opacity: 1; transform: none; filter: blur(0); clip-path: inset(0);
  }

  @media (prefers-reduced-motion: reduce) {
    html.reveal-ready [data-reveal]:not(.is-revealed) .rv__i { opacity: 1; transform: none; }
    html.reveal-ready [data-reveal]:not([data-reveal="lines"]):not([data-reveal="words"]):not([data-reveal="chars"]):not(.is-revealed) {
      opacity: 1; transform: none; filter: none; clip-path: none;
    }
  }

  /* =======================================================================
   * 2. Magnetic (data-magnetic)
   * ===================================================================== */

  [data-magnetic] { will-change: translate; transition: translate var(--dur-mid) var(--ease-craft); }
  [data-magnetic-inner] { will-change: translate; transition: translate var(--dur-mid) var(--ease-craft); }

  /* =======================================================================
   * 3. Scroll progress bar
   * ===================================================================== */

  .craft-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px;
    z-index: 1500;
    pointer-events: none;
  }
  .craft-progress i {
    display: block; width: 100%; height: 100%;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue), var(--rust));
    transform: scaleX(var(--scroll-progress, 0));
  }
  @supports (animation-timeline: scroll()) {
    .craft-progress i {
      animation: craft-progress linear both;
      animation-timeline: scroll(root block);
      transform: none;
    }
  }
  @keyframes craft-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* =======================================================================
   * 4. Section progress / parallax (data-progress / data-parallax)
   * ---------------------------------------------------------------------
   * No CSS is required here beyond the custom properties craft-ui.js sets
   * (--progress, --parallax-y) — consuming rules live in craft.css / page CSS.
   * ===================================================================== */

  /* =======================================================================
   * 5. Page transitions (View Transitions)
   * ===================================================================== */

  /* The @view-transition opt-in is hoisted to the top of this file: Chrome parses
     it inside @layer but does not honour it there, so navigations never transition. */

  .site-header { view-transition-name: site-header; }
  .site-footer { view-transition-name: site-footer; }
  #main-content { view-transition-name: page-main; }
  .site-logo__img { view-transition-name: brand-mark; }
  .craft-progress { view-transition-name: progress-bar; }

  ::view-transition-old(page-main) {
    animation: craft-page-out .34s var(--ease-craft) both;
  }
  ::view-transition-new(page-main) {
    animation: craft-page-in .52s var(--ease-craft) both;
  }
  @keyframes craft-page-out {
    to { opacity: 0; transform: translateY(-16px); filter: blur(5px); }
  }
  @keyframes craft-page-in {
    from { opacity: 0; transform: translateY(26px); clip-path: inset(0 0 14% 0); }
    to { opacity: 1; transform: none; clip-path: inset(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
  }

}