/* ============================================================
   Egyptian Theatre — Event urgency badges (shared stylesheet)
   ------------------------------------------------------------
   The "Today!/Tonight!" theatre bulb-marquee and the "Sold Out!"
   overlay, used by the lobby signage (player.html / preshow.html,
   which do NOT load site.css). Colours/fonts fall back to literals
   so the rules stand alone on the signage pages.
   The public site (index/calendar/volunteer) no longer loads this
   file: css/site.css carries an identical COPY of every rule below
   (section "Today!/Tonight!" marquee). Edit both together.
   Theme: the marquee sign and the red band are self-contained brand
   signs and look the same in light and dark; only the sold-out dimming
   wash follows the theme (--wash-soldout, defined in site.css).

   All of the marquee's sizes are in `em`, so the whole sign scales
   with its font-size — the public cards use ~.95rem, the signage
   overrides font-size (in cqmin) to blow it up for a TV, and the
   bulbs/plaque/glow all follow. The anchoring rules
   (.event-card position/saturate) stay in site.css since
   .event-card only exists on the public site.
   ============================================================ */

/* A lit theatre bulb-sign: dark plaque, a full perimeter of marching warm
   bulbs, and glowing red/amber neon lettering. */
.today-marquee{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  margin:0 0 9px;padding:.66em 1.45em;isolation:isolate;
  font-family:var(--display,"Cinzel","Oswald",Georgia,serif);font-weight:900;font-size:.95rem;
  letter-spacing:.17em;text-transform:uppercase;line-height:1;
  color:#ffe6b0;
  background:radial-gradient(ellipse at center,#320f08 0%,#190604 100%);
  border-radius:.46em;
  box-shadow:
    0 .2em .92em rgba(0,0,0,.55),
    0 0 1.3em rgba(255,86,34,.45),     /* outer orange glow */
    inset 0 0 1.05em rgba(255,74,26,.35);
}
/* Desktop: a touch bigger and centred on the card (mobile keeps the inline size). */
@media (min-width:768px){
  .today-marquee{
    display:flex;width:fit-content;
    margin-left:auto;margin-right:auto;
    transform:scale(1.25);transform-origin:center;
    margin-top:6px;margin-bottom:16px;
  }
}
/* Red/amber neon text with a warm halo. */
.today-marquee .tm-txt{
  color:#ffcf6b;
  text-shadow:
    0 0 .26em #fff2c8,
    0 0 .59em #ff8a2a,
    0 0 1.05em #ff4e1a,
    0 0 1.7em rgba(255,46,16,.75);
  animation:tm-flicker 2.4s ease-in-out infinite;
}
/* Warm bulbs evenly ringing the sign, lit in a two-phase "one-two" chase.
   Two overlapping bulb layers (.tm-ph-a / .tm-ph-b) share the SAME round tiling
   — so identical whole-bulb counts, never a partial circle — but one draws its
   bulb at the 25% point of each tile and the other at 75%, so together they sit
   evenly spaced. Animating their brightness in antiphase makes the lights chase.
   Top & bottom rows run the full width (owning the corners); the side columns
   are inset between them via ::before so each corner holds one bulb, no overlap. */
.today-marquee .tm-bulbs{
  position:absolute;inset:.13em;pointer-events:none;z-index:-1;
  --b:#ffe08a;
  background-repeat:round no-repeat;
  filter:drop-shadow(0 0 .2em rgba(255,180,70,.9));
  animation:tm-onoff 1.1s linear infinite; /* same cadence as the header .marquee-lights (one step every .55s) */
}
.today-marquee .tm-bulbs::before{
  content:"";position:absolute;left:0;right:0;top:.46em;bottom:.46em;
  background-repeat:no-repeat round;
}
/* Phase A — the "one" of the chase. Positions are staggered per edge so that
   when phase A gives way to phase B the lit bulb always advances CLOCKWISE:
   top L→R (A at 25%), right T→B (A at 25%/top), bottom R→L (A at 75%),
   left B→T (A at 75%/bottom). Layer order below: [top, bottom] then [left, right]. */
.today-marquee .tm-ph-a{
  background-image:
    radial-gradient(circle .125em at 25% 50%,var(--b) 0 .125em,transparent .17em),
    radial-gradient(circle .125em at 75% 50%,var(--b) 0 .125em,transparent .17em);
  background-size:.855em .46em,.855em .46em;
  background-position:left top,left bottom;
}
.today-marquee .tm-ph-a::before{
  background-image:
    radial-gradient(circle .125em at 50% 75%,var(--b) 0 .125em,transparent .17em),
    radial-gradient(circle .125em at 50% 25%,var(--b) 0 .125em,transparent .17em);
  background-size:.46em .855em,.46em .855em;
  background-position:left top,right top;
}
/* Phase B — the "two", lit opposite and sitting in the gaps, so the chase
   steps one bulb clockwise each tick. Positions mirror phase A per edge. */
.today-marquee .tm-ph-b{
  background-image:
    radial-gradient(circle .125em at 75% 50%,var(--b) 0 .125em,transparent .17em),
    radial-gradient(circle .125em at 25% 50%,var(--b) 0 .125em,transparent .17em);
  background-size:.855em .46em,.855em .46em;
  background-position:left top,left bottom;
  animation-delay:-.55s;
}
.today-marquee .tm-ph-b::before{
  background-image:
    radial-gradient(circle .125em at 50% 25%,var(--b) 0 .125em,transparent .17em),
    radial-gradient(circle .125em at 50% 75%,var(--b) 0 .125em,transparent .17em);
  background-size:.46em .855em,.46em .855em;
  background-position:left top,right top;
}
@keyframes tm-onoff{0%,49.9%{opacity:1}50%,100%{opacity:.2}}
@keyframes tm-flicker{0%,100%{opacity:1}45%{opacity:.86}55%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .today-marquee .tm-bulbs{animation:none;opacity:1}
  .today-marquee .tm-txt{animation:none}
}

/* "Sold Out!" — a large diagonal banner over the whole card / slide. The
   parent must be position:relative/absolute (public cards and .sig-event both are). */
.soldout-overlay{
  position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--wash-soldout,rgba(8,5,2,.55));border-radius:4px;
}
.soldout-overlay .so-band{
  width:160%;text-align:center;transform:rotate(-8deg);
  background:linear-gradient(180deg,var(--red,#bf2a1d),var(--red-deep,#7e1a12));
  border-top:2px solid #ffd9d0;border-bottom:2px solid var(--red-deep,#7e1a12);
  box-shadow:0 10px 30px rgba(0,0,0,.6);padding:.6em 0;
}
.soldout-overlay .so-band span{
  font-family:var(--display,"Cinzel","Oswald",Georgia,serif);font-weight:700;color:var(--on-red,#fff);
  letter-spacing:.22em;text-transform:uppercase;font-size:1.5rem;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}