/* Opening curtain and countdown. */

.curtain-stage {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 100%, #6f2028 0, #3b090e 62%, #200307 100%);
}

.curtain-stage__panel {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  width: 52%;
  background: repeating-linear-gradient(90deg, #4c0d14 0 4%, #7e1b24 7%, #a5313a 12%, #5c1018 17%, #2e050a 22%, #7e1b24 28%);
  box-shadow: inset 1.5rem 0 2.5rem rgba(22, 0, 2, .6), inset -1.5rem 0 2.5rem rgba(255, 137, 137, .1), inset 0 -3rem 4rem rgba(14, 0, 2, .45);
  transition: transform 1.2s cubic-bezier(.7, 0, .2, 1);
}

.curtain-stage__panel::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .58;
  background: linear-gradient(105deg, transparent 8%, rgba(255, 180, 165, .18) 22%, transparent 34%, rgba(0, 0, 0, .35) 53%, transparent 70%);
  mix-blend-mode: screen;
}

.curtain-stage__panel--left { left: -26%; z-index: 3; transform-origin: left center; animation: curtain-sway-left 4.8s ease-in-out infinite; }

.curtain-stage__panel--right {
  right: 0;
  transform: scaleX(-1);
  transform-origin: right center;
  animation: curtain-sway-right 4.8s ease-in-out infinite;
}

.curtain-stage__right-logos {
  position: absolute;
  z-index: 2;
  inset: 0 0 0 25%;
  pointer-events: none;
  opacity: .2;
  background-image: url("../../images/logo-gold.webp");
  background-position: 1.25rem 1.25rem;
  background-size: 9.5rem auto;
  background-repeat: repeat;
}

.curtain-stage.is-opening .curtain-stage__panel--left { transform: translateX(-102%); }

.curtain-stage.is-opening .curtain-stage__panel--right { transform: scaleX(-1) translateX(-102%); }

.curtain-stage__lights {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.curtain-stage__lights span {
  position: absolute;
  top: -45%;
  width: 28vw;
  height: 150vh;
  opacity: .52;
  background: radial-gradient(ellipse at top, rgba(255, 232, 167, .55), rgba(255, 202, 75, .16) 28%, transparent 69%);
  filter: blur(10px);
  mix-blend-mode: screen;
  transform-origin: top center;
  animation: spotlight-sweep 9s ease-in-out infinite alternate;
}

.curtain-stage__lights span:first-child { left: 16%; }

.curtain-stage__lights span:last-child { right: 16%; animation-delay: -4.5s; }

.curtain-stage__content {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 1.25rem;
  width: min(88vw, 34rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(251, 248, 243, .78);
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, .25);
  text-align: center;
}

.curtain-stage__pi {
  position: absolute;
  z-index: 4;
  right: 1rem;
  bottom: .65rem;
  border: 0;
  background: transparent;
  color: rgba(251, 248, 243, .52);
  cursor: pointer;
  font: 600 1.15rem / 1 var(--font-display);
  text-decoration: none;
  transition: color .2s ease;
}

.curtain-stage__pi:hover,
.curtain-stage__pi:focus-visible { color: var(--brand-gold); }

.curtain-stage__unlock {
  width: min(calc(100vw - 3rem), 25rem);
  padding: 1.5rem;
  border: 1px solid var(--brand-gold);
  background: #2b080d;
  color: var(--brand-cream);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45);
}

.curtain-stage__unlock::backdrop { background: rgba(17, 2, 5, .55); }
.curtain-stage__unlock h2 { margin: 0 0 1.25rem; font: 400 1.8rem / 1 var(--font-display); }
.curtain-stage__unlock label { display: grid; gap: .5rem; color: var(--brand-cream); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; }
.curtain-stage__unlock input { width: 100%; padding: .75rem; border: 1px solid rgba(251, 248, 243, .6); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; }
.curtain-stage__unlock form > div { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.curtain-stage__unlock button { padding: .65rem .9rem; border: 1px solid var(--brand-gold); background: transparent; color: var(--brand-cream); cursor: pointer; font: 500 .6rem / 1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
.curtain-stage__unlock button[type="submit"] { background: var(--brand-gold); color: #2b080d; }
.curtain-stage__unlock-error { margin: .85rem 0 0; color: #ffc9c9; font-size: .75rem; }

.curtain-stage__brand {
  margin: 0;
  color: var(--brand-cream);
  font: 500 clamp(.62rem, 1vw, .8rem) / 1 var(--font-sans);
  letter-spacing: .45em;
  text-transform: uppercase;
}

.curtain-stage__countdown {
  padding: 1rem;
  border: 1px solid rgba(221, 189, 87, .82);
  background: rgba(28, 3, 7, .25);
}

.curtain-stage__countdown > p {
  margin: 0 0 .85rem;
  color: var(--brand-cream);
  font: 400 .6875rem / 1 var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.curtain-stage__time {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}

.curtain-stage__time span { display: grid; gap: .35rem; }

.curtain-stage__time b {
  color: var(--brand-gold);
  font: 400 clamp(2.5rem, 7vw, 4.25rem) / 1 var(--font-display);
}

.curtain-stage__time small {
  color: var(--brand-cream);
  font: 500 .5625rem / 1 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

@keyframes curtain-sway-left {
  0%, 100% { transform: translateX(0) skewX(0); }
  50% { transform: translateX(-2.2%) skewX(-.9deg); }
}

@keyframes curtain-sway-right {
  0%, 100% { transform: scaleX(-1) translateX(0) skewX(0); }
  50% { transform: scaleX(-1) translateX(-2.2%) skewX(-.9deg); }
}

@keyframes spotlight-sweep {
  from { transform: rotate(-16deg) translateX(-8vw); }
  to { transform: rotate(16deg) translateX(8vw); }
}

.curtain-stage ~ .site-footer,
body:has(.curtain-stage) .site-header { display: none; }

@media (prefers-reduced-motion: reduce) {

.curtain-stage__panel,
  .curtain-stage__lights span { animation: none; transition-duration: .01ms; }
}