/* Wawlo — gentle, scroll-triggered motion. No scroll hijacking; no third-party animation library. */
:root {
  --w-reveal-duration: 700ms;
  --w-reveal-distance: 26px;
  --w-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Progressive enhancement: plain HTML and failed/disabled JS always stay readable. */
[data-reveal] { opacity: 1; }
.wawlo-motion [data-reveal].reveal-ready {
  transition: opacity var(--w-reveal-duration) var(--w-motion-ease),
              transform var(--w-reveal-duration) var(--w-motion-ease);
  transition-delay: var(--w-reveal-delay, 0ms);
}
.wawlo-motion [data-reveal].reveal-ready:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, var(--w-reveal-distance), 0);
  will-change: opacity, transform;
}
.wawlo-motion [data-reveal].reveal-ready.is-visible {
  opacity: 1;
  transform: none;
}
/* Never leave a keyboard-focused action invisible during a reveal. */
.wawlo-motion [data-reveal].reveal-ready:focus-within {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}

/* 2px progress line adds orientation without taking up layout space. */
.scroll-progress { position: absolute; inset: auto 0 -1px; height: 2px; overflow: hidden; pointer-events: none; display: none; }
.scroll-progress.is-enabled { display: block; }
.scroll-progress-fill { display: block; width: 100%; height: 100%; background: #2563ff; transform: scaleX(var(--w-page-progress, 0)); transform-origin: left center; }

/* Small underline; the menu never changes height while scrolling. */
.navbar .nav-link::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--w-blue); transform: scaleX(0);
  transform-origin: left center; transition: transform 240ms var(--w-motion-ease);
}
.navbar .nav-link.active::after { transform: scaleX(1); }
.site-header.is-scrolled { box-shadow: 0 6px 28px #0f172a08; }

/* Keep device rotations intact; translate is a separate CSS transform property. */
@media (min-width: 992px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @supports (translate: 0 1px) {
    .wawlo-parallax [data-parallax] { translate: 0 var(--w-parallax-y, 0px); }
  }
}

/* Animate existing illustrative values, never fabricate new figures. */
.wawlo-motion [data-meter].meter-ready {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--w-motion-ease) 120ms;
}
.wawlo-motion [data-meter].meter-ready.is-filled { transform: scaleX(1); }

@media (max-width: 767.98px) {
  :root { --w-reveal-distance: 16px; --w-reveal-duration: 520ms; }
  .wawlo-motion [data-reveal].reveal-ready { transition-delay: 0ms; }
}
@media (max-width: 1199.98px) {
  .navbar .nav-link::after { left: 0; right: auto; width: 22px; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-reveal], .wawlo-motion [data-reveal].reveal-ready,
  .wawlo-motion [data-reveal].reveal-ready:not(.is-visible) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  [data-parallax] { translate: none !important; }
  [data-meter] { transform: none !important; transition: none !important; }
  .navbar .nav-link::after { transition: none; }
}
@media print {
  [data-reveal], .wawlo-motion [data-reveal].reveal-ready,
  .wawlo-motion [data-reveal].reveal-ready:not(.is-visible) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  [data-parallax] { translate: none !important; }
  [data-meter] { transform: none !important; }
  .scroll-progress { display: none !important; }
}