/* ═══════════════════════════════════════════════════════════════════════
   CONCEDUS MOTION LIBRARY · concedus-motion.css
   15 production "living content" modules. Pairs with concedus-motion.js.
   ───────────────────────────────────────────────────────────────────────
   • Every selector is namespaced `cc-` — zero collisions with site CSS.
   • Reads --c-violet-* from the site's tokens.css; adds its own --cc-* accents.
   • Scroll-triggered modules animate via a `.cc-in` class added ONCE by the JS
     (play-once on the real site — not the looping preview in the gallery).
   • Fully covered by prefers-reduced-motion at the bottom.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --cc-mg: #ED4FB2;          /* magenta accent (no brand token exists yet) */
  --cc-mg-rgb: 237, 79, 178;
  --cc-ok: #34D399;          /* success green */
  --cc-ok-rgb: 52, 211, 153;
  --cc-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* ════ 1 · Section reveals  (.cc-reveal → animates direct children) ════ */
.cc-reveal > * { opacity: 0; transform: translateY(14px); }
.cc-reveal.cc-in > * { animation: cc-reveal-in .5s cubic-bezier(.2,.7,.2,1) forwards; }
.cc-reveal.cc-in > *:nth-child(2){ animation-delay:.08s; }
.cc-reveal.cc-in > *:nth-child(3){ animation-delay:.16s; }
.cc-reveal.cc-in > *:nth-child(4){ animation-delay:.24s; }
.cc-reveal.cc-in > *:nth-child(5){ animation-delay:.32s; }
.cc-reveal.cc-in > *:nth-child(6){ animation-delay:.40s; }
@keyframes cc-reveal-in { to { opacity:1; transform:none; } }

/* ════ 2 · Condensing sticky header  (add data-cc-sticky to <header>) ════ */
[data-cc-sticky] { transition: padding .25s ease, box-shadow .25s ease, background-color .25s ease; }
[data-cc-sticky].cc-shrunk {
  padding-top: 8px; padding-bottom: 8px;
  box-shadow: 0 6px 20px -12px rgba(40,21,71,.45);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
}
/* On dark navs use this variant instead: */
[data-cc-sticky].cc-shrunk.cc-on-dark { background: rgba(30,20,46,.85); }

/* ════ 3 · Cursor-follow glow  (.cc-glow inside a dark section) ════ */
.cc-glow { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.cc-glow__spot {
  position:absolute; width:340px; height:340px; left:0; top:0;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(var(--cc-mg-rgb),.40), rgba(105,36,219,.16) 42%, transparent 68%);
  filter: blur(8px); transition: transform .14s ease-out;
}

/* ════ 4 · Link underline draw + arrow  (.cc-underline / .cc-arrow) ════ */
.cc-underline { position:relative; display:inline-flex; align-items:center; gap:8px; }
.cc-underline::after {
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0;
  background: var(--cc-mg); transition: width .3s ease;
}
.cc-underline:hover::after, a:hover .cc-underline::after,
.cc-hover:hover .cc-underline::after { width:100%; }
.cc-arrow { width:0; overflow:hidden; transition:width .25s ease; color:var(--c-violet-500); }
a:hover .cc-arrow, .cc-hover:hover .cc-arrow, .cc-underline:hover .cc-arrow { width:16px; }

/* ════ 5 · License cycler  (.cc-cycler[data-words="A,B,C"]) ════ */
.cc-cycler { display:inline-block; min-height:1.15em; }
.cc-cycler__cur { display:inline-block; width:3px; height:1em; background:var(--cc-mg);
  margin-left:3px; vertical-align:-.12em; animation: cc-caret 1s step-end infinite; }
@keyframes cc-caret { 50% { opacity:0; } }

/* ════ 6 · Count-up numbers  (.cc-count[data-to][data-prefix][data-suffix]) ════ */
.cc-count { font-variant-numeric: tabular-nums; }

/* ════ 7 · Testimonials / quote rotator  (.cc-rotator[data-interval]) ════ */
.cc-rotator { position:relative; }
.cc-rotator__win { position:relative; }
.cc-rotator__item { opacity:0; transition:opacity .5s ease; }
.cc-rotator__item.cc-on { opacity:1; }
/* Set the window height to the tallest item, or use position:absolute items: */
.cc-rotator--abs .cc-rotator__item { position:absolute; inset:0; }
.cc-rotator__prog { height:3px; background:rgba(105,36,219,.14); border-radius:3px; overflow:hidden; margin-top:14px; }
.cc-rotator__prog i { display:block; height:100%; width:0; background:var(--cc-mg); }
.cc-rotator.cc-run .cc-rotator__prog i { animation: cc-prog var(--cc-int,5s) linear infinite; }
@keyframes cc-prog { from { width:0; } to { width:100%; } }

/* ════ 8 · Live status pulse dot  (.cc-pulse) ════ */
.cc-pulse { display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--cc-ok); box-shadow:0 0 10px var(--cc-ok); animation: cc-pulse 1.8s ease-in-out infinite; }
.cc-pulse--mg { background:var(--cc-mg); box-shadow:0 0 10px var(--cc-mg); }
@keyframes cc-pulse { 50% { opacity:.4; } }

/* ════ 9 · Division-of-responsibility flow  (.cc-flow) — pure CSS ════ */
.cc-flow { display:flex; align-items:center; gap:8px; }
.cc-flow__pipe { position:relative; flex:0 0 40px; height:2px; background:rgba(170,157,235,.3); }
.cc-flow__pipe::after { content:""; position:absolute; top:50%; left:0; width:8px; height:8px;
  border-radius:50%; background:var(--cc-mg); transform:translate(-2px,-50%);
  box-shadow:0 0 10px var(--cc-mg); animation: cc-flow-dot 2.4s linear infinite; }
.cc-flow__pipe--delay::after { animation-delay:1.2s; }
@keyframes cc-flow-dot { 0%{left:0;opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{left:100%;opacity:0;} }

/* ════ 10 · Onboarding progress spine  (.cc-spine, play-once on .cc-in) ════ */
.cc-spine { position:relative; }
.cc-spine__rail { position:absolute; left:11px; top:8px; bottom:8px; width:2px;
  background:rgba(170,157,235,.25); overflow:hidden; }
.cc-spine__rail i { position:absolute; inset:0 0 auto 0; height:0; background:var(--cc-mg); }
.cc-spine.cc-in .cc-spine__rail i { animation: cc-spine-fill var(--cc-dur,3.2s) ease forwards; }
@keyframes cc-spine-fill { to { height:100%; } }
.cc-spine__dot { width:16px; height:16px; border-radius:50%; background:#fff;
  border:2px solid rgba(170,157,235,.6); box-sizing:border-box; }
.cc-spine.cc-in .cc-spine__step:nth-child(1) .cc-spine__dot{ animation:cc-dot-on .4s ease forwards .2s; }
.cc-spine.cc-in .cc-spine__step:nth-child(2) .cc-spine__dot{ animation:cc-dot-on .4s ease forwards 1.0s; }
.cc-spine.cc-in .cc-spine__step:nth-child(3) .cc-spine__dot{ animation:cc-dot-on .4s ease forwards 1.8s; }
.cc-spine.cc-in .cc-spine__step:nth-child(4) .cc-spine__dot{ animation:cc-dot-on .4s ease forwards 2.6s; }
.cc-spine.cc-in .cc-spine__step:nth-child(5) .cc-spine__dot{ animation:cc-dot-on .4s ease forwards 3.4s; }
@keyframes cc-dot-on { to { background:var(--cc-mg); border-color:var(--cc-mg);
  box-shadow:0 0 0 4px rgba(var(--cc-mg-rgb),.18); } }

/* ════ 11 · Core architecture  (.cc-arch[data-modules]) — JS builds inner ════ */
.cc-arch { position:relative; }
.cc-arch__svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cc-arch__svg line { stroke:rgba(170,157,235,.25); stroke-width:1.2; }
.cc-arch__mod { position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
  font-family:var(--cc-mono); font-size:11px; color:var(--c-violet-200);
  background:rgba(30,20,46,.92); border:1px solid rgba(170,157,235,.28);
  border-radius:7px; padding:6px 9px; transition:border-color .3s, color .3s, box-shadow .3s; }
.cc-arch__mod.cc-lit { border-color:var(--cc-mg); color:#fff;
  box-shadow:0 0 18px -4px rgba(var(--cc-mg-rgb),.7); }

/* ════ 12 · Release ticker  (.cc-ticker) — pure CSS ════ */
.cc-ticker { overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.cc-ticker__track { display:flex; gap:34px; width:max-content; animation: cc-tick var(--cc-speed,16s) linear infinite; }
.cc-ticker:hover .cc-ticker__track { animation-play-state:paused; }
@keyframes cc-tick { to { transform:translateX(-50%); } }

/* ════ 13 · Order-flow pipeline  (.cc-orderflow) ════ */
.cc-orderflow__chip { transition:border-color .3s, color .3s, box-shadow .3s; }
.cc-orderflow__chip.cc-hot { border-color:var(--cc-mg); color:#fff;
  box-shadow:0 0 14px -4px rgba(var(--cc-mg-rgb),.6); }
.cc-orderflow__pipe { position:relative; }
.cc-orderflow__pkt { position:absolute; top:50%; left:10%; width:9px; height:9px; border-radius:50%;
  background:var(--cc-mg); transform:translate(-50%,-50%); box-shadow:0 0 12px var(--cc-mg);
  animation: cc-pkt 2.6s ease-in-out infinite; }
@keyframes cc-pkt { 0%{left:10%;opacity:0;} 10%{opacity:1;} 85%{opacity:1;} 100%{left:90%;opacity:0;} }
.cc-orderflow__out { opacity:0; transition:opacity .4s ease; }
.cc-orderflow__out.cc-on { opacity:1; }

/* ════ 14 · Regulatory timeline  (.cc-timeline, play-once on .cc-in) ════ */
.cc-timeline__line { position:relative; height:2px; background:rgba(170,157,235,.3); border-radius:2px; }
.cc-timeline__line i { position:absolute; inset:0 auto 0 0; width:0; background:var(--cc-mg); border-radius:2px; }
.cc-timeline.cc-in .cc-timeline__line i { animation: cc-tl-fill var(--cc-dur,3.2s) ease forwards; }
@keyframes cc-tl-fill { to { width:100%; } }
.cc-timeline__dot { width:14px; height:14px; border-radius:50%; background:#fff;
  border:2px solid rgba(170,157,235,.6); box-sizing:border-box; }
.cc-timeline.cc-in .cc-timeline__pt:nth-child(1) .cc-timeline__dot{ animation:cc-dot-on .3s ease forwards .2s; }
.cc-timeline.cc-in .cc-timeline__pt:nth-child(2) .cc-timeline__dot{ animation:cc-dot-on .3s ease forwards 1.0s; }
.cc-timeline.cc-in .cc-timeline__pt:nth-child(3) .cc-timeline__dot{ animation:cc-dot-on .3s ease forwards 1.8s; }
.cc-timeline.cc-in .cc-timeline__pt:nth-child(4) .cc-timeline__dot{ animation:cc-dot-on .3s ease forwards 2.6s; }
.cc-timeline.cc-in .cc-timeline__pt:nth-child(5) .cc-timeline__dot{ animation:cc-dot-on .3s ease forwards 3.4s; }

/* ════ 15 · Logo marquee  (.cc-marquee) — pure CSS ════ */
.cc-marquee { overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.cc-marquee__row { display:flex; gap:14px; width:max-content; }
.cc-marquee__row--l { animation: cc-mq-l var(--cc-speed,18s) linear infinite; }
.cc-marquee__row--r { animation: cc-mq-r var(--cc-speed,22s) linear infinite; }
.cc-marquee:hover .cc-marquee__row { animation-play-state:paused; }
@keyframes cc-mq-l { to { transform:translateX(-50%); } }
@keyframes cc-mq-r { from { transform:translateX(-50%); } to { transform:translateX(0); } }

/* ════ Tabs segment slider  (.cc-tabs) ════ */
.cc-tabs__seg { position:relative; display:flex; }
.cc-tabs__pill { position:absolute; top:4px; bottom:4px; left:4px;
  width:calc((100% - 8px) / var(--cc-tabs, 3));
  transition: transform .32s cubic-bezier(.34,1.4,.5,1); }
.cc-tabs__panel { position:relative; }
.cc-tabs__p { position:absolute; inset:0; opacity:0; transform:translateY(6px);
  transition:opacity .3s, transform .3s; pointer-events:none; }
.cc-tabs__p.cc-on { opacity:1; transform:none; pointer-events:auto; position:relative; }

/* ═══════════════════════════════════════════════════════════════════════
   STRUCTURAL DEFAULTS — so the canonical markup in INTEGRATION.md renders
   correctly out of the box. Tuned for the intended background (noted per
   module). Override freely with site classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* arch core (dark sections) */
.cc-arch__core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  text-align:center; background:linear-gradient(180deg, rgba(105,36,219,.5), rgba(40,21,71,.6));
  border:1px solid rgba(var(--cc-mg-rgb),.4); border-radius:12px; padding:12px 16px;
  box-shadow:0 0 40px -8px rgba(var(--cc-mg-rgb),.5); }
.cc-arch__core b { font-size:13px; color:#fff; }
.cc-arch__core span { display:block; font-size:9px; color:var(--c-violet-300);
  font-family:var(--cc-mono); margin-top:2px; letter-spacing:.06em; }

/* flow (dark sections) */
.cc-flow__node { flex:1; text-align:center; border:1px solid rgba(170,157,235,.3);
  border-radius:10px; padding:14px 8px; background:rgba(255,255,255,.04); }
.cc-flow__node--core { border-color:rgba(var(--cc-mg-rgb),.45);
  background:linear-gradient(180deg, rgba(105,36,219,.25), rgba(40,21,71,.2)); }
.cc-flow__lbl { font-size:12px; color:#fff; font-weight:600; }
.cc-flow__sub { font-size:10px; color:var(--c-violet-300); margin-top:3px; font-family:var(--cc-mono); }

/* spine (light sections) */
.cc-spine { padding-left:34px; }
.cc-spine__step { position:relative; padding-bottom:22px; }
.cc-spine__step:last-child { padding-bottom:0; }
.cc-spine__dot { position:absolute; left:-29px; top:1px; }
.cc-spine__t { font-size:14px; font-weight:600; }
.cc-spine__d { font-size:12px; color:#8a8794; margin-top:2px; }

/* timeline (light sections) */
.cc-timeline { padding-top:8px; }
.cc-timeline__pts { display:flex; justify-content:space-between; margin-top:-9px; }
.cc-timeline__pt { display:flex; flex-direction:column; align-items:center; gap:8px; width:64px; }
.cc-timeline__yr { font-family:var(--cc-mono); font-size:11px; font-weight:600; color:var(--c-violet-600); }
.cc-timeline__lb { font-size:10.5px; color:#8a8794; text-align:center; line-height:1.25; }

/* order-flow (dark sections) */
.cc-orderflow__in { display:flex; gap:8px; justify-content:center; }
.cc-orderflow__chip { font-family:var(--cc-mono); font-size:11px; color:var(--c-violet-200);
  border:1px solid rgba(170,157,235,.3); border-radius:999px; padding:6px 12px; }
.cc-orderflow__pipe { height:36px; margin:14px 0; }
.cc-orderflow__pipe::before { content:""; position:absolute; left:10%; right:10%; top:50%; height:2px;
  background:rgba(170,157,235,.3); transform:translateY(-50%); }
.cc-orderflow__out { text-align:center; font-family:var(--cc-mono); font-size:13px; color:var(--cc-ok);
  display:flex; align-items:center; justify-content:center; gap:8px; }
.cc-orderflow__ck { width:18px; height:18px; border-radius:50%; background:rgba(var(--cc-ok-rgb),.18);
  display:flex; align-items:center; justify-content:center; }

/* tabs (light sections) */
.cc-tabs__seg { background:#EFEDF4; border-radius:999px; padding:4px; }
.cc-tabs__pill { background:#fff; border-radius:999px; box-shadow:0 2px 6px -2px rgba(40,21,71,.25); }
.cc-tabs__btn { flex:1; position:relative; z-index:2; border:0; background:transparent; font:inherit;
  font-weight:600; font-size:13px; color:#8a8794; padding:9px 0; cursor:pointer; transition:color .2s; }
.cc-tabs__btn.cc-on { color:var(--c-violet-700); }
.cc-tabs__panel { margin-top:16px; }
.cc-tabs__p h4 { font-size:15px; }
.cc-tabs__p p { margin-top:6px; color:#52505A; line-height:1.45; }

/* marquee logo placeholders (swap for real <img> logos) */
.cc-marquee__logo { flex:none; width:120px; height:46px; border-radius:8px;
  border:1px solid #E2E0E8; display:flex; align-items:center; justify-content:center;
  font-family:var(--cc-mono); font-size:10px; color:#a6a1b5; letter-spacing:.08em;
  background:repeating-linear-gradient(45deg,#F4F2F9,#F4F2F9 6px,#EEEBF6 6px,#EEEBF6 12px); }

/* status row */
.cc-status__row { display:flex; align-items:center; gap:10px; }

/* ════ Reduced motion — show final/first state, kill loops ════ */
@media (prefers-reduced-motion: reduce) {
  .cc-reveal > *, .cc-spine__rail i, .cc-timeline__line i { animation:none !important; }
  .cc-reveal > * { opacity:1 !important; transform:none !important; }
  .cc-spine__rail i, .cc-timeline__line i { height:100% !important; width:100% !important; }
  .cc-glow__spot, .cc-flow__pipe::after, .cc-ticker__track, .cc-marquee__row,
  .cc-orderflow__pkt, .cc-pulse, .cc-cycler__cur { animation:none !important; }
  .cc-rotator__item:first-child { opacity:1 !important; }
}