/**
 * The Comedy Sphere — brand tokens, checkerboard ribbon, hero keyframes.
 * Source: designer.standuptix.dev/projects/thecomedysphere/css/custom.css
 */
:root {
  --cc-brand: #f58426;
  --cc-brand-dark: #d96e0f;
  --cc-brand-soft: rgba(245, 132, 38, 0.12);
  --cc-brand-soft-2: rgba(245, 132, 38, 0.2);
  --cc-brand-soft-3: rgba(245, 132, 38, 0.3);
  --cc-accent: #fbb03b;
  --cc-accent-dark: #e89a24;
  --cc-checker-w: 46px;
  --cc-checker-h: 14px;

  --venue-accent: var(--cc-brand);
  --venue-accent-hover: var(--cc-brand-dark);
}

@media (max-width: 767px) {
  :root {
    --cc-checker-w: 32px;
    --cc-checker-h: 11px;
  }
}

::selection {
  background: var(--cc-brand);
  color: #fff;
}

[x-cloak] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* Fixed header is nav row only (90px). Homepage also clears the checker ribbon. */
main {
  padding-top: 90px;
}

.cc-has-ribbon main {
  padding-top: calc(90px + var(--cc-checker-h) * 2);
}

.original.slashed {
    color: #ff0000;
}

.slashed {
    text-decoration: line-through;
}

.cc-checker {
  height: calc(var(--cc-checker-h) * 2);
  background-color: #fff;
  background-image: conic-gradient(
    var(--cc-brand) 25%, #fff 0 50%,
    var(--cc-brand) 0 75%, #fff 0
  );
  background-size: calc(var(--cc-checker-w) * 2) calc(var(--cc-checker-h) * 2);
}

.cc-view-fade {
  animation: ccFadeIn 0.3s ease;
}

@keyframes ccFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cc-hero-fade {
  animation: ccHeroFadeUp 0.6s ease both;
}

.cc-hero-fade-delay-1 { animation-delay: 0.1s; }
.cc-hero-fade-delay-2 { animation-delay: 0.2s; }

@keyframes ccHeroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cc-hero-progress {
  width: 0%;
  animation: ccHeroProgress 6s linear forwards;
}

@keyframes ccHeroProgress {
  from { width: 0%; }
  to { width: 100%; }
}

.cc-image-reveal {
  animation: ccImageReveal 0.8s ease both;
}

@keyframes ccImageReveal {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-view-fade,
  .cc-hero-fade,
  .cc-hero-progress,
  .cc-image-reveal {
    animation: none;
  }
  .cc-hero-progress { width: 100%; }
}