/* MARCOS motion kit v1 (2026-09-26). Shared by every business site; copy with motion.js.
 * Restrained, Linear/Stripe-level motion. Rules:
 *  - transform + opacity only (the key-card ring animates one registered angle, paused off-screen)
 *  - no layout shift: nothing here changes a box size or position in flow
 *  - state lives in data-m* attributes (frameworks never overwrite them)
 *  - prefers-reduced-motion: everything below is switched off at the end of this file
 *  - positioning (relative) is only added by motion.js when an element is static
 * Colours come from the site: --m-accent-rgb / --m-accent-2-rgb (default: the site's --brand-rgb / --accent-rgb, else indigo/violet). */

:root {
  --m-accent-rgb: var(--brand-rgb, var(--accent-rgb, 99, 102, 241));
  --m-accent-2-rgb: var(--brand-2-rgb, var(--accent-2-rgb, 139, 92, 246));
  --m-ease: cubic-bezier(.2, .7, .2, 1);
  --m-ease-out: cubic-bezier(.16, 1, .3, 1);
  --m-dur: .7s;
  --m-rise: 14px;
  --m-up: 34, 197, 94;
  --m-down: 239, 68, 68;
}

/* ---- 1. Scroll reveal (motion.js sets data-mk="rv" then "in"; --m-i = stagger index) ---- */
[data-mk="rv"] {
  opacity: 0;
  transform: translate3d(0, var(--m-rise), 0);
}
[data-mk="in"] {
  opacity: 1;
  transform: none;
  transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease-out);
  transition-delay: calc(var(--m-i, 0) * 70ms);
}

/* ---- 1b. CSS-only scroll reveal for pages that ship no JavaScript: data-m-scroll or .m-scroll.
 * Scroll-driven (animation-timeline: view(), Safari 26 / Chrome 115+); older browsers simply show
 * the content. Bound to scroll position, so nothing can stay hidden. ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-m-scroll], .m-scroll {
      animation: m-scroll-in linear both;
      animation-timeline: view(); animation-range: entry 0% entry 50%;
    }
  }
}
@keyframes m-scroll-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } }

/* ---- 2. Count-up numbers: digits keep their width while they run ---- */
[data-m-count] { font-variant-numeric: tabular-nums; }

/* ---- 3. Key card: animated gradient ring + soft glow (motion.js injects <span class="m-ring">) ---- */
@property --m-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.m-ring {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--m-angle), rgba(var(--m-accent-rgb), 0) 0deg, rgba(var(--m-accent-rgb), .9) 70deg,
    rgba(var(--m-accent-2-rgb), .8) 140deg, rgba(var(--m-accent-rgb), 0) 210deg, rgba(var(--m-accent-rgb), 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: m-spin 9s linear infinite; animation-play-state: paused;
}
.m-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 46px -12px rgba(var(--m-accent-rgb), .7);
  opacity: .5; animation: m-breathe 6s ease-in-out infinite; animation-play-state: paused;
}
[data-m-live] > .m-ring, [data-m-live] > .m-ring::after, .m-static > .m-ring, .m-static > .m-ring::after { animation-play-state: running; }
@keyframes m-spin { to { --m-angle: 360deg; } }
@keyframes m-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }

/* ---- 4. Hero backdrop: aurora blobs + drifting grid (injected by motion.js as .m-aurora) ---- */
.m-hero { isolation: isolate; }
.m-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; contain: strict;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.m-aurora i {
  position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: 0; border-radius: 50%;
  margin: -28vmax 0 0 -35vmax; will-change: transform; opacity: .5; /* anchored to the top: a hero that grows never moves it */
  background: radial-gradient(closest-side, rgba(var(--m-accent-rgb), .32), rgba(var(--m-accent-rgb), 0) 70%);
  animation: m-drift-a 22s ease-in-out infinite alternate; animation-play-state: paused;
}
.m-aurora i:nth-child(2) {
  background: radial-gradient(closest-side, rgba(var(--m-accent-2-rgb), .26), rgba(var(--m-accent-2-rgb), 0) 70%);
  animation-name: m-drift-b; animation-duration: 28s;
}
.m-aurora b {
  position: absolute; left: 0; right: 0; top: -64px; height: calc(100% + 128px); opacity: .45;
  background-image: linear-gradient(rgba(var(--m-grid-rgb, 255, 255, 255), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--m-grid-rgb, 255, 255, 255), .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%);
  will-change: transform; animation: m-grid 16s linear infinite; animation-play-state: paused;
}
.m-aurora[data-m-live] i, .m-aurora[data-m-live] b, .m-aurora.m-static i, .m-aurora.m-static b { animation-play-state: running; }
@keyframes m-drift-a { from { transform: translate3d(-28%, -18%, 0) scale(1); } to { transform: translate3d(-8%, 6%, 0) scale(1.12); } }
@keyframes m-drift-b { from { transform: translate3d(30%, 12%, 0) scale(1.1); } to { transform: translate3d(10%, -10%, 0) scale(.95); } }
@keyframes m-grid { to { transform: translate3d(0, 64px, 0); } }

/* ---- 5. Hover lift on primary buttons (hover-capable pointers only) ---- */
@media (hover: hover) and (pointer: fine) {
  [data-m-lift] { transition: transform .22s var(--m-ease-out), opacity .22s, filter .22s; }
  [data-m-lift]:hover { transform: translate3d(0, -2px, 0); }
  [data-m-lift]:active { transform: translate3d(0, 0, 0) scale(.985); transition-duration: .08s; }
}

/* ---- 6. Skeleton shimmer for loading data: <span class="m-skel" style="width:6ch"></span> ---- */
.m-skel {
  position: relative; overflow: hidden; display: inline-block; min-height: 1em; vertical-align: middle;
  border-radius: 6px; background: rgba(148, 163, 184, .14); color: transparent !important;
}
.m-skel::after {
  content: ""; position: absolute; inset: 0; transform: translate3d(-100%, 0, 0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  animation: m-shimmer 1.4s ease-in-out infinite;
}
.m-skel.block { display: block; }
@keyframes m-shimmer { to { transform: translate3d(100%, 0, 0); } }

/* ---- 7. Live number ticker: motion.js sets data-m-tick="up|down" on each change ---- */
[data-m-ticker] { font-variant-numeric: tabular-nums; }
[data-m-tick="up"] { animation: m-tick-up .9s var(--m-ease-out); }
[data-m-tick="down"] { animation: m-tick-down .9s var(--m-ease-out); }
@keyframes m-tick-up { from { color: rgb(var(--m-up)); opacity: .4; transform: translate3d(0, 3px, 0); } 40% { opacity: 1; transform: none; } }
@keyframes m-tick-down { from { color: rgb(var(--m-down)); opacity: .4; transform: translate3d(0, -3px, 0); } 40% { opacity: 1; transform: none; } }

/* ---- Reduced motion + print: nothing moves, nothing is hidden ---- */
/* rotating phrase (data-m-rotate): all phrases share one grid cell, only data-on is visible */
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-rot { display: inline-grid; vertical-align: bottom; }
.m-rot-i { grid-area: 1 / 1; opacity: 0; transform: translateY(.35em); transition: opacity .45s ease, transform .45s ease; background: inherit; -webkit-background-clip: inherit; background-clip: inherit; }
.m-rot-i[data-on] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-mk="rv"], [data-mk="in"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .m-ring, .m-ring::after, .m-aurora i, .m-aurora b, .m-skel::after, [data-m-tick] { animation: none !important; }
  [data-m-lift], [data-m-lift]:hover, [data-m-lift]:active { transform: none !important; transition: none !important; }
}
@media print {
  [data-mk="rv"] { opacity: 1 !important; transform: none !important; }
  .m-aurora { display: none; }
}