/* Layout: a county-fair poster on a star field, lit by searchlights and fireworks. News ticker on top,
   a waving flag band, top billing for the families, a scoreboard with a live countdown, an interstate
   exit sign for the venue, a clip-out coupon for the calendar and a car-commercial disclaimer.
   One button starts the Marine Band. Deliberately one loud look, phone first. */
:root{
  --navy:#3C3B6E;          /* Old Glory Blue */
  --red:#B22234;           /* Old Glory Red */
  --white:#FFFFFF;
  --paper:#FFF6E0;
  --gold:#F5C518;
  --sign:#00703C;          /* interstate guide-sign green */
  --ink:#1D1B33;
  --muted:#5B5A7A;
  --slab:"Alfa Slab One",Rockwell,"Roboto Slab",Georgia,serif;
  --sign-face:"Overpass","Arial Narrow",Arial,sans-serif;
  --script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23fff' fill-opacity='.16'%3E%3Cpath d='M12.0 4.0L14.1 10.1L20.6 10.2L15.4 14.1L17.3 20.3L12.0 16.6L6.7 20.3L8.6 14.1L3.4 10.2L9.9 10.1Z'/%3E%3Cpath d='M36.0 28.0L38.1 34.1L44.6 34.2L39.4 38.1L41.3 44.3L36.0 40.6L30.7 44.3L32.6 38.1L27.4 34.2L33.9 34.1Z'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--navy);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;padding-inline:16px;padding-block:0 calc(110px + env(safe-area-inset-bottom,0px));min-height:100%;background:var(--navy) var(--stars);color:var(--ink);font:600 16px/1.5 var(--sign-face);-webkit-font-smoothing:antialiased}
p,h1,h2{margin:0;font-weight:400}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* Premiere searchlights behind everything */
.searchlights{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.beam{position:absolute;bottom:-10px;width:160px;height:135vh;margin-left:-80px;background:linear-gradient(to top,rgba(255,255,255,.26),rgba(255,255,255,0) 80%);clip-path:polygon(45% 100%,55% 100%,100% 0,0 0);transform-origin:50% 100%;animation:sweep 6s ease-in-out infinite alternate}
.beam.l{left:10%;--from:-30deg;--to:16deg}
.beam.r{left:90%;--from:30deg;--to:-16deg;animation-delay:-3s}
@keyframes sweep{from{transform:rotate(var(--from))}to{transform:rotate(var(--to))}}

/* Fireworks layer: above the poster, never catches taps */
#sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* Breaking-news ticker */
.ticker{position:relative;z-index:1;margin-inline:-16px;overflow:hidden;white-space:nowrap;background:var(--red);color:var(--white);border-block:3px solid var(--white);font:15px/1 var(--slab);letter-spacing:.06em}
.ticker-track{display:inline-flex;padding-block:9px;animation:ticker 38s linear infinite}
.ticker span{padding-inline:16px}
.ticker b{color:var(--gold);font-weight:400}
@keyframes ticker{to{transform:translateX(-50%)}}

/* The poster */
.poster{position:relative;z-index:1;max-width:460px;margin:30px auto 0;background:var(--paper);text-align:center;box-shadow:0 0 0 4px var(--white),0 0 0 8px var(--red),0 24px 50px rgba(0,0,0,.4)}
.canton{background:var(--navy) var(--stars);padding:18px 22px 16px;display:grid;gap:8px}
.dua{font-family:var(--script);font-size:27px;line-height:1.25;color:var(--gold);text-wrap:balance}
.tag{font:11px/1.4 var(--slab);letter-spacing:.22em;color:var(--white);opacity:.8}
.stripes{position:relative;height:39px;background:repeating-linear-gradient(var(--red) 0 3px,var(--white) 3px 6px)} /* 13 stripes, 7 red */
.stripes.waving{background:var(--paper)}
#flag{position:absolute;inset:0;width:100%;height:100%;display:block}
.burst{position:absolute;top:-22px;right:-4px;width:96px;aspect-ratio:1;display:grid;place-items:center;padding:16px;background:var(--gold);color:var(--red);font:11px/1.05 var(--slab);clip-path:polygon(50.0% 0.0%,57.1% 9.6%,67.1% 3.0%,70.5% 14.5%,82.1% 11.7%,81.4% 23.6%,93.3% 25.0%,88.5% 36.0%,99.2% 41.3%,91.0% 50.0%,99.2% 58.7%,88.5% 64.0%,93.3% 75.0%,81.4% 76.4%,82.1% 88.3%,70.5% 85.5%,67.1% 97.0%,57.1% 90.4%,50.0% 100.0%,42.9% 90.4%,32.9% 97.0%,29.5% 85.5%,17.9% 88.3%,18.6% 76.4%,6.7% 75.0%,11.5% 64.0%,0.8% 58.7%,9.0% 50.0%,0.8% 41.3%,11.5% 36.0%,6.7% 25.0%,18.6% 23.6%,17.9% 11.7%,29.5% 14.5%,32.9% 3.0%,42.9% 9.6%);transform:rotate(14deg);z-index:2;animation:wobble 1.6s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(14deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}

.billing{padding:26px 22px 4px;display:grid;gap:4px}
.kicker{font:13px/1.4 var(--slab);letter-spacing:.14em;color:var(--red);margin-bottom:6px}
.honor{font:800 13px/1.5 var(--sign-face);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.invitation-line,.bride-intro{font-size:17px;line-height:1.45;color:var(--muted);text-wrap:balance}
.host,.bride-family{font:clamp(20px,5.6vw,25px)/1.25 var(--slab);color:var(--navy);text-wrap:balance}
h1{font:clamp(42px,13vw,70px)/1.15 var(--slab);margin-block:10px 2px;color:var(--red);text-shadow:3px 3px 0 var(--white),6px 6px 0 var(--navy);overflow-wrap:anywhere}
@keyframes pump{to{transform:scale(1.06);text-shadow:4px 4px 0 var(--white),9px 9px 0 var(--navy)}}
.main-event{font:13px/1.4 var(--slab);letter-spacing:.2em;color:var(--navy);margin-bottom:12px}

/* Mascot divider: the eagle faces its speech bubble */
.mascot{display:grid;justify-items:center;gap:6px;padding:18px 22px 8px}
.mascot-row{display:flex;align-items:center;justify-content:center;gap:18px}
.eagle-btn{appearance:none;background:none;border:0;padding:0;cursor:pointer;flex:none;border-radius:12px}
.eagle{display:block;width:78px;height:auto;transform-origin:50% 90%;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
.eagle-btn.screech .eagle{animation:shake .09s linear 9}
@keyframes shake{0%{transform:scale(1.15) translate(-2px,1px) rotate(-4deg)}50%{transform:scale(1.15) translate(2px,-1px) rotate(6deg)}100%{transform:scale(1.15) translate(-2px,1px) rotate(-4deg)}}
.bubble{position:relative;background:var(--white);border:3px solid var(--ink);border-radius:18px;padding:8px 18px 6px;font:22px/1.3 var(--slab);color:var(--red);white-space:nowrap;transition:transform .15s}
.bubble::before{content:"";position:absolute;left:-11px;top:calc(50% - 9px);width:16px;height:16px;background:var(--white);border:solid var(--ink);border-width:0 0 3px 3px;transform:rotate(45deg)}
.screeching .bubble{transform:scale(1.1) rotate(-3deg)}
.hint{font:800 10px/1 var(--sign-face);letter-spacing:.18em;color:var(--muted)}

/* Scoreboard: chase-light frame, date, live countdown */
.scoreboard{position:relative;margin:14px 18px 0;padding:22px 18px 18px;background:var(--ink);color:var(--white);border-radius:8px;display:grid;gap:4px}
.scoreboard::before{content:"";position:absolute;inset:0;border-radius:8px;padding:8px;background:radial-gradient(circle,var(--gold) 0 2.4px,rgba(245,197,24,.18) 3px,transparent 3.6px) 0 0/14px 14px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:bulbs .7s steps(2) infinite;pointer-events:none}
@keyframes bulbs{to{background-position:14px 0}}
.scoreboard .kicker{color:var(--gold);margin:0}
.friday span{display:inline-block;animation:flash 1.2s steps(1) infinite}
.friday span:nth-child(2){animation-delay:.4s}.friday span:nth-child(3){animation-delay:.8s}
@keyframes flash{0%{color:var(--gold)}33%{color:var(--white)}66%{color:var(--red)}}
.detail-label{font-size:15px;color:var(--white);opacity:.85}
time{display:grid;gap:2px}
.us-date{font:clamp(38px,12vw,54px)/1.15 var(--slab);color:var(--gold);text-shadow:0 0 14px rgba(245,197,24,.45);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.long-date{font:800 17px/1.5 var(--sign-face)}
.aside{font:800 11px/1.5 var(--sign-face);letter-spacing:.12em;color:var(--white);opacity:.7;margin-top:4px}
.countdown{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(245,197,24,.4);display:grid;gap:6px}
.cd-label{font:800 11px/1 var(--sign-face);letter-spacing:.24em;color:var(--white);opacity:.75}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cd-grid span{display:grid;gap:2px;padding:6px 0 5px;background:#0E0D1E;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(245,197,24,.25)}
.cd-grid b{font:400 clamp(22px,7vw,30px)/1.1 var(--slab);color:var(--red);text-shadow:0 0 10px rgba(178,34,52,.8);font-variant-numeric:tabular-nums}
.cd-grid i{font:800 9px/1 var(--sign-face);font-style:normal;letter-spacing:.18em;color:var(--white);opacity:.7}
.cd-done{font:26px/1.3 var(--slab);color:var(--gold)}

/* Interstate exit sign = venue + map link */
.exit{display:block;margin:26px 18px 0;text-decoration:none;color:var(--white);transition:transform .15s}
.exit:hover{transform:translateY(-2px)}
.exit-tab{display:inline-block;background:var(--sign);border:3px solid var(--white);border-bottom:0;border-radius:8px 8px 0 0;box-shadow:0 0 0 3px var(--sign);padding:4px 16px 2px;font:800 14px/1.3 var(--sign-face);letter-spacing:.08em;position:relative;top:3px}
.exit-board{position:relative;overflow:hidden;background:var(--sign);border:3px solid var(--white);border-radius:10px;box-shadow:0 0 0 3px var(--sign);padding:12px 16px 10px;display:grid;gap:2px}
.exit-board::after{content:"";position:absolute;inset:-10% -40%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);transform:translateX(-110%);animation:glint 4.5s ease-in-out infinite;pointer-events:none}
@keyframes glint{0%,55%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.exit-board h2{font:800 clamp(34px,10vw,44px)/1.15 var(--sign-face);letter-spacing:.03em}
.venue-description{font-size:15px;line-height:1.4;opacity:.95}
.road{font:800 13px/1.5 var(--sign-face);letter-spacing:.12em;margin-top:2px}
.arrow{display:inline-block;justify-self:center;font-family:Arial,sans-serif;font-size:34px;line-height:1;animation:nudge 1s ease-in-out infinite}
@keyframes nudge{50%{transform:translate(4px,-4px)}}
.exit-only{margin:8px -16px -10px;padding:7px 12px 5px;background:var(--gold);color:var(--ink);border-radius:0 0 7px 7px;display:flex;align-items:center;justify-content:center;gap:14px;font:800 14px/1.3 var(--sign-face);letter-spacing:.12em}

/* Clip-out coupon = calendar link */
.coupon{position:relative;display:grid;gap:2px;margin:28px 18px 0;padding:16px 16px 12px;background:var(--white);border:3px dashed var(--red);border-radius:4px;text-decoration:none;color:var(--ink);transition:background .15s}
.coupon:hover{background:#FFFBEF}
.scissors{position:absolute;top:-19px;left:6%;padding-inline:4px;background:var(--paper);font-family:Arial,sans-serif;font-size:26px;line-height:1;color:var(--red);animation:cut 6s linear infinite}
@keyframes cut{from{left:4%}to{left:86%}}
.coupon strong{font:400 22px/1.3 var(--slab);color:var(--red)}
.coupon .fine{font:800 11px/1.4 var(--sign-face);letter-spacing:.1em;color:var(--muted)}

footer{padding:26px 22px 22px;display:grid;gap:6px}
.closing{font-family:var(--script);font-size:36px;line-height:1.2;color:var(--navy);text-wrap:balance}
footer .kicker{margin:0}
.fineprint{font:600 10.5px/1.55 var(--sign-face);letter-spacing:.01em;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid rgba(60,59,110,.25);text-wrap:pretty}
.fineprint.credits{margin-top:0;padding-top:0;border-top:0}

/* The big button, clear of the phone's home indicator */
.freedom{position:fixed;z-index:10;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:max-content;max-width:calc(100% - 32px);margin-inline:auto;display:flex;align-items:center;gap:10px;min-height:52px;padding:13px 24px 11px;border:3px solid var(--white);border-radius:999px;background:var(--red);color:var(--white);font:16px/1 var(--slab);letter-spacing:.08em;box-shadow:0 0 0 3px var(--navy),0 10px 24px rgba(0,0,0,.45);cursor:pointer;transition:background .15s,transform .1s}
.freedom:hover{background:#C8293D}
.freedom:active{transform:translateY(1px)}
.freedom svg{width:22px;height:22px;flex:none}
.freedom .waves{opacity:.35}
.freedom[aria-pressed="true"]{background:var(--navy);animation:throb .36s ease-in-out infinite alternate}
.freedom[aria-pressed="true"] .waves{opacity:1}
@keyframes throb{to{box-shadow:0 0 0 3px var(--red),0 0 0 9px rgba(245,197,24,.55),0 10px 24px rgba(0,0,0,.45)}}

/* Party mode turns everything up */
.party .ticker-track{animation-duration:12s}
.party .burst{animation-duration:.45s}
.party .beam{animation-duration:1.6s}
.party .scoreboard::before{animation-duration:.25s}
.party .friday span{animation-duration:.45s}
.party h1{animation:pump .36s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:380px){
  .billing{padding-inline:16px}
  .burst{width:84px;padding:13px;font-size:10px}
  .mascot-row{gap:14px}.eagle{width:66px}.bubble{font-size:18px;padding-inline:14px}
  .scoreboard,.exit,.coupon{margin-inline:14px}
  .dua{font-size:24px}.closing{font-size:32px}
  .freedom{font-size:14px;padding-inline:18px}
}