/* 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;
}
/* The glide eases scroll itself. Native smooth scroll on top of that fights it and jumps. */
html.lo-glide {
  scroll-behavior: auto;
}

/* 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;
}

/* Photos drift inside a still frame. The frame itself never moves. */
.lo-px-frame {
  overflow: hidden;
}
/* Sticky stack cards must not be clipped by the photo frame rule. */
.lo-wwd,
.lo-wwd-stack {
  overflow: visible !important;
}
#home-banner .lo-mz-slide img,
.lob-case-media > img,
.lo-work-card img,
.lo-diff-visual img,
.lo-diff-vcard img,
.hero-stage-img,
.guide-list-media img,
.bl-lab-landing-stage img,
.related-grid img,
[data-lo-parallax] {
  scale: 1.14;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #home-banner .lo-mz-slide img,
  .lob-case-media > img,
  .lo-work-card img,
  .lo-diff-visual img,
  .lo-diff-vcard img,
  .hero-stage-img,
  .guide-list-media img,
  .bl-lab-landing-stage img,
  .related-grid img,
  [data-lo-parallax] {
    scale: 1;
    translate: none !important;
  }
}

.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;
  }
}