/* =====================================================================
   MENCH STAGE-CURTAIN TRANSITION (final, 30 October 2026)
   Sits directly before the Events section. As you scroll, red velvet
   curtains sweep shut over the whole screen, a marquee sign lights up and
   flips through kinds of event while five-colour bulbs chase around it,
   then the curtains open on the Events section.

   Needs Antonio 700 from Google Fonts (loaded in index.html's font link: a deliberate exception to the style
   guide's fonts, because the owner chose the sign as it is). Markup: the .curtain block just before #events in
   index.html. Script: js/curtain.js.
   ===================================================================== */
.curtain {
  --curtain-bg: #14171b; /* the Events section's background (its night colour; day below) */
  --curtain-gold: #e8b44a;
  position: relative;
  height: 105vh; /* scroll length of the whole effect */
  background: var(--curtain-bg);
}
/* the curtains are a 105vh stretch of the Events section's own background, by day too */
:root[data-mode="day"] .curtain {
  --curtain-bg: #fffbf0;
}
/* z-index 58: over the go-to-top arrow (55) and the desktop menu notch (57), under the toast (60) and the phone
   menu (81, 82); the popups are <dialog>s in the top layer, above everything */
.curtain-fx {
  position: fixed;
  inset: 0;
  z-index: 58;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

/* the two velvet curtains */
.curtain-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 53vw;
  will-change: transform;
  background:
    linear-gradient(rgb(0 0 0 / 0.5), transparent 24%, transparent 72%, rgb(0 0 0 / 0.4)),
    repeating-linear-gradient(
      90deg,
      #4a0614 0,
      #7e1124 1.1vw,
      #b8223a 2.3vw,
      #dc4153 2.9vw,
      #a21c30 3.6vw,
      #650c1e 4.8vw,
      #4a0614 6vw
    );
  box-shadow: 0 0 60px rgb(0 0 0 / 0.6);
}
.curtain-panel::after {
  /* gold fringe */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background: repeating-linear-gradient(90deg, #f2c866 0 3px, #a87a22 3px 6px);
  -webkit-mask: linear-gradient(transparent, #000 35%);
  mask: linear-gradient(transparent, #000 35%);
}
.curtain-panel--l {
  left: 0;
  transform-origin: 0 50%;
}
.curtain-panel--r {
  right: 0;
  transform-origin: 100% 50%;
}

/* scalloped valance and gold rail across the top */
.curtain-valance {
  position: absolute;
  left: -2vw;
  right: -2vw;
  top: 0;
  height: 17vh;
  will-change: transform;
  background:
    linear-gradient(rgb(0 0 0 / 0.45), transparent 60%),
    repeating-linear-gradient(90deg, #5a0818 0, #9c1b2e 2vw, #c92e42 3vw, #8a1527 4.4vw, #5a0818 6vw);
  -webkit-mask: radial-gradient(60% 100% at 50% 0, #000 98%, transparent 100%) 0 0 / 12vw 100% repeat-x;
  mask: radial-gradient(60% 100% at 50% 0, #000 98%, transparent 100%) 0 0 / 12vw 100% repeat-x;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.5));
}
.curtain-trim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  background: linear-gradient(#f2c866, #a87a22);
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.5);
}

/* the marquee sign */
.curtain-sign {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 30px 44px 34px;
  border-radius: 18px;
  text-align: center;
  will-change: transform, opacity;
  background: #1a0b0a;
  color: #fff1d0;
  box-shadow:
    0 0 0 6px var(--curtain-gold),
    0 30px 60px rgb(0 0 0 / 0.6);
  font-family: "Antonio", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  opacity: 0;
}
.curtain-sign small {
  display: block;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--curtain-gold);
}
.curtain-sign b {
  display: block;
  margin-top: 6px;
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-shadow: none;
}

/* five-colour chasing bulbs (red, yellow, blue, green, purple: the Mench night colours) */
.curtain-bulbs {
  position: absolute;
  inset: -20px;
  padding: 14px;
  border-radius: 26px;
  background:
    radial-gradient(circle, #ff5b52 0 4px, rgb(255 91 82 / 0.3) 5px, transparent 7px) calc(var(--chase, 0px) + 0px) 0 /
      130px 26px,
    radial-gradient(circle, #ffd731 0 4px, rgb(255 215 49 / 0.3) 5px, transparent 7px) calc(var(--chase, 0px) + 26px)
      0 / 130px 26px,
    radial-gradient(circle, #4fa6ff 0 4px, rgb(79 166 255 / 0.3) 5px, transparent 7px) calc(var(--chase, 0px) + 52px)
      0 / 130px 26px,
    radial-gradient(circle, #35e08b 0 4px, rgb(53 224 139 / 0.3) 5px, transparent 7px) calc(var(--chase, 0px) + 78px)
      0 / 130px 26px,
    radial-gradient(circle, #b977ff 0 4px, rgb(185 119 255 / 0.3) 5px, transparent 7px) calc(var(--chase, 0px) + 104px)
      0 / 130px 26px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

/* the event name that flips */
.curtain-flip {
  display: inline-block;
}
.curtain-flip.is-new {
  animation: curtain-flip 0.32s cubic-bezier(0.25, 2.4, 0.5, 1);
}
@keyframes curtain-flip {
  from {
    transform: translateY(40%) rotateX(80deg);
    opacity: 0;
  }
}

/* phones: let long names wrap inside the sign */
@media (max-width: 640px) {
  .curtain-sign {
    box-sizing: border-box;
    width: max-content;
    max-width: 86vw;
    padding: 24px 26px 28px;
  }
  .curtain-sign b {
    font-size: min(40px, 8.5vw);
  }
}

/* less motion: no curtain at all, the page goes straight to Events */
/* without JavaScript (.no-js on <html>, removed by js/mode.js) the effect can't play: no blank screen in its place */
.no-js .curtain {
  height: 0;
}
.no-js .curtain-fx {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .curtain {
    height: 0;
  }
  .curtain-fx {
    display: none;
  }
  .curtain-flip.is-new {
    animation: none;
  }
}
/* the divider line that sits between sections (css/page/02-sections.css) goes above the curtain block, since the
   block now stands between Video games and Events */
.section + .curtain {
  border-top: var(--line) solid var(--edge);
}
[data-mode="night"] .section + .curtain {
  border-top: 1px solid var(--hair);
}