/*
 * TPS 100 Anniversary Show — Custom CSS
 * Paste into: Appearance → Customize → Additional CSS
 *
 * Prefixed with .tps100- to avoid collisions with the live theme.
 * All sections use module_id anchors (#hero, #story, #lineup, #tiers, #info, #about).
 */

/* ─── Global: override Extra's default text colour on this page ────────────── */
/* Extra sometimes bleeds its own grey text into Divi module content.           */

body.tps100-blank,
body.tps100-blank .et_pb_text_inner,
body.tps100-blank .et_pb_text_inner p,
body.tps100-blank .et_pb_text_inner li {
  color: #cccccc;
}

/* Extra's default h2 is black and undersized — override for the whole page */
body.tps100-blank h2 {
  color: #ffffff !important;
  font-family: Montserrat, sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px;
}


/* ─── Scroll reveal base classes (applied by JS to non-hero sections) ───────── */

.tps100-fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.tps100-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─── Hero: nebula glow + starfield + gradient title ────────────────────────── */

#hero {
  background:
    radial-gradient(ellipse at 18% 60%, rgba(30, 105, 196, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 25%, rgba(180, 20, 35, 0.32) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 95%, rgba(100, 0, 7, 0.45) 0%, transparent 45%),
    #0a0a1a !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Make the fullwidth_header module transparent so the section background shows */
#hero .et_pb_fullwidth_header,
#hero .et_pb_module.et_pb_fullwidth_header,
#hero .et_pb_fullwidth_header_container,
#hero .et_pb_fullwidth_header_overlay {
  background-color: transparent !important;
  background: transparent !important;
}

/* Lift content above the starfield pseudo-element */
#hero .et_pb_fullwidth_header {
  position: relative;
  z-index: 1;
}

/* CSS starfield — box-shadow technique (reliably visible dots) */
#hero::before,
#hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Layer A — ~45 stars */
#hero::before {
  box-shadow:
      80px  60px #fff,  180px 140px #fff,  260px  40px #fff,  340px 200px #e8e8ff,
     440px 110px #fff,  520px 260px #fff,  600px  70px #fff,  680px 180px #fff,
     760px  30px #ffe8e8, 840px 220px #fff, 920px 130px #fff, 1000px 300px #fff,
    1080px  50px #fff, 1160px 170px #fff, 1240px 240px #fff, 1320px  90px #e8e8ff,
    1400px 200px #fff, 1480px  60px #fff, 1560px 280px #fff, 1640px 120px #fff,
    1720px 210px #fff,  120px 360px #fff,  240px 420px #fff,  360px 480px #e8e8ff,
     480px 340px #fff,  600px 460px #fff,  720px 400px #fff,  840px 520px #fff,
     960px 380px #fff, 1080px 500px #ffe8e8, 1200px 360px #fff, 1320px 440px #fff,
    1440px 520px #fff, 1560px 380px #fff, 1680px 460px #fff,  100px 620px #fff,
     220px 700px #fff,  380px 760px #e8e8ff, 540px 640px #fff,  700px 720px #fff,
     860px 680px #fff, 1020px 780px #fff, 1180px 660px #fff, 1340px 740px #fff,
    1520px 700px #fff, 1680px 800px #fff;
  animation: tps100-twinkle-a 3.4s ease-in-out infinite;
}

/* Layer B — ~40 stars at different positions, out of phase */
#hero::after {
  box-shadow:
      40px 110px #fff,  140px 220px #fff,  220px 310px #fff,  300px 150px #e8e8ff,
     380px 260px #fff,  460px 340px #fff,  540px 180px #fff,  620px 300px #fff,
     700px 240px #fff,  780px 380px #fff,  860px 100px #ffe8e8, 940px 260px #fff,
    1020px 180px #fff, 1100px 340px #fff, 1180px 220px #fff, 1260px 140px #fff,
    1340px 300px #e8e8ff, 1420px 260px #fff, 1500px 160px #fff, 1580px 340px #fff,
    1660px 240px #fff,   60px 480px #fff,  180px 560px #fff,  300px 640px #fff,
     420px 580px #e8e8ff, 560px 540px #fff,  680px 620px #fff,  800px 580px #fff,
     920px 680px #fff, 1040px 620px #fff, 1160px 540px #ffe8e8, 1280px 680px #fff,
    1400px 620px #fff, 1520px 560px #fff, 1640px 640px #fff,  160px 820px #fff,
     320px 780px #fff,  500px 840px #fff,  680px 800px #e8e8ff, 860px 860px #fff,
    1040px 820px #fff, 1220px 860px #fff, 1400px 800px #fff, 1580px 860px #fff;
  animation: tps100-twinkle-b 2.6s ease-in-out infinite;
}

@keyframes tps100-twinkle-a {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1;    }
}

@keyframes tps100-twinkle-b {
  0%, 100% { opacity: 1;    }
  50%      { opacity: 0.2;  }
}

/* Gradient text on hero title — override Divi's inline title_text_color */
#hero h1,
#hero .et_pb_fullwidth_header_container h1,
#hero .et_pb_title_container h1,
#hero .header-content h1,
#hero .et_pb_module_header {
  background: linear-gradient(135deg, #ffffff 30%, #ffd4d0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Subhead readability */
#hero .et_pb_fullwidth_header_subhead,
#hero .header-content p {
  color: #c8c8e0 !important;
}

/* ── Hero buttons ──
 * Without the Divi builder actively generating per-module CSS, the button
 * colours from the shortcode attributes don't always get applied. Set them
 * explicitly here.
 */
#hero .et_pb_button,
#hero a.et_pb_button,
#hero .et_pb_fullwidth_header .et_pb_button {
  padding: 14px 30px !important;
  font-family: Montserrat, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  border-radius: 4px !important;
  border-width: 2px !important;
  border-style: solid !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  margin: 8px 6px !important;
  box-sizing: border-box !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

/* Strip Divi's default button icon (the little arrow) */
#hero .et_pb_button::after,
#hero a.et_pb_button::after {
  display: none !important;
}

/* Primary button (first) — red fill + pulse */
#hero .et_pb_fullwidth_header .et_pb_button:first-of-type,
#hero a.et_pb_button:first-of-type {
  background-color: #ff3030 !important;
  border-color: #ff3030 !important;
  color: #ffffff !important;
  animation: tps100-pulse 2.6s ease-in-out infinite;
}

#hero .et_pb_fullwidth_header .et_pb_button:first-of-type:hover,
#hero a.et_pb_button:first-of-type:hover {
  background-color: #e82020 !important;
  border-color: #e82020 !important;
  transform: translateY(-2px);
}

/* Secondary button (second) — outline */
#hero .et_pb_fullwidth_header .et_pb_button:nth-of-type(2),
#hero a.et_pb_button:nth-of-type(2) {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
}

#hero .et_pb_fullwidth_header .et_pb_button:nth-of-type(2):hover,
#hero a.et_pb_button:nth-of-type(2):hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  transform: translateY(-2px);
}

@keyframes tps100-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 48, 48, 0); }
  50%      { box-shadow: 0 0 24px 8px rgba(255, 48, 48, 0.4); }
}


/* ─── Section headings: gradient text on dark sections ──────────────────────── */

#story h2,
#tiers h2,
#lineup h2,
#info h2,
#about h2,
#story .et_pb_text_inner h2,
#tiers .et_pb_text_inner h2,
#lineup .et_pb_text_inner h2,
#info .et_pb_text_inner h2,
#about .et_pb_text_inner h2 {
  background: linear-gradient(120deg, #ffffff 40%, #ffb8b2 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block; /* gradient clip requires block/inline-block */
}

/* Red left-accent on Story heading only — echoes the blockquote border 
#story h2 {
  padding-left: 18px;
  border-left: 3px solid #ff3030;
} */


/* ─── Story section: 100% stat callout box ──────────────────────────────────*/

.tps100-stat-box {
  font-family: Montserrat, sans-serif;
  color: #ffffff;
  font-variant-numeric: tabular-nums; /* prevents layout jitter during counter animation */
}

.tps100-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 0;
  margin-bottom: 4px;
}

.tps100-stat-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tps100-stat-num {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.tps100-stat-total {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
}

.tps100-stat-label {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 8px;
  margin-bottom: 0;
}


/* ─── Lineup section: band cards ─────────────────────────────────────────── */

.tps100-band-photo {
  width: 100%;
  padding-top: 100%; /* square */
  border-radius: 6px;
  margin-bottom: 16px;
  position: relative;
}

.tps100-photo-placeholder {
  background: linear-gradient(135deg, #1e2040 0%, #2d3060 100%);
}

.tps100-photo-mystery {
  background: linear-gradient(135deg, #1a0305 0%, #640007 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  position: relative;
}

/* Position the ? text absolutely inside the padding-top square */
.tps100-photo-mystery::after {
  content: "?";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
}

.tps100-band-origin {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff6060 !important;
  margin-top: 4px;
  margin-bottom: 0;
}

/* Stack band cards on mobile */
@media (max-width: 767px) {
  #lineup .et_pb_row {
    flex-wrap: wrap;
  }
  #lineup .et_pb_column {
    width: 50% !important;
    margin-bottom: 20px;
  }
}

@media (max-width: 479px) {
  #lineup .et_pb_column {
    width: 100% !important;
  }
}


/* ─── Tiers section: tier cards grid ─────────────────────────────────────── */

.tps100-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tps100-tier {
  background: #111126;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tps100-tier:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.18);
}

.tps100-tier-featured:hover {
  box-shadow: 0 12px 40px rgba(255, 48, 48, 0.3);
  border-color: #ff3030;
}

.tps100-tier-limited:hover {
  box-shadow: 0 12px 40px rgba(100, 0, 7, 0.5);
  border-color: #640007;
}

.tps100-tier-featured {
  border-color: #ff3030;
  box-shadow: 0 0 24px rgba(255, 48, 48, 0.15);
}

.tps100-tier-limited {
  border-color: #640007;
  box-shadow: 0 0 16px rgba(100, 0, 7, 0.25);
}

.tps100-tier-badge {
  display: inline-block;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  width: fit-content;
}

.tps100-tier-featured .tps100-tier-badge {
  background: #ff3030;
  color: #ffffff;
}

.tps100-tier-limited .tps100-tier-badge {
  background: #640007;
  color: #ffffff;
}

.tps100-tier-name {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.tps100-tier-price {
  font-family: Montserrat, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1;
}

.tps100-tier-full {
  font-size: 15px;
  font-weight: 400;
  color: #888;
  text-decoration: line-through;
}

.tps100-tier-contents {
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  color: #c8c8d8;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 20px;
}

.tps100-tier-btn {
  display: block;
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cccccc !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tps100-tier-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff !important;
}

.tps100-tier-featured .tps100-tier-btn {
  background: #ff3030;
  border-color: #ff3030;
  color: #ffffff !important;
}

.tps100-tier-featured .tps100-tier-btn:hover {
  background: #cc2020;
  border-color: #cc2020;
}

/* Responsive tier grid */
@media (max-width: 980px) {
  .tps100-tiers {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .tps100-tiers {
    grid-template-columns: 1fr;
  }
}


/* ─── Practical Info: link colour ────────────────────────────────────────── */

#info a,
#about a {
  transition: opacity 0.15s ease;
}

#info a:hover,
#about a:hover {
  opacity: 0.75;
}


/* ─── Utility: suppress Extra's default et_pb_text heading margins ─────────*/

#tiers h2,
#story h2,
#lineup h2,
#info h2,
#about h2 {
  margin-top: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN ELEVATION PASS — cosmic editorial upgrade
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. Global polish ──────────────────────────────────────────────────── */

body.tps100-blank {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.tps100-blank ::selection {
  background: #ff3030;
  color: #ffffff;
}

/* Smooth anchor scrolling — the CSS file is only enqueued on /tps-100,
 * so it's safe to apply to html here; it won't leak to other pages. */
html {
  scroll-behavior: smooth;
}


/* ─── 2. Hero — display headline, eyebrow, shimmer CTA ──────────────────── */

/* Display-scale headline — sized to fit "The Progspace 100" on one line */


#hero .header-content{
  max-width: 1000px;
}
  

#hero h1,
#hero .et_pb_fullwidth_header_container h1,
#hero .et_pb_title_container h1,
#hero .header-content h1,
#hero .et_pb_module_header {
  font-size: clamp(40px, 6vw, 84px) !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* On very narrow mobile, allow wrapping rather than overflow */
@media (max-width: 560px) {
  #hero h1,
  #hero .et_pb_fullwidth_header_container h1,
  #hero .et_pb_title_container h1,
  #hero .header-content h1,
  #hero .et_pb_module_header {
    white-space: normal !important;
    font-size: clamp(36px, 10vw, 52px) !important;
  }
}

/* Eyebrow label above the hero title */
#hero .et_pb_title_container::before,
#hero .header-content::before {
  content: 'THE 10TH ANNIVERSARY SHOW';
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Shimmer sweep on primary CTA */
#hero .et_pb_fullwidth_header .et_pb_button:first-of-type,
#hero a.et_pb_button:first-of-type {
  position: relative !important;
  overflow: hidden !important;
}

#hero .et_pb_fullwidth_header .et_pb_button:first-of-type::before,
#hero a.et_pb_button:first-of-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  animation: tps100-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tps100-shimmer {
  0%   { transform: translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translateX(300%); opacity: 1; }
  60%  { opacity: 0; }
  100% { transform: translateX(300%); opacity: 0; }
}


/* ─── 3. Nebula bleed on non-hero sections ──────────────────────────────── */

#story {
  position: relative !important;
  overflow: hidden !important;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(30, 105, 196, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(100, 0, 7, 0.28) 0%, transparent 50%) !important;
}

#tiers {
  position: relative !important;
  overflow: hidden !important;
  background-image:
    radial-gradient(ellipse at 100% 0%, rgba(255, 48, 48, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(100, 0, 7, 0.22) 0%, transparent 55%) !important;
  padding-top: 140px !important; /* room for marquee strip */
}

#info {
  position: relative !important;
  overflow: hidden !important;
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(30, 105, 196, 0.22) 0%, transparent 55%) !important;
}

#about {
  position: relative !important;
  overflow: hidden !important;
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(180, 20, 35, 0.18) 0%, transparent 60%) !important;
}

/* Keep section content above the background layer */
#story > .et_pb_row,
#tiers > .et_pb_row,
#info > .et_pb_row,
#about > .et_pb_row {
  position: relative;
  z-index: 1;
}


/* ─── 4. Stat box — cosmic display gauge ────────────────────────────────── */

/* Kill the blue inline background on the Divi text module that wraps the stat box */
#story .et_pb_text:has(.tps100-stat-box) {
  background-color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
}

.tps100-stat-box {
  background: rgba(10, 10, 26, 0.65);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 48, 48, 0.18);
  border-radius: 14px;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 50px rgba(0, 0, 0, 0.4);
}

.tps100-stat-box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  background: radial-gradient(ellipse, rgba(255, 48, 48, 0.14) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.tps100-stat-box > * {
  position: relative;
  z-index: 1;
}

.tps100-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: none;
  padding: 10px 0;
  margin-bottom: 0;
  position: relative;
}

.tps100-stat-row + .tps100-stat-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
}

.tps100-stat-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.tps100-stat-num {
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #ffb8b2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tps100-stat-total {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 22px;
  padding-top: 22px;
  border-top: none;
  text-align: center;
  position: relative;
  letter-spacing: 0.02em;
}

.tps100-stat-total::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 48, 48, 0.6),
    transparent
  );
}

.tps100-stat-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
}


/* ─── 5. Tier cards — glassmorphism + holographic featured border ───────── */

.tps100-tier {
  background: rgba(17, 17, 38, 0.55) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 32px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 28px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.tps100-tier:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 22px 44px rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Featured tier — holographic conic-gradient border via animated @property */
@property --tps100-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.tps100-tier-featured {
  background:
    linear-gradient(rgba(17, 17, 38, 0.78), rgba(17, 17, 38, 0.78)) padding-box,
    conic-gradient(
      from var(--tps100-angle),
      #ff3030 0%,
      #ff6060 20%,
      #1e69c4 45%,
      #ff6060 75%,
      #ff3030 100%
    ) border-box !important;
  border: 2px solid transparent !important;
  animation: tps100-conic-spin 8s linear infinite;
}

.tps100-tier-featured:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 22px 50px rgba(255, 48, 48, 0.35);
}

@keyframes tps100-conic-spin {
  to { --tps100-angle: 360deg; }
}

/* Fallback for browsers without @property support — static gradient border */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .tps100-tier-featured {
    border: 2px solid #ff3030 !important;
    background: rgba(17, 17, 38, 0.78) !important;
  }
}

/* Refined tier badges — outlined glow instead of solid pill */
.tps100-tier-badge {
  background: transparent !important;
  padding: 4px 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  position: relative;
}

.tps100-tier-featured .tps100-tier-badge {
  color: #ff5050 !important;
  box-shadow:
    0 0 14px rgba(255, 48, 48, 0.5),
    inset 0 0 0 1px #ff3030;
}

.tps100-tier-limited .tps100-tier-badge {
  color: #ff8080 !important;
  box-shadow:
    0 0 14px rgba(100, 0, 7, 0.6),
    inset 0 0 0 1px #a01020;
}

/* Price typography refinement */
.tps100-tier-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

.tps100-tier-featured .tps100-tier-price {
  font-size: 40px;
  background: linear-gradient(180deg, #ffffff 0%, #ffd4d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ─── 6. Marquee strip above tiers section ──────────────────────────────── */

#tiers::before {
  content: 'THE PROGSPACE 100  ·  28 NOV 2026  ·  CPUNT HOOFDDORP  ·  10 YEARS OF PROG  ·  ONE NIGHT  ·  ★  ·  THE PROGSPACE 100  ·  28 NOV 2026  ·  CPUNT HOOFDDORP  ·  10 YEARS OF PROG  ·  ONE NIGHT  ·  ★  ·  ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.78);
  padding: 22px 0;
  background: #050510;
  border-top: 1px solid rgba(255, 48, 48, 0.4);
  border-bottom: 1px solid rgba(255, 48, 48, 0.4);
  animation: tps100-marquee 40s linear infinite;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

@keyframes tps100-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ─── 7. Practical Info — ticket stubs ──────────────────────────────────── */

#info .et_pb_row {
  gap: 28px;
}

#info .et_pb_column {
  background: rgba(10, 10, 26, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 220, 200, 0.15);
  border-radius: 8px;
  padding: 40px 32px !important;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Corner star glyphs on ticket stubs */
#info .et_pb_column::before {
  content: '★';
  position: absolute;
  top: 14px;
  right: 18px;
  color: rgba(255, 48, 48, 0.55);
  font-size: 14px;
  letter-spacing: 0;
}

#info .et_pb_column::after {
  content: '★';
  position: absolute;
  bottom: 14px;
  left: 18px;
  color: rgba(255, 48, 48, 0.35);
  font-size: 12px;
  letter-spacing: 0;
}

/* Thin red accent line above the h2 in each ticket stub */
#info .et_pb_column .et_pb_text_inner {
  position: relative;
  padding-top: 14px;
}

#info .et_pb_column .et_pb_text_inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: #ff3030;
}


/* ─── Mobile tweaks ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Eyebrow label smaller on mobile */
  #hero .et_pb_title_container::before,
  #hero .header-content::before {
    font-size: 10px;
    letter-spacing: 0.26em;
    margin-bottom: 14px;
  }

  /* Marquee smaller + tighter on mobile */
  #tiers::before {
    font-size: 11px;
    padding: 16px 0;
    letter-spacing: 0.22em;
  }

  #tiers {
    padding-top: 120px !important;
  }

  /* Stat numbers shrink on narrow screens */
  .tps100-stat-num {
    font-size: 48px;
  }

  /* Ticket stubs stack with more breathing room */
  #info .et_pb_column {
    padding: 32px 24px !important;
  }
}