/* ---------------------------------------------------------------------------
   Scroll-reveal + count-up motion.
   Progressive enhancement: the hidden state is scoped to .js-motion, which is
   only added by an inline script. If JS is off or fails, every element renders
   fully visible and nothing is lost.
   Only opacity and transform animate, so this contributes nothing to CLS.
   --------------------------------------------------------------------------- */

.js-motion .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js-motion .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Once revealed, drop the hint so we are not holding layers forever. */
.js-motion .reveal.is-settled {
  will-change: auto;
}

/* Directional variants */
.js-motion .reveal-left  { transform: translate3d(-26px, 0, 0); }
.js-motion .reveal-right { transform: translate3d(26px, 0, 0); }
.js-motion .reveal-scale { transform: scale(0.965); }
.js-motion .reveal-left.is-visible,
.js-motion .reveal-right.is-visible { transform: translate3d(0, 0, 0); }
.js-motion .reveal-scale.is-visible { transform: scale(1); }

/* A quiet lift on interactive cards. Kept subtle so it reads as craft, not flash. */
.lift {
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.28s ease,
              box-shadow 0.28s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lift:hover { transform: translateY(-4px); }
}

/* Lime underline that draws in on hover, for text links in prose areas. */
.link-draw {
  background-image: linear-gradient(#d7ef31, #d7ef31);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  transition: background-size 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link-draw:hover,
.link-draw:focus-visible { background-size: 100% 3px; }

/* Count-up numbers hold their width so the layout does not jitter while ticking. */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Anyone who has asked their OS for less motion gets none of it.
   Elements are shown immediately in their final state.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .reveal-left,
  .js-motion .reveal-right,
  .js-motion .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lift, .link-draw { transition: none !important; }
  @media (hover: hover) {
    .lift:hover { transform: none; }
  }
  .link-draw:hover, .link-draw:focus-visible { background-size: 100% 3px; }
}