/* Eco Insulation — additions on top of the site's own compiled Tailwind CSS.
   Only behaviour the Next.js runtime used to provide, plus the video pause button. */

/* Scroll reveal. Hidden only once site.js has set .js on <html>; without JS
   everything stays visible. Values match the old framer-motion variants. */
.js [data-reveal="fade"] { opacity: 0; transform: translateY(16px); }
.js [data-reveal="item"] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .35s ease-out, transform .35s ease-out;
}
.js [data-reveal="item"].is-in { transition-duration: .32s; }

/* Sticky mobile call bar: starts below the viewport, slides up past 520px. */
[data-sticky-bar] { transform: translateY(110%); transition: transform .3s ease-out; }
[data-sticky-bar].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal].is-in, [data-sticky-bar] { transition: none; }
}

/* Background-video pause/play (WCAG 2.2.2). Small, low-contrast-until-hover so
   the hero looks as it did; still a 44px target with a visible focus ring. */
.video-toggle {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 9999px; border: 0;
  background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer;
  opacity: .75; transition: opacity .2s, background-color .2s;
}
.video-toggle:hover, .video-toggle:focus-visible { opacity: 1; background: rgba(0, 0, 0, .7); }
.video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.video-toggle svg { width: 18px; height: 18px; }
.video-toggle[hidden] { display: none; }

/* Footer social links (rendered only when build.py has SOCIAL entries). */
.social-links { display: flex; gap: .75rem; margin-top: 1rem; }
.social-links a { color: rgba(255, 255, 255, .7); }
.social-links a:hover { color: #fff; }