/* Shared delays: add one alongside the desired effect in BeBuilder. */
.biomy-delay-100 { --biomy-animation-delay:100; }
.biomy-delay-200 { --biomy-animation-delay:200; }
.biomy-delay-300 { --biomy-animation-delay:300; }
.biomy-delay-500 { --biomy-animation-delay:500; }
.biomy-delay-1000 { --biomy-animation-delay:1000; }
.biomy-delay-1500 { --biomy-animation-delay:1500; }
.biomy-delay-2000 { --biomy-animation-delay:2000; }

.biomy-element.biomy-element--animations.biomy-reveal-down { --biomy-reveal-start:inset(0 0 100% 0); }
.biomy-element.biomy-element--animations.biomy-reveal-right { --biomy-reveal-start:inset(0 100% 0 0); }

/* Only the inner image is clipped; captions, borders and layout stay in place.
   Nothing is hidden until JS has installed the observer and recovery handlers. */
.biomy-element.biomy-element--animations .biomy-animations__image { clip-path:inset(0); }
.biomy-element.biomy-element--animations.biomy-animations--pending .biomy-animations__image { clip-path:var(--biomy-reveal-start,inset(0 0 100% 0)); }
.biomy-element.biomy-element--animations.biomy-animations--running .biomy-animations__image {
 transition:clip-path 1s cubic-bezier(.645,.045,.355,1);
}
@media (prefers-reduced-motion:reduce) {
 .biomy-element.biomy-element--animations.biomy-animations--pending .biomy-animations__image { clip-path:inset(0); }
 .biomy-element.biomy-element--animations.biomy-animations--running .biomy-animations__image { transition:none; }
}

/* A marked wrapper reveals its entire content, then gives up the clipping mask. */
.biomy-element.biomy-element--animations.biomy-animations--reveal-pending { clip-path:var(--biomy-reveal-start,inset(0 0 100% 0)); }
.biomy-element.biomy-element--animations.biomy-animations--reveal-running {
 clip-path:inset(0); transition:clip-path 1s cubic-bezier(.645,.045,.355,1);
}
@media (prefers-reduced-motion:reduce) {
 .biomy-element.biomy-element--animations:is(.biomy-animations--reveal-pending,.biomy-animations--reveal-running) {
  clip-path:none; transition:none;
 }
}

/* Text and the heading's accent share a start time, but move independently. */
.biomy-element.biomy-element--product-ingredients .biomy-animations--ingredient-pending :is(.biomy-product-ingredients__name-text,.biomy-product-ingredients__description) {
 opacity:0; transform:translateY(24px);
}
.biomy-element.biomy-element--product-ingredients .biomy-animations--ingredient-running :is(.biomy-product-ingredients__name-text,.biomy-product-ingredients__description) {
 opacity:1; transform:translateY(0); transition:opacity 700ms cubic-bezier(.22,1,.36,1),transform 700ms cubic-bezier(.22,1,.36,1);
}
.biomy-element.biomy-element--product-ingredients:not(.biomy-product-ingredients--bundle) .biomy-animations--ingredient-pending .biomy-product-ingredients__name::before {
 opacity:0; transform:translateX(calc(-50% - 24px));
}
.biomy-element.biomy-element--product-ingredients:not(.biomy-product-ingredients--bundle) .biomy-animations--ingredient-running .biomy-product-ingredients__name::before {
 opacity:1; transform:translateX(-50%); transition:opacity 700ms cubic-bezier(.22,1,.36,1),transform 700ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce) {
 .biomy-element.biomy-element--product-ingredients :is(.biomy-animations--ingredient-pending,.biomy-animations--ingredient-running) :is(.biomy-product-ingredients__name-text,.biomy-product-ingredients__description) {
  opacity:1; transform:none; transition:none;
 }
 .biomy-element.biomy-element--product-ingredients:not(.biomy-product-ingredients--bundle) :is(.biomy-animations--ingredient-pending,.biomy-animations--ingredient-running) .biomy-product-ingredients__name::before {
  opacity:1; transform:translateX(-50%); transition:none;
 }
}

/* Individual translate preserves the element's existing transform (e.g. a rotated title). */
.biomy-element.biomy-element--animations.biomy-fade-up.biomy-animations--fade-pending {
 opacity:0; translate:0 24px;
}
.biomy-element.biomy-element--animations.biomy-fade-up.biomy-animations--fade-running {
 opacity:1; translate:0 0;
 transition:opacity 700ms cubic-bezier(.22,1,.36,1),translate 700ms cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce) {
 .biomy-element.biomy-element--animations.biomy-fade-up:is(.biomy-animations--fade-pending,.biomy-animations--fade-running) {
  opacity:1; translate:none; transition:none;
 }
}