:root {
  --m-accent: var(--color-primary);
  --m-accent-2: var(--color-tertiary);
}

/* ============================================================
   motion.css — Digilife Software demo motion system
   Pairs with motion.js. Uses these per-site variables:
     --m-accent   primary motion colour
     --m-accent-2 secondary motion colour
   Everything is GPU-composited (transform / opacity only).
   ============================================================ */

/* ---------- Scroll progress ---------- */
.m-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 300;
  background: linear-gradient(90deg, var(--m-accent), var(--m-accent-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* ---------- Scroll reveal ---------- */
.m-on .m-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--m-delay, 0ms);
  will-change: transform, opacity;
}
.m-on .m-reveal.m-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- 3D tilt ---------- */
.m-tilt {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))
    translate3d(0, var(--py, 0px), 0);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease, border-color 0.3s ease;
  position: relative;
}
.m-tilt:hover {
  transition-duration: 0.12s;
  box-shadow: 0 22px 48px -20px rgba(16, 20, 28, 0.28);
}

/* sheen that follows the cursor across the card */
.m-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    color-mix(in srgb, var(--m-accent) 13%, transparent),
    transparent 62%
  );
}
.m-tilt:hover::after {
  opacity: 1;
}

/* ---------- Magnetic buttons ---------- */
.m-magnet {
  --tx: 0px;
  --ty: 0px;
  transform: translate3d(var(--tx), var(--ty), 0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s ease, box-shadow 0.35s ease;
  position: relative;
}
.m-magnet:hover {
  transition-duration: 0.1s, 0.25s, 0.35s;
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--m-accent) 65%, transparent);
}

/* ---------- Hero spotlight ---------- */
.m-spot {
  --sx: 50%;
  --sy: 45%;
  position: relative;
  isolation: isolate;
}
.m-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    620px circle at var(--sx) var(--sy),
    color-mix(in srgb, var(--m-accent) 11%, transparent),
    transparent 64%
  );
  transition: background-position 0.2s ease;
}

/* ---------- Parallax ---------- */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* ---------- Animated bars ---------- */
.bar-fill {
  transition: width 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Floating ambient orbs ---------- */
.m-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -2;
}
.m-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  opacity: 0.5;
  animation: m-float 22s ease-in-out infinite;
}
.m-orb:nth-child(1) {
  width: 42vw;
  height: 42vw;
  max-width: 520px;
  max-height: 520px;
  top: -12%;
  left: -8%;
  background: var(--m-accent);
  opacity: 0.16;
}
.m-orb:nth-child(2) {
  width: 34vw;
  height: 34vw;
  max-width: 420px;
  max-height: 420px;
  bottom: -18%;
  right: -6%;
  background: var(--m-accent-2);
  opacity: 0.2;
  animation-duration: 27s;
  animation-direction: reverse;
}
.m-orb:nth-child(3) {
  width: 26vw;
  height: 26vw;
  max-width: 330px;
  max-height: 330px;
  top: 42%;
  right: 26%;
  background: var(--m-accent);
  opacity: 0.1;
  animation-duration: 33s;
}

@keyframes m-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(4vw, -3vh, 0) scale(1.09);
  }
  66% {
    transform: translate3d(-3vw, 4vh, 0) scale(0.94);
  }
}

/* ---------- Perspective grid floor ---------- */
.m-grid {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  overflow: hidden;
  pointer-events: none;
  z-index: -2;
  mask-image: linear-gradient(to top, #000 8%, transparent 92%);
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 92%);
}
.m-grid::before {
  content: "";
  position: absolute;
  inset: -60% -50% -10% -50%;
  background-image: linear-gradient(
      to right,
      color-mix(in srgb, var(--m-accent) 22%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--m-accent) 22%, transparent) 1px,
      transparent 1px
    );
  background-size: 62px 62px;
  transform: perspective(420px) rotateX(66deg);
  transform-origin: 50% 100%;
  animation: m-grid-scroll 9s linear infinite;
}
@keyframes m-grid-scroll {
  to {
    background-position: 0 62px;
  }
}

/* ---------- Marquee ---------- */
.m-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}
.m-marquee-track {
  display: flex;
  width: max-content;
  animation: m-scroll 34s linear infinite;
}
.m-marquee:hover .m-marquee-track {
  animation-play-state: paused;
}
@keyframes m-scroll {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- Gradient text shimmer ---------- */
.m-shimmer {
  background: linear-gradient(
    100deg,
    var(--m-accent) 0%,
    var(--m-accent-2) 42%,
    var(--m-accent) 84%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: m-shimmer 7s ease-in-out infinite;
}
@keyframes m-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ---------- Underline draw on nav ---------- */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--m-accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* ---------- Image slots ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--media-fallback, var(--color-bg-alt));
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.m-tilt:hover .media img,
.media:hover img {
  transform: scale(1.045);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-reveal,
  .m-tilt,
  .m-magnet,
  [data-parallax],
  .bar-fill {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .m-orb,
  .m-grid::before,
  .m-marquee-track,
  .m-shimmer {
    animation: none !important;
  }
  .m-progress {
    display: none;
  }
}