/*
 * BERTA — animated mineral veins with internal light.
 * Keeps the original dark luxury body, preserves layout,
 * and adds a subtle moving glow inside the gold veins.
 */

.collections-section,
.editorial-section__content,
.products-section,
.newsletter-section,
.site-footer,
.generic-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.collections-section > .container,
.products-section > .container,
.newsletter-section > .container,
.newsletter-section__inner,
.site-footer > .container,
.editorial-section__inner,
.generic-content > .container,
.generic-entry__header,
.generic-entry__content {
  position: relative;
  z-index: 1;
}

.collections-section::before,
.editorial-section__content::before,
.products-section::before,
.newsletter-section::before,
.site-footer::before,
.generic-content::before,
.collections-section::after,
.editorial-section__content::after,
.products-section::after,
.newsletter-section::after,
.site-footer::after,
.generic-content::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Main static vein artwork: keep it refined, not over-bright. */
.collections-section::before,
.editorial-section__content::before,
.products-section::before,
.newsletter-section::before,
.site-footer::before,
.generic-content::before {
  inset: -4%;
  background-image: url('../../../luxe-landing-images/berta-mineral-veins-visible.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .34;
  filter: saturate(1.02) brightness(.98);
}

/* Moving inner light that only appears inside the veins. */
.collections-section::after,
.editorial-section__content::after,
.products-section::after,
.newsletter-section::after,
.site-footer::after,
.generic-content::after {
  inset: -8%;
  background-image:
    linear-gradient(112deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 34%,
      rgba(225, 193, 122, .00) 41%,
      rgba(225, 193, 122, .16) 45%,
      rgba(255, 243, 212, .36) 48%,
      rgba(255, 255, 255, .66) 50%,
      rgba(255, 241, 210, .34) 52%,
      rgba(225, 193, 122, .14) 55%,
      rgba(225, 193, 122, .00) 59%,
      rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 220% 220%;
  background-position: -35% 50%;
  opacity: .62;
  mix-blend-mode: screen;
  filter: blur(.7px) saturate(1.04) drop-shadow(0 0 6px rgba(225, 193, 122, .12));
  will-change: background-position, opacity, transform;
  -webkit-mask-image: url('../../../luxe-landing-images/berta-mineral-veins-visible.webp');
  mask-image: url('../../../luxe-landing-images/berta-mineral-veins-visible.webp');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  animation: bertaVeinLight 9.6s cubic-bezier(.42,0,.2,1) infinite;
}

/* Section tuning */
.collections-section::before { opacity: .36; background-position: 46% 50%; }
.collections-section::after  { opacity: .68; -webkit-mask-position: 54% 49%; mask-position: 54% 49%; }

.editorial-section__content::before { opacity: .23; background-position: 73% 49%; }
.editorial-section__content::after  { opacity: .46; -webkit-mask-position: 68% 49%; mask-position: 68% 49%; }

.products-section::before { opacity: .30; background-position: 58% 53%; }
.products-section::after  { opacity: .56; -webkit-mask-position: 61% 51%; mask-position: 61% 51%; }

.newsletter-section::before { opacity: .23; background-position: 35% 51%; }
.newsletter-section::after  { opacity: .40; -webkit-mask-position: 40% 52%; mask-position: 40% 52%; }

.site-footer::before { opacity: .18; background-position: 72% 48%; }
.site-footer::after  { opacity: .30; -webkit-mask-position: 65% 49%; mask-position: 65% 49%; }

.generic-content::before { opacity: .22; }
.generic-content::after  { opacity: .38; }

@keyframes bertaVeinLight {
  0% {
    background-position: -35% 48%;
    transform: translate3d(-0.35%, -0.08%, 0) scale(1.03);
    opacity: .16;
  }
  12% {
    opacity: .34;
  }
  38% {
    opacity: .62;
  }
  50% {
    background-position: 48% 50%;
    transform: translate3d(0%, 0.06%, 0) scale(1.035);
    opacity: .76;
  }
  64% {
    opacity: .48;
  }
  88% {
    opacity: .22;
  }
  100% {
    background-position: 132% 52%;
    transform: translate3d(0.35%, -0.05%, 0) scale(1.03);
    opacity: .16;
  }
}

@supports not ((-webkit-mask-image: url('x')) or (mask-image: url('x'))) {
  .collections-section::after,
  .editorial-section__content::after,
  .products-section::after,
  .newsletter-section::after,
  .site-footer::after,
  .generic-content::after {
    background-image: url('../../../luxe-landing-images/berta-mineral-veins-visible.webp');
    background-size: cover;
    background-position: center;
    opacity: .10;
    mix-blend-mode: normal;
    filter: saturate(1.03) brightness(1.08);
    animation: bertaVeinFallback 18s ease-in-out infinite alternate;
  }
}

@keyframes bertaVeinFallback {
  0% {
    transform: translate3d(-0.6%, -0.1%, 0) scale(1.03);
    opacity: .05;
  }
  50% {
    transform: translate3d(0.2%, 0.12%, 0) scale(1.035);
    opacity: .12;
  }
  100% {
    transform: translate3d(0.6%, -0.08%, 0) scale(1.03);
    opacity: .07;
  }
}

@media (max-width: 1024px) {
  .collections-section::before,
  .editorial-section__content::before,
  .products-section::before,
  .newsletter-section::before,
  .site-footer::before,
  .generic-content::before {
    opacity: .24;
  }

  .collections-section::after,
  .editorial-section__content::after,
  .products-section::after,
  .newsletter-section::after,
  .site-footer::after,
  .generic-content::after {
    opacity: .42;
    animation-duration: 11.5s;
  }
}

@media (max-width: 768px) {
  .collections-section::before,
  .editorial-section__content::before,
  .products-section::before,
  .newsletter-section::before,
  .site-footer::before,
  .generic-content::before {
    inset: -2%;
    opacity: .16;
    background-size: auto 118%;
  }

  .collections-section::after,
  .editorial-section__content::after,
  .products-section::after,
  .newsletter-section::after,
  .site-footer::after,
  .generic-content::after {
    inset: -4%;
    opacity: .24;
    animation-duration: 13s;
    filter: blur(.5px) saturate(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collections-section::after,
  .editorial-section__content::after,
  .products-section::after,
  .newsletter-section::after,
  .site-footer::after,
  .generic-content::after {
    animation: none;
    background-position: 48% 50%;
    opacity: .28;
  }
}