/**
 * Deltech Parking — scroll motion layer.
 * Progressive enhancement: everything is visible when JS is off
 * (the .js-motion class is added by motion.js before paint).
 */

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--navy), var(--yellow) 60%, var(--red));
  z-index: 100;
  pointer-events: none;
  will-change: transform;
}

/* Header condenses on scroll */
.site-header {
  transition: height 0.3s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.site-header .wrap {
  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.is-scrolled .wrap { height: 62px; }
.site-header.is-scrolled {
  box-shadow: 0 2px 28px rgba(6, 24, 56, 0.10);
  background: rgba(255, 255, 255, 0.92);
}

/* Reveal on scroll */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-motion [data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
.js-motion [data-reveal="right"] { transform: translate3d(28px, 0, 0); }
.js-motion [data-reveal="scale"] { transform: scale(0.96); }
.js-motion [data-reveal="mask"] {
  /* No clip-path: clipping zeroes the IntersectionObserver ratio and the
     element would never reveal. Media fades and settles instead. */
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
.js-motion [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* Line-by-line headline reveal */
.js-motion .reveal-line {
  display: block;
  overflow: hidden;
}
.js-motion .reveal-line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--line-delay, 0ms);
}
.js-motion .reveal-line.is-inview > span { transform: none; }

/* Media parallax (only once the element has revealed, so the reveal
   transform is not overridden while it is still hidden) */
.js-motion [data-parallax].is-inview {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.06);
}

/* Stat counters */
.stats > div { position: relative; overflow: hidden; }
.stats strong { font-variant-numeric: tabular-nums; }

/* Card hover / focus lift */
.card {
  transition:
    border-color 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover { border-color: var(--ink); transform: translateY(-3px); }

/* Buttons */
.btn,
.btn-ghost {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    border-color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }

/* Steps draw a connecting line as they enter */
.steps li { position: relative; }
.steps .num { transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; }
.js-motion .steps li.is-inview .num {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Section rules wipe in */
.js-motion .bordered-bottom,
.js-motion .bordered-top { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion .reveal-line > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-motion [data-parallax].is-inview { transform: none !important; }
  .scroll-progress { display: none; }
}