/* Scroll-in animations + brand button/accent presets (AlbiMall CRM widgets) */

@media (prefers-reduced-motion: reduce) {
  .albi-scroll-anim,
  .albi-scroll-anim-item {
    opacity: 1 !important;
    transform: none !important;
  }

  .albi-scroll-anim--stagger > *,
  .albi-scroll-anim--stagger .albi-scroll-anim-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Responsive motion tokens — admin values act as max; CSS scales down on smaller screens */
.albi-scroll-anim,
.albi-scroll-anim-item {
  --albi-anim-distance-max: 3.5rem;
  --albi-anim-duration-user: 780ms;
  --albi-anim-delay-user: 0ms;
  --albi-anim-distance: clamp(1.125rem, 4.5vw, var(--albi-anim-distance-max));
  --albi-anim-duration: var(--albi-anim-duration-user, 780ms);
  --albi-anim-delay: var(--albi-anim-delay-user);
  --albi-anim-stagger-step: clamp(38ms, 2.5vw, 72ms);
  --albi-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 639px) {
  .albi-scroll-anim,
  .albi-scroll-anim-item {
    --albi-anim-distance: clamp(1rem, 5vw, min(var(--albi-anim-distance-max), 2.25rem));
    --albi-anim-duration: min(var(--albi-anim-duration-user, 780ms), 680ms);
    --albi-anim-stagger-step: clamp(32ms, 3vw, 52ms);
  }
}

@media (min-width: 1600px) {
  .albi-scroll-anim,
  .albi-scroll-anim-item {
    --albi-anim-distance: clamp(1.5rem, 3vw, calc(var(--albi-anim-distance-max) * 1.12));
    --albi-anim-duration: var(--albi-anim-duration-user);
    --albi-anim-stagger-step: clamp(48ms, 1.5vw, 84ms);
  }
}

/* Whole-widget animation (heroes, single blocks) */
.albi-scroll-anim:not(.albi-scroll-anim--delegated) {
  opacity: 0;
  transform: translate3d(0, var(--albi-anim-distance), 0);
  transition:
    opacity var(--albi-anim-duration) var(--albi-anim-ease),
    transform var(--albi-anim-duration) var(--albi-anim-ease);
  transition-delay: var(--albi-anim-delay);
}

.albi-scroll-anim:not(.albi-scroll-anim--delegated).is-inview {
  opacity: 1;
  transform: none;
}

/* Delegated mode: wrapper stays visible; children animate on scroll */
.albi-scroll-anim--delegated {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.albi-scroll-anim-item {
  opacity: 0;
  transform: translate3d(0, var(--albi-anim-distance), 0);
  transition:
    opacity var(--albi-anim-duration) var(--albi-anim-ease),
    transform var(--albi-anim-duration) var(--albi-anim-ease);
  transition-delay: calc(var(--albi-anim-delay) + (var(--albi-anim-stagger-index, 0) * var(--albi-anim-stagger-step)));
}

.albi-scroll-anim-item.is-inview {
  opacity: 1;
  transform: none;
}

.albi-scroll-anim-item[hidden],
.albi-scroll-anim-item.albi-crm-item-hidden {
  opacity: 0 !important;
  transform: translate3d(0, var(--albi-anim-distance), 0) !important;
  transition: none !important;
}

/* Moving carousels — never hide slides/cards before scroll-in runs */
.albi-brands__track .albi-scroll-anim-item,
.albi-logo-ticker .albi-scroll-anim-item,
.albi-svc-car__track .albi-scroll-anim-item,
.albi-news__track .albi-scroll-anim-item,
.albi-shops-car__track .albi-scroll-anim-item {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Presets — widget + items */
.albi-scroll-anim--fade:not(.albi-scroll-anim--delegated),
.albi-scroll-anim--fade .albi-scroll-anim-item {
  transform: none;
}

.albi-scroll-anim--slide-left:not(.albi-scroll-anim--delegated),
.albi-scroll-anim--slide-left .albi-scroll-anim-item {
  transform: translate3d(calc(var(--albi-anim-distance) * -1), 0, 0);
}

.albi-scroll-anim--slide-right:not(.albi-scroll-anim--delegated),
.albi-scroll-anim--slide-right .albi-scroll-anim-item {
  transform: translate3d(var(--albi-anim-distance), 0, 0);
}

.albi-scroll-anim--zoom:not(.albi-scroll-anim--delegated),
.albi-scroll-anim--zoom .albi-scroll-anim-item {
  transform: scale(0.9);
}

.albi-scroll-anim--reveal:not(.albi-scroll-anim--delegated),
.albi-scroll-anim--reveal .albi-scroll-anim-item {
  transform: translate3d(0, var(--albi-anim-distance), 0) scale(0.94);
}

.albi-scroll-anim--rise:not(.albi-scroll-anim--delegated),
.albi-scroll-anim--rise .albi-scroll-anim-item {
  transform: translate3d(0, var(--albi-anim-distance), 0);
}

/* Legacy stagger on direct children (non-delegated widgets) */
.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated) > * {
  opacity: 0;
  transform: translate3d(0, calc(var(--albi-anim-distance) * 0.55), 0);
  transition:
    opacity var(--albi-anim-duration) var(--albi-anim-ease),
    transform var(--albi-anim-duration) var(--albi-anim-ease);
}

.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated).is-inview > * {
  opacity: 1;
  transform: none;
}

.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated).is-inview > *:nth-child(1) { transition-delay: calc(var(--albi-anim-delay) + 0ms); }
.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated).is-inview > *:nth-child(2) { transition-delay: calc(var(--albi-anim-delay) + var(--albi-anim-stagger-step)); }
.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated).is-inview > *:nth-child(3) { transition-delay: calc(var(--albi-anim-delay) + calc(var(--albi-anim-stagger-step) * 2)); }
.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated).is-inview > *:nth-child(4) { transition-delay: calc(var(--albi-anim-delay) + calc(var(--albi-anim-stagger-step) * 3)); }
.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated).is-inview > *:nth-child(5) { transition-delay: calc(var(--albi-anim-delay) + calc(var(--albi-anim-stagger-step) * 4)); }
.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated).is-inview > *:nth-child(6) { transition-delay: calc(var(--albi-anim-delay) + calc(var(--albi-anim-stagger-step) * 5)); }
.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated).is-inview > *:nth-child(7) { transition-delay: calc(var(--albi-anim-delay) + calc(var(--albi-anim-stagger-step) * 6)); }
.albi-scroll-anim--stagger:not(.albi-scroll-anim--delegated).is-inview > *:nth-child(8) { transition-delay: calc(var(--albi-anim-delay) + calc(var(--albi-anim-stagger-step) * 7)); }

@media (prefers-reduced-motion: reduce) {
  .albi-scroll-anim:not(.albi-scroll-anim--delegated),
  .albi-scroll-anim-item {
    transition: none;
  }
}

/* Brand button templates (from :root CSS vars) */
.albi-brand-btns--solid .albi-hw__btn,
.albi-brand-btns--solid a.albi-hw__cta,
.albi-brand-btns--solid .albi-gastro-button,
.albi-brand-btns--solid .albi-shop-button,
.albi-brand-btns--solid .albi-argetim-button,
.albi-brand-btns--solid .albi-read-more,
.albi-brand-btns--solid .albi-post-card__more {
  background-color: var(--albi-button-bg, #0073aa) !important;
  color: var(--albi-button-text, #fff) !important;
  border: var(--albi-button-border-width, 0) solid var(--albi-button-border-color, transparent) !important;
  border-radius: var(--albi-button-radius, 8px) !important;
  padding: var(--albi-button-padding-y, 10px) var(--albi-button-padding-x, 18px) !important;
  min-width: var(--albi-button-min-width, 0);
}

.albi-brand-btns--solid .albi-hw__btn:hover,
.albi-brand-btns--solid a.albi-hw__cta:hover,
.albi-brand-btns--solid .albi-gastro-button:hover,
.albi-brand-btns--solid .albi-shop-button:hover,
.albi-brand-btns--solid .albi-argetim-button:hover,
.albi-brand-btns--solid .albi-read-more:hover,
.albi-brand-btns--solid .albi-post-card__more:hover {
  background-color: var(--albi-button-hover-bg, #005a87) !important;
  color: var(--albi-button-hover-text, #fff) !important;
}

.albi-brand-btns--outline .albi-hw__btn,
.albi-brand-btns--outline a.albi-hw__cta,
.albi-brand-btns--outline .albi-gastro-button,
.albi-brand-btns--outline .albi-shop-button,
.albi-brand-btns--outline .albi-argetim-button,
.albi-brand-btns--outline .albi-read-more,
.albi-brand-btns--outline .albi-post-card__more {
  background-color: var(--albi-button-outline-bg, transparent) !important;
  color: var(--albi-button-outline-text, #0073aa) !important;
  border: var(--albi-button-outline-border-width, 1px) solid var(--albi-button-outline-border-color, #0073aa) !important;
  border-radius: var(--albi-button-radius, 8px) !important;
  padding: var(--albi-button-outline-padding-y, 10px) var(--albi-button-outline-padding-x, 18px) !important;
  min-width: var(--albi-button-outline-min-width, 0);
}

.albi-brand-btns--outline .albi-hw__btn:hover,
.albi-brand-btns--outline a.albi-hw__cta:hover,
.albi-brand-btns--outline .albi-gastro-button:hover,
.albi-brand-btns--outline .albi-shop-button:hover,
.albi-brand-btns--outline .albi-argetim-button:hover,
.albi-brand-btns--outline .albi-read-more:hover,
.albi-brand-btns--outline .albi-post-card__more:hover {
  background-color: var(--albi-button-outline-hover-bg, #0073aa) !important;
  color: var(--albi-button-outline-hover-text, #fff) !important;
}

.albi-brand-btns--ghost .albi-hw__btn,
.albi-brand-btns--ghost a.albi-hw__cta {
  background: transparent !important;
  border: 1px solid currentColor !important;
  color: var(--albi-button-outline-text, currentColor) !important;
}

/* Brand accent colors on titles / links */
.albi-brand-accent--primary .albi-hw__title,
.albi-brand-accent--primary .albi-hw__eyebrow { color: var(--albi-primary-color); }
.albi-brand-accent--primary .albi-hw a:not(.albi-hw__btn):not(.albi-hw__cta) { color: var(--albi-primary-color); }

.albi-brand-accent--secondary .albi-hw__title,
.albi-brand-accent--secondary .albi-hw__eyebrow { color: var(--albi-secondary-color); }
.albi-brand-accent--secondary .albi-hw a:not(.albi-hw__btn):not(.albi-hw__cta) { color: var(--albi-secondary-color); }

.albi-brand-accent--accent .albi-hw__title,
.albi-brand-accent--accent .albi-hw__eyebrow { color: var(--albi-accent-color); }
.albi-brand-accent--accent .albi-hw a:not(.albi-hw__btn):not(.albi-hw__cta) { color: var(--albi-accent-color); }

.albi-brand-accent--text .albi-hw__title,
.albi-brand-accent--text .albi-hw__eyebrow { color: var(--albi-text-color); }
.albi-brand-accent--text .albi-hw a:not(.albi-hw__btn):not(.albi-hw__cta) { color: var(--albi-link-color); }