/* Home motion (23 Oct 2026): what assets/js/motion-home.js needs from CSS. Loaded on Home only.
   Everything here is either hidden until the script uses it, or a no-op for the page at rest. */

/* ---------- Lenis smooth scroll (its recommended base styles) ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

/* ---------- Preloader: navy curtain with a greeting, its curved bottom edge ----------
   Shown only while <html> has is-loading (set in the head, once per visit, never with reduced motion).
   If the script never runs, pl-failsafe takes it away after 4 s so the page is never stuck behind it. */
.preloader {
  display: none;
}

.is-loading {
  overflow: hidden;
}

.is-loading .preloader {
  position: fixed;
  inset: 0;
  z-index: 100000000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-dark);
  color: var(--text-on-dark);
  animation: pl-failsafe 0s linear 4s forwards;
}

@keyframes pl-failsafe {
  to { visibility: hidden; opacity: 0; }
}

.pl-word {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "Poppins", var(--font-body);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -.04em;
}

.pl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--primary);
}

.pl-curve {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10vh;
  overflow: hidden;
  pointer-events: none;
}

.pl-curve span {
  position: absolute;
  bottom: 0;
  left: -25%;
  width: 150%;
  height: 750%;
  border-radius: 0 0 50% 50%;
  background-color: var(--surface-dark);
}

/* ---------- Hero entrance: the card clips the photo while it settles from 110 % ---------- */
.hero_grid.is-intro {
  overflow: hidden;
}

/* ---------- The story's closing line, split into words ---------- */
.story .text-quote .mw {
  display: inline-block;
  will-change: filter, opacity;
}

/* ---------- Story timeline: the line is drawn by --line (0 → 1); 1 without the script ---------- */
.story_timeline::before {
  transform: scaleY(var(--line, 1));
  transform-origin: 50% 0;
}

/* ---------- Facts row: rule, dividers and masks the script puts in ---------- */
.stats_list {
  position: relative;
}

.stats_rule {
  position: absolute;
  top: calc(var(--space-sm) * -1);
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--border);
}

.stats_list.is-anim li {
  position: relative;
  border-left-color: transparent;
}

.stats_sep {
  position: absolute;
  top: calc(var(--space-sm) * -1);
  bottom: 0;
  left: -1px;
  width: 1px;
  background-color: var(--border);
}

.stats_mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .06em;
}

.stats_mask > span {
  display: inline-block;
}

/* The footer's inner stack shares the class "footer", so it paints its own dark box (site.css .footer); it showed as
   a black block behind "Vienna, Austria" when anything passed behind it. */
.l-stack.footer {
  background-color: transparent;
}

/* ---------- "Open ↗" cursor ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .preloader,
  .cursor {
    display: none !important;
  }
}