/* ==========================================================================
   THE DESIGNERS HUB — motion layer (2026-07-21)
   ==========================================================================
   Professional, restrained motion added on top of a coordinate-exact,
   canvas-zoomed build. Two hard rules keep it from ever breaking the port:

   1. NOTHING here changes layout. Reveals animate OPACITY only (no transform
      on positioned nodes, so offsetTop/offsetLeft are untouched and every
      measurement still holds); hovers use transform/shadow on elements that
      carry no base transform (buttons, cards, logos).

   2. CONTENT CAN NEVER GET STUCK HIDDEN. The reveal start-state applies only
      under `html.anim-ready`, which anim.js sets the instant it runs — so with
      JS off, or if the script errors before running, everything is visible.
      A reduced-motion query disables the whole layer. anim.js also force-shows
      every target after a timeout as a final safety net.
   ========================================================================== */

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

  /* ---- page entrance: a soft fade of the main content on load ---------- */
  html.anim-ready main {
    animation: dh-fade-in 0.5s var(--ease) both;
  }
  @keyframes dh-fade-in { from { opacity: 0; } to { opacity: 1; } }

  /* ---- scroll reveal: fade + rise, with per-element stagger -------------
     The rise uses the `translate` property, NOT `transform`: translate is
     independent, so it never overrides an element's base transform (mirrored
     images, arrows) and, like transform, it is a compositor effect that never
     touches offsetTop/offsetLeft — so every ported measurement still holds.
     anim.js sets --reveal-delay per element for a soft cascade; the delay is
     bound to the reveal transition only, so hovers stay instant. */
  html.anim-ready [data-reveal] {
    opacity: 0;
    translate: 0 26px;
    transition: opacity 0.75s var(--ease-out, cubic-bezier(0.16, 0.8, 0.24, 1)) var(--reveal-delay, 0s),
                translate 0.75s var(--ease-out, cubic-bezier(0.16, 0.8, 0.24, 1)) var(--reveal-delay, 0s);
  }
  html.anim-ready [data-reveal].is-in { opacity: 1; translate: 0 0; }

  /* ---- hover polish (transform/shadow only, on transform-free nodes) --- */
  .btn { transition: background-color var(--dur) var(--ease),
                     color var(--dur) var(--ease),
                     transform var(--dur) var(--ease),
                     box-shadow var(--dur) var(--ease); }
  .btn:hover,
  .btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }
  .btn:active { transform: translateY(0); box-shadow: none; }

  /* logo strip: lift to full presence on hover */
  .worked__logo {
    opacity: 0.82;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .worked__logo:hover { opacity: 1; transform: translateY(-2px); }

  /* the case / expert / testimonial / partner cards lift subtly on hover.
     None of these carry a base transform, so this is safe. */
  .case,
  .tm-card,
  .gc-item,
  .cn-tst,
  .ev-card,
  .bl-press__card,
  .ar-related__card {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .case:hover,
  .tm-card:hover,
  .ev-card:hover,
  .bl-press__card:hover,
  .ar-related__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  }

  /* carousel arrows and the header cart/burger get a gentle press feedback */
  .worked__nav,
  .results__nav {
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .worked__nav:hover,
  .results__nav:hover { transform: scale(1.08); }
  .worked__nav:active,
  .results__nav:active { transform: scale(0.96); }

  /* nav links: a soft colour ease on hover (chrome links) */
  .site-header__item, .site-footer a, .site-drawer__nav a {
    transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }

  /* card photos ease up a touch on card hover (transform-free img nodes) */
  .tm-card, .case, .ev-card { }
  .tm-card__photo, .ev-card__bg {
    transition: transform 0.35s var(--ease);
  }
  .tm-card:hover .tm-card__photo,
  .ev-card:hover .ev-card__bg { transform: scale(1.03); }
}

/* Reduced motion, or JS absent: everything is simply visible and static.
   (The start-state above is scoped to `html.anim-ready` + no-preference, so
   this needs no explicit reset — but keep the reveal target visible in case
   the class lingers.) */
@media (prefers-reduced-motion: reduce) {
  html.anim-ready [data-reveal] { opacity: 1 !important; translate: none !important; }
}