/* ============================================================================
   july4.css — Triangle Cinemas · July 4th / America's 250th seasonal overlay
   Loaded only when the theme is active. Everything is scoped under
   `body.theme-july4`, so this file is inert if the class isn't present.
   ----------------------------------------------------------------------------
   Palette: Old Glory Red #BF0A30 · Old Glory Blue #002868 · White · Gold #FFD76A
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Playfair+Display:wght@700;900&display=swap');

body.theme-july4{
  /* shift the site's brand red to the historic Old Glory Red */
  --brand:        #BF0A30;
  --j4-red:       #BF0A30;
  --j4-blue:      #0A2A66;
  --j4-blue-deep: #041a47;
  --j4-white:     #ffffff;
  --j4-gold:      #FFD76A;
  --j4-marquee:   'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --j4-serif:     'Playfair Display', Georgia, serif;
  background:
    radial-gradient(1100px 520px at 15% -5%, rgba(191,10,48,.20), transparent 60%),
    radial-gradient(1100px 560px at 85% -2%, rgba(10,42,102,.30), transparent 62%),
    #060a16;
}

/* ---- Decorative fireworks / star field (full-viewport, behind content) ---- */
.j4-fx{
  position: fixed;
  inset: 0;
  z-index: 0;            /* sits above page bg, below header(50) & flow content */
  pointer-events: none;
  overflow: hidden;
}
.j4-fw{
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  opacity: 0;
  transform: translateZ(0);
}
/* each burst = a dot that flashes then sprays sparks via box-shadow */
.j4-fw::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:4px; height:4px; border-radius:50%;
  transform: translate(-50%,-50%);
}
@keyframes j4-burst{
  0%   { opacity:0; transform: scale(.2); }
  8%   { opacity:1; }
  60%  { opacity:1; }
  100% { opacity:0; transform: scale(1); }
}
.j4-fw{ animation: j4-burst 4.2s ease-out infinite; }
.j4-fw:nth-child(1){ left:14%; top:22%; color:var(--j4-gold);  animation-delay:.0s; }
.j4-fw:nth-child(2){ left:82%; top:18%; color:#ff5a6a;          animation-delay:1.1s; }
.j4-fw:nth-child(3){ left:48%; top:12%; color:#8fb4ff;          animation-delay:2.0s; }
.j4-fw:nth-child(4){ left:28%; top:30%; color:#ffffff;          animation-delay:2.8s; }
.j4-fw:nth-child(5){ left:68%; top:28%; color:var(--j4-gold);  animation-delay:3.4s; }
.j4-fw:nth-child(6){ left:92%; top:34%; color:#ff5a6a;          animation-delay:1.7s; }
/* the spark spray — 12-point radial burst built from layered box-shadows */
.j4-fw::before{
  box-shadow:
     0   -42px 0 currentColor,  0    42px 0 currentColor,
    -42px  0   0 currentColor,  42px  0   0 currentColor,
    -30px -30px 0 currentColor, 30px -30px 0 currentColor,
    -30px  30px 0 currentColor, 30px  30px 0 currentColor,
    -16px -38px 0 currentColor, 16px -38px 0 currentColor,
    -38px -16px 0 currentColor, 38px -16px 0 currentColor;
  animation: j4-spray 4.2s ease-out infinite;
  animation-delay: inherit;
}
@keyframes j4-spray{
  0%   { transform: translate(-50%,-50%) scale(.05); opacity:0; }
  10%  { opacity:1; }
  70%  { opacity:.85; }
  100% { transform: translate(-50%,-50%) scale(1); opacity:0; }
}

/* ---- 250th ribbon bar (site-wide, above the header) ---- */
.j4-ribbon{
  position: relative;
  z-index: 60;
  background:
    linear-gradient(90deg, var(--j4-blue-deep), var(--j4-blue) 50%, var(--j4-blue-deep));
  color: var(--j4-white);
  text-align: center;
  font-family: var(--j4-marquee);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(.72rem, .55rem + .7vw, 1rem);
  padding: .5rem 1rem;
  border-bottom: 2px solid var(--j4-gold);
  overflow: hidden;
}
.j4-ribbon .j4-ribbon-inner{ position:relative; z-index:1; }
.j4-ribbon b{ color: var(--j4-gold); }
.j4-ribbon .j4-star{ color: var(--j4-gold); margin: 0 .5em; }
.j4-ribbon .j4-years{ font-family: var(--j4-serif); letter-spacing: .04em; }
/* gold shimmer sweep */
.j4-ribbon::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,215,106,.28) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: j4-shimmer 6s linear infinite;
}
@keyframes j4-shimmer{ to { transform: translateX(100%); } }

/* ---- Bunting swag strip under the ribbon ---- */
.j4-bunting{
  height: 22px;
  position: relative;
  z-index: 59;
  background:
    radial-gradient(circle at 12px -4px, var(--j4-red) 11px, transparent 12px) 0 0/48px 22px repeat-x,
    radial-gradient(circle at 36px -4px, var(--j4-blue) 11px, transparent 12px) 24px 0/48px 22px repeat-x;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));
}

/* ---- Header: tricolor underline + starry tint ---- */
body.theme-july4 .site-header{
  background: rgba(4,10,28,.86);
  border-bottom: none;
  box-shadow: 0 2px 0 0 var(--j4-red), 0 4px 0 0 var(--j4-white), 0 6px 0 0 var(--j4-blue);
}
body.theme-july4 .brand-name{ color: var(--j4-white); }
body.theme-july4 .brand-sub{ color: var(--j4-gold); }
body.theme-july4 .nav a:hover{ color: var(--j4-gold); }

/* ---- Buttons ---- */
body.theme-july4 .btn-primary{
  background: linear-gradient(180deg, #e11d3a, var(--j4-red));
  box-shadow: 0 6px 18px rgba(191,10,48,.45);
}
body.theme-july4 .btn-primary:hover{ background: linear-gradient(180deg, #ff2942, #cf0c34); }

/* ---- Hero: the marquee centerpiece ---- */
body.theme-july4 .hero{ border-bottom: 3px solid var(--j4-gold); }
body.theme-july4 .hero-bg{
  background:
    radial-gradient(820px 380px at 18% 8%, rgba(191,10,48,.40), transparent 60%),
    radial-gradient(900px 420px at 82% 12%, rgba(10,42,102,.55), transparent 64%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, rgba(2,6,20,.55), rgba(2,6,20,.92));
}
/* drifting stars inside the hero */
body.theme-july4 .hero::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 70% 20%, var(--j4-gold), transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 85% 55%, rgba(143,180,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 55% 40%, rgba(255,255,255,.7), transparent);
  background-repeat: no-repeat;
  animation: j4-twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes j4-twinkle{ from{opacity:.45} to{opacity:1} }

body.theme-july4 .hero-copy h1{
  color: var(--j4-white);
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
/* "★ 250 YEARS ★" eyebrow above the headline */
body.theme-july4 .hero-copy h1::before{
  content: "★ 1776 — 2026 · AMERICA'S 250TH ★";
  display:block;
  font-family: var(--j4-marquee);
  letter-spacing:.22em;
  font-size: clamp(.7rem, .5rem + .8vw, 1rem);
  color: var(--j4-gold);
  margin-bottom:.55rem;
}
body.theme-july4 .hero-tagline{ color: var(--j4-gold); }
body.theme-july4 .pill{
  border-color: rgba(255,215,106,.5);
  background: rgba(10,42,102,.45);
}

/* keep hero content above the decorative layers */
body.theme-july4 .hero-inner{ position: relative; z-index: 1; }

/* ---- Footer flourish ---- */
body.theme-july4 .site-footer, body.theme-july4 footer{
  border-top: 3px solid var(--j4-gold);
}
.j4-footer-note{
  text-align:center;
  font-family: var(--j4-serif);
  color: var(--j4-gold);
  padding: .4rem 1rem .2rem;
  letter-spacing:.02em;
}

/* ---- Motion sensitivity & mobile ---- */
@media (prefers-reduced-motion: reduce){
  .j4-fw, .j4-fw::before, .j4-ribbon::after, body.theme-july4 .hero::before{ animation: none !important; }
  .j4-fw{ opacity:.6; }
}
@media (max-width: 640px){
  .j4-fx{ opacity:.7; }
  .j4-bunting{ height:16px; background-size:36px 16px, 36px 16px; }
}