/* The temple that flies away: an invented open-air opera festival. A temple drawn in WebGL as an engraving stays on
   screen while its section scrolls past: the stone trembles and cracks, then the pieces come away from the top down
   and float up, turning, while the sky behind floods with red. The pointer pushes the floating pieces aside. */
:root {
  --paper: #f1ece2;         /* the page and the sky before */
  --ink: #141210;           /* text and the engraving's lines */
  --red: #b5241c;           /* the sky after */
  --muted: rgba(20, 18, 16, 0.66);
  --edge: clamp(18px, 3.4vw, 52px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------- the bar */
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--edge);
  transition: color 0.4s ease;
}

body.is-red .bar {
  color: var(--paper);
}

.brand {
  font-family: 'Cinzel Variable', 'Cinzel', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.bar__nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.bar__nav a {
  position: relative;
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .bar__nav a:hover {
    opacity: 0.6;
  }
}

.bar a:focus-visible,
.button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ---------------------------------------------------------------- the ruin */
.ruin {
  position: relative;
  height: 400svh;
}

.ruin__view {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: var(--paper);
}

.ruin__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}

.ruin__open,
.ruin__close {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  text-align: center;
  pointer-events: none;
}

.ruin__open {
  top: clamp(92px, 13svh, 140px);
}

.ruin__close {
  top: 58%;
  color: var(--paper);
  visibility: hidden;
}

.ruin__close .button {
  pointer-events: auto;
}

.kicker {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ruin__title {
  max-width: 15ch;
  margin: 0 auto;
  font-family: 'Cinzel Variable', 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 84px);
  line-height: 1.04;
  letter-spacing: 0.01em;
}

.ruin__note {
  max-width: 36ch;
  margin: 22px auto 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  margin-top: 28px;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--red);
  background: var(--paper);
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
}

@media (hover: hover) {
  .button:hover {
    transform: scale(1.05);
    background: #fffaf2;
  }
}

.button:active {
  transform: scale(0.96);
}

/* ---------------------------------------------------------------- after */
.after {
  padding: 16vh var(--edge) 20vh;
  background: var(--red);
  color: var(--paper);
}

.nights {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.after .kicker {
  max-width: 980px;
  margin: 0 auto 28px;
}

.nights li {
  display: grid;
  grid-template-columns: minmax(110px, 0.32fr) 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid rgba(241, 236, 226, 0.35);
}

.nights__date {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nights__title {
  font-family: 'Cinzel Variable', 'Cinzel', Georgia, serif;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 500;
}

/* without WebGL2 the section is simply the red sky with its words */
.no-gl .ruin {
  height: auto;
}

.no-gl .ruin__view {
  position: relative;
  height: 100svh;
  background: var(--red);
}

.no-gl .ruin__open {
  display: none;
}

.no-gl .ruin__close {
  visibility: visible;
}

@media (max-width: 720px) {
  .ruin__close {
    top: 56%;
  }

  .nights li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .bar,
  .bar__nav a {
    transition: none;
  }
}