/* =========================================================
   the.BUR — iOS-style scroll motion system
   Central design tokens + plumbing for the MotionEngine.
   Behaviour lives in JS (motion-core.js / scroll-motion.js);
   this file only supplies the motion language + safety rails.

   Motion model:  scroll -> target -> spring -> transform/opacity
   ========================================================= */

:root{
  /* ---- duration tokens (CSS-level micro-interaction timing) ---- */
  --motion-fast:   180ms;
  --motion-normal: 360ms;
  --motion-slow:   650ms;
  --motion-cb:     cubic-bezier(.16, 1, .3, 1);
  --motion-io:     cubic-bezier(.16, 1, .3, 1);
}

/* Spring profiles are mirrored in JS (motion-core.js PROFILES) so the
   whole site's motion language can be tuned from one place. Kept here as
   human-readable reference tokens for anyone reading the markup. */
:root{
  --motion-spring-floating: 90 20 1;
  --motion-spring-standard: 170 24 1;
  --motion-spring-snappy:   220 28 1;
  --motion-spring-gentle:   140 22 1;
  --motion-spring-heavy:    70 25 1.5;
}

/* Elements that participate in the motion system. By default the engine
   owns transform + opacity; everything else (shadow, border, colour) keeps
   a CSS transition so hover/focus still feel native. */
[data-motion]{
  transition-property: box-shadow, border-color, background-color, color, filter;
  transition-duration: var(--motion-normal);
  transition-timing-function: var(--motion-cb);
}

/* Only promoted to a compositor layer while the engine is animating it,
   not permanently — keeps will-change cheap. The JS adds/removes this. */
[data-motion].motion-active{
  will-change: transform, opacity;
}

/* One-shot entrance finished; stable, hand back to CSS (hover lift works). */
[data-motion].motion-done{
  will-change: auto;
}

/* Reduced motion: the JS engine already disables decorative motion; this
   is the CSS-side guarantee so nothing depends on animation to be visible. */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;
  }
  [data-motion]{
    transition-duration: 1ms;
    transition-property: none;
    will-change: auto;
  }
  [data-motion].motion-active,
  [data-motion].motion-done{
    will-change: auto;
    transform: none;
    opacity: 1;
  }
}
/* =========================================================
   2.2.69 — fluid scroll-linked material motion
   Content cards follow the user's scroll position instead of
   performing a one-shot entrance. Keep the movement restrained:
   small displacement + soft opacity = "floating on water".
   ========================================================= */
.card[data-motion],
.rc[data-motion],
.feature[data-motion]{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: 50% 50%;
}

.card[data-motion].motion-active,
.rc[data-motion].motion-active,
.feature[data-motion].motion-active{
  contain: paint;
}

.card .thumb img,
.rc-thumb img{
  opacity: 1;
  transition: transform 900ms cubic-bezier(.16,1,.3,1),
              opacity 500ms cubic-bezier(.16,1,.3,1);
}

.card:hover .thumb img,
.rc:hover .rc-thumb img{
  transform: scale(1.025);
}

/* Do not let a late image event make a card look empty on first scroll. */
.card .thumb img:not(.is-loaded),
.rc-thumb img:not(.is-loaded){
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .card .thumb img,
  .rc-thumb img{
    transition: none;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* 2.2.70 — text follows scroll with restrained iOS-like overshoot/settle */
[data-motion="text"]{
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce){
  [data-motion="text"]{ transform:none !important; opacity:1 !important; }
}

/* =========================================================
   2.2.74 — mobile drawer: liquid content slide-back
   The drawer (hamburger menu) now recedes the hero + the rest of
   the website when it opens and closes. That whole animation is
   owned by style.css (the .mobile-nav overlay sheet + the
   .readout/.readout-footer slide-back, guarded to ≤900px), so
   there is nothing to drive here — this block only records the
   change of ownership. The old 2.2.71 <nav> WAAPI reveal-pop was
   retired with mobile-nav.js; leaving it in motion.css would have
   clobbered style.css' own burger->X transition and the sheet.
   The 2.2.72 ex-modal pop is still JS-driven below.
   ========================================================= */

/* =========================================================
   2.2.72 — Explorer card modal "reveal-pop"
   Clicking a .card.ex resource card opens the .ex-modal dialog.
   ex-modal.js animates it with the same language as the mobile
   nav: backdrop fade, soft scale/translate pop with a springy
   decelerate overshoot, and staggered dialog content. These
   rules keep the pop compositor-friendly and settle it safely
   under reduced motion (JS skips animation, dialog just shows).
   ========================================================= */

.ex-modal-backdrop{ will-change: opacity; }
.ex-modal-box{
  transform-origin: center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ex-modal-box .ex-tag{
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce){
  .ex-modal,
  .ex-modal-box{
    will-change: auto;
  }
  .ex-modal-box{
    transform: none !important;
    opacity: 1 !important;
  }
}