/**
 * Albi Mall — homepage cinematic layer (scroll-build + epic styling).
 */

:root {
  --albi-cin-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --albi-build-progress: 0;
}

/* Hero section: stay inside Elementor column (no 100vw breakout) */
.e-con:has(> .e-con-inner > .elementor-widget-albi_home_hero),
.e-con:has(> .elementor-widget-albi_home_hero),
.elementor-section:has(.elementor-widget-albi_home_hero) {
  padding-block-start: 0 !important;
  --padding-top: 0px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent horizontal scroll from full-bleed sections (shell rule is primary) */
body.albi-site-shell-active:has(.albi-home-hero),
body.albi-crm-site-styled:has(.albi-home-hero) {
  overflow-x: clip;
}

/* Do not also clip html — that fights mobile document height with fixed header. */

/* Scroll progress line (top of viewport) */
.albi-cinematic-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  width: 100%;
  max-width: 100%;
  height: 3px;
  pointer-events: none;
  background: color-mix(in srgb, var(--albi-text-color, #212121) 6%, transparent);
}

.albi-cinematic-progress__bar {
  display: block;
  height: 100%;
  width: calc(var(--albi-scroll-pct, 0) * 100%);
  background: linear-gradient(
    90deg,
    var(--albi-primary-color, #ed1c24),
    var(--albi-secondary-color, #faa61a)
  );
  transform-origin: left center;
  transition: width 0.12s linear;
}

/* Section shell */
.albi-cinematic-section {
  --albi-build-progress: 0;
  position: relative;
  isolation: isolate;
}

.albi-cinematic-section::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  opacity: calc(var(--albi-build-progress, 0) * 0.06);
  background: radial-gradient(
    ellipse 80% 60% at 50% 100%,
    color-mix(in srgb, var(--albi-primary-color, #ed1c24) 18%, transparent),
    transparent 70%
  );
  pointer-events: none;
}

.albi-cinematic-section .elementor-widget-container,
.albi-cinematic-section__inner {
  position: relative;
  z-index: 1;
}

/* Scroll-build blocks — subtle motion, always readable */
.albi-cinematic-build {
  --albi-build-progress: 0;
  --albi-build-delay: calc(var(--albi-build-index, 0) * 0.08);
  opacity: calc(0.92 + var(--albi-build-progress, 0) * 0.08);
  transform:
    translate3d(0, calc((1 - var(--albi-build-progress, 0)) * clamp(0.75rem, 2vw, 1.75rem)), 0)
    scale(calc(0.98 + var(--albi-build-progress, 0) * 0.02));
  filter: none;
  transition:
    opacity 0.1s linear,
    transform 0.1s linear,
    filter 0.15s linear;
  will-change: transform, opacity, filter;
}

.albi-cinematic-build.is-built,
.albi-cinematic-section.is-built .albi-cinematic-build {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .albi-cinematic-progress {
    display: none;
  }

  .albi-cinematic-build {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* —— Hero ——
   Ken-burns must NOT target __video-el: that element centers via
   translate(-50%,-50%). Overwriting transform leaves #111 gaps (black bar).
   Scale the media wrappers instead. */
.elementor-widget-albi_home_hero .albi-home-hero__bg,
.elementor-widget-albi_home_hero .albi-home-hero__video {
  transform: scale(1.06);
  transform-origin: center center;
  transition: transform 8s var(--albi-cin-ease);
  will-change: transform;
}

.elementor-widget-albi_home_hero .swiper-slide-active .albi-home-hero__bg,
.elementor-widget-albi_home_hero .swiper-slide-active .albi-home-hero__video {
  transform: scale(1);
}

.elementor-widget-albi_home_hero .albi-home-hero__video-el {
  transform: translate(-50%, -50%) !important;
}

.elementor-widget-albi_home_hero.albi-cinematic-section {
  margin-bottom: 0;
}

.elementor-widget-albi_home_hero .albi-home-hero__overlay {
  background: linear-gradient(
    105deg,
    color-mix(in srgb, #000 72%, transparent) 0%,
    color-mix(in srgb, #000 35%, transparent) 42%,
    transparent 72%
  ) !important;
}

.elementor-widget-albi_home_hero .albi-hw__btn--solid {
  background: var(--albi-primary-color, #ed1c24) !important;
  border: 1px solid var(--albi-primary-color, #ed1c24) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 0.85rem 1.75rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.elementor-widget-albi_home_hero .albi-hw__btn--solid:hover {
  opacity: 1 !important;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Split feature, brands, services layout → see home-landing-fixes.css */

.elementor-widget-albi_brands_showcase.albi-cinematic-section {
  background: #fff;
  color: var(--albi-text-color, #212121);
}

.elementor-widget-albi_brands_showcase .albi-brands {
  max-width: var(--albi-home-section-max, 1200px);
  margin-inline: auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.elementor-widget-albi_brands_showcase .albi-brands__track {
  overflow: hidden !important;
  padding-bottom: 0.25rem;
}

.elementor-widget-albi_brands_showcase .albi-brands .swiper.albi-hw-swiper {
  overflow: hidden !important;
}

.elementor-widget-albi_brands_showcase .albi-hw__title {
  font-size: clamp(1.75rem, 4.5vw, 3.25rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.12 !important;
  max-width: none;
  text-align: center;
}

.elementor-widget-albi_brands_showcase .albi-hw__cta {
  background: var(--albi-primary-color, #ed1c24) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.5rem !important;
}

.elementor-widget-albi_brands_showcase .albi-brands .albi-hw__nav .swiper-button-next,
.elementor-widget-albi_brands_showcase .albi-brands__nav .swiper-button-next {
  background: #fff !important;
  border: 1px solid #111 !important;
  color: #111 !important;
}

.elementor-widget-albi_brands_showcase .albi-brands .albi-hw__nav .swiper-button-prev,
.elementor-widget-albi_brands_showcase .albi-brands__nav .swiper-button-prev {
  color: #111 !important;
  border: 1px solid color-mix(in srgb, #111 35%, transparent) !important;
  background: transparent !important;
}

.elementor-widget-albi_brands_showcase .albi-brands__card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.45s var(--albi-cin-ease) !important;
}

.elementor-widget-albi_brands_showcase .albi-brands__card:hover {
  transform: translateY(-6px) !important;
  box-shadow: none !important;
}

.elementor-widget-albi_brands_showcase.albi-cinematic-section::after {
  display: none;
}

.elementor-widget-albi_brands_showcase .albi-hw__title,
.elementor-widget-albi_brands_showcase .albi-hw__eyebrow,
.elementor-widget-albi_brands_showcase .albi-hw__subtitle {
  color: var(--albi-text-color, #212121) !important;
}

.elementor-widget-albi_brands_showcase .albi-parallax-type__bg {
  display: none !important;
}

.elementor-widget-albi_brands_showcase .albi-hw__cta,
.elementor-widget-albi_brands_showcase .albi-brands__cta {
  background: var(--albi-primary-color, #ed1c24) !important;
  border: none !important;
  color: #fff !important;
}

/* —— Offers / news —— */
.elementor-widget-albi_offers_events.albi-cinematic-section,
.elementor-widget-albi_news_grid.albi-cinematic-section {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}

.elementor-widget-albi_offers_events .albi-offers,
.elementor-widget-albi_news_grid .albi-news,
.elementor-widget-albi_services_carousel .albi-svc-car {
  max-width: 100%;
  margin-inline: auto;
}

.elementor-widget-albi_offers_events .albi-offers__featured .albi-offers__img img {
  transition: transform 1.4s var(--albi-cin-ease), filter 0.5s;
}

.elementor-widget-albi_offers_events.is-built .albi-offers__featured:hover .albi-offers__img img {
  transform: scale(1.06);
}

.elementor-widget-albi_news_grid .albi-news__card {
  transition: transform 0.5s var(--albi-cin-ease), box-shadow 0.5s;
}

.elementor-widget-albi_news_grid .albi-news__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--albi-text-color, #212121) 12%, transparent);
}

/* —— Services carousel — dark band —— */
.elementor-widget-albi_services_carousel.albi-cinematic-section {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-block: clamp(3rem, 7vw, 5rem);
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
  background: color-mix(in srgb, var(--albi-text-color, #212121) 94%, #000);
  color: #fff;
}

.elementor-widget-albi_services_carousel .albi-hw__title,
.elementor-widget-albi_services_carousel .albi-hw__eyebrow,
.elementor-widget-albi_services_carousel .albi-hw__subtitle {
  color: #fff !important;
}

.elementor-widget-albi_services_carousel .albi-hw__cta {
  background: var(--albi-primary-color, #ed1c24) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.elementor-widget-albi_services_carousel .albi-svc-car__card {
  transition: transform 0.55s var(--albi-cin-ease), box-shadow 0.55s;
}

.elementor-widget-albi_services_carousel .albi-svc-car__slide:hover .albi-svc-car__card {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

/* —— Promo / shops carousel —— */
.elementor-widget-albi_promo_hero.albi-cinematic-section,
.elementor-widget-albi_shops_carousel.albi-cinematic-section {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* —— Home chapter widget —— */
.albi-home-chapter {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
  overflow: hidden;
}

.albi-home-chapter--dark {
  background: color-mix(in srgb, var(--albi-text-color, #212121) 94%, #000);
  color: #fff;
}

.albi-home-chapter--light {
  background: var(--albi-background-color, #fff);
}

.albi-home-chapter__bg-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(4rem, 18vw, 14rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 6%, transparent);
  white-space: nowrap;
  pointer-events: none;
  transform: translate3d(0, calc((1 - var(--albi-build-progress, 0)) * 2rem), 0);
}

.albi-home-chapter__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
}

.albi-home-chapter__num {
  display: block;
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--albi-primary-color, #ed1c24);
  margin-bottom: 0.35rem;
}

.albi-home-chapter--dark .albi-home-chapter__num {
  color: var(--albi-secondary-color, #faa61a);
}

.albi-home-chapter__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
}

.albi-home-chapter__title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.albi-home-chapter__line {
  display: block;
  width: calc(var(--albi-build-progress, 0) * 100%);
  max-width: 120px;
  height: 3px;
  margin: 1.25rem auto 0;
  background: linear-gradient(
    90deg,
    var(--albi-primary-color, #ed1c24),
    var(--albi-secondary-color, #faa61a)
  );
  transition: width 0.15s linear;
}

/* —— Home marquee (Ticker Teksti) —— */
.albi-home-marquee {
  --albi-marquee-duration: 32s;
  position: relative;
}

.albi-home-marquee--light {
  background: var(--albi-background-color, #fff);
  border-block-color: color-mix(in srgb, var(--albi-text-color, #212121) 10%, transparent);
}

.albi-home-marquee--dark {
  background: color-mix(in srgb, var(--albi-text-color, #212121) 92%, #000);
  border-block-color: rgba(255, 255, 255, 0.08);
}

.albi-home-marquee--dark .albi-marquee__track span {
  color: rgba(255, 255, 255, 0.55);
}

.albi-home-marquee--accent {
  background: var(--albi-primary-color, #ed1c24);
  border-block: none;
}

.albi-home-marquee--accent .albi-marquee__track span {
  color: rgba(255, 255, 255, 0.92);
}

.albi-home-marquee__sep {
  flex: 0 0 auto;
  padding-inline: 0.35rem;
  font-size: 0.55em;
  opacity: 0.45;
  color: inherit;
}

.elementor-widget-albi_home_marquee.albi-cinematic-section {
  padding-block: 0;
}

/* —— Fash accent (vertical label + dot grid) —— */
.elementor-widget-albi_split_feature .albi-split-feature[data-albi-accent]::before {
  content: attr(data-albi-accent);
  position: absolute;
  top: clamp(1rem, 4vw, 2.5rem);
  right: clamp(0.25rem, 2vw, 1rem);
  z-index: 0;
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.85;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: color-mix(in srgb, var(--albi-text-color, #212121) 5%, transparent);
  pointer-events: none;
  user-select: none;
}

.elementor-widget-albi_split_feature .albi-split-feature--img-left[data-albi-accent]::before {
  right: auto;
  left: clamp(0.25rem, 2vw, 1rem);
}

.elementor-widget-albi_split_feature .albi-split-feature__card {
  position: relative;
  z-index: 1;
}

.elementor-widget-albi_split_feature .albi-split-feature__media::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background-image: radial-gradient(
    circle at 1px 1px,
    color-mix(in srgb, var(--albi-text-color, #212121) 12%, transparent) 1px,
    transparent 0
  );
  background-size: 22px 22px;
  opacity: calc(0.35 + var(--albi-build-progress, 0) * 0.35);
  pointer-events: none;
}

.elementor-widget-albi_split_feature .albi-split-feature__media {
  position: relative;
}

.elementor-widget-albi_home_chapter {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.elementor-widget-albi_home_chapter .albi-home-chapter {
  border-radius: 0;
}

@media (max-width: 767px) {
  .elementor-widget-albi_split_feature .albi-split-feature[data-albi-accent]::before {
    display: none;
  }

  .elementor-widget-albi_split_feature .albi-split-feature__card {
    padding: clamp(1.25rem, 5vw, 1.75rem);
  }

  .elementor-widget-albi_split_feature .albi-split-feature__media {
    order: -1;
  }

  .elementor-widget-albi_split_feature .albi-split-feature__media img,
  .elementor-widget-albi_split_feature .albi-split-feature__img {
    min-height: clamp(200px, 52vw, 280px);
  }

  .elementor-widget-albi_home_hero .albi-home-hero--bg-full,
  .elementor-widget-albi_home_hero .albi-home-hero--bg-boxed {
    min-height: 0 !important;
  }

  .albi-cinematic-build {
    filter: none;
  }

  .albi-cinematic-build.is-built,
  .albi-cinematic-section.is-built .albi-cinematic-build {
    filter: none;
  }
}