/* generated by cogmenta/design @ 16563c8 — do not edit here; change it in the design repo and re-sync */
/* Cogmenta motion accents (FX) — opt-in, token-driven effects. Spec and surface rules: design-system/motion/FX.md.
   Load after cogmenta-components.css. orbit, fill and aurora are CSS only; the rest need cogmenta-fx.js.
   Nothing here applies without a data-fx attribute, and prefers-reduced-motion switches every effect off.
     data-fx="grid"      brand, display   dot field behind the element's content; dots lean away from the cursor
     data-fx="focus"     brand            each word of a heading snaps into focus from a blur
     data-fx="decode"    brand, display   a mono label resolves from glyph noise when it comes into view
     data-fx="count"     all surfaces     numbers count up once when they come into view (product: data-fx-duration="400")
     data-fx="orbit"     all surfaces     a comet runs the primary button's ring while hovered or focused
     data-fx="fill"      all surfaces     an outline button fills with accent-soft from the left on hover
     data-fx="magnetic"  brand            a call to action leans toward the cursor, at most 8px
     data-fx="spotlight" all surfaces     a soft light follows the cursor across a grid of cards
     data-fx="cables"    brand            light cables drift behind a dark band; pulses travel along them
     data-fx="aurora"    brand            two soft ribbons drift behind a closing band (uses its ::before/::after) */

/* ---- grid ---- */
[data-fx~="grid"]{position:relative;isolation:isolate}
.fx-grid{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,black 60%,transparent);mask-image:linear-gradient(180deg,black 60%,transparent)}

/* ---- focus ---- */
.fx-w{display:inline-block}
.fx-armed .fx-w{opacity:0}
.fx-in .fx-w{animation:fx-focus .9s var(--cg-ease) backwards;animation-delay:calc(var(--fx-i,0) * 70ms)}
@keyframes fx-focus{from{opacity:0;filter:blur(14px);transform:translateY(6px) scale(1.04)}to{opacity:1;filter:none;transform:none}}

/* ---- decode / count ---- */
.fx-scr{font-variant-ligatures:none}
.fx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-fx~="count"]{font-variant-numeric:tabular-nums}

/* ---- orbit ---- */
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
[data-fx~="orbit"]{--fx-comet:var(--cg-accent);position:relative;isolation:isolate}
[data-theme="dark"] [data-fx~="orbit"],[data-theme="dark"][data-fx~="orbit"]{--fx-comet:var(--cg-fg)}
[data-fx~="orbit"]::before{content:"";position:absolute;inset:-1.5px;z-index:1;padding:1.5px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--fx-a),transparent 0 58%,var(--fx-comet) 84%,var(--cg-white) 90%,transparent 100%);
  -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);mask-composite:exclude;
  opacity:0;transition:opacity var(--cg-dur-base) var(--cg-ease)}
[data-fx~="orbit"]:hover::before,[data-fx~="orbit"]:focus-visible::before{opacity:1;animation:fx-orbit 1.4s linear infinite}
[data-fx~="orbit"]:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--fx-comet) 18%,transparent),0 8px 24px -8px color-mix(in srgb,var(--fx-comet) 50%,transparent)}
@keyframes fx-orbit{to{--fx-a:360deg}}

/* ---- fill ---- */
[data-fx~="fill"]{position:relative;isolation:isolate;overflow:hidden}
[data-fx~="fill"]::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cg-accent-soft);transform:translateX(-101%);transition:transform var(--cg-dur-base) var(--cg-ease)}
[data-fx~="fill"]:hover::before{transform:none}
.cg-btn--outline[data-fx~="fill"]:hover{background:transparent;border-color:var(--cg-accent-text)}

/* ---- magnetic ---- */
[data-fx~="magnetic"]{transition:transform .45s var(--cg-ease),filter var(--cg-dur-fast) var(--cg-ease),background var(--cg-dur-fast) var(--cg-ease),border-color var(--cg-dur-fast) var(--cg-ease),box-shadow var(--cg-dur-base) var(--cg-ease)}

/* ---- spotlight: set on the grid, drawn on its children ---- */
[data-fx~="spotlight"]>*{--fx-x:-999px;--fx-y:-999px;position:relative;isolation:isolate}
.fx-spot-fill,.fx-spot-ring{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--cg-dur-base) var(--cg-ease)}
.fx-spot-fill{inset:0;z-index:-1;background:radial-gradient(320px circle at var(--fx-x) var(--fx-y),color-mix(in srgb,var(--cg-accent) 11%,transparent),transparent 62%)}
.fx-spot-ring{inset:-1px;z-index:2;padding:1px;background:radial-gradient(240px circle at var(--fx-x) var(--fx-y),var(--cg-accent),transparent 72%);
  -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);mask-composite:exclude}
.fx-lit .fx-spot-fill,.fx-lit .fx-spot-ring{opacity:1}

/* ---- cables ---- */
[data-fx~="cables"]{position:relative;isolation:isolate;overflow:hidden}
.fx-cables{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

/* ---- aurora ---- */
[data-fx~="aurora"]{position:relative;isolation:isolate;overflow:hidden}
[data-fx~="aurora"]::before,[data-fx~="aurora"]::after{content:"";position:absolute;z-index:-1;width:min(64vw,900px);height:min(64vw,900px);border-radius:50%;filter:blur(70px);pointer-events:none;will-change:transform}
[data-fx~="aurora"]::before{top:-34%;left:-8%;background:radial-gradient(closest-side,color-mix(in srgb,var(--cg-accent) 42%,transparent),transparent);animation:fx-aurora-a 24s ease-in-out infinite alternate}
[data-fx~="aurora"]::after{bottom:-46%;right:-10%;background:radial-gradient(closest-side,var(--cg-accent-soft),transparent);animation:fx-aurora-b 30s ease-in-out infinite alternate}
@keyframes fx-aurora-a{to{transform:translate(34vw,22%) scale(1.18)}}
@keyframes fx-aurora-b{to{transform:translate(-36vw,-26%) scale(.88)}}
@media (max-width:620px){[data-fx~="aurora"]::before,[data-fx~="aurora"]::after{filter:blur(48px)}}

@media (prefers-reduced-motion:reduce){
  .fx-grid,.fx-cables{display:none}
  .fx-in .fx-w{animation:none}
  [data-fx~="orbit"]:hover::before,[data-fx~="orbit"]:focus-visible::before,[data-fx~="aurora"]::before,[data-fx~="aurora"]::after{animation:none}
  [data-fx~="magnetic"]{transform:none!important;transition:none}
  [data-fx~="fill"]::before,.fx-spot-fill,.fx-spot-ring{transition:none}
}