/* =============================================================
   MOTION LIBRARY — styles required by lib/motion.js
   Only the mechanics live here. Colors/typography stay yours.
   ============================================================= */

/* ---- house easing tokens ----
   Override these once per project and the whole library re-tunes.
   Defaults are the luxury settings: one curve, long duration, and an
   exit that is faster than the entrance. */
:root {
  --wx-ease:       cubic-bezier(0.5, 0, 0, 1);      /* the house curve */
  --wx-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* expo out, for arrivals */
  --wx-ease-in:    cubic-bezier(0.32, 0, 0.67, 0);  /* accelerating, for exits */
  --wx-dur:        0.8s;    /* reveals, panels, page-level motion */
  --wx-dur-exit:   0.4s;    /* exits run at about half — decisive, not lazy */
  --wx-dur-micro:  0.2s;    /* buttons, pills, toggles */
  --wx-stagger:    80ms;
}

/* ---- text ---- */
.wx-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wx-line { display: inline-block; }
.wx-char { display: inline-block; will-change: transform; }

/* ---- marquee ---- */
[data-wx="marquee"] {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.wx-marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: inherit;
  will-change: transform;
}

/* ---- scroll progress ---- */
[data-wx="progress"] {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 999;
  background: rgba(128, 128, 128, 0.18);
}
[data-wx="progress"] i {
  display: block;
  height: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---- horizontal scroll ---- */
[data-wx="hscroll"] { overflow: hidden; }
[data-wx="hscroll"] .wx-track {
  display: flex;
  will-change: transform;
}

/* ---- stack ---- */
.wx-stack-card { will-change: transform; }

/* ---- tilt ---- */
.wx-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.wx-tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: background 0.3s ease-out;
}

/* ---- magnetic ---- */
[data-wx="magnetic"] { will-change: transform; }

/* ---- spotlight ---- */
.wx-spotlight { position: relative; overflow: hidden; }
.wx-spotlight-light {
  position: absolute;
  left: 0; top: 0;
  width: var(--wx-size, 420px);
  height: var(--wx-size, 420px);
  margin-left: calc(var(--wx-size, 420px) / -2);
  margin-top: calc(var(--wx-size, 420px) / -2);
  transform: translate3d(var(--wx-x, 50%), var(--wx-y, 50%), 0);
  background: radial-gradient(circle, currentColor, transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease-out;
  z-index: 0;
}
.wx-spotlight > *:not(.wx-spotlight-light) { position: relative; z-index: 1; }

/* ---- cursor image trail ---- */
.wx-trail { position: relative; overflow: hidden; }
.wx-trail-img {
  position: absolute;
  width: 170px;
  height: 210px;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  border-radius: 2px;
}
.wx-trail-img.on { animation: wx-trail-pop 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes wx-trail-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(1); }
}

/* ---- hover list ---- */
.wx-hoverlist { position: relative; }
.wx-hoverlist-preview {
  position: absolute;
  top: 0; left: 0;
  width: 260px; height: 180px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 5;
  border-radius: 2px;
}
.wx-hoverlist-preview.on { opacity: 1; }
.wx-hoverlist-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---- canvas backgrounds ---- */
.wx-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
[data-wx="dots"], [data-wx="wave"] { position: relative; }
[data-wx="dots"] > *:not(.wx-canvas),
[data-wx="wave"] > *:not(.wx-canvas) { position: relative; z-index: 1; }

/* ---- aurora (pure CSS) ---- */
.wx-aurora { position: relative; overflow: hidden; isolation: isolate; }
.wx-aurora::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(38% 44% at 22% 32%, var(--wx-a, rgba(162,133,78,0.55)), transparent 70%),
    radial-gradient(34% 40% at 76% 62%, var(--wx-b, rgba(30,59,52,0.65)), transparent 70%),
    radial-gradient(32% 36% at 52% 84%, var(--wx-c, rgba(20,39,58,0.60)), transparent 70%);
  filter: blur(38px);
  animation: wx-aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes wx-aurora-drift {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg)   scale(1); }
  50%  { transform: translate3d(3%, 4%, 0)   rotate(6deg)   scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0)  rotate(-4deg)  scale(1.04); }
}

/* ---- mesh gradient (CSS-only shader substitute) ---- */
.wx-mesh { position: relative; overflow: hidden; isolation: isolate; }
.wx-mesh::before {
  content: '';
  position: absolute;
  inset: -35%;
  z-index: -1;
  background:
    radial-gradient(30% 34% at 18% 26%, var(--wx-m1, rgba(200,169,81,0.55)), transparent 68%),
    radial-gradient(28% 32% at 78% 22%, var(--wx-m2, rgba(30,59,52,0.6)), transparent 68%),
    radial-gradient(34% 38% at 68% 76%, var(--wx-m3, rgba(20,39,58,0.65)), transparent 68%),
    radial-gradient(26% 30% at 28% 82%, var(--wx-m4, rgba(120,60,40,0.45)), transparent 68%);
  filter: blur(46px) saturate(1.15);
  animation: wx-mesh-drift 26s ease-in-out infinite alternate;
}
@keyframes wx-mesh-drift {
  0%   { transform: translate3d(-3%, -3%, 0) scale(1)    rotate(0deg); }
  33%  { transform: translate3d(4%, 2%, 0)   scale(1.12) rotate(4deg); }
  66%  { transform: translate3d(-2%, 5%, 0)  scale(1.05) rotate(-3deg); }
  100% { transform: translate3d(3%, -4%, 0)  scale(1.1)  rotate(2deg); }
}

/* ---- conic sweep glow ---- */
@property --wx-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.wx-conic { position: relative; overflow: hidden; isolation: isolate; }
.wx-conic::before {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: conic-gradient(from var(--wx-angle),
    transparent 0deg,
    var(--wx-glow, rgba(200,169,81,0.35)) 60deg,
    transparent 140deg,
    var(--wx-glow2, rgba(30,59,52,0.35)) 220deg,
    transparent 320deg);
  filter: blur(40px);
  animation: wx-conic-spin 18s linear infinite;
}
@keyframes wx-conic-spin { to { --wx-angle: 360deg; } }

/* ---- pattern: dot / grid with radial mask fade ---- */
.wx-pattern { position: relative; isolation: isolate; }
.wx-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--wx-pat, rgba(200,169,81,0.35)) 1px, transparent 1px);
  background-size: var(--wx-pat-size, 24px) var(--wx-pat-size, 24px);
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 45%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 68% 62% at 50% 45%, #000 30%, transparent 78%);
}
.wx-pattern-grid::before {
  background-image:
    linear-gradient(var(--wx-pat, rgba(200,169,81,0.22)) 1px, transparent 1px),
    linear-gradient(90deg, var(--wx-pat, rgba(200,169,81,0.22)) 1px, transparent 1px);
}

/* ---- light beams ---- */
.wx-beams { position: relative; overflow: hidden; isolation: isolate; }
.wx-beams::before,
.wx-beams::after {
  content: '';
  position: absolute;
  top: -40%;
  width: 42%;
  height: 190%;
  z-index: -1;
  background: linear-gradient(to bottom, var(--wx-beam, rgba(200,169,81,0.16)), transparent 72%);
  filter: blur(26px);
  transform-origin: top center;
}
.wx-beams::before { left: 8%;  transform: rotate(14deg);  animation: wx-beam-a 14s ease-in-out infinite alternate; }
.wx-beams::after  { right: 12%; transform: rotate(-11deg); animation: wx-beam-b 18s ease-in-out infinite alternate; }
@keyframes wx-beam-a {
  0%   { opacity: 0.55; transform: rotate(14deg) translateX(0); }
  100% { opacity: 1;    transform: rotate(9deg)  translateX(3%); }
}
@keyframes wx-beam-b {
  0%   { opacity: 0.4;  transform: rotate(-11deg) translateX(0); }
  100% { opacity: 0.85; transform: rotate(-16deg) translateX(-3%); }
}

/* ---- grain overlay ---- */
.wx-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--wx-grain, 0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- compare slider ---- */
.wx-compare { position: relative; overflow: hidden; cursor: ew-resize; }
.wx-compare img { display: block; width: 100%; }
.wx-compare img:last-of-type { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.wx-compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: currentColor;
  pointer-events: none;
}
.wx-compare-handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(3px);
}

/* ---- ken burns ---- */
.wx-kenburns { overflow: hidden; }
.wx-kenburns img,
.wx-kenburns > video { animation: wx-kb var(--wx-dur, 18s) ease-in-out infinite alternate; }
@keyframes wx-kb {
  0%   { transform: scale(1)    translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

/* ---- accordion ---- */
.wx-acc-body { overflow: hidden; }
[data-wx="accordion"] summary { cursor: pointer; list-style: none; }
[data-wx="accordion"] summary::-webkit-details-marker { display: none; }

/* ---- sticky shrink header ---- */
[data-wx="shrink"] { transition: padding 0.45s cubic-bezier(0.65, 0, 0.35, 1), background 0.45s cubic-bezier(0.65, 0, 0.35, 1); }

/* ---- custom cursor ---- */
.wx-has-cursor,
.wx-has-cursor a,
.wx-has-cursor button { cursor: none; }

.wx-cursor-dot,
.wx-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
.wx-cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: currentColor;
}
.wx-cursor-ring {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: width 0.4s var(--wx-ease, cubic-bezier(0.16,1,0.3,1)),
              height 0.4s var(--wx-ease, cubic-bezier(0.16,1,0.3,1)),
              margin 0.4s var(--wx-ease, cubic-bezier(0.16,1,0.3,1)),
              background 0.4s ease, opacity 0.3s ease;
}
.wx-cursor-ring.on { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(128,128,128,0.12); }
.wx-cursor-ring.down { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.wx-cursor-ring.labelled { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: currentColor; }
.wx-cursor-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.25s ease; white-space: nowrap;
  mix-blend-mode: difference; color: #fff;
}
.wx-cursor-ring.labelled .wx-cursor-label { opacity: 1; }

/* cursor states — morph per hovered element type */
.wx-cursor-ring.wx-cur-drag {
  width: 96px; height: 40px; margin: -20px 0 0 -48px;
  border-radius: 20px; background: currentColor;
}
.wx-cursor-ring.wx-cur-view {
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
  background: currentColor;
}
.wx-cursor-ring.wx-cur-play {
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  background: currentColor;
}
.wx-cursor-ring.wx-cur-play::after {
  content: '';
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 12px solid var(--wx-cur-ink, #0B0C0E);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.wx-cursor-ring.wx-cur-close {
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  background: currentColor;
}
.wx-cursor-ring.wx-cur-close::before,
.wx-cursor-ring.wx-cur-close::after {
  content: '';
  position: absolute;
  width: 16px; height: 1.5px;
  background: var(--wx-cur-ink, #0B0C0E);
}
.wx-cursor-ring.wx-cur-close::before { transform: rotate(45deg); }
.wx-cursor-ring.wx-cur-close::after { transform: rotate(-45deg); }
.wx-cursor-ring[class*="wx-cur-"] .wx-cursor-label { color: var(--wx-cur-ink, #0B0C0E); mix-blend-mode: normal; }

/* ---- page wipe transition ---- */
.wx-wipe {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.62s cubic-bezier(0.76, 0, 0.24, 1);
}
.wx-wipe-out { transform: translateY(-101%); }
.wx-wipe-in { transform: translateY(0); pointer-events: all; }

/* ---- fullscreen menu ---- */
.wx-menu {
  position: fixed;
  inset: 0;
  z-index: 9980;
  display: flex;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.72s cubic-bezier(0.76, 0, 0.24, 1),
              opacity 0.3s ease, visibility 0.3s;
}
.wx-menu.on { opacity: 1; visibility: visible; clip-path: inset(0 0 0% 0); }
.wx-menu a, .wx-menu .wx-menu-item { display: block; }

/* ---- hide-on-scroll nav ---- */
[data-wx="hidenav"] { transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
[data-wx="hidenav"].wx-nav-hidden { transform: translateY(-100%); }

/* ---- directional hover fill ---- */
.wx-fill { position: relative; overflow: hidden; isolation: isolate; }
.wx-fill > * { position: relative; z-index: 1; }
.wx-fill-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: currentColor;
  transform: translate(0, 101%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- text roll on hover ---- */
.wx-roll { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wx-roll-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.wx-roll:hover .wx-roll-inner { transform: translateY(-50%); }

/* ---- click ripple ---- */
.wx-ripple { position: relative; overflow: hidden; }
.wx-ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  transform: scale(0);
  animation: wx-ripple 0.68s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}
@keyframes wx-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ---- image reveals ---- */
[data-wx="clipreveal"] { overflow: hidden; display: block; }
[data-wx="clipreveal"] img { display: block; width: 100%; }
.wx-imgpara { overflow: hidden; }
.wx-imgpara img { width: 100%; height: 116%; object-fit: cover; will-change: transform; }

/* ---- underline in-out reversal ---- */
.wx-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.wx-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.wx-underline:hover::after,
.wx-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---- border draw ---- */
.wx-borderdraw { position: relative; }
.wx-bd-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.wx-bd-svg rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  transition: stroke-dashoffset 0.72s cubic-bezier(0.65, 0, 0.35, 1);
}
.wx-borderdraw:hover .wx-bd-svg rect,
.wx-borderdraw:focus-visible .wx-bd-svg rect { stroke-dashoffset: 0 !important; }

/* ---- field underline ---- */
.wx-field {
  border: none;
  border-bottom: 1px solid rgba(128, 128, 128, 0.4);
  background: transparent;
  border-radius: 0;
  padding: 12px 2px;
  outline: none;
  color: inherit;
  font: inherit;
  transition: border-color 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.wx-field:focus { border-bottom-color: currentColor; }

/* ---- nav rail indicator ---- */
.wx-navrail { position: relative; }
.wx-navrail .wx-rail {
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px;
  width: 0;
  background: currentColor;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
              width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.3s ease;
  pointer-events: none;
}

/* ---- scroll spy ---- */
.wx-spy-on { opacity: 1 !important; }

/* ---- mega menu ---- */
.wx-mega {
  position: absolute;
  left: 0; right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              visibility 0.4s;
  z-index: 800;
}
.wx-mega.on { opacity: 1; visibility: visible; transform: translateY(0); }
.wx-mega-preview img { transition: opacity 0.32s cubic-bezier(0.65, 0, 0.35, 1); }

/* ---- drawer ---- */
.wx-scrim {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.wx-scrim.on { opacity: 1; pointer-events: auto; }
.wx-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 950;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform 0.52s cubic-bezier(0.65, 0, 0.35, 1);
}
.wx-drawer.on { transform: translateX(0); }
.wx-drawer-item { overflow: hidden; }

/* ---- progress ring ---- */
.wx-ring { transform: rotate(-90deg); }
.wx-ring-track { stroke: currentColor; opacity: 0.16; }
.wx-ring-bar {
  stroke: currentColor;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- copy confirmation ---- */
.wx-copied { opacity: 0.65; }

/* ---- skeleton shimmer ---- */
.wx-shimmer {
  position: relative;
  overflow: hidden;
  background: rgba(128, 128, 128, 0.12);
}
.wx-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: wx-shimmer 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes wx-shimmer { to { transform: translateX(100%); } }

/* ---- typewriter caret ---- */
.wx-caret::after {
  content: '';
  display: inline-block;
  width: 0.06em;
  height: 1em;
  margin-left: 0.08em;
  background: currentColor;
  vertical-align: -0.1em;
  animation: wx-blink 1s steps(2) infinite;
}
.wx-caret-done::after { animation-duration: 1.4s; }
@keyframes wx-blink { 50% { opacity: 0; } }

/* ---- word rotator ---- */
.wx-rotate { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wx-rotate-in { display: inline-block; }

/* ---- shiny text ---- */
.wx-shiny {
  background: linear-gradient(100deg,
    currentColor 30%,
    var(--wx-shine, rgba(255,255,255,0.92)) 48%,
    currentColor 62%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wx-shine 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes wx-shine {
  0%   { background-position: 180% 0; }
  60%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

/* ---- video-filled text ---- */
.wx-videotext { position: relative; display: inline-block; isolation: isolate; }
.wx-videotext video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.wx-videotext-mask {
  position: relative;
  z-index: 1;
  display: block;
  background: var(--wx-vt-bg, #0B0C0E);
  color: transparent;
  mix-blend-mode: multiply;
}
@supports (mix-blend-mode: screen) {
  .wx-videotext { background: var(--wx-vt-bg, #0B0C0E); }
}

/* ---- scroll word reveal ---- */
.wx-word { display: inline-block; }
.wx-words-lit .wx-word { opacity: 1; }

/* ---- border beam ---- */
@property --wx-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.wx-borderbeam { position: relative; isolation: isolate; }
.wx-borderbeam::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--wx-beam-angle),
    transparent 0deg,
    var(--wx-beam, currentColor) 40deg,
    transparent 90deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: wx-beam-spin var(--wx-beam-dur, 8s) linear infinite;
}
@keyframes wx-beam-spin { to { --wx-beam-angle: 360deg; } }

/* ---- progressive edge blur ---- */
.wx-bluredge { position: relative; }
.wx-bluredge::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--wx-edge-size, 90px);
  pointer-events: none;
  backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to top, #000 12%, transparent 100%);
  mask-image: linear-gradient(to top, #000 12%, transparent 100%);
}

/* ---- chroma focus group ---- */
.wx-chroma-item {
  transition: opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1),
              filter 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.wx-chroma-on .wx-chroma-item { opacity: 0.42; filter: saturate(0.55); }
.wx-chroma-on .wx-chroma-item.wx-on { opacity: 1; filter: none; }

/* ---- dock ---- */
.wx-dock { display: flex; align-items: flex-end; }
.wx-dock-item {
  transform-origin: bottom center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ---- flowing menu ---- */
.wx-flow-item { position: relative; overflow: hidden; }
.wx-flow-item > *:not(.wx-flow-strip) { position: relative; z-index: 1; }
.wx-flow-strip {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 1.4em;
  white-space: nowrap;
  background: var(--wx-flow-bg, currentColor);
  color: var(--wx-flow-ink, #0B0C0E);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.wx-flow-strip i {
  font-style: normal;
  padding-left: 1.4em;
  animation: wx-flow-scroll 12s linear infinite;
}
@keyframes wx-flow-scroll { to { transform: translateX(-100%); } }

/* ---- beam connector ---- */
.wx-beam-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wx-beam-path { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.18; }
.wx-beam-pulse {
  fill: none;
  stroke: var(--wx-beam-color, currentColor);
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: wx-beam-travel 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes wx-beam-travel {
  from { stroke-dashoffset: calc(var(--wx-len) * 1); }
  to   { stroke-dashoffset: calc(var(--wx-len) * -0.2); }
}

/* ---- native view transitions ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: wx-vt-out 0.35s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: wx-vt-in 0.45s cubic-bezier(0, 0, 0.2, 1) both; }
@keyframes wx-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes wx-vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---- blend-difference cursor ---- */
.wx-cursor-blend {
  mix-blend-mode: difference;
  background: #fff;
  border-color: transparent;
}
.wx-cursor-blend.on { background: #fff; }

/* ---- split-flap ---- */
.wx-splitflap { display: inline-flex; gap: 0.06em; }
.wx-flap {
  display: inline-block;
  min-width: 0.62em;
  text-align: center;
  transform-origin: center bottom;
  transition: transform 0.08s linear;
}
.wx-flap-on { transform: rotateX(38deg); }

/* ---- text on a circular path ---- */
.wx-textpath { display: inline-block; }
.wx-textpath svg {
  animation: wx-spin var(--wx-spin, 18s) linear infinite;
  overflow: visible;
}
.wx-textpath text {
  fill: currentColor;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
@keyframes wx-spin { to { transform: rotate(360deg); } }

/* ---- iris clip ---- */
.wx-iris {
  position: fixed;
  inset: 0;
  z-index: 9970;
  clip-path: circle(var(--wx-ir, 0px) at var(--wx-ix, 50%) var(--wx-iy, 50%));
  transition: clip-path 0.78s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}
.wx-iris.on { pointer-events: auto; }

/* ---- preloader ---- */
[data-wx="preloader"] {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}
.wx-preloader-out { transform: translateY(-101%); }
[data-wx-bar] { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.2s linear; }

/* ---- sticky footer reveal ---- */
.wx-stickyfoot { position: sticky; bottom: 0; z-index: 0; }

/* ---- animated film grain ---- */
.wx-grain-anim::after { animation: wx-grain-shift 0.6s steps(4) infinite; }
@keyframes wx-grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ---- maison: scale-down settle (Gucci) ---- */
.wx-settle { overflow: hidden; }
.wx-settle > img, .wx-settle > .wx-settle-inner {
  transform: scale(1.2);
  transition: transform var(--wx-dur, 0.8s) var(--wx-ease, cubic-bezier(0.5, 0, 0, 1));
  will-change: transform;
}
.wx-settled > img, .wx-settled > .wx-settle-inner { transform: scale(1); }

/* ---- maison: duration-stagger fan (Hermes) ---- */
.wx-fan-item {
  transform: translateY(var(--wx-fan, 200px));
  transition-property: transform;
  transition-timing-function: var(--wx-ease, cubic-bezier(0.5, 0, 0, 1));
  will-change: transform;
}
.wx-fanned .wx-fan-item { transform: translateY(0); }

/* ---- maison: affordance nudge (Prada) ---- */
.wx-nudging { animation: wx-nudge 2.5s var(--wx-ease, cubic-bezier(0.5, 0, 0, 1)) 1 both; }
@keyframes wx-nudge {
  0%   { transform: translateY(0); }
  34%  { transform: translateY(calc(var(--wx-nudge, 42px) * -1)); }
  66%  { transform: translateY(calc(var(--wx-nudge, 42px) * -1)); }
  100% { transform: translateY(0); }
}

/* ---- maison: opacity-hold reveal (Prada) ---- */
.wx-hold { opacity: 0; transform: translateY(var(--wx-offset, 26px)); }
.wx-held { animation: wx-hold-in 0.6s ease-in-out 1 forwards; }
@keyframes wx-hold-in {
  0%   { opacity: 0; transform: translateY(var(--wx-offset, 26px)); }
  20%  { opacity: 0; }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- maison: two-copy text swipe (Gucci) ---- */
.wx-swipe { position: relative; display: inline-block; overflow: hidden; }
.wx-swipe > span { display: inline-block; position: relative; }
.wx-swipe > span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: inherit;
}
.wx-swipe:hover > span {
  animation: wx-swipe-out var(--wx-dur, 0.8s) var(--wx-ease, cubic-bezier(0.5, 0, 0, 1)) forwards;
}
.wx-swipe:hover > span::after {
  animation: wx-swipe-in var(--wx-dur, 0.8s) var(--wx-ease, cubic-bezier(0.5, 0, 0, 1)) forwards;
}
@keyframes wx-swipe-out { 45% { transform: translateX(0); } 55%, 100% { transform: translateX(100%); } }
@keyframes wx-swipe-in  { 45% { transform: translateX(-100%); } 55%, 100% { transform: translateX(0); } }

/* ---- retail: text fade-out mask (CDLP) ---- */
.wx-fademask {
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 80%, transparent 100%);
}

/* ---- retail: product tile metadata ladder (CDLP) ---- */
.wx-cardmeta { position: relative; }
.wx-cardmeta .wx-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  opacity: 0;
  transition: opacity var(--wx-dur-micro, 0.25s) var(--wx-ease, cubic-bezier(0.5, 0, 0, 1));
  pointer-events: none;
}
@media (min-width: 1025px) {
  .wx-cardmeta:hover .wx-meta { opacity: 1; pointer-events: auto; }
}

/* ---- retail: scroll edge fades (Acne) ---- */
.wx-edgefade { position: relative; }
.wx-edgefade-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.wx-edgefade-scroll::-webkit-scrollbar { display: none; }
.wx-edgefade::before,
.wx-edgefade::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s linear;
  z-index: 3;
}
.wx-edgefade::before {
  left: 0;
  background: linear-gradient(90deg, var(--wx-edge-color, rgba(0,0,0,0.85)), transparent);
}
.wx-edgefade::after {
  right: 0;
  background: linear-gradient(270deg, var(--wx-edge-color, rgba(0,0,0,0.85)), transparent);
}
.wx-fade-s::before { opacity: 1; }
.wx-fade-e::after { opacity: 1; }

/* ---- retail: button state swap with stepped dots (CDLP) ---- */
.wx-stateswap { position: relative; }
.wx-dots { display: inline-flex; gap: 3px; margin-left: 7px; vertical-align: middle; }
.wx-dots b {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: wx-dot 1.2s steps(1) infinite;
}
.wx-dots b:nth-child(2) { animation-delay: 0.2s; }
.wx-dots b:nth-child(3) { animation-delay: 0.4s; }
@keyframes wx-dot { 0%, 100% { opacity: 0; } 50%, 60% { opacity: 1; } }

/* ---- commerce: FLIP grid reflow ---- */
.wx-reflow { position: relative; }
.wx-reflow > * { will-change: transform; }

/* ---- commerce: variant crossfade ---- */
.wx-variant { position: relative; }
.wx-variant-ghost {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* ---- commerce: zoom lens ---- */
.wx-lens { position: relative; overflow: hidden; cursor: zoom-in; }
.wx-lens-pane {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wx-dur-micro, 0.25s) var(--wx-ease, cubic-bezier(0.5, 0, 0, 1));
  z-index: 2;
}

/* ---- commerce: blur-up loading ---- */
.wx-blurup { overflow: hidden; background: rgba(128, 128, 128, 0.08); }
.wx-blurup img {
  filter: blur(18px);
  transform: scale(1.06);
  transition: filter 0.55s var(--wx-ease, cubic-bezier(0.5, 0, 0, 1)),
              transform 0.55s var(--wx-ease, cubic-bezier(0.5, 0, 0, 1));
}
.wx-blurup-done img { filter: blur(0); transform: scale(1); }

/* ---- shared-layout tooltip ---- */
.wx-sharedtip { position: relative; }
.wx-tip {
  position: absolute;
  top: 0; left: 0;
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--wx-tip-bg, currentColor);
  color: var(--wx-tip-ink, #fff);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: transform 0.45s var(--wx-ease, cubic-bezier(0.5, 0, 0, 1)),
              width 0.45s var(--wx-ease, cubic-bezier(0.5, 0, 0, 1)),
              opacity 0.25s ease;
}
.wx-tip.on { opacity: 1; }

/* ---- drag-to-scroll rail ---- */
.wx-dragscroll {
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}
.wx-dragscroll::-webkit-scrollbar { display: none; }
.wx-dragscroll.wx-dragging { cursor: grabbing; }
.wx-dragscroll img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* ---- hover-expand panel row ---- */
.wx-expandrow { display: flex; overflow: hidden; }
.wx-expandrow .wx-panel {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow var(--wx-dur, 0.8s) var(--wx-ease, cubic-bezier(0.5, 0, 0, 1));
  will-change: flex-grow;
}

/* ---- custom scroll rail ---- */
.wx-scrollrail {
  position: fixed;
  top: 18vh; right: 14px; bottom: 18vh;
  width: 2px;
  background: currentColor;
  opacity: 0.14;
  z-index: 60;
  pointer-events: none;
}
.wx-scrollrail i {
  display: block;
  width: 2px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wx-scrollrail.wx-rail-on i { opacity: 1; }

/* ---- progressive blur ramp ---- */
.wx-progblur { position: relative; }
.wx-pb-layer {
  position: absolute;
  left: 0; right: 0;
  height: var(--wx-pb-size, 120px);
  pointer-events: none;
  z-index: 5;
}

/* ---- self-drawing SVG ---- */
.wx-pathdraw path,
.wx-pathdraw line,
.wx-pathdraw polyline,
.wx-pathdraw circle,
.wx-pathdraw rect,
.wx-pathdraw ellipse { fill: none; stroke: currentColor; }

/* ---- section theme swap ----
   Define your inverted palette against [data-wx-theme="dark"] on :root and the
   whole page flips when the section crosses the threshold. */
:root { transition: background-color var(--wx-dur, 0.8s) var(--wx-ease, cubic-bezier(0.5, 0, 0, 1)),
                    color var(--wx-dur, 0.8s) var(--wx-ease, cubic-bezier(0.5, 0, 0, 1)); }

/* ---- dolly / seqscrub stages ---- */
.wx-dolly { position: relative; overflow: hidden; }
.wx-dolly [data-wx-z] { will-change: transform, opacity; }
[data-wx="seqscrub"] { position: relative; overflow: hidden; }

/* ---- native scroll-driven animation ---- */
.wx-cssscroll {
  animation-fill-mode: both;
  animation-duration: 1ms;   /* required; the timeline drives progress */
}
@keyframes wx-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wx-scale-in {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- endless drag canvas ---- */
.wx-dragcanvas {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.wx-dragcanvas.wx-dragging { cursor: grabbing; }
.wx-dragcanvas .wx-canvas-field,
.wx-dragcanvas .wx-canvas-clone {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
}
.wx-dragcanvas img { -webkit-user-drag: none; pointer-events: none; }

/* ---- command palette ---- */
.wx-palette {
  position: fixed;
  inset: 0;
  z-index: 9980;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wx-dur-micro, 0.22s) var(--wx-ease, cubic-bezier(0.5,0,0,1)), visibility 0.22s;
}
.wx-palette.on { opacity: 1; visibility: visible; }
.wx-pal-panel {
  width: min(620px, 92vw);
  background: var(--wx-pal-bg, #16181d);
  color: var(--wx-pal-ink, #f4efe6);
  border: 1px solid var(--wx-pal-line, rgba(244, 239, 230, 0.14));
  border-radius: 4px;
  overflow: hidden;
  transform: translateY(-8px) scale(0.99);
  transition: transform 0.28s var(--wx-ease-out, cubic-bezier(0.16,1,0.3,1));
}
.wx-palette.on .wx-pal-panel { transform: none; }
.wx-pal-input {
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--wx-pal-line, rgba(244, 239, 230, 0.14));
  color: inherit;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.wx-pal-list { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow-y: auto; }
.wx-pal-list li {
  padding: 11px 16px;
  border-radius: 2px;
  font-size: 14.5px;
  cursor: pointer;
}
.wx-pal-list li b { color: var(--wx-pal-hit, #c8a951); font-weight: 600; }
.wx-pal-list li[aria-selected="true"] { background: rgba(128, 128, 128, 0.16); }

/* ---- toast stack ---- */
.wx-toasts {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 9970;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}
.wx-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px 13px 18px;
  min-width: 260px;
  background: var(--wx-toast-bg, #16181d);
  color: var(--wx-toast-ink, #f4efe6);
  border: 1px solid rgba(128, 128, 128, 0.22);
  border-radius: 3px;
  font-size: 13.5px;
  transform: scale(calc(1 - var(--wx-depth, 0) * 0.03))
             translateY(calc(var(--wx-depth, 0) * 3px));
  opacity: calc(1 - var(--wx-depth, 0) * 0.18);
  transition: transform 0.4s var(--wx-ease, cubic-bezier(0.5,0,0,1)), opacity 0.4s ease;
}
.wx-toast-undo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--wx-toast-accent, #c8a951);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.wx-toast-ring { width: 22px; height: 22px; transform: rotate(-90deg); }
.wx-toast-ring circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.85;
}

/* ---- collision-aware popover ---- */
.wx-popover {
  position: fixed;
  z-index: 9960;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity 0.24s var(--wx-ease, cubic-bezier(0.5,0,0,1)),
              transform 0.24s var(--wx-ease-out, cubic-bezier(0.16,1,0.3,1)),
              visibility 0.24s;
}
.wx-popover.on { opacity: 1; visibility: visible; transform: scale(1); }

/* ---- inline validation ---- */
.wx-field-wrap { position: relative; }
.wx-field-msg {
  display: block;
  max-height: 0;
  overflow: hidden;
  font-size: 12px;
  color: var(--wx-bad, #b4472e);
  transition: max-height 0.32s var(--wx-ease, cubic-bezier(0.5,0,0,1)),
              padding-top 0.32s var(--wx-ease, cubic-bezier(0.5,0,0,1));
}
.wx-bad .wx-field-msg { max-height: 3em; padding-top: 6px; }
.wx-bad input, .wx-bad textarea, .wx-bad select { border-color: var(--wx-bad, #b4472e); }
.wx-ok::after {
  content: '';
  position: absolute;
  right: 4px; top: 14px;
  width: 14px; height: 8px;
  border-left: 1.5px solid var(--wx-ok, #3f7d55);
  border-bottom: 1.5px solid var(--wx-ok, #3f7d55);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  animation: wx-check 0.32s var(--wx-ease-out, cubic-bezier(0.16,1,0.3,1)) forwards;
}
@keyframes wx-check { to { transform: rotate(-45deg) scale(1); } }

/* ---- multi-step flow ---- */
.wx-steps {
  position: relative;
  overflow: hidden;
  transition: height var(--wx-dur, 0.55s) var(--wx-ease, cubic-bezier(0.5,0,0,1));
}
.wx-steps-rail {
  height: 1px;
  background: rgba(128, 128, 128, 0.28);
  margin-bottom: 26px;
}
.wx-steps-rail i {
  display: block;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--wx-ease, cubic-bezier(0.5,0,0,1));
}
.wx-steps .wx-step { display: none; }
.wx-steps .wx-step.on { display: block; }

/* ---- bento hover expansion ---- */
.wx-bento {
  display: grid;
  transition: grid-template-columns var(--wx-dur, 0.6s) var(--wx-ease, cubic-bezier(0.5,0,0,1));
}
.wx-bento-cell { overflow: hidden; min-width: 0; }

/* ---- WebGL module (opt-in) ---- */
.wx-gl {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
[data-wx="displace"], [data-wx="inktrail"] { position: relative; overflow: hidden; }
[data-wx="displace"] img { display: block; width: 100%; }
[data-wx="inktrail"] > *:not(.wx-gl) { position: relative; z-index: 2; }

/* ---- data: sparkline ---- */
.wx-spark { position: relative; display: block; width: 100%; height: 46px; color: inherit; }
.wx-spark-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wx-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--wx-spark-dur, 1.1s) var(--wx-ease, cubic-bezier(0.5,0,0,1));
}
.wx-spark.wx-on .wx-spark-line { stroke-dashoffset: 0; }
.wx-spark-area {
  fill: currentColor;
  opacity: 0.12;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--wx-spark-dur, 1.1s) var(--wx-ease, cubic-bezier(0.5,0,0,1));
}
.wx-spark.wx-on .wx-spark-area { transform: scaleY(1); }
.wx-spark-dot {
  position: absolute;
  left: 100%; /* top set inline from the last data point */
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--wx-dur-micro, 0.2s) linear,
              transform var(--wx-dur, 0.8s) var(--wx-ease-out, cubic-bezier(0.16,1,0.3,1));
  transition-delay: var(--wx-spark-dur, 1.1s);
}
.wx-spark.wx-on .wx-spark-dot { opacity: 1; transform: scale(1); }

/* ---- data: bar / column grow ---- */
.wx-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--wx-bars-gap, 6px);
  height: 100%;
}
.wx-bars .wx-bar {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--wx-bars-radius, 2px);
  background: currentColor;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--wx-dur, 0.8s) var(--wx-ease-out, cubic-bezier(0.16,1,0.3,1));
}
.wx-bars.wx-on .wx-bar { transform: scaleY(1); }

/* ---- data: donut arc sweep ---- */
.wx-donut { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.wx-donut-svg {
  display: block;
  width: 100%; height: 100%;
  transform: rotate(-90deg); /* start the sweep at 12 o'clock */
}
.wx-donut-track { stroke: currentColor; opacity: 0.14; }
.wx-donut-arc {
  /* r = 15.9155 → circumference 100, so the dash value is already a percentage */
  stroke-dasharray: 0 100;
  transition: stroke-dasharray var(--wx-dur, 0.8s) var(--wx-ease, cubic-bezier(0.5,0,0,1));
}
.wx-donut.wx-on .wx-donut-arc { stroke-dasharray: var(--wx-donut-v) 100; }
.wx-donut-mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.1;
}

/* ---- data: live feed ---- */
.wx-feed { position: relative; overflow: hidden; }
.wx-feed .wx-feed-row {
  transition: transform var(--wx-dur, 0.8s) var(--wx-ease-out, cubic-bezier(0.16,1,0.3,1)),
              opacity var(--wx-dur-micro, 0.2s) linear;
  will-change: transform;
}
.wx-feed .wx-feed-row.wx-feed-new { opacity: 0; transform: translate3d(0,-8px,0); }

/* ---- presentation: perspective screen wall ---- */
.wx-wall {
  display: flex;
  gap: var(--wx-wall-gap, 18px);
  perspective: 1400px;
  perspective-origin: 50% 40%;
  overflow: hidden;
  /* the wall should dissolve at its edges rather than hard-cut against the
     container. Set --wx-wall-mask: none to switch it off. */
  -webkit-mask-image: var(--wx-wall-mask, radial-gradient(78% 78% at 50% 45%, #000 45%, transparent 100%));
  mask-image: var(--wx-wall-mask, radial-gradient(78% 78% at 50% 45%, #000 45%, transparent 100%));
}
.wx-wall > .wx-wall-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transform: rotateX(var(--wx-wall-x, 14deg)) rotateZ(var(--wx-wall-z, -9deg));
}
.wx-wall .wx-wall-track {
  display: flex;
  flex-direction: column;
  gap: var(--wx-wall-gap, 18px);
  flex: 0 0 auto;
  will-change: transform;
}
.wx-wall .wx-wall-track > * { display: block; width: 100%; }

/* ---- text: per-word reveal ---- */
.wx-words .wx-wmask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wx-words .wx-word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--wx-dur, 0.8s) var(--wx-ease-out, cubic-bezier(0.16,1,0.3,1));
}
.wx-words.wx-on .wx-word { transform: translateY(0); }
/* accent = colour only. Italic, weight and family are brand decisions, so they
   stay with the caller rather than being guessed here. */
.wx-words .wx-word-accent { color: var(--wx-accent, currentColor); }

/* ---- presentation: browser chrome ---- */
.wx-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--wx-frame-radius, 8px);
  border: 1px solid var(--wx-frame-line, rgba(128,128,128,0.28));
  background: var(--wx-frame-bg, #14161a);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
}
.wx-frame-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--wx-frame-line, rgba(128,128,128,0.28));
  background: var(--wx-frame-barbg, rgba(255,255,255,0.04));
}
.wx-frame-bar i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
}
.wx-frame-url {
  margin-left: 10px;
  padding: 2px 12px;
  border-radius: 999px; /* the one place a pill is literal, not decorative */
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.55;
  background: var(--wx-frame-urlbg, rgba(128,128,128,0.16));
}
.wx-frame-screen { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.wx-frame-screen > img { display: block; width: 100%; }
.wx-frame-scroller > * { will-change: transform; }
.wx-frame-tilt {
  transform: perspective(1600px) rotateY(var(--wx-frame-tilt, 6deg)) rotateX(2deg);
  transform-origin: 50% 50%;
}

/* ---- accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  .wx-aurora::before,
  .wx-mesh::before,
  .wx-conic::before,
  .wx-beams::before,
  .wx-beams::after,
  .wx-kenburns img,
  .wx-ripple-wave,
  .wx-shimmer::after,
  .wx-ok::after,
  .wx-shiny,
  .wx-caret::after,
  .wx-borderbeam::before,
  .wx-beam-pulse,
  .wx-flow-strip i,
  .wx-textpath svg,
  .wx-dots b,
  .wx-nudging,
  .wx-held,
  .wx-swipe:hover > span,
  .wx-swipe:hover > span::after,
  .wx-grain-anim::after,
  .wx-trail-img.on { animation: none; }
  .wx-shiny { color: inherit; background: none; -webkit-background-clip: initial; background-clip: initial; }
  .wx-tilt,
  .wx-tip,
  .wx-toast,
  .wx-bento,
  .wx-steps,
  .wx-expandrow .wx-panel,
  .wx-blurup img,
  .wx-lens-pane,
  .wx-wipe,
  .wx-menu,
  .wx-spark-line,
  .wx-spark-area,
  .wx-spark-dot,
  .wx-bars .wx-bar,
  .wx-donut-arc,
  .wx-feed .wx-feed-row,
  .wx-words .wx-word,
  .wx-roll-inner { transition: none; }
  /* wall drift and frame scrolling are JS-driven; flatten the 3D instead */
  .wx-wall > .wx-wall-col { transform: none; }
  .wx-frame-tilt { transform: none; }
  .wx-has-cursor, .wx-has-cursor a, .wx-has-cursor button { cursor: auto; }
  .wx-cursor-dot, .wx-cursor-ring { display: none; }
}