/* =========================================================================
   Frontdesk - motion layer
   Techniques adapted from motion-primitives (spotlight card, magnetic,
   text reveal, border beam), rebuilt in vanilla for this site.

   Rule: nothing here may hide content when JS does not run. Every hidden
   state is applied by JS via .m-armed, so the no-JS page is fully readable.
   ========================================================================= */

/* ---------------------------------------------------------------
   Text reveal - lines rise out of a clip mask. One orchestrated
   moment on the hero headline only.
   --------------------------------------------------------------- */
.m-line-wrap { display: block; overflow: hidden; }
.m-armed .m-line {
  display: block;
  transform: translateY(105%);
  opacity: 0;
}
.m-line {
  transition:
    transform .95s cubic-bezier(.16,1,.3,1),
    opacity   .8s  cubic-bezier(.16,1,.3,1);
}
.m-armed .m-line.is-in { transform: translateY(0); opacity: 1; }

/* ---------------------------------------------------------------
   Fade up on scroll, with stagger applied inline by JS
   --------------------------------------------------------------- */
.m-armed .m-up { opacity: 0; transform: translateY(22px); }
.m-up {
  transition:
    opacity   .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
}
.m-armed .m-up.is-in { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------
   Spotlight card - radial glow follows the cursor.
   JS writes --mx / --my as pixel values on the element.
   --------------------------------------------------------------- */
.m-spot { position: relative; isolation: isolate; }
.m-spot::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    350px circle at var(--mx, 50%) var(--my, 50%),
    var(--glow-spot),
    transparent 72%
  );
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: -1;
}
.m-spot:hover::before { opacity: 1; }

/* ---------------------------------------------------------------
   Magnetic - JS writes the translate, CSS carries the spring feel
   --------------------------------------------------------------- */
.m-mag {
  will-change: transform;
  transition: transform .45s cubic-bezier(.16,1.1,.3,1);
}
.m-mag.is-pulled { transition: transform .16s cubic-bezier(.2,.9,.3,1); }

/* ---------------------------------------------------------------
   Border beam - a single travelling highlight. Used once, on the
   guarantee, because that is the load-bearing element on the page.
   --------------------------------------------------------------- */
.m-beam { position: relative; overflow: hidden; }
.m-beam::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam, 0turn),
    transparent 0deg 300deg,
    var(--positive) 340deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@property --beam {
  syntax: '<angle>';
  initial-value: 0turn;
  inherits: false;
}
@keyframes m-beam-spin { to { --beam: 1turn; } }
.m-beam.is-running::after { animation: m-beam-spin 6s linear infinite; }

/* ---------------------------------------------------------------
   Hero aurora - very low opacity, slow. Sits behind the hero only.
   --------------------------------------------------------------- */
.m-aurora { position: relative; isolation: isolate; overflow: hidden; }
.m-aurora::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 48% at 16% 20%, var(--glow-accent), transparent 64%),
    radial-gradient(40% 46% at 84% 10%, var(--glow-positive), transparent 62%),
    radial-gradient(48% 42% at 64% 74%, var(--glow-urgent), transparent 66%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  filter: blur(64px);
  opacity: .9;
  animation: m-aurora-drift 34s ease-in-out infinite alternate;
}
@keyframes m-aurora-drift {
  from { background-position: 12% 50%, 88% 20%, 60% 70%; }
  to   { background-position: 34% 34%, 62% 44%, 38% 52%; }
}

/* ---------------------------------------------------------------
   Fine grid, barely there. Adds surface without adding noise.
   --------------------------------------------------------------- */
.m-grid { position: relative; isolation: isolate; }
.m-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 72%);
  opacity: .8;
}

/* ---------------------------------------------------------------
   Lift on hover - cards and steps. Cheap, and reads expensive.
   --------------------------------------------------------------- */
.m-lift { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease; }
.m-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -22px rgba(28,35,33,0.28); }

/* ---------------------------------------------------------------
   Counters hold their width so the layout does not jitter
   --------------------------------------------------------------- */
.m-tick { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   Respect the setting. Everything resolves to its resting state.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .m-armed .m-line,
  .m-armed .m-up { opacity: 1 !important; transform: none !important; }
  .m-line, .m-up, .m-mag, .m-lift { transition: none !important; }
  .m-beam.is-running::after { animation: none !important; }
  .m-aurora::before { animation: none !important; }
  .m-spot::before { display: none !important; }
}