/* Motion layer (shared by index, outletone, pricing).
   - [data-reveal], [data-reveal-group]: fade/slide in when scrolled into view (motion.js adds .is-in).
   - .oo-seg[data-draw]: the Outlet One segment bar draws in blue → orange → brown.
   - [data-count]: numbers count up once visible.
   - [data-live] > .live-scene: a looping, video-like product demo; each scene's [data-step] children
     appear one after another, [data-flip] elements switch state (e.g. Pending → Approved).
   Everything is static until motion.js runs (html.m-ready) and under prefers-reduced-motion. */

.m-ready [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--rv-delay, 0ms);
}
.m-ready [data-reveal="left"] { transform: translateX(-28px); }
.m-ready [data-reveal="right"] { transform: translateX(28px); }
.m-ready [data-reveal="scale"] { transform: scale(.96); }
.m-ready [data-reveal].is-in { opacity: 1; transform: none; }

.m-ready [data-reveal-group] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.m-ready [data-reveal-group].is-in > * { opacity: 1; transform: none; }
.m-ready [data-reveal-group].is-in > :nth-child(2) { transition-delay: 70ms; }
.m-ready [data-reveal-group].is-in > :nth-child(3) { transition-delay: 140ms; }
.m-ready [data-reveal-group].is-in > :nth-child(4) { transition-delay: 210ms; }
.m-ready [data-reveal-group].is-in > :nth-child(5) { transition-delay: 280ms; }
.m-ready [data-reveal-group].is-in > :nth-child(6) { transition-delay: 350ms; }
.m-ready [data-reveal-group].is-in > :nth-child(7) { transition-delay: 420ms; }
.m-ready [data-reveal-group].is-in > :nth-child(8) { transition-delay: 490ms; }

/* Segment bar draw-in: the brand's one signature moment */
.m-ready .oo-seg[data-draw] span { transform: scaleX(0); transform-origin: left center; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.m-ready .oo-seg[data-draw].is-in span:nth-child(1) { transform: none; }
.m-ready .oo-seg[data-draw].is-in span:nth-child(2) { transform: none; transition-delay: .25s; }
.m-ready .oo-seg[data-draw].is-in span:nth-child(3) { transform: none; transition-delay: .5s; }

/* Hover lift for cards that link somewhere */
.m-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.m-lift:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(14, 31, 69, 0.12); }

/* Live demo scenes */
[data-live] { position: relative; }
[data-live] .live-scene { position: absolute; inset: 0; opacity: 0; transform: translateY(12px) scale(.985); pointer-events: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
[data-live] .live-scene.is-on { opacity: 1; transform: none; }
[data-live] .live-scene.is-on [data-step] { animation: m-step .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--step, 0) * 260ms + 200ms); }
@keyframes m-step { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.live-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.live-dot { width: 22px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); overflow: hidden; border: 0; padding: 0; cursor: pointer; }
.live-dot i { display: block; height: 100%; width: 0; background: #FFFFFF; }
.live-dot.is-on i { width: 100%; transition: width var(--live-ms, 4800ms) linear; }
.live-dot:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* Typing indicator */
.m-typing { display: inline-flex; gap: 3px; align-items: center; height: 10px; }
.m-typing i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: m-blink 1.2s infinite ease-in-out; }
.m-typing i:nth-child(2) { animation-delay: .2s; }
.m-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes m-blink { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* State flip: show .flip-a, then .flip-b once .is-done lands (motion.js) */
[data-flip] .flip-b { display: none; }
[data-flip].is-done .flip-a { display: none; }
[data-flip].is-done .flip-b { display: inline-flex; animation: m-pop .35s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes m-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* Soft pulse for a "live" dot */
.m-pulse { position: relative; }
.m-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid currentColor; opacity: 0; animation: m-pulse 2s infinite; }
@keyframes m-pulse { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.4); opacity: 0; } }

/* Bars that grow in (mini charts) */
.m-ready .m-bars i { transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.m-ready .m-bars.is-in i { transform: none; }
.m-ready .m-bars.is-in i:nth-child(2) { transition-delay: 60ms; }
.m-ready .m-bars.is-in i:nth-child(3) { transition-delay: 120ms; }
.m-ready .m-bars.is-in i:nth-child(4) { transition-delay: 180ms; }
.m-ready .m-bars.is-in i:nth-child(5) { transition-delay: 240ms; }
.m-ready .m-bars.is-in i:nth-child(6) { transition-delay: 300ms; }
.m-ready .m-bars.is-in i:nth-child(7) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .m-ready [data-reveal], .m-ready [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .m-ready .oo-seg[data-draw] span, .m-ready .m-bars i { transform: none !important; }
  [data-live] .live-scene { position: relative; opacity: 1; transform: none; }
  [data-live] .live-scene + .live-scene { display: none; }
  [data-live] .live-scene [data-step] { animation: none !important; }
  .live-dots, .m-typing { display: none !important; }
  [data-flip] .flip-a { display: none; } [data-flip] .flip-b { display: inline-flex; }
}

/* Print: show sections that were never scrolled into view */
@media print {
  .m-ready [data-reveal], .m-ready [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .m-ready .oo-seg[data-draw] span { transform: none !important; }
}