/* CSS only layers the p5/Three canvases and styles accessible DOM controls. */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #2a0009;
}

#p5-background,
#three-canvas,
#p5-overlay {
  position: fixed;
  inset: 0;
  display: block;
}

#p5-background {
  z-index: 0;
  pointer-events: none;
}

#three-canvas {
  z-index: 1;
}

#p5-overlay {
  z-index: 2;
  pointer-events: auto;
}

#sound-play-button {
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 3;
  width: 48px;
  height: 48px;
  padding: 0 0 1px 3px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: rgba(42, 0, 9, 0.22);
  color: #d0ffea;
  font: 700 18px/1 Helvetica, Arial, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#sound-play-button:hover,
#sound-play-button:focus-visible {
  background: rgba(208, 255, 234, 0.2);
  outline: none;
  transform: scale(1.06);
}

#narrative-live-region {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.guide-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 4;
  display: block;
  width: 58px;
  height: 58px;
  padding: 7px;
  border: 1.5px solid #d0ffea;
  border-radius: 50%;
  background: #d0ffea;
  color: #d0ffea;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease;
}

.guide-nav img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-nav span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.guide-nav:hover,
.guide-nav:focus-visible {
  background: #aeeb87;
  outline: none;
  transform: translateY(-2px);
}

@media (max-width: 700px) {
  .guide-nav {
    top: 12px;
    left: 12px;
    width: 48px;
    height: 48px;
    padding: 6px;
  }
}

/* INFORMATION PANEL
   The circular "i" control sits in the top-right corner, brightens on hover,
   and opens a full-screen panel with the project name and the Delay guidance.
   The mark is the same open ring the other three artworks use, so the four
   pages of the project read as one set. */
.info-button {
  /* One diameter and one colour drive the whole mark, so the narrow-screen
     block near the end of this file only has to change --mark-size. */
  --mark-size: 39px;
  --mark-ink: #cbe45c;
  position: fixed;
  top: 52px;
  right: 24px;
  z-index: 6;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--mark-size);
  height: var(--mark-size);
  padding: 0;
  border: 1.5px solid var(--mark-ink);
  border-radius: 50%;
  background: none;
  color: var(--mark-ink);
  /* The letter is sized off the ring rather than typed in, so changing the
     diameter alone keeps the "i" in proportion. */
  font: 400 calc(var(--mark-size) * 0.42) / 1 Helvetica, Arial, sans-serif;
  cursor: pointer;
  /* A soft halo in the ring's own colour, outside and in, so the shape glows
     off the dark background instead of sitting flat on it. */
  box-shadow:
    0 0 10px rgba(203, 228, 92, 0.45),
    inset 0 0 7px rgba(203, 228, 92, 0.18);
  transition: transform 400ms ease, background 400ms ease, color 400ms ease,
    box-shadow 400ms ease;
}

.info-button span {
  /* Helvetica hangs a lowercase "i" high in its line box; this drops the
     letter back onto the ring's own centre. */
  transform: translateY(0.06em);
  text-shadow: 0 0 7px rgba(203, 228, 92, 0.55);
  transition: text-shadow 400ms ease;
}

/* On hover the ring fills in and the letter drops out of it in the plum of the
   artwork — the same two colours swapping places, so it reads as the same mark
   switched on rather than a different one. */
.info-button:hover,
.info-button:focus-visible {
  background: var(--mark-ink);
  color: #2a0009;
  outline: none;
  transform: scale(1.08);
  box-shadow: 0 0 15px rgba(203, 228, 92, 0.6);
}

.info-button:hover span,
.info-button:focus-visible span {
  text-shadow: none;
}

/* A tab stop needs to be tellable from a hover, so keyboard focus adds a ring
   in the page's mint on top of the filled state. */
.info-button:focus-visible {
  box-shadow: 0 0 0 3px #d0ffea;
}

/* Build the information panel as a full-screen overlay. */
.info-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  box-sizing: border-box;
  padding: 0 clamp(20px, 5vw, 60px);
  /* A pink wash rather than a dark one, with the artwork still showing through
     it: this is the piece talking about itself, so the panel should read as a
     layer of the picture rather than a window cut out of it. The colour is the
     project burgundy and the weight is the one the other three artworks use, so
     all four panels sit at the same depth. Nothing is blurred — the garden
     behind stays legible as the texture it is meant to be. */
  background: rgba(162, 8, 78, 0.8);
  opacity: 0;
  visibility: hidden; /* Keep the closed panel out of focus and pointer order. */
  pointer-events: none;
  /* Delay the visibility switch so the closing fade can finish first. */
  transition: opacity 400ms ease-in-out, visibility 0s linear 400ms;
  overflow-y: auto; /* Allow the longer project notes to scroll. */
  scrollbar-width: none; /* Keep the Firefox scrollbar visually quiet. */
}

.info-overlay::-webkit-scrollbar {
  display: none; /* Hide the WebKit scrollbar while keeping scroll available. */
}

.info-overlay.is-open {
  /* JavaScript adds this class when the viewer opens the panel. */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 400ms ease-in-out, visibility 0s;
}

/* Style the circular close control so it stays easy to find. */
.info-close {
  position: fixed; /* Keep the button visible while the panel scrolls. */
  top: 45px;
  right: clamp(20px, 5vw, 60px);
  z-index: 21;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid #d0ffea;
  border-radius: 50%;
  background: transparent;
  color: #d0ffea;
  font: 400 20px/1 Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: background 300ms ease, color 300ms ease;
}

.info-close:hover,
.info-close:focus-visible {
  /* Invert the colours on hover to show that this is clickable. */
  background: #d0ffea;
  color: #a2084e;
  outline: none;
}

/* Size and space the designed project title image. */
.info-project-name {
  margin: 50px 0;
  width: min(66vw, 900px);
}

.info-project-name img {
  display: block;
  width: 100%;
  height: auto;
}

.info-column {
  /* Keep one comfortable reading column under the title. */
  display: flex;
  flex-direction: column;
  max-width: 900px;
  padding-bottom: 80px;
}

.info-group {
  margin-bottom: 25px; /* Separate each block of information from the next. */
}

.info-group--reference {
  margin-top: 40px;
}

.info-title {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #d0ffea;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.1;
  border-bottom: 4px solid #aeeb87; /* Add the lime accent line. */
  padding-bottom: 12px;
  margin: 0 0 30px;
}

.info-subtitle {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #aeeb87;
  font-size: clamp(17px, 1.4vw, 22px);
  letter-spacing: 0.5px;
  margin: 0 0 5px;
}

.info-body {
  /* Use comfortable settings for longer reading. */
  font-family: Helvetica, Arial, sans-serif;
  color: #d0ffea;
  font-size: clamp(17.6px, 1.375vw, 22px); /* 10% larger than before. */
  line-height: 1.5;
  margin: 0 0 16px;
}

.info-body:last-child {
  margin-bottom: 0;
}

.info-link {
  color: #aeeb87;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.info-link:hover,
.info-link:focus-visible {
  color: #d0ffea;
}

@media (max-width: 700px) {
  .info-button {
    --mark-size: 34px;
    top: 44px;
    right: 12px;
  }

  .info-close {
    top: 25px;
  }

  .info-project-name {
    margin: 70px 0 40px;
    width: 85vw;
  }
}