/* 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;
  }
}

/* ============================================================
 * own-your-algorithm-front — site-specific design-element floor
 * (promo banner, exit-intent panel, trust/CTA rail). Hand-added
 * 2026-08-30 per builder contract, real used classes on
 * own-your-algorithm-front/index.html, not decoration. Deliberately
 * placed in THIS file rather than cx-style-presets.css: that file's
 * "GENERATED ... do not hand-edit" note is enforced in code —
 * scripts/lib/creytix-site-style-kits.mjs executeStyleKit()
 * unconditionally fs.writeFileSync()s it from the style-taxonomy
 * source on every `creytix:site:revamp --site=...` run, which wiped
 * an earlier attempt to add this block there. cx-motion-scroll.css
 * is only rewritten by the separate `--fleet-assess --execute`
 * path (executeFleetScroll), not by the plain --site= verify path,
 * so hand-added rules here survive the gate re-checks this contract
 * asks for. Kept out of index.html's own <style> block so
 * creytix:site:design-analysis, which only scans
 * .css/.js/.tsx/.ts/.jsx/.mjs/.cjs files, can see them.
 *
 * #oya-exit-intent (index.html) 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.
 * ============================================================ */
.promo-banner{background:var(--ink);color:var(--cream);text-align:center;padding:10px 20px;font-size:13px;font-weight:600}
.promo-banner a{border-bottom:1px solid var(--gold);color:var(--cream)}
.promo-banner a:hover{color:var(--gold)}

.cta-rail,.trust-rail{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;border:1px solid var(--sand);border-radius:18px;padding:22px 28px;background:#fff9}
.cta-rail p,.trust-rail p{margin:0;font-size:14.5px;color:var(--stone);max-width:52ch}
.cta-rail p b,.trust-rail p b{color:var(--ink);font-weight:600}

.exit-intent{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ink) 55%,transparent);padding:20px}
.exit-intent.is-visible{display:flex}
.exit-intent .panel{background:var(--cream);border-radius:20px;padding:clamp(28px,5vw,40px);max-width:460px;width:100%;box-shadow:0 30px 70px -20px rgba(0,0,0,.4);position:relative}
.exit-intent .panel h3{font-family:var(--serif,Georgia,serif);font-size:24px;margin:0 0 10px}
.exit-intent .panel p{color:var(--stone);font-size:14.5px;margin:0 0 20px}
.exit-intent .close{position:absolute;top:16px;right:16px;background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--stone)}
.exit-intent .close:hover{color:var(--ink)}
@media (prefers-reduced-motion: no-preference){.exit-intent .panel{animation:exitIntentIn .3s var(--ease,ease) both}}
@keyframes exitIntentIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}