/* ═══════════════════════════════════════════════════════════════
   independence-banner.css — Independence Day Event Banner
   DELETE THIS FILE (and the whole temp_event/ folder) after 22 Aug.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --indep-accent-1: #FF9933;  /* saffron */
  --indep-accent-2: #138808;  /* green */
  --indep-accent-3: #FFFFFF;  /* white / highlight */
  --indep-accent-4: #000080;  /* navy — chakra */
  --indep-bg-overlay: rgba(0, 0, 0, 0.78);
  --indep-card-bg: #0d0d0d;
  --indep-radius: 20px;
}

/* ── Backdrop ─────────────────────────────────────────────── */
#indep-banner-overlay {
  position: fixed; inset: 0; z-index: 9990;
  background: var(--indep-bg-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box; overflow-y: auto;
  animation: indepBackdropIn 0.4s ease forwards;
}
#indep-banner-overlay.indep-hiding { animation: indepBackdropOut 0.35s ease forwards; }
@keyframes indepBackdropIn  { from{opacity:0} to{opacity:1} }
@keyframes indepBackdropOut { from{opacity:1} to{opacity:0} }

/* ── Card ─────────────────────────────────────────────────── */
#indep-banner-card {
  position: relative;
  width: min(860px, 100%);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 32px);
  background: var(--indep-card-bg);
  border-radius: var(--indep-radius);
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(255,153,51,0.5),
    0 0 40px rgba(255,153,51,0.25),
    0 0 80px rgba(19,136,8,0.2),
    0 30px 60px rgba(0,0,0,0.6);
  animation: indepCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
@media (max-width: 600px), (max-height: 600px) {
  #indep-banner-card { aspect-ratio: auto; height: auto; }
}
@keyframes indepCardIn {
  from { transform: scale(0.82) translateY(30px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}
#indep-banner-overlay.indep-hiding #indep-banner-card { animation: indepCardOut 0.3s ease forwards; }
@keyframes indepCardOut {
  from { transform: scale(1)   translateY(0);     opacity: 1; }
  to   { transform: scale(0.9) translateY(-20px); opacity: 0; }
}

/* ── Tricolor band background ────────────────────────────── */
#indep-banner-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    var(--indep-accent-1) 0%, var(--indep-accent-1) 30%,
    var(--indep-accent-3) 30%, var(--indep-accent-3) 68%,
    var(--indep-accent-2) 68%, var(--indep-accent-2) 100%);
}
#indep-banner-bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(10,10,10,0.55); /* lighter scrim — lets the tricolor bands actually read */
}

/* ── Particle stars (tricolor sparkle) ───────────────────── */
#indep-banner-particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.indep-star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff;
  animation: indepTwinkle var(--dur, 2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s); opacity: 0;
}
@keyframes indepTwinkle {
  0%, 100% { opacity: 0;   transform: scale(0.5); }
  50%      { opacity: 0.9; transform: scale(1.4); }
}

/* ── Close button ─────────────────────────────────────────── */
#indep-banner-close {
  position: absolute; top: 12px; right: 12px; z-index: 100;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid rgba(255, 60, 60, 0.85); background: rgba(200, 20, 20, 0.75);
  color: #fff; font-size: 16px; font-weight: 900; line-height: 36px; padding: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
  box-shadow: 0 0 10px rgba(255,0,0,0.5), 0 2px 6px rgba(0,0,0,0.5);
}
#indep-banner-close:hover {
  background: rgba(255,20,20,0.95); transform: scale(1.15) rotate(90deg);
  box-shadow: 0 0 18px rgba(255,0,0,0.75);
}

/* ── Content ──────────────────────────────────────────────── */
#indep-banner-content {
  position: relative; z-index: 10; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 2%, 16px); padding: clamp(14px, 4%, 40px);
  box-sizing: border-box; text-align: center;
}

/* ── Chakra icon ──────────────────────────────────────────── */
#indep-banner-chakra {
  width: clamp(38px, 5vw, 56px); height: clamp(38px, 5vw, 56px);
  border: 3px solid var(--indep-accent-4);
  border-radius: 50%; position: relative;
  animation: indepChakraSpin 6s linear infinite, indepPillPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;
}
#indep-banner-chakra::before {
  content: ''; position: absolute; inset: 0;
  /* Ashoka Chakra — 24 spokes: 24 slices of 15deg, alternating navy/transparent at 7.5deg */
  background:
    repeating-conic-gradient(var(--indep-accent-4) 0deg 3.75deg, transparent 3.75deg 15deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 32%);
          mask: radial-gradient(circle, transparent 30%, #000 32%);
}
#indep-banner-chakra::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 18%; height: 18%; border-radius: 50%;
  background: var(--indep-accent-4);
}
@keyframes indepChakraSpin { to { transform: rotate(360deg); } }

/* ── Event label pill ─────────────────────────────────────── */
#indep-banner-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(90deg, var(--indep-accent-1), var(--indep-accent-2));
  color: #fff; font-size: clamp(9px, 1.3vw, 13px); font-weight: 900;
  letter-spacing: 3px; text-transform: uppercase;
  padding: 5px 16px; border-radius: 999px;
  box-shadow: 0 0 18px rgba(255,153,51,0.5);
  animation: indepPillPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}
@keyframes indepPillPop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }

/* ── Title ────────────────────────────────────────────────── */
#indep-banner-title {
  font-size: clamp(22px, 5.5vw, 54px); font-weight: 900;
  text-transform: uppercase; letter-spacing: clamp(2px, 0.5vw, 5px); line-height: 1.05;
  background: linear-gradient(90deg, var(--indep-accent-1) 0%, #fff 35%, var(--indep-accent-2) 65%, #fff 100%);
  background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: indepSlideUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.25s both, indepShimmer 3s linear 1s infinite;
  filter: drop-shadow(0 0 18px rgba(255,153,51,0.4));
}
@keyframes indepSlideUp { from{transform:translateY(22px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes indepShimmer { to { background-position: 200% center; } }

/* ── Subtitle ─────────────────────────────────────────────── */
#indep-banner-subtitle {
  font-size: clamp(10px, 1.6vw, 17px); color: rgba(255,255,255,0.8);
  letter-spacing: clamp(1px, 0.3vw, 3px); text-transform: uppercase;
  animation: indepSlideUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.35s both;
}

/* ── Info chips ───────────────────────────────────────────── */
#indep-banner-chips {
  display: flex; gap: clamp(8px, 2vw, 20px); flex-wrap: wrap; justify-content: center;
  animation: indepSlideUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.45s both;
}
.indep-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 12px; padding: clamp(6px, 1.5vw, 14px) clamp(10px, 2vw, 22px);
  backdrop-filter: blur(6px); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.indep-chip:hover { transform: translateY(-3px) scale(1.04); border-color: var(--indep-accent-1); }
.indep-chip-icon { font-size: clamp(16px, 3vw, 26px); }
.indep-chip-main {
  font-size: clamp(13px, 2.4vw, 22px); font-weight: 900;
  background: linear-gradient(90deg, var(--indep-accent-1), var(--indep-accent-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1;
}
.indep-chip-label {
  font-size: clamp(7px, 1.1vw, 11px); color: rgba(255,255,255,0.65);
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* ── CTA button ───────────────────────────────────────────── */
#indep-banner-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, var(--indep-accent-1), var(--indep-accent-2));
  color: #fff; font-size: clamp(10px, 1.5vw, 15px); font-weight: 900;
  letter-spacing: 2.5px; text-transform: uppercase; border: none; border-radius: 999px;
  padding: clamp(8px, 1.5vw, 13px) clamp(20px, 4vw, 40px); cursor: pointer;
  box-shadow: 0 0 24px rgba(255,153,51,0.45), 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.18s, box-shadow 0.18s;
  animation: indepPillPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.6s both, indepCtaPulse 2.5s ease-in-out 1.5s infinite;
  position: relative; overflow: hidden;
}
#indep-banner-cta::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: indepCtaSheen 3s ease-in-out 2s infinite;
}
@keyframes indepCtaSheen { 0%{left:-100%} 40%{left:120%} 100%{left:120%} }
@keyframes indepCtaPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(255,153,51,0.45), 0 4px 16px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 38px rgba(255,153,51,0.75), 0 4px 24px rgba(0,0,0,0.5); }
}
#indep-banner-cta:hover { transform: scale(1.06); }

/* ── Timer strip ──────────────────────────────────────────── */
#indep-banner-timer {
  display: flex; align-items: center; gap: clamp(5px, 1vw, 10px);
  font-size: clamp(8px, 1.1vw, 12px); color: rgba(255,255,255,0.6);
  letter-spacing: 2px; text-transform: uppercase;
  animation: indepSlideUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.65s both;
}
#indep-banner-timer .indep-timer-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--indep-accent-2);
  box-shadow: 0 0 6px var(--indep-accent-2); animation: indepDotBlink 1s step-end infinite;
}
@keyframes indepDotBlink { 0%,100%{opacity:1} 50%{opacity:0} }
#indep-banner-countdown {
  font-size: clamp(10px, 1.4vw, 14px); font-weight: 900; color: var(--indep-accent-1);
  letter-spacing: 1px; min-width: 70px;
}

/* ── Bottom tricolor glow bar ─────────────────────────────── */
#indep-banner-glow {
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--indep-accent-1), var(--indep-accent-3), var(--indep-accent-2), var(--indep-accent-4), var(--indep-accent-1));
  background-size: 300% 100%; animation: indepRainbowSlide 3s linear infinite; z-index: 10;
}
@keyframes indepRainbowSlide { to { background-position: 300% center; } }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #indep-banner-overlay, #indep-banner-card, #indep-banner-chakra,
  #indep-banner-title, #indep-banner-cta, #indep-banner-cta::before, .indep-star {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

@media (max-width: 500px) {
  #indep-banner-chips { gap: 6px; }
  .indep-chip { padding: 6px 10px; }
}
@media (max-height: 480px) {
  #indep-banner-content { gap: clamp(4px, 1.5%, 10px); padding: 10px clamp(14px,4%,40px); }
  #indep-banner-chips { gap: 5px; }
  .indep-chip { padding: 4px 8px; }
}
/* ── Event button reskin (temp_event-only, active 8–22 Aug) ─── */
#eventBtn.indep-skin {
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(90deg, var(--indep-accent-1), var(--indep-accent-3), var(--indep-accent-2)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 14px rgba(255,153,51,0.5);
  animation: indepEventBtnPulse 2.2s ease-in-out infinite;
}
#eventBtn.indep-skin:hover {
  box-shadow: 0 0 22px rgba(19,136,8,0.65);
}
@keyframes indepEventBtnPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,153,51,0.45); }
  50%      { box-shadow: 0 0 20px rgba(19,136,8,0.55); }
}