/* ==========================================================================
   THE COVEN THEATRE · show switch + snuff transition
   Mechanics only. Not one colour lives in this file — each show themes
   .show-switch from its own stylesheet, in its own custom properties, so
   the control always belongs to the page it is standing on.
   Never declare a bare .nav rule here: both shows define one, and they
   mean completely different things.
   ========================================================================== */

/* ============ THE PARENT BRAND ============ */

/* "The Coven Theatre" sits directly above the switch, which is the one element
   both shows share — so the control finally explains itself: two productions,
   one company. Structure only, as with everything else in this file. Each show
   types and colours .coven__name from its own stylesheet, in its own voice:
   clinical mono on meg's room, and in its own voice on any show added later.
   The name cannot live INSIDE .show-switch — the marker is a 50% block that
   slides between two grid columns, and a third child would break that maths. */
.coven {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.coven__name {
  margin: 0;
  white-space: nowrap;
  text-decoration: none;
}

/* ============ THE SWITCH ============ */

/* two equal columns. grid rather than flex on purpose: a 1fr column floors at
   its own max-content, so both halves settle at the width of the LONGER label
   (the coming-soon plaque) instead of each taking half the pair and letting the
   longer one spill over the divider. that keeps the marker a plain 50% block
   that slides between two positions — no JS measuring, and it still sits
   correctly with scripts off or before the webfont has loaded */
.show-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  flex: 0 0 auto;
}

/* the show name with its date stacked underneath. stacked rather than inline
   because inline pushes each half past 240px, which will not fit beside the
   nav links on either show at any realistic screen width */
.show-switch__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  white-space: nowrap;
  padding: 8px 20px 10px;
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.show-switch__when {
  font-size: 0.84em;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.show-switch__marker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 3px;
  pointer-events: none;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* used for one frame on arrival, while the marker is being parked at the
   position it held on the page we just left */
.show-switch.no-slide .show-switch__marker { transition: none; }

/* meg's room sits left, the second production sits right */
.show-switch[data-side="meg"]   .show-switch__marker { transform: translateX(0); }
.show-switch[data-side="witch"] .show-switch__marker { transform: translateX(100%); }

/* a 4px lean toward whichever show you are about to leave for — the marker
   tells you it is going before you commit */
.show-switch[data-side="meg"]:has(.show-switch__opt + .show-switch__opt:hover) .show-switch__marker {
  transform: translateX(4px);
}
.show-switch[data-side="witch"]:has(.show-switch__opt:first-of-type:hover) .show-switch__marker {
  transform: translateX(calc(100% - 4px));
}

/* full names by default, short forms once the nav runs out of room. WHERE
   that happens is each show's own business — meg's nav is a 1fr auto 1fr
   grid that caps the switch at half the leftover width, so it gives up the
   long labels much earlier than a roomier nav would. each
   stylesheet flips these two itself. */
.show-switch__abbr { display: none; }

/* ============ THE SNUFF VEIL ============ */

#snuff {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 9999; /* clears everything in both shows — meg's grain sits at 998 */
}

/* leaving · a flame giving up: two false recoveries, then out */
@keyframes snuff-out {
  0%   { opacity: 0; }
  22%  { opacity: 0.55; }
  34%  { opacity: 0.30; }
  52%  { opacity: 0.82; }
  62%  { opacity: 0.55; }
  100% { opacity: 1; }
}

#snuff.is-snuffing {
  animation: snuff-out 700ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: auto; /* swallow clicks once the page is on its way out */
}

@keyframes snuff-plain {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#snuff.is-snuffing-plain {
  animation: snuff-plain 180ms linear forwards;
  pointer-events: auto;
}

/* arriving · the inline <head> snippet sets .is-arriving before first paint,
   so the new show is already black when it starts drawing. removing the
   class fades it up out of the dark */
html.is-arriving #snuff { opacity: 1; }

/* safety net. the head snippet paints the veil black before first paint, and
   normally switch.js lifts it. if that file fails to load or throws, nothing
   else would ever clear it and the visitor gets a black screen forever — so
   CSS alone fades it out after a beat. when the script IS working it removes
   .is-arriving long before this starts, and the rule stops matching. */
@keyframes snuff-failsafe { to { opacity: 0; } }
html.is-arriving #snuff {
  animation: snuff-failsafe 900ms 1600ms forwards;
}

#snuff { transition: opacity 600ms ease-out; }

/* ============ REDUCED MOTION ============ */
/* both shows already take this seriously. the switch still works and still
   covers the load — what stops is the strobing and the sliding */
@media (prefers-reduced-motion: reduce) {
  .show-switch__marker { transition: none; }
  #snuff { transition: opacity 180ms linear; }
  .show-switch[data-side="meg"]:has(.show-switch__opt + .show-switch__opt:hover) .show-switch__marker {
    transform: translateX(0);
  }
  .show-switch[data-side="witch"]:has(.show-switch__opt:first-of-type:hover) .show-switch__marker {
    transform: translateX(100%);
  }
}