/* Qoffa Smart — v13 banner hierarchy
   Compact copy card, isolated CTA and restrained motion. The supplied photography remains the hero. */

body.index-page .banner-overlay::before,
body.index-page .banner-slide[data-index='1'] .banner-overlay::before,
body.index-page .banner-slide[data-index='2'] .banner-overlay::before {
  top: 9%;
  right: auto;
  left: 7%;
  transform: none;
  border-color: rgba(229, 191, 104, .84);
  background: rgba(14, 43, 30, .72);
  padding: 8px 14px;
}

body.index-page .banner-overlay::after,
body.index-page .banner-slide[data-index='1'] .banner-overlay::after,
body.index-page .banner-slide[data-index='2'] .banner-overlay::after {
  top: 20%;
  right: auto;
  left: 7%;
  width: min(33%, 440px);
  max-width: 440px;
  border: 0;
  border-left: 3px solid #e5bf68;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(135deg, rgba(12, 42, 29, .92), rgba(12, 42, 29, .70));
  padding: 13px 17px;
  color: #fffdf4;
  font-size: clamp(.96rem, 1.35vw, 1.22rem);
  line-height: 1.72;
  text-align: left;
  text-shadow: 0 2px 11px rgba(0, 0, 0, .34);
  box-shadow: 0 16px 32px rgba(4, 27, 17, .18);
  backdrop-filter: blur(10px);
}

body.index-page .banner-cta,
body.index-page .banner-slide[data-index='1'] .banner-cta,
body.index-page .banner-slide[data-index='2'] .banner-cta {
  right: auto;
  bottom: 11%;
  left: 7%;
  transform: none;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: 15px;
  background: linear-gradient(135deg, #e0f58f, #cde871);
  color: #152d20;
  padding: 12px 21px;
  box-shadow: 0 14px 26px rgba(4, 27, 17, .25);
}

body.index-page .banner-dots {
  bottom: 17px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(13, 39, 27, .68);
  backdrop-filter: blur(8px);
}

body.index-page .banner-slide.active .banner-overlay::before {
  animation: qoffaBannerLabelIn 520ms cubic-bezier(.23, 1, .32, 1) both;
}

body.index-page .banner-slide.active .banner-overlay::after {
  animation: qoffaBannerCopyIn 680ms 70ms cubic-bezier(.23, 1, .32, 1) both;
}

body.index-page .banner-slide.active .banner-cta {
  animation: qoffaBannerCtaIn 620ms 150ms cubic-bezier(.23, 1, .32, 1) both;
}

body.index-page .banner-slide.active .banner-media {
  animation: qoffaBannerImageIn 1.1s cubic-bezier(.23, 1, .32, 1) both;
}

@keyframes qoffaBannerLabelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qoffaBannerCopyIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qoffaBannerCtaIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes qoffaBannerImageIn {
  from { opacity: .88; transform: scale(1.018); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 820px) {
  body.index-page .banner-overlay::before,
  body.index-page .banner-slide[data-index='1'] .banner-overlay::before,
  body.index-page .banner-slide[data-index='2'] .banner-overlay::before {
    top: 7%;
    right: auto;
    left: 8%;
    transform: none;
    padding: 7px 12px;
    font-size: .56rem;
    letter-spacing: .14em;
  }

  body.index-page .banner-overlay::after,
  body.index-page .banner-slide[data-index='1'] .banner-overlay::after,
  body.index-page .banner-slide[data-index='2'] .banner-overlay::after {
    top: 18%;
    right: auto;
    left: 8%;
    width: min(64%, 310px);
    max-width: 310px;
    border: 0;
    border-left: 3px solid #e5bf68;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(135deg, rgba(10, 40, 27, .94), rgba(10, 40, 27, .76));
    padding: 11px 14px;
    font-size: .77rem;
    line-height: 1.62;
    text-align: left;
  }

  body.index-page .banner-cta,
  body.index-page .banner-slide[data-index='1'] .banner-cta,
  body.index-page .banner-slide[data-index='2'] .banner-cta {
    right: auto;
    bottom: 12%;
    left: 8%;
    transform: none;
    min-height: 43px;
    border-radius: 14px;
    padding: 10px 16px;
    font-size: .72rem;
  }

  body.index-page .banner-dots {
    right: 50%;
    bottom: 4.5%;
    left: auto;
    transform: translateX(50%);
    padding: 6px 9px;
  }
}

body.index-page .banner-cta:active {
  transform: translateY(1px) scale(.97);
}

@media (prefers-reduced-motion: reduce) {
  body.index-page .banner-slide.active .banner-overlay::before,
  body.index-page .banner-slide.active .banner-overlay::after,
  body.index-page .banner-slide.active .banner-cta,
  body.index-page .banner-slide.active .banner-media {
    animation: none !important;
  }
}