/* ============================================================================
   JUST LANDED — the motion layer.

   One motif: the paper plane flies the timeline. The line draws down as you scroll,
   the plane rides its tip, and each dot lights as the plane passes it. Everything else
   is restraint: cards rise 12px once, the logo swaps play out, two numbers count up.

   Built from the zysec motion study (E:\automation\misc\zysec-website-motion-study):
   one easing curve, three durations (200 / 320 / 600 ms), nothing idles.

   EVERY rule that hides or moves something sits under html.lm — a class only
   landed-motion.js adds, and never with ?nomotion. If the script fails to load, or
   motion is switched off, the page is exactly what it was before this file existed.
   ============================================================================ */

:root {
  --lm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lm-fast: 200ms;
  --lm-mid: 320ms;
  --lm-slow: 600ms;
}

/* ---- the plane lands beside "Just Landed" (once, on load) ---- */
html.lm .eyebrow svg { animation: lmLand var(--lm-slow) var(--lm-ease) both; }
@keyframes lmLand {
  from { opacity: 0; transform: translate(-22px, 14px) scale(.8); }
  to   { opacity: 1; transform: none; }
}

/* ---- the rail: the existing line becomes the unflown track ---- */
html.lm .tl::before { background: rgba(255, 255, 255, .07); }
.lm-rail { display: none; }
html.lm .lm-rail {
  display: block; position: absolute; left: 9px; top: 6px; bottom: 20px; width: 2px;
  pointer-events: none; z-index: 1;
}
html.lm .lm-fill {
  position: absolute; inset: 0; border-radius: 2px; transform-origin: top;
  transform: scaleY(var(--lm-p, 0));
  background: linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #a99bff));
}
html.lm .lm-plane {
  position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  display: grid; place-items: center; border-radius: 99px; color: #fff;
  background: var(--navy); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 60%, transparent),
    0 6px 16px -6px var(--acc);
  transform: translateY(var(--lm-y, 0px));
}
html.lm .lm-plane svg { width: 13px; height: 13px; transform: rotate(135deg); }
@media (max-width: 760px) { html.lm .lm-rail { left: 6px; } }

/* ---- dots light as the plane passes; dim again if you scroll back ---- */
html.lm .tl .card::before {
  opacity: .32; transform: scale(.75); box-shadow: none;
  transition: opacity var(--lm-mid) var(--lm-ease), transform var(--lm-mid) var(--lm-ease),
    box-shadow var(--lm-mid) var(--lm-ease);
}
html.lm .tl .card.lm-passed::before {
  opacity: 1; transform: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k) 22%, transparent);
}
html.lm .tl .month::before {
  border-color: var(--hair);
  transition: border-color var(--lm-mid) var(--lm-ease), background var(--lm-mid) var(--lm-ease);
}
html.lm .tl .month.lm-passed::before { border-color: color-mix(in srgb, var(--acc) 70%, var(--hair)); }
html.lm .tl .month { transition: color var(--lm-mid) var(--lm-ease); }
html.lm .tl .month.lm-passed { color: #c9d2ee; }

/* ---- cards rise 12px, once ---- */
html.lm .lm-rv {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--lm-mid) var(--lm-ease), transform var(--lm-mid) var(--lm-ease);
  transition-delay: var(--lm-d, 0s);
}
html.lm .lm-rv.lm-in { opacity: 1; transform: none; }

/* ---- the logo upgrade plays out: emoji dims, the real logo arrives ---- */
html.lm .sw .tile.was,
html.lm .sw .ar,
html.lm .sw .tile.now,
html.lm .sw small {
  transition: opacity var(--lm-mid) var(--lm-ease), transform var(--lm-mid) var(--lm-ease),
    filter var(--lm-mid) var(--lm-ease);
  transition-delay: var(--lm-d, 0s);
}
html.lm .sw:not(.lm-swapped) .tile.was { opacity: 1; filter: none; transform: scale(1.08); }
html.lm .sw:not(.lm-swapped) .ar { opacity: 0; transform: translateX(-4px); }
html.lm .sw:not(.lm-swapped) .tile.now { opacity: 0; transform: scale(.6); }
html.lm .sw:not(.lm-swapped) small { opacity: .45; }

/* ---- reduced motion: a different path, not a slower one ----
   landed-motion.js already takes the static branch; this is the belt to its braces. */
@media (prefers-reduced-motion: reduce) {
  html.lm .eyebrow svg { animation: none; }
  html.lm .lm-rv { opacity: 1; transform: none; transition: none; }
  html.lm .tl .card::before, html.lm .tl .month::before, html.lm .tl .month,
  html.lm .sw .tile.was, html.lm .sw .ar, html.lm .sw .tile.now, html.lm .sw small { transition: none; }
}