/* =========================================================
   Padukone Village - Reusable Festival Promotional Banner
   Include after modern-padukone.css
   ========================================================= */

.festival-banner {
  --festival-accent: #f4b942;
  --festival-dark: #12372a;
  --festival-light: #fffdf6;
  position: relative;
  overflow: hidden;
  margin: 0 0 24px;
  background:
    linear-gradient(105deg, rgba(8, 44, 34, .98), rgba(16, 88, 67, .92)),
    var(--festival-image, none) center/cover no-repeat;
  color: #fff;
  isolation: isolate;
}

.festival-banner::before,
.festival-banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.festival-banner::before {
  width: 260px;
  height: 260px;
  right: -70px;
  top: -130px;
  background: rgba(244, 185, 66, .20);
}

.festival-banner::after {
  width: 180px;
  height: 180px;
  left: 38%;
  bottom: -120px;
  background: rgba(255, 255, 255, .08);
}

.festival-banner-inner {
  min-height: 170px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px clamp(18px, 4vw, 48px);
}

.festival-banner-icon {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 2.5rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .15);
}

.festival-banner-content {
  flex: 1 1 auto;
  min-width: 0;
}

.festival-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--festival-accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.festival-banner h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.1;
  font-weight: 800;
}

.festival-banner p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  font-size: .98rem;
  line-height: 1.6;
}

.festival-banner-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--festival-dark);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}

.festival-banner-btn:hover,
.festival-banner-btn:focus-visible {
  color: var(--festival-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

@media (max-width: 767.98px) {
  .festival-banner {
    margin-bottom: 18px;
  }

  .festival-banner-inner {
    min-height: 0;
    flex-wrap: wrap;
    gap: 15px;
    padding: 22px 18px;
  }

  .festival-banner-icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    font-size: 1.9rem;
  }

  .festival-banner-content {
    flex-basis: calc(100% - 73px);
  }

  .festival-banner h2 {
    font-size: 1.55rem;
  }

  .festival-banner p {
    font-size: .9rem;
  }

  .festival-banner-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .festival-banner-btn {
    transition: none;
  }
}


/* Animated festival image/visual layer */
.festival-banner { min-height:210px; }
.festival-banner-inner { position:relative; isolation:isolate; }
.festival-banner-visual { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.festival-glow { position:absolute; width:240px; height:240px; border-radius:50%; filter:blur(3px); opacity:.55; animation:festivalFloat 6s ease-in-out infinite alternate; }
.festival-glow-one { right:7%; top:-110px; background:radial-gradient(circle,rgba(244,185,66,.42),rgba(244,185,66,0) 68%); }
.festival-glow-two { right:28%; bottom:-150px; background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%); animation-delay:-2s; }
.festival-ribbon { position:absolute; width:48%; height:12px; right:-7%; border-radius:999px; transform:rotate(-7deg); transform-origin:right center; opacity:.78; animation:festivalRibbon 7s ease-in-out infinite; }
.ribbon-saffron { top:30%; background:rgba(255,153,51,.82); }
.ribbon-white { top:calc(30% + 15px); background:rgba(255,255,255,.86); animation-delay:-.25s; }
.ribbon-green { top:calc(30% + 30px); background:rgba(19,136,8,.78); animation-delay:-.5s; }
.festival-flag { position:absolute; right:10%; bottom:15px; width:92px; height:62px; display:flex; flex-direction:column; align-items:center; border-radius:3px; overflow:hidden; box-shadow:0 9px 24px rgba(0,0,0,.2); transform-origin:left center; animation:festivalFlag 3.5s ease-in-out infinite; }
.festival-flag span { width:100%; flex:1; display:grid; place-items:center; }
.flag-saffron { background:#ff9933; } .flag-white { background:#fff; color:#1a3d8f; font-size:1.25rem; font-weight:700; } .flag-green { background:#138808; }
.festival-particle { position:absolute; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.8); box-shadow:0 0 12px rgba(255,255,255,.8); animation:festivalParticle 4s linear infinite; }
.particle-one { right:38%; top:24%; animation-delay:-.7s; } .particle-two { right:23%; top:63%; animation-delay:-1.8s; } .particle-three { right:47%; top:72%; animation-delay:-2.7s; } .particle-four { right:13%; top:37%; animation-delay:-3.3s; }
@keyframes festivalFloat { from{transform:translate3d(0,8px,0) scale(.96)} to{transform:translate3d(-20px,-8px,0) scale(1.04)} }
@keyframes festivalRibbon { 0%,100%{transform:translateX(0) rotate(-7deg)} 50%{transform:translateX(-24px) rotate(-4deg)} }
@keyframes festivalFlag { 0%,100%{transform:perspective(400px) rotateY(-8deg) rotateZ(-1deg)} 50%{transform:perspective(400px) rotateY(9deg) rotateZ(1deg)} }
@keyframes festivalParticle { 0%{transform:translateY(28px) scale(.5);opacity:0} 20%{opacity:.9} 80%{opacity:.7} 100%{transform:translateY(-55px) scale(1.2);opacity:0} }
@media(max-width:767.98px){ .festival-banner{min-height:250px}.festival-flag{right:7%;bottom:10px;width:70px;height:48px}.festival-ribbon{width:75%;right:-20%} }
@media(prefers-reduced-motion:reduce){.festival-glow,.festival-ribbon,.festival-flag,.festival-particle{animation:none!important}}