/* The exhibition: a full-screen 3D corridor with a heads-up display. */

.gallery {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--color-night);
  outline: none;
  animation: gallery-fade-in 0.9s ease-out;
}

@keyframes gallery-fade-in {
  from {
    opacity: 0;
    filter: brightness(2.5);
  }
}

.gallery-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective-origin: 50% 45%;
  touch-action: none;
}

/* Vignette: the corridor fades into darkness at the edges. */
.gallery-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgb(5 8 7 / 0.75));
  pointer-events: none;
}

/* The world is moved and turned around the visitor; gallery-space.js sets its transform. */
.gallery-world {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.gallery-world.is-instant {
  transition: none;
}

.gallery-surfaces {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
}

/* Everything placed in 3D transforms around its top-left corner; gallery-space.js centers it
   with a final translate(-50%, -50%). The default center origin would shift rotated planes. */
.gallery-plane,
.gallery-item {
  transform-origin: 0 0;
}

.gallery-plane {
  position: absolute;
  left: 0;
  top: 0;
}

/* Wallpaper above a wooden wainscot, with a pool of light from a ceiling lamp per segment. */
.gallery-plane-wall-left,
.gallery-plane-wall-right {
  background:
    radial-gradient(ellipse 45% 55% at 50% 0%, rgb(255 236 190 / 0.1), transparent 70%),
    linear-gradient(to bottom, transparent 70%, #6b4e2a 70%, #6b4e2a 70.6%, var(--color-wainscot) 70.6%),
    repeating-linear-gradient(90deg, var(--color-wall) 0 28px, var(--color-wall-stripe) 28px 56px);
}

.gallery-plane-floor {
  background:
    radial-gradient(ellipse 40% 50% at 50% 50%, rgb(255 236 190 / 0.08), transparent 70%),
    repeating-linear-gradient(90deg, #4a3121 0 90px, #3b2618 90px 93px),
    var(--color-floor);
}

.gallery-plane-ceiling {
  background:
    radial-gradient(circle at 50% 50%, rgb(255 236 190 / 0.35) 0 2%, rgb(255 236 190 / 0.08) 8%, transparent 30%),
    linear-gradient(90deg, #2b241c 0 3%, transparent 3% 97%, #2b241c 97%),
    #1a1612;
}

.gallery-plane-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  background:
    radial-gradient(ellipse 40% 35% at 50% 45%, rgb(255 236 190 / 0.18), transparent 70%),
    var(--color-wall);
}

.gallery-plane-end p {
  margin: 0;
}

.end-wall-sign {
  padding: 0.3rem 1.2rem;
  background: #1f7a44;
  color: #fff;
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgb(60 220 120 / 0.45);
}

.end-wall-title {
  max-width: 84vw;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--color-gold-light);
}

.end-wall-text {
  max-width: min(26rem, 84vw);
  font-style: italic;
  color: var(--color-ink-muted);
}

/* Paintings */

.gallery-wall {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}

.gallery-item {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  /* Paintings you are not facing hang in the dark; the current one is lit. */
  filter: brightness(0.45) saturate(0.8);
  transition: filter 1.2s ease;
}

.gallery-item.is-current {
  filter: none;
}

/* Spotlight cone on the wall around the painting. */
.gallery-item::before {
  content: '';
  position: absolute;
  inset: -45% -40% -20%;
  z-index: -1;
  background: radial-gradient(ellipse 55% 60% at 50% 30%, rgb(255 236 190 / 0.28), transparent 70%);
  pointer-events: none;
}

.artwork-frame {
  position: relative;
  display: block;
  padding: clamp(10px, 1.6vw, 18px);
  border: 0;
  cursor: pointer;
  background:
    linear-gradient(135deg, var(--color-gold-light), var(--color-gold) 30%, var(--color-gold-dark) 55%, var(--color-gold) 75%, var(--color-gold-light));
  box-shadow:
    inset 0 0 0 2px var(--color-gold-dark),
    inset 0 0 0 5px rgb(255 240 200 / 0.35),
    0 18px 30px rgb(0 0 0 / 0.55);
}

.gallery-item.is-current .artwork-frame {
  cursor: zoom-in;
}

.artwork-frame .artwork-canvas {
  width: min(calc(var(--canvas-height) * var(--artwork-aspect)), 74vw);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.5);
}

/* Shared painted surface (wall and dialog). */

.artwork-canvas {
  position: relative;
  aspect-ratio: var(--artwork-aspect);
  overflow: hidden;
  background: #111;
}

.artwork-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Color study shown until the parody image exists. */
.artwork-placeholder {
  --paint-1: #2b2a1c;
  --paint-2: #5a4a26;
  --paint-3: #8c7a3d;
  --paint-4: #d9b45a;

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.03) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.05) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 72% 24%, var(--paint-4) 0 6%, transparent 22%),
    radial-gradient(ellipse at 30% 70%, var(--paint-3), transparent 55%),
    radial-gradient(ellipse at 80% 85%, var(--paint-2), transparent 60%),
    linear-gradient(160deg, var(--paint-1), var(--paint-2));
}

.artwork-placeholder-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  line-height: 1.2;
  color: #fff8e7;
  text-shadow: 0 2px 6px rgb(0 0 0 / 0.75);
}

.artwork-placeholder-note {
  padding: 0.15rem 0.6rem;
  border: 1px solid rgb(255 248 231 / 0.6);
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff8e7;
  background: rgb(0 0 0 / 0.35);
}

/* Museum placard next to the painting. */
.artwork-placard {
  max-width: 16rem;
  padding: 0.6rem 0.9rem;
  background: var(--color-paper);
  color: var(--color-paper-ink);
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.35);
  text-align: center;
}

.artwork-placard p {
  margin: 0;
}

.artwork-placard-title {
  font-family: var(--font-display);
  font-weight: bold;
  font-size: 1rem;
}

.artwork-placard-original {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--color-paper-muted);
}

/* Top bar */

.gallery-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem var(--page-gutter);
  background: linear-gradient(to bottom, rgb(5 8 7 / 0.85), transparent);
  pointer-events: none;
}

.gallery-brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.gallery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  pointer-events: auto;
}

.topbar-button {
  padding: 0.35rem 0.8rem;
  border: 1px solid rgb(201 154 59 / 0.6);
  background: rgb(12 20 18 / 0.7);
  color: var(--color-gold-light);
  font-family: var(--font-label);
  font-size: 0.8rem;
  cursor: pointer;
}

.topbar-button:hover,
.topbar-button[aria-pressed='true'] {
  background: var(--color-gold-dark);
}

/* Heads-up display: where you are and what you are looking at. */

.gallery-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  padding: 0 var(--page-gutter);
  pointer-events: none;
}

.hud-card {
  width: min(26rem, 100%);
  padding: 0.75rem 1.1rem 0.9rem;
  background: rgb(246 239 223 / 0.94);
  color: var(--color-paper-ink);
  text-align: center;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.5);
  pointer-events: auto;
}

.hud-card p {
  margin: 0;
}

.hud-progress {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-paper-muted);
}

.hud-progress:empty {
  display: none;
}

.hud-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.25;
}

.hud-subtitle {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-paper-muted);
}

.hud-action {
  margin-top: 0.6rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-paper-ink);
  background: var(--color-paper-ink);
  color: var(--color-paper);
  font-family: var(--font-label);
  font-size: 0.85rem;
  cursor: pointer;
}

.hud-action:hover {
  background: transparent;
  color: var(--color-paper-ink);
}

.hud-step {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  background: rgb(12 20 18 / 0.8);
  color: var(--color-gold-light);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.hud-step:hover:not(:disabled) {
  background: var(--color-gold-dark);
}

.hud-step:disabled {
  opacity: 0.3;
  cursor: default;
}

.gallery-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  margin: 0;
  padding: 0 var(--page-gutter);
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  pointer-events: none;
}

@media (max-width: 640px) {
  :root {
    --canvas-height: clamp(180px, 38vh, 320px);
  }

  .gallery-hud {
    bottom: 1rem;
    gap: 0.4rem;
    padding: 0 8px;
  }

  .hud-step {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
  }

  .hud-title {
    font-size: 1.1rem;
  }

  .gallery-hint {
    display: none;
  }

  .gallery-brand {
    font-size: 0.8rem;
  }
}