/**
 * Motion tokens for CSS. Mirrors assets/core/tokens.ts.
 *
 * The four cubic-bezier values are lifted verbatim from the shipped stylesheets of the sites studied in references/teardown.md.
 * --easeOutQuart and --easeInOutQuart are hand-matched to GSAP's power3.out / power3.inOut,
 * which is why their CSS hovers and JS reveals feel like one system.
 */

:root {
  /* Arriving. Matches GSAP power3.out. */
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  /* Changing state. Matches GSAP power3.inOut. */
  --easeInOutQuart: cubic-bezier(0.76, 0, 0.24, 1);
  /* Softer alternatives — reach for these only if the two above genuinely cannot work. */
  --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  --easeInOutQuad: cubic-bezier(0.45, 0, 0.55, 1);

  --duration-micro: 0.3s;
  --duration-hover: 0.6s;
  --duration-reveal: 1.2s;
  --duration-transition: 1.8s;

  /**
   * Colour of the mask panels in gridLoad's `panel`, `blind` and `sweep` effects.
   *
   * Set this to the background the grid sits on. The effect is an image being uncovered; if the
   * panel does not match its surroundings it reads as a coloured rectangle sliding around
   * instead, which is the one way these effects look cheap.
   */
  --motion-grid-panel: #0f0f0f;
}

/**
 * Mask for sliding text. Applied to the element wrapping split characters.
 *
 * The negative bottom inset is the descender allowance: it lets the tail of a "g" or "y"
 * render outside the mask while still clipping the incoming copy above.
 */
.motion-mask {
  display: inline-block;
  overflow: hidden;
  clip-path: inset(0 0 -0.086em 0);
  vertical-align: bottom;
}

/**
 * Elements that animate in are hidden by JS, not by CSS, so the page is readable without
 * JavaScript. This class is added by motion.ts once it has confirmed it can animate.
 */
.motion-ready [data-motion-hidden] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 0.01s;
    --duration-hover: 0.01s;
    --duration-reveal: 0.01s;
    --duration-transition: 0.01s;
  }

  /* Never hide content from users who asked for less motion. */
  .motion-ready [data-motion-hidden] {
    opacity: 1;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}