/* ============================================================
   SECLAB — motion.css (homepage only)
   A restrained, editorial motion system:
   - branded intro curtain
   - masked word-by-word headline reveals
   - soft blur-rise for copy, staggered card entrances
   - line icons that draw themselves in
   - scroll-linked section panels, hero parallax, process track
   - sliding nav indicator, scroll progress, card spotlight
   Everything is scoped to body.page-home and only hides content
   once motion.js has armed it (body.m-on). Durations use
   !important so the OS "reduced motion" reset in styles.css does
   not flatten them — motion always plays on the homepage.
   ============================================================ */

:root {
  --m-expo: cubic-bezier(0.19, 1, 0.22, 1);      /* long, silky settle */
  --m-quart: cubic-bezier(0.76, 0, 0.24, 1);     /* curtain */
  --m-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   1. Intro curtain
   ============================================================ */
.m-loader { display: none; }
html.m-boot .m-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg);
  clip-path: inset(0 0 0 0);
}
html.m-boot body { overflow: hidden; }

.m-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.m-loader-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  letter-spacing: 0.02em;
  color: var(--text);
  opacity: 0;
  transform: translateY(14px);
  animation: m-loader-in 900ms var(--m-expo) 80ms forwards !important;
}
.m-loader-brand img { width: 40px; height: 44px; }
.m-loader-brand .brand-lab { color: var(--gold-brand); }
.m-loader-line {
  width: 160px;
  height: 1px;
  background: var(--border);
  overflow: hidden;
}
.m-loader-line span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  animation: m-loader-bar 800ms var(--m-quart) 200ms forwards !important;
}
@keyframes m-loader-in { to { opacity: 1; transform: none; } }
@keyframes m-loader-bar { to { transform: scaleX(1); } }

html.m-boot .m-loader.is-leaving {
  pointer-events: none;
  animation: m-curtain 950ms var(--m-quart) forwards !important;
}
html.m-boot .m-loader.is-leaving .m-loader-inner {
  animation: m-loader-out 600ms var(--m-quart) forwards !important;
}
@keyframes m-curtain { to { clip-path: inset(0 0 100% 0); } }
@keyframes m-loader-out { to { opacity: 0; transform: translateY(-28px); } }

/* ============================================================
   2. Pending (pre-reveal) states — only once armed
   ============================================================ */
body.page-home.m-on [data-m]:not([data-m="words"]):not(.is-in) { opacity: 0; }

/* ============================================================
   3. Masked word reveal (headlines)
   ============================================================ */
.m-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for descenders so they are never clipped */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.m-wi {
  display: inline-block;
  will-change: transform;
}
body.page-home.m-on [data-m="words"]:not(.is-in) .m-wi {
  transform: translate3d(0, 112%, 0) rotate(4deg);
  transform-origin: 0 100%;
  transition: none !important; /* jump to the start position instantly */
}
body.page-home.m-on [data-m="words"].is-in .m-wi {
  transform: none;
  transition-property: transform !important;
  transition-duration: 1300ms !important;
  transition-timing-function: var(--m-expo) !important;
  transition-delay: calc(var(--d, 0s) + var(--wi, 0) * 55ms) !important;
}

/* ============================================================
   4. Entrance keyframes
   ============================================================ */
body.page-home.m-on [data-m].is-in:not([data-m="words"]) {
  animation-duration: var(--dur, 1100ms) !important;
  animation-timing-function: var(--m-expo) !important;
  animation-fill-mode: backwards !important;
  animation-delay: var(--d, 0s);
  animation-iteration-count: 1 !important;
}
body.page-home.m-on [data-m="rise"].is-in   { animation-name: m-rise; }
body.page-home.m-on [data-m="blur"].is-in   { animation-name: m-blur; }
body.page-home.m-on [data-m="card"].is-in   { animation-name: m-card; --dur: 1300ms; }
body.page-home.m-on [data-m="wipe"].is-in   { animation-name: m-wipe; --dur: 1000ms; }
body.page-home.m-on [data-m="fade"].is-in   { animation-name: m-fade; --dur: 1400ms; }

@keyframes m-rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
}
@keyframes m-blur {
  from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes m-card {
  from { opacity: 0; transform: translate3d(0, 64px, 0) scale(0.965); }
}
@keyframes m-wipe {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes m-fade { from { opacity: 0; } }

/* Focus bypass: keyboard focus always lands on settled content */
body.page-home.m-on [data-m].m-force {
  animation: none !important;
  opacity: 1 !important;
}
body.page-home.m-on [data-m].m-force .m-wi { transform: none !important; transition: none !important; }

/* ============================================================
   5. Self-drawing line icons
   ============================================================ */
body.page-home.m-on .m-draw :is(path, circle, rect, line, polyline) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
body.page-home.m-on .is-in .m-draw :is(path, circle, rect, line, polyline),
body.page-home.m-on .m-draw.is-in :is(path, circle, rect, line, polyline) {
  stroke-dashoffset: 0;
  transition-property: stroke-dashoffset !important;
  transition-duration: 1600ms !important;
  transition-timing-function: var(--m-soft) !important;
  transition-delay: calc(var(--d, 0s) + 250ms) !important;
}

/* ============================================================
   6. Scroll-linked section panels
   The tinted sections arrive as a rounded panel that widens
   to full bleed as it scrolls into view.
   ============================================================ */
body.page-home.m-on .section--offset {
  position: relative;
  background: transparent;
  isolation: isolate;
}
body.page-home.m-on .section--offset::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-soft);
  clip-path: inset(0 var(--pi, 0px) round var(--pr, 0px));
  will-change: clip-path;
}

/* ============================================================
   7. Hero parallax targets
   ============================================================ */
body.page-home.m-on .hero-content,
body.page-home.m-on .hero-svg { will-change: transform; }

/* ============================================================
   8. Scroll progress
   ============================================================ */
.m-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ============================================================
   9. Sliding nav indicator
   ============================================================ */
@media (min-width: 769px) {
  body.page-home.m-on .nav-links { position: relative; }
  body.page-home.m-on .nav-links a:not(.btn).is-active { color: var(--text); }
  body.page-home.m-on .nav-links a:not(.btn).is-active::after { opacity: 0; }
  .m-nav-ind {
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 10px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--accent), var(--gold));
    opacity: 0;
    pointer-events: none;
    transition-property: transform, width, opacity !important;
    transition-duration: 700ms, 700ms, 400ms !important;
    transition-timing-function: var(--m-expo) !important;
  }
  .m-nav-ind.is-on { opacity: 1; }
}
@media (max-width: 768px) { .m-nav-ind { display: none; } }
.nav-links a:not(.btn).is-active { color: var(--text); }

/* ============================================================
   10. Approach process track
   ============================================================ */
.m-track { display: none; }
body.page-home.m-on .m-track.is-row {
  display: block;
  position: relative;
  height: 1px;
  margin: 0 0 var(--space-8);
  background: var(--border-strong);
}
.m-track-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(var(--tp, 0));
  transform-origin: left;
}
.m-track-dot {
  position: absolute;
  top: 50%;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  transition-property: background-color, border-color, box-shadow, transform !important;
  transition-duration: 500ms !important;
  transition-timing-function: var(--m-expo) !important;
}
.m-track-dot.is-lit {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 5px var(--gold-glow);
  transform: scale(1.1);
}
body.page-home.m-on .approach-step .approach-num {
  transition-property: color !important;
  transition-duration: 500ms !important;
}
body.page-home.m-on .approach-step.is-lit .approach-num { color: var(--gold-deep); }
body.page-home.m-on .approach-step.is-lit::before { opacity: 1; width: 64px; }

/* ============================================================
   11. Service card spotlight (follows the cursor)
   ============================================================ */
body.page-home .service-card::after {
  background: radial-gradient(
    420px circle at var(--mx, 100%) var(--my, 0%),
    rgba(201, 164, 49, 0.16),
    transparent 45%
  );
}

/* ============================================================
   12. FAQ — smooth accordion
   ============================================================ */
body.page-home.m-on .faq-item { overflow: hidden; }

/* ============================================================
   13. Small loops and hover timing kept under reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.page-home .pulse-dot {
    animation-duration: 2s !important;
    animation-iteration-count: infinite !important;
  }
  body.page-home .service-card,
  body.page-home .approach-step,
  body.page-home .why-icon,
  body.page-home .btn {
    transition-duration: 320ms !important;
  }
}