/*! lineup-live.css v1.0.0 · 2026-08-11 · fc-brands @fcv */
/* ============================================================
   Temper — Live-text lineup  (fcbrands-api.netlify.app/lineup-live.css)
   Rendered by the [temper_lineup_live] PHP shortcode (BKSTG data).

   Matches the homepage splash engine (temper.css) in feel:
   Helvetica Neue LT Pro Cond, condensed spacing, icy glow, glitch-in
   reveal + periodic bursts (see lineup-live.js).

   COLOR INVERSION: a single shared state `body.fc-light` (toggled by the
   Tickets scroll trigger) flips ALL live text ink white<->near-black IN
   SYNC with the dark<->light background invert. Everything reads off
   --fc-ink so the underline (currentColor) and glow follow automatically.
   ============================================================ */
@import url("https://use.typekit.net/kxm0tud.css");

/* ---- shared invert state (drives lineup + tickets text + the .tbg backdrop) ---- */
:root{--fcv-lineup-live-css:"1.0.0";}
:root{ --fc-ink:#eaf6ff; --fc-ui:#6BCEE8; }          /* dark bg  -> icy-white ink */
body.fc-light{ --fc-ink:#0a0f16; }                    /* light bg -> near-black ink */
.tbg{ transition:filter 1.2s ease; }
body.fc-light .tbg{ filter:invert(1) hue-rotate(180deg); }   /* dark<->light, hue/blue preserved */

/* Tickets headline shares the same ink + fade so it flips with everything else */
.tks-title{ color:var(--fc-ink) !important; transition:color 1.2s ease; }

.tll{
  position:relative; width:100%; text-align:center; color:var(--fc-ink);
  font-family:"helvetica-neue-lt-pro-cond","helvetica-neue-lt-pro",Arial,sans-serif;
  text-transform:uppercase; line-height:.96; letter-spacing:-.006em;   /* condensed a touch */
  padding:8vh 5vw; box-sizing:border-box; transition:color 1.2s ease;
}
.tll *{box-sizing:border-box;}
.tll-tier{display:flex;flex-direction:column;align-items:center;}
.tll-tier + .tll-tier{margin-top:.55em;}
.tll-act{
  position:relative;                 /* anchor for the hanging set-type label */
  display:block;font-weight:800;margin:.04em 0;color:var(--fc-ui);   /* icy cyan on dark, like the homepage */
  transition:color 1.2s ease;
  text-shadow:0 0 1px rgba(255,255,255,.38),0 0 22px rgba(107,206,232,.52),0 0 55px rgba(107,206,232,.34),0 0 120px rgba(107,206,232,.18);
}
body.fc-light .tll-act{ color:#0a0f16; text-shadow:none; }   /* flip to near-black on the light frame */

/* ---- VARIANT 2 = WHITE lineup ([temper_lineup_live_2], which renders data-hover="glow") ---- */
.tll[data-hover="glow"] .tll-act{
  color:#fff;
  text-shadow:0 0 1px rgba(255,255,255,.40),0 0 24px rgba(255,255,255,.22),0 0 70px rgba(255,255,255,.12);
}
.tll[data-hover="glow"] .tll-tier-op .tll-act{ color:color-mix(in srgb,#fff 82%,transparent); text-shadow:none; }
body.fc-light .tll[data-hover="glow"] .tll-act{ color:#0a0f16; text-shadow:none; }   /* still flips on the light frame */

/* subtle LED scanline distress on the live text (raise the floor alpha to soften) */
.tll{ -webkit-mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.86) 2px 3px);
      mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.86) 2px 3px); }

/* tier sizes (headliner -> opener) — trimmed down a touch */
.tll-tier-hl  .tll-act{font-size:clamp(26px,5.6vw,66px);}
.tll-tier-sub .tll-act{font-size:clamp(22px,4.3vw,50px);}
.tll-tier-sup .tll-act{font-size:clamp(19px,3.6vw,42px);font-weight:700;}   /* support — bumped up */
.tll-tier-op  .tll-act{font-size:clamp(17px,2.9vw,32px);font-weight:700;
  color:color-mix(in srgb,var(--fc-ui) 82%,transparent);text-shadow:none;}

/* per-artist links — underline via the shared fc-uline system (JS adds the
   class + data-uline="fill"); tuned here to 3px white, left-in / right-out. */
.tll-name{color:inherit;text-decoration:none;display:inline-block;transition:color .18s ease,text-shadow .18s ease;}
.tll .fc-uline{ --ul-color:#ffffff; --ul-width:.08em; --ul-in:left; --ul-out:right; --ul-gap:.05em; }
/* link hover: switch to white + glow, matching the artist page */
.tll .tll-name:hover{
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.6),0 0 24px var(--fc-ui),0 0 48px color-mix(in srgb,var(--fc-ui) 55%,transparent);
}
body.fc-light .tll .tll-name:hover{ color:#0a0f16; text-shadow:none; }
.tll .fc-uline[data-uline="fill"]{ --ul-color:#ffffff; }

/* combo / set-type labels — same color as the names */
.tll-b2b,.tll-set{font-weight:600;letter-spacing:.06em;color:inherit;font-size:.34em;}
/* B2B sits between two names — pull it in tight (JS strips the literal spaces
   around it so this margin is the whole gap) */
.tll-b2b{vertical-align:middle;padding:0;margin:0 .14em;}
/* set-type (e.g. DJ SET) HANGS off the right edge so it doesn't shift the
   artist name's centering — absolute to the .tll-act, name stays centered */
.tll-set{position:absolute;left:100%;bottom:.24em;margin-left:.12em;white-space:nowrap;}

/* [ A–Z ] section label (JS injects it above the headliners + support) */
.tll-az{font-size:clamp(11px,1.4vw,15px);letter-spacing:.34em;font-weight:700;
  color:color-mix(in srgb,var(--fc-ui) 82%,transparent);margin:.1em 0 .55em;text-shadow:none;
  transition:color 1.2s ease;}
body.fc-light .tll-az{color:#0a0f16;}
.tll-az-sup{margin-top:clamp(20px,3.6vh,34px);}   /* extra gap between headliners and support */

/* ---------- glitch-in reveal (JS adds .in on scroll; swaps to .shown when done) ---------- */
.tll-act,.tll-az{opacity:0;}
.tll-act.shown,.tll-az.shown{opacity:1;}
.tll-act.in,.tll-az.in{ animation:tllGlitchIn .60s step-end both; }
@keyframes tllGlitchIn{
  0%{opacity:0; transform:translate(0,7px);}
  18%{opacity:0;}
  19%{opacity:1; transform:translate(-2px,-5px); text-shadow:2px 0 rgba(255,255,255,.75),-2px 0 rgba(255,255,255,.75);}
  30%{transform:translate(3px,3px);}
  44%{transform:translate(-2px,2px); text-shadow:-2px 0 rgba(255,255,255,.6),2px 0 rgba(255,255,255,.6);}
  58%{transform:translate(1px,-3px);}
  72%{transform:translate(-1px,2px);}
  86%{transform:translate(0,0);}
  100%{opacity:1; transform:translate(0,0);}
}

/* ---------- periodic burst (JS adds .tll-burst to .tll ~every 5-8s) ---------- */
.tll.tll-burst .tll-act{ animation:tllBurst .7s step-end both; }
@keyframes tllBurst{
  0%,100%{transform:translate(0,0);}
  10%{transform:translate(1px,-4px); text-shadow:2px 0 rgba(255,255,255,.6),-2px 0 rgba(255,255,255,.6);}
  22%{transform:translate(-2px,3px);}
  36%{transform:translate(2px,2px); text-shadow:-2px 0 rgba(255,255,255,.5),2px 0 rgba(255,255,255,.5);}
  50%{transform:translate(0,-2px);}
  68%{transform:translate(-1px,1px);}
  84%{transform:translate(0,0);}
}

@media (prefers-reduced-motion:reduce){
  .tll-act{opacity:1;animation:none !important;}
  .tll.tll-burst .tll-act{animation:none !important;}
  .tbg{transition:none;} .tks-title,.tll,.tll-act{transition:none;}
}