/* ============================================================
   MOTION SYSTEM v3 — GSAP/ScrollTrigger/Lenis choreography layer.
   Loaded after style.css. Everything here is additive; if the vendor
   scripts fail or prefers-reduced-motion is set, base style.css rules
   keep the page fully visible with the old, simpler reveal system.
   ============================================================ */

/* ---- Hero: GSAP owns h1 / identity chips / CTA entirely in motion mode.
   Eyebrow + quote keep the plain keyframe either way (see style.css). ---- */
.hm-motion .hero h1,
.hm-motion .hero .hm-identity-card,
.hm-motion .hero .hm-identity-half,
.hm-motion .hero .hm-identity-seam,
.hm-motion .hero .hm-cta {
  opacity: 0;
}
.hm-motion-fallback .hero h1,
.hm-motion-fallback .hero .hm-identity-card,
.hm-motion-fallback .hero .hm-identity-half,
.hm-motion-fallback .hero .hm-identity-seam,
.hm-motion-fallback .hero .hm-cta {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.hero .hm-cta { display: inline-flex; will-change: transform; }

/* .hm-identity is a plain wrapper (idle float + scroll parallax live on it),
   never a .hm-reveal target, so it has no opacity of its own in any mode.
   Its card / halves / seam are the GSAP-owned pieces, above. */
.hm-motion .hm-identity-card { transform-style: preserve-3d; }
.hm-motion .hm-identity-half,
.hm-motion .hm-identity-seam { will-change: transform, opacity; }

/* ---- Scroll progress bar (homepage journey) — reuses .hm-progress look ---- */
.hm-home-progress { z-index: 95; }

/* ---- Side dot-nav: desktop-only wayfinding through the homepage journey ---- */
.hm-dotnav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: flex-end;
}
.hm-dot {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--muted);
  line-height: 1;
}
.hm-dot-mark {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(28, 25, 23, .2);
  transition: background .25s var(--ease), transform .25s var(--ease);
  flex: none;
}
.hm-dot-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  background: var(--card);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  white-space: nowrap;
  pointer-events: none;
}
.hm-dot:hover .hm-dot-label,
.hm-dot:focus-visible .hm-dot-label { opacity: 1; transform: none; }
.hm-dot.is-active .hm-dot-mark { background: var(--gold); transform: scale(1.4); }
.hm-dot.is-active .hm-dot-label { color: var(--ink); font-weight: 650; }
@media (max-width: 1079px) {
  .hm-dotnav { display: none; }
}

/* ---- Tskflow decorative fragments: purely visual, aria-hidden, never carry
   copy. Hidden entirely below the width where they'd crowd the heading. ---- */
#tskflow { position: relative; overflow: hidden; }
.hm-tskflow-frag {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hm-frag {
  position: absolute;
  opacity: 0;
  display: flex;
}
.hm-frag-card {
  width: 78px;
  height: 48px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(196, 163, 90, .35);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}
.hm-frag-card i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(228, 201, 138, .55);
}
.hm-frag-card i:nth-child(1) { width: 36px; }
.hm-frag-card i:nth-child(2) { width: 22px; }
.hm-frag-card svg {
  position: absolute; top: 7px; right: 7px;
  width: 12px; height: 12px;
  stroke: var(--gold-3); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.hm-frag-check {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(228, 87, 46, .14);
  border: 1px solid rgba(228, 87, 46, .4);
  align-items: center;
  justify-content: center;
}
.hm-frag-check svg {
  width: 15px; height: 15px;
  stroke: #f0b28e; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.hm-frag[data-frag="1"] { top: 15%; left: 7%; }
.hm-frag[data-frag="2"] { top: 64%; left: 4.5%; }
.hm-frag[data-frag="3"] { top: 23%; right: 8.5%; }
.hm-frag[data-frag="4"] { top: 69%; right: 7%; }
.hm-frag[data-frag="5"] { top: 44%; left: 1%; }
.hm-frag[data-frag="6"] { top: 46%; right: 1.5%; }
@media (max-width: 1080px) {
  .hm-tskflow-frag { display: none; }
}