/* The @view-transition opt-in and its duration are emitted by Layout
   (config()->views->layout->transition), so they can vary per page. */

/* Hide data-gsap content until Anim.init() takes over (avoids a flash of visible content).
   The gsap-pending class (added by gsap-helpers.js, removed by Anim.init or a failsafe
   timeout) keeps a script failure or missing JS from leaving content hidden.
   Anim.init marks targets ready synchronously; a target holding the element shared with
   the previous page is then simply left visible, so the shared element can morph. */
@media (prefers-reduced-motion: no-preference) {

    html.gsap-pending [data-gsap]:not([data-gsap-ready]):not([data-gsap-stagger]),
    html.gsap-pending [data-gsap][data-gsap-stagger]:not([data-gsap-ready])>:not([data-instance]),
    html.gsap-pending [data-gsap][data-gsap-stagger]:not([data-gsap-ready])>[data-instance]>:first-child {
        opacity: 0;
    }
}

/* Respect the OS-level "reduce motion" preference: collapse GSAP-driven
   inline animations and native view-transitions down to near-instant. */
@media (prefers-reduced-motion: reduce) {

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* Sliding underline used by tabbed content (e.g. ProductPage's
   description/ingredients tabs). GSAP animates transform/width on
   .tab-underline; this just establishes the positioning context. */
.tab-underline-track {
    position: relative;
}

.tab-underline {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--color-accent);
    pointer-events: none;
}