/*!
  The Venue Live™ — Global Stylesheet

  All visual stage treatments, gradients, lighting schemes, typography systems,
  button styles, and layout compositions defined in this stylesheet are
  original creative works protected under international copyright law.

  Unauthorized copying, recreation, or derivative use of The Venue Live visual
  identity, including but not limited to stage backdrops, glow treatments,
  card layouts, and hero compositions, is strictly prohibited and subject
  to legal enforcement.

  Fingerprint ID: TVL-STYLES-CSS-V1-2025
*/

/* =========================
   Reset / Base
   ========================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary-color: #ff00ff;
  --secondary-color: #00ffff;
  --accent-yellow: #ffff00;
  --accent-pink: #ff69b4;
  --accent-purple: #9d4edd;

  --dark-bg: #0a0a0a;
  --light-bg: #f5f5f5;

  --text-dark: #1a1a1a;
  --text-light: #ffffff;

  --card-radius: 22px;
  --soft-radius: 16px;

  /* CLS: sticky header anchor offset */
  --top-offset: 120px;
}

html { scroll-behavior: smooth; }
:root { scroll-padding-top: var(--top-offset); }

body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  background: #fff;

  /* CLS: reduce font-swap jump */
  font-size-adjust: 0.52;
}

/* CLS: prevent inline baseline gaps */
img, svg, video, canvas, iframe { display: block; max-width: 100%; }

/* Containers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   Animated Header
   ========================= */

.animated-header{
  background: var(--dark-bg);
  padding: 30px 0;
  overflow: hidden;
  position: relative;

  /* CLS: reserve height */
  min-height: 120px;

  display: flex;
  align-items: center;
}

.scroll-wrap{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  overflow: hidden;
}

.scroll-text{
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: scroll 20s linear infinite;
  font-size: 4rem;
  font-weight: 900;
  gap: 60px;

  /* stability */
  transform: translateZ(0);
}

.scroll-text span{
  background: linear-gradient(
    90deg,
    var(--primary-color),
    var(--secondary-color),
    var(--accent-yellow),
    var(--accent-pink)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: colorShift 5s ease-in-out infinite;
}

@keyframes scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes colorShift{
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(180deg); }
}

/* =========================
   Navigation
   ========================= */

.navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 1000;

  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);

  /* CLS: reserve stable height */
  min-height: 76px;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.nav-brand {
  font-size: 1.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 800;
  transition: color 0.25s ease, transform 0.25s ease;
}

.nav-links a:hover {
  color: var(--primary-color);
  transform: translateY(-1px);
}

/* =========================
   Hero Section
   ========================= */

.hero {
  position: relative;
  min-height: 80vh;  /* CLS: stable */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 0, 255, 0.30) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 255, 255, 0.28) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(255, 255, 0, 0.18) 0%, transparent 50%);
  animation: pulse 8s ease-in-out infinite;
  pointer-events: none; /* click stability */
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: var(--text-light);
  padding: 0 18px;
  max-width: 980px;
}

.hero-title {
  font-size: 4.5rem;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.05;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.28);
}

.hero-subtitle {
  font-size: 1.3rem;
  max-width: 760px;
  margin: 0 auto 40px;
  line-height: 1.8;
  opacity: 0.96;
}

.hero-cta {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 20;
}

/* Scroll Down CTA */
.scroll-down {
  margin-top: 40px;
  text-align: center;
  color: var(--text-light);
  font-size: 1.1rem;
  font-weight: 800;
  opacity: 0.9;
  animation: fadeInScroll 1.2s ease-in-out forwards;
}

.scroll-down span {
  display: block;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.scroll-down .arrow {
  font-size: 2.6rem;
  line-height: 1;
  animation: upDownArrow 1.4s infinite ease-in-out;
  text-shadow:
    0 0 4px rgba(120, 0, 0, 0.45),
    0 0 7px rgba(120, 0, 0, 0.35),
    0 0 12px rgba(120, 0, 0, 0.25);
}

@keyframes fadeInScroll {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes upDownArrow {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(12px); }
  100% { transform: translateY(0); }
}

/* =========================
   Buttons
   ========================= */

.btn {
  padding: 16px 40px;
  font-size: 1.05rem;
  font-weight: 900;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
  cursor: pointer;
  border: none;
  display: inline-block;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
  color: var(--text-light);
  box-shadow: 0 14px 38px rgba(157, 78, 221, 0.38);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(157, 78, 221, 0.55);
  opacity: 0.98;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-light);
  border: 2px solid rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: translateY(-3px);
}

.btn-full { width: 100%; }

/* =========================
   About Section
   ========================= */

.about-section {
  padding: 100px 0;
  background: var(--light-bg);
}

.section-title {
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
  color: #666;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.8;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.about-card {
  background: white;
  padding: 40px 30px;
  border-radius: var(--card-radius);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.14);
}

.card-icon { font-size: 3rem; margin-bottom: 18px; }

.about-card h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: var(--text-dark);
  font-weight: 900;
}

.about-card p { color: #666; line-height: 1.8; font-weight: 650; }

/* =========================
   For Comedians / Fans Sections
   ========================= */

.for-comedians-section,
.for-fans-section { padding: 100px 0; }

.for-comedians-section { background: white; }
.for-fans-section      { background: var(--light-bg); }

.split-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.split-content.reverse { direction: rtl; }
.split-content.reverse > * { direction: ltr; }

.split-text h2 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.split-text h3 {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: var(--text-dark);
  font-weight: 900;
}

.feature-list { list-style: none; margin-bottom: 40px; }

.feature-list li {
  font-size: 1.1rem;
  padding: 12px 0;
  color: #444;
  font-weight: 700;
}

.split-image { position: relative; }

/* =========================
   Comedian + Fan Images
   ========================= */

.placeholder-image{
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;

  /* CLS: stable height */
  height: 400px;

  border-radius: var(--card-radius);
  box-shadow: 0 22px 65px rgba(0,0,0,0.16);
  transform: translateZ(0);
  transition: filter 0.25s ease;
}

.placeholder-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,0,255,0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(0,255,255,0.14), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.placeholder-image:hover { filter: saturate(1.08) contrast(1.06); }

.comedian-image{
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 0, 255, 0.28), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(0, 255, 255, 0.22), transparent 58%),
    url("/skeleton.jpg");
  background-size: cover;
  background-position: center;
}

.fan-image{
  background:
    radial-gradient(circle at 35% 35%, rgba(0, 255, 255, 0.22), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255, 200, 0, 0.16), transparent 58%),
    url("/fan-crowd.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.08) contrast(1.06);
}

/* =========================
   Stage Sections
   ========================= */

.stage-section {
  width: 100%;
  padding: 90px 0 110px;
  background:
    radial-gradient(circle at top, rgba(255, 0, 255, 0.15), transparent 55%),
    radial-gradient(circle at bottom, rgba(0, 255, 255, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(5,5,12,1) 0%, rgba(10,10,18,1) 60%, rgba(5,5,12,1) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stage-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.stage-header { margin-bottom: 40px; }

.stage-title {
  font-size: 2.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: 900;
}

.stage-subtitle {
  font-size: 1.1rem;
  opacity: 0.85;
  color: rgba(255,255,255,0.82);
}

.stage-display { width: 100%; margin-bottom: 40px; }

.stage-screen {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;

  /* CLS: fixed stable height */
  height: 320px;

  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.08), rgba(0, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stage-screen::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 180deg,
    rgba(255, 0, 255, 0.6),
    rgba(0, 255, 255, 0.6),
    rgba(255, 255, 0, 0.6),
    rgba(255, 0, 255, 0.6)
  );
  opacity: 0.42;
  mix-blend-mode: screen;
  filter: blur(10px);
  z-index: -1;
  animation: stageGlow 8s linear infinite;
  pointer-events: none;
}

.stage-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 2px);
  background-size: 100% 4px;
  opacity: 0.16;
  pointer-events: none;
}

.stage-screen:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85);
}

@keyframes stageGlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.stage-top-bar {
  position: absolute;
  top: 18px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  z-index: 2;
  flex-wrap: wrap;
}

.live-pill {
  background: #ff004c;
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 16px rgba(255, 0, 76, 0.7);
}

.live-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

.stage-room-tag {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #f4f4f4;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.viewer-count {
  margin-left: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #e0ffff;
  font-weight: 800;
}

.stage-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;
}

.show-meta { max-width: 560px; text-align: left; color: #ffffff; }

.show-title { font-size: 1.8rem; margin-bottom: 10px; font-weight: 900; }

.show-performer, .show-time {
  font-size: 1rem;
  opacity: 0.92;
  margin-bottom: 6px;
}

.show-performer span, .show-time span { font-weight: 900; }

.show-tags {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.show-tag {
  font-size: 0.78rem;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.30);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
}

/* Stage buttons */
.stage-interactions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.stage-btn {
  padding: 14px 32px;
  border-radius: 999px;
  border: none;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background-position 0.3s ease;
  background-size: 200% 200%;
  -webkit-tap-highlight-color: transparent;
}

.join-btn {
  background-image: linear-gradient(135deg, #ff00ff, #ff9aee);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 0, 255, 0.5);
}

.fan-btn {
  background-image: linear-gradient(135deg, #00ffff, #8fffff);
  color: #001018;
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.5);
}

.stage-btn:hover {
  transform: translateY(-3px) scale(1.02);
  opacity: 0.95;
  box-shadow: 0 0 36px rgba(255, 255, 255, 0.45);
  background-position: 100% 0;
}

/* =========================
   Backstage strip
   ========================= */

.backstage-strip{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  align-items: stretch;
}

.backstage-card{
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;

  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 20px;
  min-height: 110px;
  border-radius: var(--card-radius);

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);

  box-shadow:
    0 24px 70px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.06) inset;

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.backstage-card,
.backstage-card:link,
.backstage-card:visited,
.backstage-card:hover,
.backstage-card:active,
.backstage-card *{
  color: inherit;
  text-decoration: none;
}

.backstage-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,0,255,0.22), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(0,255,255,0.18), transparent 58%),
    radial-gradient(circle at 55% 15%, rgba(255,255,255,0.10), transparent 45%);
  opacity: 1;
  pointer-events:none;
}

.backstage-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(110deg,
    transparent 40%,
    rgba(255,255,255,0.10) 48%,
    transparent 56%);
  transform: translateX(-40%) rotate(6deg);
  opacity: 0;
  transition: opacity .25s ease, transform .6s ease;
  pointer-events:none;
}

.backstage-card:hover{
  transform: translateY(-3px);
  filter: brightness(1.03);
  box-shadow:
    0 30px 90px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.08) inset;
}

.backstage-card:hover::after{
  opacity: 1;
  transform: translateX(40%) rotate(6deg);
}

.backstage-icon{
  position: relative;
  z-index: 1;

  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  font-size: 1.35rem;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18) inset;

  flex: 0 0 auto;
}

.backstage-body{
  position: relative;
  z-index: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.backstage-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.92);
}

.backstage-desc{
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.74);
}

.backstage-status{
  position: relative;
  z-index: 1;
  margin-left: auto;

  font-weight: 900;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: 999px;

  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;

  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
}

/* States */
.backstage-card.live{
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(230,255,245,0.90));
  border: 1px solid rgba(0,255,160,0.28);
  box-shadow:
    0 26px 85px rgba(0,0,0,0.40),
    0 0 34px rgba(0,255,160,0.18);
}

.backstage-card.live::before{ opacity: 0.35; }
.backstage-card.live .backstage-title{ color: #0b1f1a; }
.backstage-card.live .backstage-desc{ color: rgba(15,45,38,0.86); }

.backstage-card.live .backstage-icon{
  background: rgba(0,255,160,0.18);
  border-color: rgba(0,255,160,0.26);
  box-shadow: 0 0 14px rgba(0,255,160,0.45);
}

.backstage-card.live .backstage-status{
  background: rgba(0,255,160,0.22);
  border-color: rgba(0,255,160,0.45);
  color: #083a2e;
  box-shadow: 0 0 10px rgba(0,255,160,0.40);
}

.backstage-card.standby{
  box-shadow:
    0 26px 85px rgba(0,0,0,0.40),
    0 0 34px rgba(255,200,0,0.14);
}

.backstage-card.standby .backstage-icon{
  background: rgba(255,200,0,0.14);
  border-color: rgba(255,200,0,0.20);
}

.backstage-card.standby .backstage-status{
  background: rgba(255,200,0,0.18);
  border-color: rgba(255,200,0,0.28);
}

.backstage-card.locked{
  opacity: 0.78;
  filter: saturate(0.85);
}

.backstage-card.locked .backstage-icon{
  background: rgba(255, 0, 120, 0.10);
  border-color: rgba(255, 0, 120, 0.18);
}

.backstage-card.locked .backstage-status{
  background: rgba(255, 0, 120, 0.14);
  border-color: rgba(255, 0, 120, 0.22);
}

/* =========================
   Stage variants
   ========================= */

.stage-section.stage-b{
  background:
    radial-gradient(circle at top, rgba(0,255,255,0.14), transparent 55%),
    radial-gradient(circle at bottom, rgba(255,200,0,0.10), transparent 55%),
    linear-gradient(180deg, rgba(5,5,12,1) 0%, rgba(8,10,18,1) 60%, rgba(5,5,12,1) 100%);
}

.stage-section.after-hours{
  background:
    radial-gradient(circle at top, rgba(255,0,120,0.16), transparent 55%),
    radial-gradient(circle at bottom, rgba(255,0,255,0.10), transparent 55%),
    linear-gradient(180deg, rgba(4,4,10,1) 0%, rgba(9,6,14,1) 60%, rgba(4,4,10,1) 100%);
}

/* =========================
   Signup Sections + Contact
   ========================= */

.signup-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.signup-section.alt {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.signup-box {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  padding: 64px;
  border-radius: 34px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.signup-box h2 {
  font-size: 2.6rem;
  margin-bottom: 15px;
  text-align: center;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.signup-box p {
  text-align: center;
  color: #666;
  margin-bottom: 34px;
  font-size: 1.1rem;
  font-weight: 700;
}

.signup-form,
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.signup-form input,
.signup-form textarea,
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 14px;
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.signup-form input::placeholder,
.signup-form textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(0,0,0,0.40);
}

.signup-form input:focus,
.signup-form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(255, 0, 255, 0.55);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(255,0,255,0.12);
  transform: translateY(-1px);
}

.signup-form textarea,
.contact-form textarea { resize: vertical; min-height: 110px; }

[name="bot-field"] { display: none !important; }

.contact-section{
  padding: 100px 0;
  background: var(--light-bg);
}

.contact-section h2{
  font-size: 2.5rem;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  text-align: center;
}

.contact-box{
  max-width: 720px;
  margin: 26px auto 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  padding: 64px;
  border-radius: 34px;
  box-shadow: 0 22px 70px rgba(0,0,0,0.18);
}

.contact-subtitle{
  text-align: center;
  margin: 0 0 26px;
  color: #666;
  font-weight: 700;
}

/* =========================
   Footer
   ========================= */

.footer {
  background: var(--dark-bg);
  color: var(--text-light);
  padding: 60px 0 30px;
  position: relative;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 40px;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-brand h3 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-brand p { opacity: 0.8; font-weight: 700; }

.footer-links{
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.footer-links a{
  color: rgba(255,255,255,0.86);
  text-decoration: none;
  font-weight: 800;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-links a:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.6;
  font-weight: 700;
}

/* hidden fingerprint block */
.tvl-legal{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 900px){
  .backstage-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-content { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .scroll-text { font-size: 2.5rem; }
  .nav-links { display: none; }

  .hero-title { font-size: 2.6rem; }
  .hero-subtitle { font-size: 1.1rem; }

  .signup-box,
  .contact-box { padding: 42px 28px; }

  .stage-title { font-size: 2.1rem; }

  /* CLS: stable mobile stage height */
  .stage-screen { height: 260px; border-radius: 18px; }

  .stage-interactions { flex-direction: column; align-items: center; }
  .stage-btn { width: 100%; max-width: 320px; }

  .show-meta { text-align: center; }
}

@media (max-width: 520px){
  .backstage-strip{ grid-template-columns: 1fr; }
}

/* =====================================================
   NEW: Updated layout hooks for hero + Twitch embed
   and new header/footer from the latest index.html
   ===================================================== */

/* Site header variant used in updated index */
.site-header {
  background: rgba(10, 10, 10, 0.96);
  color: var(--text-light);
  position: sticky;
  top: 0;
  z-index: 1100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px;
}

.site-header .logo {
  font-size: 1.6rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.main-nav a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 750;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.main-nav a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Slight padding boost for hero so grid has breathing room */
.hero {
  padding: 80px 0;
}

/* Two-column hero for Twitch stage + copy */
.hero-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
}

.hero-copy {
  text-align: left;
  color: var(--text-light);
}

.hero-copy .show-title {
  font-size: 2.6rem;
  margin-bottom: 16px;
  line-height: 1.1;
}

.hero-copy .hero-subtitle {
  font-size: 1.1rem;
  max-width: 540px;
  margin: 0 0 24px;
}

.hero-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
}

.hero-tags li {
  font-size: 0.78rem;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 900;
}

.next-set {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
  font-weight: 700;
}

.next-set span {
  font-weight: 900;
}

/* Hero stage / Twitch embed side */
.hero-stage {
  position: relative;
}

.stage-embed-wrapper {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  background: #000;

  /* Maintain aspect ratio without layout shift */
  aspect-ratio: 16 / 9;
}

.stage-embed-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.stage-footer {
  margin-top: 10px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  text-align: right;
}

.stage-footer a {
  color: var(--accent-yellow);
  text-decoration: none;
  font-weight: 700;
}

.stage-footer a:hover {
  text-decoration: underline;
}

/* Outline button used on contact form in updated index */
.btn-outline {
  background: transparent;
  color: var(--text-dark);
  border: 2px solid rgba(0, 0, 0, 0.26);
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-outline:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

/* Site footer variant for updated index */
.site-footer {
  background: var(--dark-bg);
  color: var(--text-light);
  padding: 40px 0 24px;
  margin-top: 0;
}

.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.site-footer .footer-inner p {
  margin: 0;
  font-weight: 700;
}

.site-footer .footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer .footer-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 750;
  font-size: 0.9rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-footer .footer-links a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Admin strip used by JS fade */
.footer-admin {
  text-align: center;
  padding: 10px 20px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  transition: opacity 0.6s ease;
}

/* Mobile adjustments for new hero grid */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-stage {
    order: -1; /* show video first on mobile */
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy .show-title {
    font-size: 2.1rem;
  }

  .hero-tags {
    justify-content: center;
  }

  .stage-footer {
    text-align: center;
  }
}

/* =========================================
   SIGNUP + CONTACT OVERRIDES (2026 polish)
   ========================================= */

.signup-section {
  padding: 96px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.signup-section.alt {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.signup-box {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  padding: 56px 64px;
  border-radius: 32px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

.signup-box h2 {
  font-size: 2.6rem;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 900;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.signup-box p {
  text-align: center;
  color: #666;
  margin-bottom: 26px;
  font-size: 1.05rem;
  font-weight: 700;
}

/* Layout the forms in clean vertical rows */

#comedianForm,
#fanForm,
#contactForm {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Each form row (usually <p> around a label + input) */
#comedianForm p,
#fanForm p,
#contactForm p,
.signup-form-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  font-weight: 700;
  color: #555;
}

/* Inputs / textareas */

#comedianForm input,
#comedianForm textarea,
#fanForm input,
#fanForm textarea,
#contactForm input,
#contactForm textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  font-size: 1rem;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

#comedianForm textarea,
#fanForm textarea,
#contactForm textarea {
  min-height: 110px;
  resize: vertical;
}

#comedianForm input::placeholder,
#comedianForm textarea::placeholder,
#fanForm input::placeholder,
#fanForm textarea::placeholder,
#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

#comedianForm input:focus,
#comedianForm textarea:focus,
#fanForm input:focus,
#fanForm textarea:focus,
#contactForm input:focus,
#contactForm textarea:focus {
  outline: none;
  border-color: rgba(255, 0, 255, 0.55);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.08),
    0 0 0 4px rgba(255, 0, 255, 0.12);
  transform: translateY(-1px);
}

/* Submit buttons inside the cards */

.signup-box button[type="submit"],
.contact-box button[type="submit"],
.signup-box input[type="submit"],
.contact-box input[type="submit"] {
  margin-top: 10px;
  padding: 14px 32px;
  border-radius: 999px;
  border: none;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
  color: #fff;
  box-shadow: 0 14px 38px rgba(157, 78, 221, 0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.signup-box button[type="submit"]:hover,
.contact-box button[type="submit"]:hover,
.signup-box input[type="submit"]:hover,
.contact-box input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(157, 78, 221, 0.55);
  opacity: 0.98;
}

/* Contact card to match signup cards */

.contact-section {
  padding: 96px 0;
  background: var(--light-bg);
}

.contact-box {
  max-width: 900px;
  margin: 26px auto 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  padding: 56px 64px;
  border-radius: 32px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
}

.contact-section h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  text-align: center;
}

.contact-subtitle {
  text-align: center;
  margin: 0 0 26px;
  color: #666;
  font-weight: 700;
}

/* Mobile tweaks */

@media (max-width: 768px) {
  .signup-box,
  .contact-box {
    padding: 40px 24px;
  }
}

/* =========================
   Legal Pages / Performer Release
   ========================= */

.legal-page {
  background: var(--light-bg);
  color: var(--text-dark);
}

/* Main wrapper for legal content sections (Terms, Privacy, NDA, Release, etc.) */
.legal-hero {
  padding: 80px 0 100px;
}

.legal-card {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.12);
  padding: 48px 40px;
}

.legal-card h1 {
  font-size: 2.4rem;
  font-weight: 900;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.legal-card h2 {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 26px 0 10px;
  color: var(--text-dark);
}

.legal-updated {
  font-size: 0.9rem;
  font-weight: 700;
  color: #777;
  margin-bottom: 24px;
}

.legal-card p {
  margin-bottom: 14px;
  font-weight: 600;
  color: #444;
}

/* Default lists inside legal text */
.legal-card ul {
  margin: 0 0 18px 1.4rem;
  padding-left: 1rem;
  list-style: disc;
}

.legal-card li {
  margin-bottom: 8px;
  font-weight: 600;
  color: #444;
}

/* Optional extra emphasis line */
.legal-note {
  font-size: 0.92rem;
  color: #666;
  font-style: italic;
  margin-top: 4px;
}

/* Signature area for NDA / Performer Release */
.signature-block {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.signature-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95rem;
}

.signature-label {
  font-weight: 700;
  color: #444;
}

.signature-line {
  border-bottom: 1px solid #b5b5b5;
  min-height: 22px;
}

/* Full-row block if you want a single long line (e.g., initials) */
.signature-field.full-row {
  grid-column: 1 / -1;
}

/* Mobile: stack signature fields vertically */
@media (max-width: 768px) {
  .legal-card {
    padding: 32px 22px;
    border-radius: 22px;
  }

  .legal-card h1 {
    font-size: 2rem;
  }

  .signature-block {
    grid-template-columns: 1fr;
  }
}