/*!
AVBB OWNERSHIP NOTICE
Copyright (c) 2026 A Visual By Benji Ltd. All rights reserved.
AVBB custom website code and design.
Third-party components retain their original ownership and licences.
Official website: https://avisualbybenji.com/
*/
/* =====================================================================
   avbb-motion.css  ·  AVBB shared motion tokens
   =====================================================================
   WHY THIS FILE EXISTS
   An audit of the site found motion defined ad hoc in every page:

     4 different cubic-beziers   .22,1,.36,1 (74x)  .64,0,.78,0 (24x)
                                 .76,0,.24,1 (2x)   .2,.85,.2,1.35 (2x)
     3 keyword easings           ease (38x)  linear (30x)  ease-in-out (10x)
     14+ distinct durations      .18s .2s .25s .28s .3s .38s .48s .55s
                                 .62s .65s .7s ...

   Same interaction, different feel, depending which page you were on.
   These tokens collapse that into ONE scale. The dominant existing curve
   (.22,1,.36,1 - an ease-out-quint) is kept as the default, so adopting
   this changes almost nothing visually; it just stops the drift.

   ACCESSIBILITY
   Before this file, prefers-reduced-motion guarded exactly ONE animation
   site-wide (.avbb-cta-pulse). The block at the bottom makes the whole
   site honour it. That is a WCAG 2.3.3 concern, not a nicety - motion
   can trigger nausea and vestibular symptoms.

   USAGE
     transition: opacity var(--avbb-dur-2) var(--avbb-ease);
     transition: transform var(--avbb-dur-3) var(--avbb-ease-emphasis);
   Never hard-code a duration or a bezier again. If a value is missing
   here, add it here rather than inline.
   ===================================================================== */

:root {
  /* ---- easing ------------------------------------------------------
     --avbb-ease           default. Decelerating; the site's existing
                           dominant curve. Use for ~90% of transitions.
     --avbb-ease-emphasis  slightly stronger settle. Hero/section reveals.
     --avbb-ease-in        accelerating. ONLY for things leaving screen.
     --avbb-ease-spring    slight overshoot. Sparingly - buttons, badges.
     --avbb-ease-linear    progress bars, marquees, spinners only.        */
  --avbb-ease:          cubic-bezier(.22, 1, .36, 1);
  --avbb-ease-emphasis: cubic-bezier(.16, 1, .3, 1);
  --avbb-ease-in:       cubic-bezier(.64, 0, .78, 0);
  --avbb-ease-spring:   cubic-bezier(.2, .85, .2, 1.35);
  --avbb-ease-linear:   linear;

  /* ---- duration ----------------------------------------------------
     A 5-step scale. Pick by DISTANCE TRAVELLED and area changed, not by
     taste: small things move fast, large things need time to be read.   */
  --avbb-dur-1: 120ms;   /* micro: colour, opacity, borders            */
  --avbb-dur-2: 220ms;   /* default: hovers, small transforms          */
  --avbb-dur-3: 380ms;   /* medium: cards, panels, accordions          */
  --avbb-dur-4: 620ms;   /* large: section reveals, route changes      */
  --avbb-dur-5: 900ms;   /* hero-scale, full-viewport moves            */

  /* ---- composite shorthands --------------------------------------- */
  --avbb-t-fast: var(--avbb-dur-1) var(--avbb-ease);
  --avbb-t-base: var(--avbb-dur-2) var(--avbb-ease);
  --avbb-t-slow: var(--avbb-dur-3) var(--avbb-ease);

  /* ---- scroll ------------------------------------------------------
     Consumed by avbb-motion.js. Seconds, because Lenis takes seconds.  */
  --avbb-scroll-dur-min: 0.9;
  --avbb-scroll-dur-max: 2.2;
}

/* Opt-in helpers, so components stop inventing their own values. */
.avbb-t          { transition: all var(--avbb-t-base); }
.avbb-t-colors   { transition: color var(--avbb-t-fast), background-color var(--avbb-t-fast), border-color var(--avbb-t-fast); }
.avbb-t-transform{ transition: transform var(--avbb-t-slow); }
.avbb-t-fade     { transition: opacity var(--avbb-t-base); }

/* Standard reveal. Matches the existing data-po-reveal / data-reveal feel
   so it can be adopted incrementally without a visual jump. */
.avbb-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--avbb-dur-4) var(--avbb-ease),
              transform var(--avbb-dur-4) var(--avbb-ease);
  will-change: opacity, transform;
}
.avbb-reveal.is-visible { opacity: 1; transform: none; }

/* Focus rings must never animate away - keyboard users need them instant. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  transition: none !important;
}

/* =====================================================================
   REDUCED MOTION
   A single global override. Motion is removed, but nothing disappears:
   opacity is forced to 1 so reveal-on-scroll content stays readable
   rather than being stuck invisible - the most common bug when authors
   bolt reduced-motion on late.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .avbb-reveal { opacity: 1 !important; transform: none !important; }
  [data-po-reveal], [data-reveal], [data-bk-reveal] {
    opacity: 1 !important; transform: none !important;
  }
  html { scroll-behavior: auto !important; }
}