/* Dave Radley motion layer (house MOTION-PLAYBOOK, 25 Sep 2026).
 * Front end only: never loaded in the Elementor editor, never touches page data.
 * Every effect ends exactly where the signed-off design puts the element, animates only
 * transform-family properties and opacity, and sits inside prefers-reduced-motion: no-preference.
 * Nothing in the first viewport is ever hidden. Revert = remove the two enqueues in functions.php. */

::selection { background: #d7ff39; color: #090a08; }

@media (prefers-reduced-motion: no-preference) {

  :root { --dr-ease: cubic-bezier(.22, 1, .36, 1); }

  /* ---------- Page to page: a soft cross-fade, header held still ---------- */
  @view-transition { navigation: auto; }
  .dr-header { view-transition-name: dr-header; }
  ::view-transition-old(root) { animation: dr-vt-out .28s ease-in both; }
  ::view-transition-new(root) { animation: dr-vt-in .5s var(--dr-ease) both; }
  @keyframes dr-vt-out { to { opacity: 0; translate: 0 -12px; } }
  @keyframes dr-vt-in { from { opacity: 0; translate: 0 18px; } }

  /* ---------- Scroll reveals (JS flags only elements below the fold) ---------- */
  html.dr-motion [data-dr-reveal]:not([data-dr-reveal="img"]):not(.is-in) { opacity: 0; }
  html.dr-motion [data-dr-reveal].is-in:not([data-dr-reveal="img"]) {
    animation: dr-rise .8s var(--dr-ease) var(--dr-d, 0ms) backwards;
  }
  @keyframes dr-rise { from { opacity: 0; translate: 0 26px; } }

  /* Headlines land first, then the lime/green serif accent arrives on its own beat. */
  html.dr-motion [data-dr-reveal]:not(.is-in) :is(h1, h2, h3) :is(i, em),
  html.dr-motion [data-dr-reveal]:is(h1, h2, h3):not(.is-in) :is(i, em) { opacity: 0; }
  html.dr-motion [data-dr-reveal].is-in :is(h1, h2, h3) :is(i, em),
  html.dr-motion [data-dr-reveal].is-in:is(h1, h2, h3) :is(i, em) {
    animation: dr-fade .9s ease-out calc(var(--dr-d, 0ms) + 380ms) backwards;
  }
  @keyframes dr-fade { from { opacity: 0; } }

  /* Photos: a lime curtain wipes off while the image settles from a slight zoom. */
  html.dr-motion [data-dr-reveal="img"] { overflow: clip; }
  html.dr-motion [data-dr-reveal="img"]::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: #d7ff39; transform-origin: 100% 50%;
  }
  html.dr-motion [data-dr-reveal="img"].is-in::after { animation: dr-curtain 1s var(--dr-ease) var(--dr-d, 0ms) forwards; }
  html.dr-motion [data-dr-reveal="img"].is-in img { animation: dr-zoom 1.6s var(--dr-ease) var(--dr-d, 0ms) backwards; }
  @keyframes dr-curtain { to { scale: 0 1; } }
  @keyframes dr-zoom { from { scale: 1.14; } }

  /* Lime eyebrow dashes draw in (inner-page heroes on load, the rest on reveal). */
  html.dr-motion .dr-page-hero .dr-eyebrow::before,
  html.dr-motion [data-dr-reveal].is-in .dr-eyebrow::before,
  html.dr-motion .dr-eyebrow[data-dr-reveal].is-in::before {
    transform-origin: 0 50%; animation: dr-draw .9s var(--dr-ease) calc(var(--dr-d, 0ms) + 150ms) backwards;
  }
  @keyframes dr-draw { from { scale: 0 1; } }

  /* ---------- Home hero ---------- */
  /* The photo is visible from the first frame and settles from 107% (no hiding, no layout change). */
  html.dr-motion .dr-cin-main-image { overflow: clip; }
  html.dr-motion .dr-cin-main-image img { animation: dr-settle 2.8s var(--dr-ease) both; }
  @keyframes dr-settle { from { scale: 1.07; } }
  /* The stamp floats gently: the one ambient element on the screen. */
  html.dr-motion .dr-cin-stamp { animation: dr-float 7s ease-in-out infinite alternate; }
  @keyframes dr-float { from { translate: 0 -6px; } to { translate: 0 8px; } }
  /* Logo dot: one beat on arrival. */
  html.dr-motion .dr-logo-dot { transform-origin: 50% 60%; animation: dr-beat .7s var(--dr-ease) .45s backwards; }
  @keyframes dr-beat { 0% { scale: 1; } 40% { scale: 1.7; } 100% { scale: 1; } }

  /* ---------- Micro-interactions (0.18s, house timing) ---------- */
  html.dr-motion .elementor :is(.dr-book span, .dr-cin-work-cards .dr-i) { transition: translate .18s ease-out; }
  html.dr-motion .elementor .dr-book:hover span { translate: 3px -3px; }
  html.dr-motion .elementor .dr-cin-work-cards > a:hover .dr-i { translate: 6px -6px; }
  html.dr-motion .elementor :is(.dr-a, .dr-button, .dr-book) { transition-property: background, color, scale; transition-duration: .18s; transition-timing-function: ease-out; }
  html.dr-motion .elementor :is(.dr-a, .dr-button, .dr-book):active { scale: .975; }
  /* Nav: a lime rule slides in under the hovered link. */
  html.dr-motion .dr-navlink::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: #d7ff39; transform-origin: 100% 50%; scale: 0 1; transition: scale .25s var(--dr-ease);
  }
  html.dr-motion .dr-navlink:is(:hover, :focus-visible)::after { transform-origin: 0 50%; scale: 1 1; }
  /* The ticker pauses under the pointer so a word can be read. */
  html.dr-motion .dr-cin-marquee:hover > .dr-ticker-track { animation-play-state: paused; }

  /* ---------- Scroll-linked (CSS only, no scroll listeners; skipped where unsupported) ---------- */
  @supports (animation-timeline: scroll()) {
    /* Reading progress: a thin lime line across the top of the window. */
    html.dr-motion body::after {
      content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100000; pointer-events: none;
      background: #d7ff39; transform-origin: 0 50%;
      animation: dr-progress linear both; animation-timeline: scroll(root);
    }
    @keyframes dr-progress { from { scale: 0 1; } to { scale: 1 1; } }

    /* Inner-page watermark word drifts sideways as the hero scrolls away. */
    html.dr-motion .dr-page-hero::after {
      animation: dr-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh;
    }
    @keyframes dr-drift { to { translate: -14% 0; } }

    @media (min-width: 851px) {
      /* Home hero depth: the words lift away faster than the photo, the stamp turns. */
      html.dr-motion .dr-cin-hero-copy {
        animation: dr-lift linear both; animation-timeline: scroll(root); animation-range: 0 100vh;
      }
      @keyframes dr-lift { to { translate: 0 -12vh; opacity: .7; } }
      html.dr-motion .dr-cin-stamp {
        animation: dr-float 7s ease-in-out infinite alternate, dr-turn linear both;
        animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh;
      }
      @keyframes dr-turn { to { rotate: 60deg; } }
    }
  }
}

@media print { html.dr-motion [data-dr-reveal] { opacity: 1 !important; animation: none !important; } html.dr-motion [data-dr-reveal]::after { content: none !important; } }