/* ============================================================
   HEMVAN ADVISORY — Motion Layer
   Lenis smooth scroll, veil transitions, cursor, marquee,
   watermark, scroll-driven detail. Pairs with js/motion.js.
   ============================================================ */

/* ─── LENIS ──────────────────────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ─── VEIL (preloader + page transitions) ───────────────────── */
.veil {
  position: fixed; inset: 0;
  z-index: 9998;
  background: var(--surface-dark);
  display: flex; align-items: center; justify-content: center;
  clip-path: inset(0 0 0 0);
}
.veil.is-hidden { pointer-events: none; visibility: hidden; }

.veil-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4);
  text-align: center;
  color: var(--text-on-dark);
}
.veil-mask { overflow: hidden; }
.veil-word {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.veil-word em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.veil-tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.veil-line {
  position: relative;
  width: 140px; height: 1px;
  margin-top: var(--sp-2);
  background: rgba(255,255,255,0.14);
  overflow: hidden;
}
.veil-line::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* ─── HEADER hide-on-scroll ─────────────────────────────────── */
.site-header {
  transition:
    border-color var(--dur-normal) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out),
    background var(--dur-normal) var(--ease-out),
    transform 0.5s var(--ease-out);
}
.site-header.nav-hidden { transform: translateY(-100%); }

/* ─── CUSTOM CURSOR ─────────────────────────────────────────── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9999;
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: #fff;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.65);
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ─── MARQUEE ───────────────────────────────────────────────── */
.marquee-section {
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  background: var(--surface-base);
  border-block: 1px solid var(--border);
  overflow: hidden;
}
.marquee-track {
  display: flex; align-items: baseline;
  gap: clamp(2rem, 4.5vw, 4rem);
  width: max-content;
  will-change: transform;
}
.marquee-item {
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap;
}
.marquee-item em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--text-secondary);
}
.marquee-dot {
  font-size: 0.55em;
  color: var(--text-tertiary);
  transform: translateY(-0.3em);
}

/* ─── SERVICE CARD GLARE ────────────────────────────────────── */
.service-card-inner {
  position: relative;
  overflow: hidden;
}
.service-card-inner::after {
  content: '';
  position: absolute; inset: 0;
  opacity: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 233, 191, 0.32),
    transparent 65%
  );
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.service-card:hover .service-card-inner::after { opacity: 1; }

/* ─── PROCESS PROGRESS LINE ─────────────────────────────────── */
.process-steps {
  position: relative;
  --line: 0;
  padding-left: var(--sp-5);
}
.process-steps::before,
.process-steps::after {
  content: '';
  position: absolute;
  left: 0; top: var(--sp-5); bottom: var(--sp-5);
  width: 1px;
}
.process-steps::before { background: var(--border); }
.process-steps::after {
  background: var(--text-primary);
  transform: scaleY(var(--line));
  transform-origin: top;
}
.process-step.is-active .step-num { color: var(--text-primary); }
.step-num { transition: color 0.5s var(--ease-out); }

/* ─── FOOTER WATERMARK ──────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
}
.footer-watermark {
  font-size: clamp(4.5rem, 16.5vw, 15rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 0.78;
  text-align: center;
  color: rgba(255,255,255,0.025);
  -webkit-text-stroke: 1px rgba(255,255,255,0.07);
  user-select: none;
  pointer-events: none;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  margin-bottom: -0.06em;
  white-space: nowrap;
}

/* ─── SPLIT TEXT / SCRUB TEXT ───────────────────────────────── */
[data-scrub-text] .word { will-change: opacity; }

/* ─── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .veil { display: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .marquee-track { transform: none !important; }
  .site-header.nav-hidden { transform: none; }
  .process-steps { --line: 1; }
}