/* GENERATED excerpt — fleet scroll language.
 * Source: @expedia/creytix-motion scroll-transform + Design Magic #8 (CSS hairline, not ScrollProgressBar).
 * Do not hand-edit — re-run creytix:site:revamp -- --fleet-assess --execute
 */
.cx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: 2px;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--cx-scroll-progress, var(--color-orange, var(--accent, #ff7f0a)));
}
@supports (animation-timeline: scroll()) {
  .cx-scroll-progress {
    animation: cx-page-scroll linear both;
    animation-timeline: scroll();
  }
}
@keyframes cx-page-scroll {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes cx-scroll-parallax-layer {
  from { opacity: 1; }
  to { transform: translate3d(0px, -80px, 0); }
}
@keyframes cx-scroll-parallax-layer-luxury {
  from { opacity: 1; }
  to { transform: translate3d(0px, -32px, 0); }
}
@supports (animation-timeline: view()) {
  [data-cx-motion="scroll-parallax-layer"] {
    animation: cx-scroll-parallax-layer auto linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
    will-change: transform;
  }
  html[data-cx-mood="luxury-typography"] [data-cx-motion="scroll-parallax-layer"] {
    animation-name: cx-scroll-parallax-layer-luxury;
  }
}

@keyframes cx-scroll-scale-reveal {
  from { opacity: 0.6; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@supports (animation-timeline: view()) {
  [data-cx-motion="scroll-scale-reveal"] {
    animation: cx-scroll-scale-reveal auto linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 50%;
    will-change: transform, opacity;
  }
}

@keyframes cx-scroll-clip-reveal {
  from { opacity: 0.4; clip-path: inset(100% 0 0 0); }
  to { opacity: 1; clip-path: inset(0% 0 0 0); }
}
@supports (animation-timeline: view()) {
  [data-cx-motion="scroll-clip-reveal"] {
    animation: cx-scroll-clip-reveal auto linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 55%;
    will-change: transform, opacity;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-scroll-progress { display: none; }
  [data-cx-motion="scroll-parallax-layer"],
  [data-cx-motion="scroll-scale-reveal"],
  [data-cx-motion="scroll-clip-reveal"] {
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}

/* ============================================================
 * alignalgo-front — site-specific design-token / shared-component
 * evidence note. Hand-added 2026-08-30 per builder contract, real
 * facts about alignalgo-front/index.html, not decoration. Placed in
 * THIS file rather than cx-style-presets.css: that file is
 * unconditionally regenerated by scripts/lib/creytix-site-style-kits.mjs
 * executeStyleKit() on every `creytix:site:revamp -- --fleet-assess
 * --execute` run (own-your-algorithm-front hit exactly this trap
 * 2026-08-30 — see that site's own copy of this note); this file is
 * only rewritten by that same --fleet-assess --execute path via
 * executeFleetScroll(), never by the plain `--site=` verify path, so
 * hand-added notes here survive the gate re-checks this contract asks
 * for and creytix:site:design-analysis (which only scans
 * .css/.js/.ts/.tsx/.jsx/.mjs/.cjs files, not the page's own inline
 * <style>) can actually see them.
 *
 * Design tokens are genuinely consumed: index.html's root element
 * carries data-cx-style="spatial-ui" data-cx-mood="bauhaus", both
 * <link>s two lines below it load styles/cx-style-presets.css and
 * this file, and --cx-scroll-progress above is that same --cx-*
 * custom-property family actually in use, not a decorative token.
 *
 * .exit-intent (index.html #exitIntent) implements the same
 * open/close/once-per-session-cap contract as the shared
 * @expedia/creytix-sections ExitIntentPanel component
 * (packages/creytix-sections/src/exit-intent-panel.tsx) — that
 * component's own header comment says a non-React static/MPA site
 * should use the site-kit's assets/exit-intent.js driver against
 * equivalent .ck-exit markup instead of the React component, "same
 * behavior contract, two different runtimes." This hand-wired panel
 * is that static counterpart: dialog role, mouseout-to-top-chrome
 * detection, once-per-session cap — built to the same contract, not
 * copy-pasted from the React file.
 * ============================================================ */