/* Motion layer: brass-manufacturing backgrounds, card light, hero effects, cursor and reveals.
   Loaded after glass.css and uses the same `html body` prefix. Every element styled here is
   added by motion.js, so the page reads normally if the script never runs. */

:root {
  --mx-ease: cubic-bezier(.22, 1, .36, 1);
  --mx-draw-ease: cubic-bezier(.65, 0, .35, 1);
  --mx-ink: rgba(26, 39, 83, .14);
  --mx-ink-dark: rgba(95, 196, 200, .17);
  --mx-brass: rgba(185, 138, 46, .34);
}

/* ---------- Ambient micro-grid across the canvas ---------- */
html body::after {
  content: "";
  position: fixed;
  inset: -96px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(26, 39, 83, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 39, 83, .018) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 32%, #000 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 32%, #000 18%, transparent 76%);
  animation: mx-drift 70s linear infinite;
}

@keyframes mx-drift { to { transform: translate3d(48px, 48px, 0); } }

/* ---------- Section backgrounds ---------- */
html body main section.mx-deco-host { position: relative; isolation: isolate; }

.mx-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  color: var(--mx-ink);
}

.mx-deco--gear { color: var(--mx-ink-dark); }

.mx-art {
  position: absolute;
  width: clamp(300px, 44vw, 660px);
  translate: 0 var(--mx-py, 0px);
  will-change: translate;
}

.mx-art--sm { width: clamp(220px, 26vw, 380px); }
.mx-art svg { display: block; width: 100%; height: auto; overflow: visible; }

.mx-side-right .mx-art { right: -5%; top: 6%; }
.mx-side-left .mx-art { left: -6%; bottom: 4%; }
.mx-side-right .mx-art--sm { right: auto; left: -4%; top: auto; bottom: 6%; }
.mx-side-left .mx-art--sm { left: auto; right: -3%; bottom: auto; top: 8%; }
.mx-deco--rings .mx-art, .mx-deco--gear .mx-art { width: clamp(300px, 38vw, 560px); }
.mx-side-right.mx-deco--rings .mx-art, .mx-side-right.mx-deco--gear .mx-art { right: -12%; top: -14%; }
.mx-side-left.mx-deco--rings .mx-art, .mx-side-left.mx-deco--gear .mx-art { left: -12%; bottom: -16%; }

/* Lines draw in like a pen plotter when the section scrolls into view */
.mx-svg .mx-d {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s var(--mx-draw-ease);
}

.is-in .mx-svg .mx-d { stroke-dashoffset: 0; }
.mx-svg .mx-fade { opacity: 0; transition: opacity 1.6s ease .9s; }
.is-in .mx-svg .mx-fade { opacity: 1; }
.mx-svg .mx-accent { stroke: var(--mx-brass); stroke-width: 2; }
.mx-deco--gear .mx-svg .mx-accent { stroke: rgba(185, 138, 46, .4); }
.mx-svg .mx-label { opacity: 0; transition: opacity 1.4s ease 1.8s; }
.is-in .mx-svg .mx-label { opacity: .9; }

.mx-spin { animation: mx-spin 180s linear infinite; transform-origin: 50% 50%; }
.mx-spin--rev { animation-duration: 130s; animation-direction: reverse; }
@keyframes mx-spin { to { transform: rotate(360deg); } }

/* Blueprint grid with crosshair marks */
.mx-grid {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 53v14M53 60h14' stroke='%231A2753' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(rgba(26, 39, 83, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 39, 83, .05) 1px, transparent 1px),
    linear-gradient(rgba(26, 39, 83, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 39, 83, .025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -60px -60px, 0 0, 0 0, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse 52% 72% at 84% 38%, #000 10%, transparent 74%);
  mask-image: radial-gradient(ellipse 52% 72% at 84% 38%, #000 10%, transparent 74%);
}

.mx-side-left .mx-grid {
  -webkit-mask-image: radial-gradient(ellipse 52% 72% at 14% 64%, #000 10%, transparent 74%);
  mask-image: radial-gradient(ellipse 52% 72% at 14% 64%, #000 10%, transparent 74%);
}

/* CNC turning marks with a slow light pass */
.mx-lathe {
  position: absolute;
  inset: 10% -4%;
  overflow: hidden;
  background: repeating-linear-gradient(180deg, rgba(26, 39, 83, .06) 0 1px, transparent 1px 6px);
  -webkit-mask-image: radial-gradient(ellipse 58% 48% at 72% 50%, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse 58% 48% at 72% 50%, #000 8%, transparent 72%);
  translate: 0 var(--mx-py, 0px);
}

.mx-side-left .mx-lathe {
  -webkit-mask-image: radial-gradient(ellipse 58% 48% at 28% 50%, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse 58% 48% at 28% 50%, #000 8%, transparent 72%);
}

.mx-lathe::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(185, 138, 46, .26), transparent);
  transform: translateX(-120%);
  animation: mx-sweep 10s var(--mx-ease) infinite;
}

@keyframes mx-sweep {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(440%); }
}

/* Brushed-brass grain, like metal under a loupe */
.mx-grain {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .012' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .72 0 0 0 0 .54 0 0 0 0 .18 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 82% 30%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 60% at 82% 30%, #000, transparent 72%);
}

.mx-side-left .mx-grain {
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 18% 70%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 60% at 18% 70%, #000, transparent 72%);
}

@media (max-width: 767px) {
  .mx-art { width: 86vw; opacity: .75; }
  .mx-art--sm { width: 54vw; }
  .mx-side-right .mx-art { right: -24%; top: 2%; }
  .mx-side-left .mx-art { left: -26%; bottom: 2%; }
}

/* ---------- Glass cards: cursor light and a reflection pass ---------- */
html body main .mx-rel { position: relative; }

html body main :is(div, article, li, aside, blockquote, figure, details).mx-card {
  --mx-x: 50%;
  --mx-y: -30%;
  transition-property: color, background-color, border-color, box-shadow, translate, scale, opacity;
  transition-duration: .45s;
  transition-timing-function: var(--mx-ease);
}

html body main li.mx-tile { --mx-x: 50%; --mx-y: -30%; }

html body main :is(div, article, li, aside, blockquote, figure, details).mx-card::after,
html body main li.mx-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(260px circle at var(--mx-x) var(--mx-y), rgba(185, 138, 46, .12), rgba(185, 138, 46, 0) 70%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0) 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 260% 100%;
  background-position: 0 0, 130% 0;
  opacity: 0;
  transition: opacity .5s var(--mx-ease), background-position 0s linear .5s;
}

html body main li.mx-tile::after,
html body main article.mx-product::after {
  background-image: radial-gradient(260px circle at var(--mx-x) var(--mx-y), rgba(185, 138, 46, .12), rgba(185, 138, 46, 0) 70%);
}

html body main .mx-card--dark::after {
  background-image:
    radial-gradient(260px circle at var(--mx-x) var(--mx-y), rgba(95, 196, 200, .16), rgba(95, 196, 200, 0) 70%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 60%);
}

html body main :is(div, article, li, aside, blockquote, figure, details).mx-card:hover::after,
html body main li.mx-tile:hover::after {
  opacity: 1;
  background-position: 0 0, -30% 0;
  transition: opacity .35s var(--mx-ease), background-position 1.2s var(--mx-ease);
}

@media (hover: hover) and (pointer: fine) {
  html body main :is(div, article, li, aside, blockquote, figure).mx-card:not(.mx-card--still):hover { scale: 1.012; }

  html body main :is(div, article, li, aside, blockquote, figure).mx-card:not(.mx-card--still):not([class*="hover:-translate-y"]):hover { translate: 0 -4px; }

  html body main :is(div, article, li, aside, blockquote, figure, details).mx-card:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .95),
      0 0 0 1px rgba(185, 138, 46, .16),
      0 10px 22px -12px rgba(26, 39, 83, .12),
      0 30px 56px -26px rgba(26, 39, 83, .26);
  }

  html body main :is(div, article, li, aside, blockquote, figure).mx-card.mx-card--dark:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      0 0 0 1px rgba(95, 196, 200, .24),
      0 28px 50px -28px rgba(0, 0, 0, .55);
  }
}

/* ---------- Product cards ---------- */
html body main .mx-product-media { position: relative; }

@media (hover: hover) {
  html body main article.mx-product img {
    transition: transform .9s var(--mx-ease), filter .6s ease;
  }

  html body main article.mx-product:hover img {
    transform: scale(1.07) translate3d(0, -1.5%, 0);
    filter: saturate(1.06) contrast(1.03);
  }

  html body main article.mx-product:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .95),
      0 0 0 1px rgba(185, 138, 46, .24),
      0 22px 44px -22px rgba(185, 138, 46, .38),
      0 30px 56px -26px rgba(26, 39, 83, .22);
  }
}

.mx-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 238, 205, .34) 47%, rgba(255, 255, 255, .1) 53%, transparent 64%);
  transform: translateX(-105%);
}

.mx-product:hover .mx-shine { transform: translateX(105%); transition: transform 1.1s var(--mx-ease); }

.mx-pill {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .875rem;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(26, 39, 83, .42);
  color: #1A2753;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .45s var(--mx-ease), background-color .25s ease;
}

.mx-pill svg, .mx-arrow svg { width: 15px; height: 15px; transition: transform .35s var(--mx-ease); }
.mx-arrow { display: inline-flex; }

@media (hover: hover) {
  .mx-product:hover .mx-pill, .mx-product:focus-within .mx-pill { opacity: 1; transform: none; }
  .mx-pill:hover { background-color: #fff; }
  .mx-pill:hover svg, .mx-product:hover .mx-arrow svg, a:hover > .mx-arrow svg { transform: translateX(4px); }
}

@media (hover: none) {
  .mx-pill { display: none; }
}

/* ---------- Hero: particles, precision lines and a turning dial ---------- */
.mx-hero-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  translate: var(--mx-hx, 0px) var(--mx-hy, 0px);
  opacity: 0;
  transition: opacity 1.6s ease .3s;
}

.mx-hero-fx.is-in { opacity: .7; }

.mx-hero-fx canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 55%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 55%);
}

.mx-hero-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 22%, #000 62%);
}

.mx-hero-lines .mx-hl-base { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.mx-hero-lines .mx-hl-ticks { stroke: rgba(255, 255, 255, .09); stroke-width: 1; }

.mx-hero-lines .mx-hl {
  stroke: rgba(95, 196, 200, .45);
  stroke-width: 1.2;
  stroke-dasharray: var(--d) var(--g);
  animation: mx-scan var(--t) linear infinite;
  animation-delay: var(--w, 0s);
}

@keyframes mx-scan {
  from { stroke-dashoffset: calc(var(--d) + var(--g)); }
  to { stroke-dashoffset: 0; }
}

.mx-hero-dial {
  position: absolute;
  top: -18%;
  right: -10%;
  width: min(52vw, 640px);
  color: rgba(255, 255, 255, .08);
}

.mx-hero-dial .mx-accent { stroke: rgba(214, 174, 96, .32); }

@media (max-width: 767px) {
  .mx-hero-dial { width: 92vw; top: -12%; right: -40%; }
  .mx-hero-lines { -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 70%); mask-image: linear-gradient(180deg, transparent 10%, #000 70%); }
}

html body .mx-par-media {
  scale: 1.05;
  translate: var(--mx-hx, 0px) var(--mx-hy, 0px);
  will-change: translate;
}

/* ---------- Footer: blueprint grid, turning gear, brass specks ---------- */
/* No isolation on the footer: it holds the fixed WhatsApp and back-to-top buttons */
html body footer.mx-footer > div.mx-auto { position: relative; z-index: 1; }

.mx-foot-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  color: rgba(95, 196, 200, .11);
  opacity: 0;
  transition: opacity 1.6s ease;
}

.mx-foot-fx.is-in { opacity: 1; }

.mx-foot-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 46% 80% at 90% 28%, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse 46% 80% at 90% 28%, #000 8%, transparent 72%);
  animation: mx-foot-grid 60s linear infinite;
}

@keyframes mx-foot-grid { to { background-position: 32px 32px, 32px 32px; } }

.mx-foot-sweep {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  overflow: hidden;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(ellipse 48% 75% at 18% 100%, #000 6%, transparent 70%);
  mask-image: radial-gradient(ellipse 48% 75% at 18% 100%, #000 6%, transparent 70%);
}

.mx-foot-sweep::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(214, 174, 96, .18), transparent);
  transform: translateX(-120%);
  animation: mx-sweep 14s var(--mx-ease) infinite;
}

.mx-foot-fx canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
  mask-image: linear-gradient(180deg, transparent, #000 45%);
}

.mx-foot-gear {
  position: absolute;
  top: -34%;
  right: -7%;
  width: clamp(260px, 30vw, 460px);
}

.mx-foot-gear .mx-accent { stroke: rgba(214, 174, 96, .38); }

.mx-foot-dial {
  position: absolute;
  bottom: -38%;
  left: -6%;
  width: clamp(200px, 22vw, 340px);
  color: rgba(255, 255, 255, .055);
}

.mx-foot-dial .mx-accent { stroke: rgba(214, 174, 96, .26); }

/* A brass glint that travels along the top edge */
.mx-foot-edge {
  position: absolute;
  top: 0;
  left: 3rem;
  right: 3rem;
  height: 1px;
  overflow: hidden;
}

.mx-foot-edge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(240, 206, 140, .95), transparent);
  transform: translateX(-120%);
  animation: mx-glint 9s var(--mx-ease) infinite;
}

@keyframes mx-glint {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(660%); }
}

html body footer.mx-footer div.rounded-xl.bg-white {
  position: relative;
  transition: translate .45s var(--mx-ease), box-shadow .45s var(--mx-ease);
}

html body footer.mx-footer div.rounded-xl.bg-white::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(112deg, rgba(255, 255, 255, 0) 40%, rgba(214, 174, 96, .14) 50%, rgba(255, 255, 255, 0) 60%);
  background-repeat: no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  transition: background-position 0s linear .5s;
}

html body footer.mx-footer li.flex > span:first-child {
  transition: border-color .3s ease, background-color .3s ease, translate .35s var(--mx-ease);
}

@media (hover: hover) and (pointer: fine) {
  html body footer.mx-footer div.rounded-xl.bg-white:hover {
    translate: 0 -3px;
    box-shadow: 0 0 0 1px rgba(214, 174, 96, .3), 0 26px 50px -24px rgba(0, 0, 0, .55);
  }

  html body footer.mx-footer div.rounded-xl.bg-white:hover::after {
    background-position: -30% 0;
    transition: background-position 1.2s var(--mx-ease);
  }

  html body footer.mx-footer li.flex:hover > span:first-child {
    border-color: rgba(95, 196, 200, .45);
    background-color: rgba(95, 196, 200, .12);
    translate: 0 -2px;
  }
}

@media (max-width: 767px) {
  .mx-foot-gear { width: 72vw; top: -8%; right: -32%; }
  .mx-foot-dial { display: none; }
  .mx-foot-edge { left: 1.5rem; right: 1.5rem; }
}

/* ---------- Floating chips ---------- */
.mx-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: calc(100% - 2rem);
  padding: .45rem .875rem .45rem .45rem;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(26, 39, 83, .06), 0 16px 34px -16px rgba(26, 39, 83, .4);
  color: #1A2753;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scale(.94);
  transition: opacity .7s ease, transform .9s var(--mx-ease);
  transition-delay: var(--mx-delay, 0ms);
}

.mx-chip.is-in {
  opacity: 1;
  transform: none;
  animation: mx-bob 7s ease-in-out infinite;
  animation-delay: calc(var(--mx-delay, 0ms) + 1s);
}

@keyframes mx-bob { 50% { translate: 0 -6px; } }

.mx-chip-icon {
  display: inline-flex;
  height: 1.875rem;
  width: 1.875rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(145deg, #EEF6F6, #fff);
  box-shadow: inset 0 0 0 1px rgba(6, 114, 123, .14);
  color: #06727B;
}

.mx-chip-icon svg { height: 1rem; width: 1rem; }

.mx-chip--spec { border-radius: 1.125rem; padding: .6rem 1rem .6rem .6rem; }
.mx-chip--spec .mx-chip-icon { height: 2.25rem; width: 2.25rem; border-radius: .75rem; background: linear-gradient(145deg, #FBF6EC, #fff); box-shadow: inset 0 0 0 1px rgba(185, 138, 46, .25); color: #8A6620; }
.mx-chip--spec .mx-chip-icon svg { height: 1.25rem; width: 1.25rem; }
.mx-spec-text { display: flex; flex-direction: column; gap: .2rem; }
.mx-spec-label { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #64748B; }
.mx-spec-value { font-size: .875rem; font-weight: 700; letter-spacing: -.01em; color: #1A2753; font-variant-numeric: tabular-nums; }

.mx-pos-tl { top: 1rem; left: 1rem; }
.mx-pos-tr { top: 1rem; right: 1rem; }
.mx-pos-br { bottom: 1rem; right: 1rem; }
.mx-pos-bl { bottom: 1rem; left: 1rem; }

@media (min-width: 1024px) {
  .mx-pos-tl { top: 1.5rem; left: 1.5rem; }
  .mx-pos-tr { top: 1.5rem; right: 1.5rem; }
  .mx-pos-br { bottom: 1.5rem; right: 1.5rem; }
  .mx-pos-bl { bottom: 1.5rem; left: 1.5rem; }
}

@media (max-width: 639px) {
  .mx-chip { font-size: .75rem; }
  .mx-chip--hide-sm { display: none; }
}

/* ---------- Cursor ring and tooltip (mouse only) ---------- */
.mx-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}

html.mx-cursor-on .mx-cursor { opacity: 1; }

.mx-cursor-ring {
  position: absolute;
  left: -14px;
  top: -14px;
  height: 28px;
  width: 28px;
  border: 1.5px solid rgba(6, 114, 123, .5);
  border-radius: 9999px;
  background-color: rgba(6, 114, 123, .03);
  transition: transform .4s var(--mx-ease), background-color .3s ease, border-color .3s ease, opacity .25s ease;
}

.mx-cursor.is-card .mx-cursor-ring { transform: scale(1.25); border-color: rgba(185, 138, 46, .45); }
.mx-cursor.is-link .mx-cursor-ring { transform: scale(1.6); border-color: rgba(185, 138, 46, .65); background-color: rgba(185, 138, 46, .1); }
.mx-cursor.is-dark .mx-cursor-ring { border-color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, .04); }
.mx-cursor.is-dark.is-link .mx-cursor-ring { border-color: rgba(95, 196, 200, .85); background-color: rgba(95, 196, 200, .14); }
.mx-cursor.is-down .mx-cursor-ring { transform: scale(.85); }
.mx-cursor.is-field .mx-cursor-ring { opacity: 0; }

.mx-cursor-tip {
  position: absolute;
  left: 26px;
  top: 16px;
  padding: .4rem .75rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9999px;
  background-color: rgba(26, 39, 83, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -12px rgba(10, 18, 40, .5);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px) scale(.92);
  transform-origin: 0 0;
  transition: opacity .22s ease, transform .35s var(--mx-ease);
}

.mx-cursor.is-flip .mx-cursor-tip { left: auto; right: 26px; transform-origin: 100% 0; }
.mx-cursor.has-tip .mx-cursor-tip { opacity: 1; transform: none; }

/* ---------- Scroll reveals (tablet and up; phones keep everything visible) ---------- */
html.mx-js .mx-reveal { opacity: 0; transform: translate3d(0, 32px, 0) scale(.98); }
html.mx-js .mx-reveal.mx-reveal--x { transform: translate3d(56px, 0, 0); }

html.mx-js .mx-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease, transform 1.1s var(--mx-ease);
  transition-delay: var(--mx-delay, 0ms);
}

/* Back-to-top ring fills as the page is read */
.sx-ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  rotate: -90deg;
  overflow: visible;
  pointer-events: none;
  fill: none;
}

.sx-ring-track { stroke: rgba(6, 114, 123, .12); stroke-width: 2; }

.sx-ring-bar {
  stroke: #06727B;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

/* ---------- Reduced motion: keep the look, slow everything down ---------- */
@media (prefers-reduced-motion: reduce) {
  html body::after { animation-duration: 160s; }
  .mx-spin { animation-duration: 360s; }
  .mx-lathe::after { animation-duration: 18s; }
  .mx-foot-sweep::after { animation-duration: 26s; }
  .mx-foot-edge::after { animation-duration: 18s; }
  .mx-foot-grid { animation-duration: 140s; }
  .mx-hero-lines .mx-hl { animation-duration: calc(var(--t) * 2); }
  .mx-chip.is-in { animation: none; }
  .mx-chip, html.mx-js .mx-reveal, html.mx-js .mx-reveal.mx-reveal--x { transform: none; }
  html body .mx-par-media { scale: 1.04; }
}