/* ============================================================
   LUREON BIO LABS — motion layer
   Load AFTER brand/lureon.css. Paired with brand/lureon-motion.js.
   Principles: transform+opacity only, 150-450ms, ease-out,
   prefers-reduced-motion guard at the bottom of this file.
   ============================================================ */

/* ---- 1) Scroll reveal (classes are added by JS; no-JS = fully visible) ---- */
.lur-reveal{opacity:0;transform:translateY(18px)}
.lur-reveal.lur-in{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1)}

/* ---- 2) Sticky header (announcement bar lives INSIDE the header, so it sticks with it) ---- */
header.elementor-location-header{position:sticky;top:0;z-index:990;background:#FCF5EB;transition:box-shadow .25s ease}
header.elementor-location-header.lur-scrolled{box-shadow:0 4px 18px rgba(15,21,36,.10)}
img[data-lureon-logo]{transition:max-height .25s ease}
header.elementor-location-header.lur-scrolled img[data-lureon-logo]{max-height:38px!important}

/* ---- 3) Reviews carousel (home, widget .elementor-element-73658d6) — premium multi-card.
        JS side (lureon-motion.js initCarousels): 1 / 2 / 3 slides per view, loop+autoplay.
        ARROWS: paired 40px circles at the TOP-RIGHT of the widget. Outside-the-card-edge
        placement was rejected: the widget's parent card (.elementor-element-30d0ee0) is
        flanked by two 30%-wide vial-render containers on desktop, so arrows pushed past
        the card edges would land on those images (and overflow the viewport on tablet).
        The widget's own padding-top reserves a 56px band so the pair can never overlap
        slide text. Geometry/colors go through Elementor's --e-n-carousel-* var system
        (widget-nested-carousel.min.css) instead of fighting its (0,4,0) position rules. ---- */
.elementor-element-73658d6.elementor-widget-n-carousel{
  padding-top:56px; /* arrow band: 40px buttons + 16px clearance above the cards */
  --e-n-carousel-arrow-size:16px;
  --e-n-carousel-arrow-normal-color:#0F1524;   /* navy chevron */
  --e-n-carousel-arrow-hover-color:#FCF5EB;    /* cream chevron on navy hover */
  --e-n-carousel-arrow-normal-border-type:solid;
  --e-n-carousel-arrow-hover-border-type:solid;
  --e-n-carousel-arrow-prev-top-align:0%;--e-n-carousel-arrow-prev-top-position:0px;
  --e-n-carousel-arrow-prev-caption-spacing:0px;--e-n-carousel-arrow-prev-translate-y:0px;
  --e-n-carousel-arrow-prev-left-align:100%;--e-n-carousel-arrow-prev-left-position:-88px; /* 40 + 8 gap + 40 */
  --e-n-carousel-arrow-prev-translate-x:0px;
  --e-n-carousel-arrow-next-top-align:0%;--e-n-carousel-arrow-next-top-position:0px;
  --e-n-carousel-arrow-next-caption-spacing:0px;--e-n-carousel-arrow-next-translate-y:0px;
  --e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-right-position:0px;
  --e-n-carousel-arrow-next-translate-x:0px;
  /* dots: 8px bullets sitting 16px below the cards (size + spacing = swiper padding-bottom) */
  --e-n-carousel-swiper-pagination-size:8px;
  --e-n-carousel-swiper-pagination-spacing:16px;
  --e-n-carousel-dots-normal-color:rgba(15,21,36,.25);
  --e-n-carousel-dots-hover-color:#0F1524;
  --e-n-carousel-dots-horizontal-position:50%;
  --e-n-carousel-dots-horizontal-transform:-50%;
  --e-n-carousel-dots-horizontal-offset:0px;
}
.elementor-element-73658d6 .elementor-swiper-button-prev,
.elementor-element-73658d6 .elementor-swiper-button-next{
  width:40px;height:40px;box-sizing:border-box;border-radius:50%;
  align-items:center;justify-content:center;
  background:#FCF5EB;border:1px solid rgba(15,21,36,.25);
  transition:background-color .2s ease,border-color .2s ease;
}
.elementor-element-73658d6 .elementor-swiper-button-prev:hover,
.elementor-element-73658d6 .elementor-swiper-button-next:hover,
.elementor-element-73658d6 .elementor-swiper-button-prev:focus-visible,
.elementor-element-73658d6 .elementor-swiper-button-next:focus-visible{
  background:#0F1524;border-color:#0F1524;
}
.elementor-element-73658d6 .elementor-swiper-button-prev svg,
.elementor-element-73658d6 .elementor-swiper-button-next svg{transition:fill .2s ease}
/* the empty prev button gets the next chevron cloned in by lureon-motion.js; mirror it */
.elementor-element-73658d6 .elementor-swiper-button-prev svg{transform:scaleX(-1)}
/* dots (widget-nested-carousel.min.css would otherwise paint active = normal) */
.elementor-element-73658d6 .swiper-pagination-bullet{width:8px;height:8px;background:rgba(15,21,36,.25);opacity:1;transition:background-color .2s ease}
.elementor-element-73658d6 .swiper-pagination-bullet:hover,
.elementor-element-73658d6 .swiper-pagination-bullet-active{background:#0F1524}
/* equal-height cards, consistent padding; divider + byline pin to the bottom edge */
.elementor-element-73658d6 .swiper-wrapper{align-items:stretch}
.elementor-element-73658d6 .swiper-slide{height:auto}
.elementor-element-73658d6 .swiper-slide>.e-con{height:100%}
.elementor-element-73658d6 .swiper-slide .e-con-inner>.e-con{flex-grow:1;padding:20px 20px 22px}
.elementor-element-73658d6 .swiper-slide .elementor-widget-divider{margin-top:auto}
/* one star row per card renders (rating widget overlays marked over unmarked) — but slide 1
   shipped #B19056 gold-tan and slides 2-8 Elementor's default gold #f0ad4e: normalize to navy */
.elementor-element-73658d6 .elementor-widget-rating{--e-rating-icon-marked-color:#0F1524;--e-rating-icon-color:rgba(15,21,36,.2)}
/* the reviews card container is only 50% of the row on desktop (vial renders flank it);
   let it take the row so the 3-up cards have room — flex-shrink rebalances the flanks
   to ~262px each and the carousel to ~875px at 1440. ≤1024 is already 100% (post-18.css). */
@media (min-width:1025px){
  /* reviews row: hide the two flanking vial-trio renders (repeated asset,
     audit #38) and give the carousel the full 1160px row so 3-up cards are
     ~360px wide instead of ~185px */
  .elementor-element-da72740,
  .elementor-element-2232519,
  .elementor-element-6a4fb4d{display:none!important}
  .elementor-element-30d0ee0{width:100%!important;max-width:1160px!important;margin-left:auto!important;margin-right:auto!important}
  .elementor-element-30d0ee0 .elementor-widget-n-carousel{width:100%!important}
}

/* ---- 4) FAQ / affiliate accordion (JS animates the .e-con height; CSS owns the chevron).
        Always show the .e-closed chevron and rotate it instead of hard-swapping icons. ---- */
.e-n-accordion-item .e-n-accordion-item-title-icon .e-opened{display:none!important}
.e-n-accordion-item .e-n-accordion-item-title-icon .e-closed{display:flex!important;transition:transform .25s ease}
.e-n-accordion-item[open]>.e-n-accordion-item-title .e-n-accordion-item-title-icon .e-closed{transform:rotate(180deg)}

/* ---- 6) Product cards (.pp-card) — div.pp-card out-specifies the page's inline .pp-card{transition:all .3s} ---- */
div.pp-card{transition:transform .25s cubic-bezier(.2,.6,.3,1),box-shadow .25s ease,border-color .25s ease}
div.pp-card:hover{transform:translateY(-4px)}
div.pp-card:active{transform:translateY(-1px);transition-duration:.12s}
div.pp-card:focus-within{box-shadow:0 8px 24px rgba(15,21,36,.12);border-color:#0F1524}

/* ---- 7) Buttons: press state, hover lift, arrow-icon nudge ---- */
.elementor-button,.single_add_to_cart_button,.vp-btn--cart{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .15s cubic-bezier(.2,.6,.3,1)}
.elementor-button:hover,.single_add_to_cart_button:hover,.vp-btn--cart:hover{box-shadow:0 6px 16px rgba(15,21,36,.18)}
.elementor-button:active,.single_add_to_cart_button:active,.vp-btn--cart:active,#lur-add:active{transform:scale(.97);transition-duration:.12s}
.elementor-button .elementor-button-icon svg{transition:transform .25s ease}
.elementor-button:hover .elementor-button-icon svg{transform:translateX(4px)}
/* Injected PDP buy button (#lur-add is styled inline by lureon-shop.js -> !important needed for hover bg) */
#lur-add{transition:background-color .2s ease,box-shadow .2s ease,transform .15s ease}
#lur-add:hover{background:#22304F!important;box-shadow:0 6px 16px rgba(15,21,36,.25)}

/* ---- 8) COA cards (Elementor lightbox already works; add affordance + lift) ---- */
a[data-elementor-open-lightbox] img{transition:transform .3s ease,box-shadow .3s ease;cursor:zoom-in}
a[data-elementor-open-lightbox]:hover img{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,21,36,.16)}

/* ---- 9) Hero ken-burns (home hero image widget .elementor-element-366fc4b) ---- */
@keyframes lur-kb{from{transform:scale(1)}to{transform:scale(1.05)}}
.elementor-element-366fc4b{overflow:hidden}
.elementor-element-366fc4b img{animation:lur-kb 18s cubic-bezier(.45,.05,.55,.95) infinite alternate}

/* ---- 10) Misc: shop dropdowns, footer, desktop nav underline ---- */
/* .pp-dropdown keeps its .active JS contract; display:none -> visibility fade (display needs !important
   because the page's own <style> block comes later in source order) */
.pp-dropdown{display:block!important;opacity:0;visibility:hidden;transform:translateY(-6px);transform-origin:top center;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.pp-dropdown.active{opacity:1;visibility:visible;transform:none}
.elementor-location-footer a{transition:color .2s ease}
.elementor-location-footer .elementor-social-icon{transition:transform .2s ease,border-color .2s ease}
.elementor-location-footer .elementor-social-icon:hover{transform:translateY(-3px)}
/* underline-grow on desktop menu items (scaleX, not width, so no layout work) */
.elementor-nav-menu--main .elementor-item{position:relative}
.elementor-nav-menu--main .elementor-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#0F1524;transform:scaleX(0);transform-origin:left center;transition:transform .25s cubic-bezier(.2,.6,.3,1)}
.elementor-nav-menu--main .elementor-item:hover::after,.elementor-nav-menu--main .elementor-item.elementor-item-active::after{transform:scaleX(1)}

/* ---- 11) SHARED CONTRACT — consumed by lureon-shop.js / lureon.js. Do not rename. ---- */
@keyframes lur-bump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.lur-bump{animation:lur-bump .3s cubic-bezier(.3,1.4,.5,1)}
#lur-mnav{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
#lur-mnav.lur-open{opacity:1;visibility:visible}
#lur-mnav a{opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;transition-delay:calc(var(--i,0)*45ms)}
#lur-mnav.lur-open a{opacity:1;transform:none}
#lur-mnav-x{transition:transform .2s ease}
#lur-mnav-x:hover{transform:rotate(90deg)}

/* Printing: never print half-revealed content */
@media print{
  .lur-reveal,.lur-reveal.lur-in{opacity:1!important;transform:none!important}
}

/* ---- 12) Reduced motion: kill all lur-* motion, keep everything visible & functional.
        MUST stay the LAST block in this file. ---- */
@media (prefers-reduced-motion: reduce){
  [class*="lur-"],[id^="lur-"],
  div.pp-card,.pp-dropdown,
  .elementor-button,.single_add_to_cart_button,.vp-btn--cart,
  .elementor-button .elementor-button-icon svg,
  a[data-elementor-open-lightbox] img,
  .e-n-accordion-item .e-n-accordion-item-title-icon .e-closed,
  img[data-lureon-logo],header.elementor-location-header,
  .elementor-location-footer a,.elementor-location-footer .elementor-social-icon,
  .elementor-nav-menu--main .elementor-item::after{transition:none!important;animation:none!important}
  .lur-reveal,.lur-reveal.lur-in{opacity:1!important;transform:none!important;transition:none!important}
  .elementor-element-366fc4b img{animation:none!important}
  #lur-mnav a{opacity:1!important;transform:none!important}
  div.pp-card:hover,div.pp-card:active,
  .elementor-button:active,.single_add_to_cart_button:active,.vp-btn--cart:active,#lur-add:active,
  .elementor-button:hover .elementor-button-icon svg,
  a[data-elementor-open-lightbox]:hover img,
  .elementor-location-footer .elementor-social-icon:hover{transform:none!important}
}