/* Vision2 motion layer: styles. Loaded only on pages that run assets/motion.js.
 *
 * Everything that hides or moves content is gated on html.v2-motion. A script in <head> adds that class
 * only when the visitor has NOT asked for reduced motion, and removes it if motion.js fails to start.
 * So: no JavaScript, reduced motion, or a failed script = the normal page, fully visible, nothing moving.
 *
 * Content is hidden with opacity only (never display or visibility), so it keeps its space (no layout
 * shift), stays in the accessibility tree and stays reachable by keyboard.
 *
 * Attribute vocabulary (read by motion.js):
 *   data-motion="settle"    transform-only entrance (no fade). For the page h1, which is the LCP element.
 *   data-motion="rise"      fades and rises into place once, as it scrolls into view.
 *   data-motion="fade"      fades in once, no movement. For logo walls.
 *   data-motion="stagger"   its direct children rise in one after another.
 *   data-motion="sequence"  a figure whose parts reveal in reading order (the scope map).
 *   data-motion-skip        on a child: leave it out of the parent's stagger.
 *   data-motion-from="x"    stagger sideways instead of upwards.
 *   data-motion-delay=".2"  seconds to wait before starting.
 */

/* ---- Hidden starting states (only while motion is active) ---- */
.v2-motion [data-motion="rise"],
.v2-motion [data-motion="fade"],
.v2-motion [data-motion="stagger"] > :not([data-motion-skip]),
.v2-motion [data-motion="sequence"] > :not(figcaption),
.v2-motion [data-motion="sequence"] dl > div { opacity: 0; }
.v2-motion [data-motion="settle"]:not(.is-settled) { transform: translateY(16px); }

/* Safety nets: printing and anything that must never stay hidden. */
@media print {
  .v2-motion [data-motion],
  .v2-motion [data-motion] > *,
  .v2-motion [data-motion="sequence"] dl > div { opacity: 1 !important; transform: none !important; }
}

/* ---- Lenis (smooth scroll) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- Hover and focus refinements (small, no glow) ---- */
@media (hover: hover) {
  /* Cards: a 3px lift and the top rule warming to the accent colour. */
  .v2-motion .pillar,
  .v2-motion .hub-offers article,
  .v2-motion .demo-card,
  .v2-motion .routes article,
  .v2-motion .engagement-grid article {
    transition: transform .4s var(--ease-out-expo), border-color .4s var(--ease-out-expo);
  }
  .v2-motion .pillar:hover,
  .v2-motion .hub-offers article:hover,
  .v2-motion .demo-card:hover,
  .v2-motion .routes article:hover,
  .v2-motion .engagement-grid article:hover { transform: translateY(-3px); }
  .v2-motion .pillar:hover,
  .v2-motion .routes article:hover,
  .v2-motion .engagement-grid article:hover { border-top-color: var(--orange); }

  /* Links: keep the existing underline exactly as it is at rest; on hover it warms to the accent colour and eases down 2px. */
  .v2-motion .text-link { transition: text-decoration-color .3s ease, text-underline-offset .3s var(--ease-out-expo), color .25s ease; }
  .v2-motion .text-link:hover,
  .v2-motion .text-link:focus-visible { text-decoration-color: var(--orange); text-underline-offset: 7px; }
  .v2-motion .dark .text-link:hover,
  .v2-motion .dark .text-link:focus-visible { text-decoration-color: var(--peach); }

  /* Buttons: a quiet fill change, and the arrow steps forward. */
  .v2-motion .button { transition: background-color .35s var(--ease-out-expo), border-color .35s var(--ease-out-expo), color .35s var(--ease-out-expo); }
  .v2-motion .button .ico { transition: transform .35s var(--ease-out-expo); }
  .v2-motion .button:hover .ico { transform: translate(2px, -2px); }
}

/* ---- Page-to-page fade (browsers that support cross-document view transitions; ignored elsewhere) ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: ease; }
}