/*
 * Decorative-only layer for the home "offer" banner (data-coffee-aroma-banner).
 * Purely additive: does not change .banner/.banner__content/.banner__deco layout,
 * typography or colors defined in banner.css.
 */

.banner-aroma {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.banner-aroma__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.banner-aroma__blob {
  opacity: 0.16;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.banner-aroma__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 90vw);
  height: min(900px, 90vw);
  margin-top: calc(min(900px, 90vw) / -2);
  margin-left: calc(min(900px, 90vw) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-bg-rgb), 0.09) 0%, rgba(var(--color-bg-rgb), 0) 68%);
  opacity: 0;
  transition: opacity 500ms ease;
  will-change: transform, opacity;
}

.banner-aroma__glow.is-active {
  opacity: 1;
}

.banner__deco-reveal {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .banner-aroma__glow {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .banner-aroma__glow {
    display: none;
  }
}