/* Loud! OOH — site-wide smooth scroll, reveals, and parallax */

:root {
  --lo-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --lo-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}

/* Scroll reveals (works with existing .reveal / .is-in patterns) */
.lo-scroll-reveal,
.reveal:not(.is-in):not(.is-revealed):not(.lo-revealed) {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.72s var(--lo-ease-out),
    transform 0.72s var(--lo-ease-out);
  transition-delay: var(--lo-reveal-delay, 0ms);
}

.lo-scroll-reveal.lo-revealed,
.lo-scroll-reveal.is-in,
.reveal.is-in,
.reveal.is-revealed,
.reveal.lo-revealed {
  opacity: 1;
  transform: none;
}

/* Parallax targets */
[data-lo-parallax],
.lo-mz-carousel,
.bl-lab-landing-stage img,
.lo-diff-visual img {
  backface-visibility: hidden;
}

.lo-mz-copy[data-lo-parallax] {
  will-change: transform;
}

/* Header layout — CTA styling lives in site-chrome.css */
.lo-amenu-row {
  min-width: 0;
}

.lo-amenu-links {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: clamp(0.75rem, 2vw, 2rem) !important;
  margin-right: 0.5rem !important;
}

/* Hero text link — underline matches text width */
.lo-mz-link {
  display: inline-block !important;
  width: fit-content !important;
  min-height: auto !important;
  padding: 10px 2px 3px !important;
  line-height: 1.3;
  vertical-align: middle;
}

/* Budget Lab landing — gentle entrance */
body.bl-lab-asleep .bl-lab-landing-copy > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.7s var(--lo-ease-out),
    transform 0.7s var(--lo-ease-out);
}

body.bl-lab-asleep.lo-landing-ready .bl-lab-landing-copy > * {
  opacity: 1;
  transform: none;
}

body.bl-lab-asleep.lo-landing-ready .bl-lab-landing-head { transition-delay: 0.05s; }
body.bl-lab-asleep.lo-landing-ready .bl-lab-landing-lead { transition-delay: 0.12s; }
body.bl-lab-asleep.lo-landing-ready .bl-lab-landing-checks { transition-delay: 0.2s; }
body.bl-lab-asleep.lo-landing-ready .bl-lab-landing-cta { transition-delay: 0.28s; }
body.bl-lab-asleep.lo-landing-ready .bl-lab-landing-note { transition-delay: 0.34s; }

body.bl-lab-asleep .bl-lab-landing-preview {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
  transition:
    opacity 0.85s var(--lo-ease-out),
    transform 0.85s var(--lo-ease-out);
  transition-delay: 0.18s;
}

body.bl-lab-asleep.lo-landing-ready .bl-lab-landing-preview {
  opacity: 1;
  transform: none;
}

@media (max-width: 1280px) {
  .lo-amenu-link {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 12px !important;
  }

  .lo-amenu-cta {
    font-size: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (min-width: 1101px) and (max-width: 1240px) {
  .lo-amenu-links {
    margin-left: clamp(0.5rem, 1.5vw, 1.25rem) !important;
  }

  .lo-amenu-link {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 11px !important;
  }

  .lo-amenu-cta {
    font-size: 11px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .lo-scroll-reveal,
  .reveal,
  body.bl-lab-asleep .bl-lab-landing-copy > *,
  body.bl-lab-asleep .bl-lab-landing-preview {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-lo-parallax],
  .lo-mz-carousel,
  .bl-lab-landing-stage img,
  .lo-diff-visual img,
  .lo-mz-copy[data-lo-parallax] {
    transform: none !important;
    will-change: auto;
  }
}