/*
MOTION: WHERE TO APPLY CLASSES AND WHAT TO CHANGE

Add these classes to elements in Studio's Structure panel. For a shared
component, edit its definition so existing and new instances inherit them.
Classes choose WHAT moves; the :root settings below control its timing.

ENTRANCE CLASSES (recognised by JavaScript, so no CSS rule is needed here)

u-motion-reveal
  Put on ONE panel, paragraph or call-to-action to move it as a single unit.

u-motion-stagger
  Put on a GRID/GROUP WRAPPER. Its DIRECT CHILDREN rise and fade in sequence.
  The cards need no individual reveal class. New direct children join in.
  Example: <div class="my-grid u-motion-stagger">four card elements</div>
  Do not also reveal the whole grid if the cards should move independently.

u-motion-sequence
  Put on a COMMON WRAPPER to join nested reveal/stagger targets into one
  document-order sequence. Already on the hero inner wrapper: text, button
  row, trust group and visual. Buttons and trust indicators each move as ONE
  unit. The full-width trust strip joins this sequence too. The existing
  copy group caps its delay at three intervals. Subsequent stagger groups
  (hero statistics) start one interval after the preceding visual; their own
  children stagger using the same central setting. The trust strip follows.
  Off-screen targets wait for scrolling without blocking later visible items
  once the first text has started. Mobile has no stagger.
  Dashboard internals follow the visual's scheduled start, not page load.

u-motion-initial
  Put on the HERO SEQUENCE wrapper (already supplied by Hero 01). Uses the
  actual viewport edge, so visible hero content never waits for a tiny scroll.
  Truly below-screen content still waits until it enters the viewport.

u-motion-children
  Put on a GENERAL CONTENT WRAPPER. Gives uncovered content a reveal fallback,
  without group staggering. Mixed wrappers are traversed so sibling headings
  and copy are covered; explicit nested motion groups keep their own effects.
  Already used by Section General 01 to avoid duplicate nested entrances.

u-motion-artwork
  Put on ONE image/illustration wrapper for an entrance with subtle desktop
  blur. Mobile omits the blur. Keep it off a whole multi-column section.

u-motion-pointer
  Put on the HERO'S OUTER SECTION for gentle mouse-following glow movement.
  Shared Hero CSS moves the glow; text and layout stay still. This is
  separate from the automatic ten-second glow fade. Mouse/fine pointer only.

u-motion-off
  Put on an element to exclude its subtree from SHARED page reveals/pointer
  movement. It does not disable CSS hover utilities or the separate Hero
  dashboard/chart controller. Remove hover classes separately if needed.

HOVER CLASSES (their CSS rules are below)

u-motion-lift
  Put on a suitable CARD for a small lift on hover or focus within it.
  Can be combined with the grid's stagger: entrance and hover are separate.

u-motion-image
  Put on a WRAPPER directly containing an img or inline svg for gentle hover/focus zoom.
  The wrapper clips the image. It does not provide an entrance animation.

u-motion-zoom
  Put on ONE illustration/group for gentle hover/focus zoom of that whole unit.
  Works for images, SVG and HTML scenes; does not clip artwork or shadows.
  Keep text-heavy panels and interactive controls outside this class. A direct
  img/SVG receives pointer events even when its decorative wrapper ignores
  them, so artwork hover works without u-motion-zoom-group.

u-motion-zoom-group
  Optional hover trigger on a WRAPPER containing a direct u-motion-zoom child.
  Only needed when hovering the parent should also zoom its direct child.
  Artwork hover works with u-motion-zoom alone; this parent class is optional.

WHERE THE CODE LIVES
  Standard Page > Site Motion > JavaScript: shared entrances/pointer/scroll.
  Hero 01 > Hero effects behaviour > JavaScript: dashboard tiles/chart effects.
  Shared Hero CSS: pointer-glow positioning and the hero decoration.
  This stylesheet: central settings, hover utilities and Lenis support CSS.

HOW TO READ THE SETTINGS
  Duration = how long ONE animation takes. Higher means slower movement.
  Stagger = gap between STARTS; animations can overlap.
  Example: duration 1000ms + stagger 300ms gives four cards start times of
  0 / 0.3 / 0.6 / 0.9 seconds and finish times of 1 / 1.3 / 1.6 / 1.9 seconds.
  With duration 4000ms, those finish times become 4 / 4.3 / 4.6 / 4.9 seconds.
  These examples assume the four cards enter together. Below-fold content
  waits until scrolled into view. Use ms for timing values (1000ms = 1 second).
  Settings can be overridden on a grid/component class when deliberately
  needed; do not duplicate defaults on each card. Refresh to replay entrances.

ACCESSIBILITY AND SCOPE
  Effects respect reduced motion. Content stays visible without JavaScript.
  Hover effects require a fine hover pointer. Ordinary mobile entrances have
  no stagger. These variables do not tune Lenis wheel smoothing or the
  separate ten-second hero glow cycle. Native ACSS continues to own colours.
*/
:root {
  /* Length of EACH entrance: headings, ordinary cards, hero statistics, dashboard panel and tiles. Higher = slower movement. Also controls u-motion-image and u-motion-zoom hover zoom. Does not set gaps between cards or chart-graphic speeds. */
  --bg-motion-duration: 1000ms;

  /* Length of the small u-motion-lift hover/focus movement. Does not change entrance speed, stagger or the pointer-glow response time. */
  --bg-motion-quick: 220ms;

  /* Acceleration/deceleration of entrances, including hero statistics and dashboard tiles. ease-in-out starts gently, speeds up, then slows to finish. Does not change the total duration. */
  --bg-motion-reveal-ease: ease-in-out;

  /* Gap between successive START times in a group, not a pause after the previous card finishes. Applies to u-motion-stagger groups and hero statistics/dashboard tiles. Ordinary groups use --bg-motion-stagger-limit (normally 3 intervals); each hero sequence group and dashboard retain a three-interval internal cap. Later hero groups start after the preceding visual/group. Mobile uses no stagger. Cards must enter the trigger area before their reveal starts. */
  --bg-motion-stagger: 300ms;

  /* Maximum stagger intervals in ordinary groups. Default 3 prevents long waits. A group may override this to 4 for five distinct starts. Each hero sequence group and dashboard retain a three-interval internal cap; this is not a cap on the entire multi-group hero sequence. */
  --bg-motion-stagger-limit: 3;

  /* Rise distance for shared page reveals, as a percentage of the element's own height (not screen height). Desktop is capped at 180px; mobile uses --bg-motion-distance-mobile. Hero outer visuals and statistics use this shared distance; only internal dashboard tiles keep their compact distances. Does not change the glow. */
  --bg-motion-distance: 50%;

  /* Rise distance on narrow/mobile screens (up to 37.5rem). Shared by headings, cards and artwork; 48px makes the glide visible without desktop-sized travel. Duration stays shared and mobile has no stagger. Use px. */
  --bg-motion-distance-mobile: 48px;

  /* Acceleration/deceleration for lift/image/group-zoom hover effects, pointer-glow movement and specialist dashboard graphics. Ordinary entrances use --bg-motion-reveal-ease instead. This is a curve, not a duration. */
  --bg-motion-ease: cubic-bezier(.2,.65,.3,1);

  /* How long each report bar takes to grow upwards. */
  --bg-motion-dashboard-bar-duration: 2000ms;

  /* Wait before the FIRST bar starts, measured from its containing tile's entrance start. */
  --bg-motion-dashboard-bar-delay: 750ms;

  /* Extra gap between successive bars starting. Separate from the card/grid stagger above. */
  --bg-motion-dashboard-bar-stagger: 200ms;

  /* How long the chart line takes to draw. */
  --bg-motion-dashboard-line-duration: 4000ms;

  /* Wait before line drawing starts, measured from the containing tile's entrance start. */
  --bg-motion-dashboard-line-delay: 850ms;

  /* How long the shaded area beneath the chart line takes to fade in. */
  --bg-motion-dashboard-fill-duration: 950ms;

  /* Wait before that shaded area starts fading, measured from the containing tile's entrance start. */
  --bg-motion-dashboard-fill-delay: 900ms;

  /* How long the chart endpoint dot takes to fade in. */
  --bg-motion-dashboard-dot-duration: 300ms;

  /* Wait before the endpoint dot appears, measured from the containing tile's entrance start. */
  --bg-motion-dashboard-dot-delay: 1550ms;

  /* How long the small calendar graphic takes to fade and scale in. */
  --bg-motion-dashboard-calendar-duration: 650ms;

  /* Wait before the calendar graphic starts, measured from its containing tile's entrance start. */
  --bg-motion-dashboard-calendar-delay: 1050ms;
}
/* Entrance utility classes alone never hide content. The guarded startup below is JavaScript opt-in. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .u-motion-lift {
    transition: translate var(--bg-motion-quick) var(--bg-motion-ease);
  }
  .u-motion-lift:is(:hover, :focus-within) { translate: 0 -3px; }

  .u-motion-zoom { transition: scale var(--bg-motion-duration) var(--bg-motion-ease); }
  /* Decorative wrappers may ignore pointer events. Only their actual image
     receives hover; blank overlay space remains transparent to the pointer.
     Hover propagates to the zoom wrapper without requiring a group class. */
  .u-motion-zoom > :is(img, svg) { pointer-events: auto; }
  .u-motion-zoom:is(:hover, :focus-within),
  .u-motion-zoom-group:is(:hover, :focus-within) > .u-motion-zoom { scale: 1.025; }

  .u-motion-image { overflow: clip; }
  .u-motion-image > :is(img, svg) {
    transition: scale var(--bg-motion-duration) var(--bg-motion-ease);
  }
  .u-motion-image:is(:hover, :focus-within) > :is(img, svg) { scale: 1.025; }
}

/* Lenis 1.3.27 support; enabled classes exist only while smoothing is active. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* Pre-paint hero guard. Only the blocking Standard Page head script adds this
   class. The deferred controller releases it after registering its holds; a
   two-second fallback releases it if startup fails. No-JS/reduced-motion stays visible. */
@media (prefers-reduced-motion: no-preference) {
  html.bg-motion-boot .u-motion-initial { visibility: hidden; }
}