/* ============================================================
   SRV — July 4th "250 Years of American Grit" campaign layer
   Every rule scoped under body.campaign-independence.
   Vintage Americana over the existing dark cinematic brand.
   ============================================================ */

body.campaign-independence {
  --usa-red:   #9e3b34;  /* weathered barn red */
  --usa-navy:  #2b3a52;  /* aged navy */
  --usa-cream: #e8e0d0;  /* antique white */
  --usa-brass: #b08d57;  /* worn brass / golden-hour accent */
  --ribbon-h: 34px;
  padding-top: var(--ribbon-h);
}

/* Keep the fixed nav clear of the ribbon */
body.campaign-independence .nav { top: var(--ribbon-h); }

/* ---------- Site-wide ribbon ---------- */
body.campaign-independence .campaign-ribbon {
  position: fixed; top: 0; left: 0; right: 0; height: var(--ribbon-h);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-m);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--usa-cream);
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)),
    linear-gradient(90deg, var(--usa-navy), #1c2637 55%, var(--usa-red));
  border-bottom: 1px solid rgba(176,141,87,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
  padding: 0 16px; text-align: center;
}
body.campaign-independence .campaign-ribbon__stars {
  width: 46px; height: 12px; flex: none; opacity: .8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='12' viewBox='0 0 46 12'%3E%3Cg fill='%23e8e0d0'%3E%3Cpath d='M6 1l1.2 2.6L10 4l-2 1.9.5 2.8L6 7.4 3.5 8.7 4 5.9 2 4l2.8-.4z'/%3E%3Cpath d='M23 1l1.2 2.6L27 4l-2 1.9.5 2.8L23 7.4l-2.5 1.3.5-2.8L19 4l2.8-.4z'/%3E%3Cpath d='M40 1l1.2 2.6L44 4l-2 1.9.5 2.8L40 7.4l-2.5 1.3.5-2.8L36 4l2.8-.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
@media (max-width: 640px) {
  body.campaign-independence .campaign-ribbon { font-size: 9.5px; letter-spacing: .18em; }
  body.campaign-independence .campaign-ribbon__stars { display: none; }
}

/* ---------- Hero patriotic treatment ---------- */
/* The waving flag (.campaign-flag, injected by JS) replaces the skyline as the hero
   backdrop. Hide the base skyline photo so the flag reads as THE background image. */
body.campaign-independence .hero__bg { display: none; }

body.campaign-independence .campaign-flag {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
body.campaign-independence .campaign-flag svg {
  position: absolute; top: -4%; left: -4%; width: 108%; height: 108%;
  /* Desaturate + darken so it stays premium/vintage and the headline reads over it */
  filter: saturate(.62) brightness(.5) contrast(1.04);
  transform-origin: center;
  animation: cflag-sway 18s ease-in-out infinite;
}
@keyframes cflag-sway {
  0%, 100% { transform: translateX(0) scale(1.02); }
  50%      { transform: translateX(-1.4%) scale(1.04); }
}
/* Golden-hour warmth + legibility vignette over the flag */
body.campaign-independence .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 85% at 72% 22%, rgba(176,141,87,.18), transparent 58%),
    linear-gradient(180deg, rgba(7,9,11,.30), transparent 30%, rgba(7,9,11,.55) 100%);
}
/* Ensure hero content sits above the layers */
body.campaign-independence .hero__inner,
body.campaign-independence .hero__cue { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  body.campaign-independence .campaign-flag svg { animation: none; }
}

body.campaign-independence .hero__eyebrow { color: var(--usa-brass); }
/* The campaign headline is longer than the base two-word title, so scale the
   display type down to keep the longest rows ("American Grit.", "Uptime-Driven.")
   inside the viewport instead of clipping off the right edge. */
body.campaign-independence .hero__line {
  font-size: clamp(38px, 9.5vw, 140px); line-height: .9;
}
body.campaign-independence .hero__line--accent { color: var(--usa-cream); }

/* Secondary CTA gets a weathered brass edge to distinguish from primary steel */
body.campaign-independence .hero__actions .btn:not(.btn--primary) {
  border-color: rgba(176,141,87,.7); color: var(--usa-cream);
}
body.campaign-independence .hero__actions .btn:not(.btn--primary):hover {
  background: var(--usa-brass); color: var(--ink); transform: translateY(-2px);
}

/* ---------- Sparks / embers (restrained) ---------- */
body.campaign-independence .campaign-sparks {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
body.campaign-independence .campaign-sparks i {
  position: absolute; bottom: -8px; width: 2px; height: 2px; border-radius: 50%;
  background: var(--usa-brass); box-shadow: 0 0 6px 1px rgba(176,141,87,.55);
  opacity: 0; animation: spark-rise 6s linear infinite;
}
body.campaign-independence .campaign-sparks i:nth-child(1) { left: 12%; animation-delay: 0s;   }
body.campaign-independence .campaign-sparks i:nth-child(2) { left: 28%; animation-delay: 1.4s; }
body.campaign-independence .campaign-sparks i:nth-child(3) { left: 47%; animation-delay: .7s;  }
body.campaign-independence .campaign-sparks i:nth-child(4) { left: 63%; animation-delay: 2.2s; }
body.campaign-independence .campaign-sparks i:nth-child(5) { left: 79%; animation-delay: 1.1s; }
body.campaign-independence .campaign-sparks i:nth-child(6) { left: 90%; animation-delay: 3s;   }
@keyframes spark-rise {
  0%   { transform: translateY(0) scale(1);    opacity: 0; }
  12%  { opacity: .9; }
  70%  { opacity: .6; }
  100% { transform: translateY(-70vh) scale(.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.campaign-independence .campaign-sparks { display: none; }
}

/* ---------- Vintage pull-quotes ---------- */
body.campaign-independence .campaign-quote {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 6vw, 64px) var(--pad);
  text-align: center; position: relative;
}
body.campaign-independence .campaign-quote p {
  font-family: var(--font-d); font-weight: 900; letter-spacing: -.02em;
  line-height: 1.02; color: var(--usa-cream);
  font-size: clamp(24px, 4vw, 46px);
}
body.campaign-independence .campaign-quote p::before,
body.campaign-independence .campaign-quote p::after { content: ""; display: block; margin: 18px auto; width: 64px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--usa-brass), transparent); }