/* ==========================================================================
   Butterfly Travel Pillow — motion styles
   Used with assets/motion.js (GSAP + Lenis). Load on every page that loads
   motion.js: the five HTML pages here, or site-wide for an Elementor build.
   ========================================================================== */

/* Lenis smooth scroll base rules (from lenis.css 1.3). They apply only
   while Lenis is running. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* Until motion.js has set its starting states (it adds .btp-ready to
   <html>), keep the content that will animate out of sight so it doesn't
   flash in and then vanish. The hero and product photos stay visible for a
   fast first paint, held at the scale their intro starts from (keep these in
   step with motion.js). If the scripts never load, the failsafe shows
   everything after 2.5s. Never applies inside the Elementor editor. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.btp-ready) body:not(.elementor-editor-active) :is(
    .btp .wrap, .btp .hero__inner,
    .btp-fade, .btp-lines,
    .btp-stagger > :not(.e-con-inner), .btp-stagger > .e-con-inner > *
  ) { visibility: hidden; animation: btp-failsafe 0s 2.5s forwards; }
  html:not(.btp-ready) .btp .gallery__main { visibility: visible; }
  html:not(.btp-ready) .btp .hero__bg { transform: scale(1.18); }
  html:not(.btp-ready) .btp .gallery__main img { transform: scale(1.06); }
  .btp .hero__bg, img[data-parallax], .btp-parallax img { will-change: transform; }
}
@keyframes btp-failsafe { to { visibility: visible; } }

/* Headings are split into lines that rise inside a clipping mask. The mask
   clips with a slightly oversized clip-path instead of overflow, so tight
   line-heights don't shave off descenders, and the layout doesn't change. */
.btp-line-mask { overflow: visible !important; clip-path: inset(-.12em -.1em); }

/* Sections that receive focus after a same-page link don't need a ring. */
.btp [tabindex="-1"]:focus { outline: none; }