/* PERMANENT COLLECTION — full bloom. Something took over the back room. */

@property --hue {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

:root {
  --bg: #0d0116;
  --ink: #f6e9ff;
}

body.bloom {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding-bottom: 8rem;
}

/* slow aurora wash behind everything */
body.bloom::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 0;
  background: conic-gradient(from var(--hue),
    #ff2fd6, #ffe62f, #2fe0ff, #6dff2f, #ff2fd6);
  filter: blur(90px) saturate(1.4);
  opacity: 0.35;
  animation: spin 30s linear infinite;
}

@keyframes spin {
  from { --hue: 0deg; }
  to   { --hue: 360deg; }
}

.bloom-header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem 1.5rem 2rem;
}

.bloom-header h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 3rem);
  background: linear-gradient(90deg, #ff2fd6, #ffe62f, #2fe0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(255, 47, 214, 0.4));
}

.bloom-header p {
  max-width: 40ch;
  margin: 0.75rem auto 0;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* exhibit grid */
.exhibits {
  position: relative;
  z-index: 2;
  display: grid;
  /* auto-fill + a capped max (instead of auto-fit + 1fr) so cards hold
     a consistent size at every width instead of stretching to fill
     whatever room is left in the row — the fix for exhibits looking
     unbalanced depending on how many happened to land per row */
  grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
  justify-content: center;
  gap: 3rem;
  max-width: 1100px;
  margin: 3rem auto;
  padding: 0 2rem;
}

.exhibit {
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}

.exhibit:hover { transform: translateY(-10px) scale(1.03); }

.exhibit .glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  filter: blur(2px);
  transition: filter 0.4s ease, box-shadow 0.4s ease;
  animation: pulse 4s ease-in-out infinite;
}

.exhibit:nth-child(1) .glow {
  background: radial-gradient(circle at 35% 30%, #ff8bf0, #ff2fd6 60%, #6a0057 100%);
  box-shadow: 0 0 60px 10px rgba(255, 47, 214, 0.6);
}
.exhibit:nth-child(2) .glow {
  background: radial-gradient(circle at 35% 30%, #8bffe0, #2fe0ff 60%, #005c6a 100%);
  box-shadow: 0 0 60px 10px rgba(47, 224, 255, 0.6);
  animation-delay: 1s;
}
.exhibit:nth-child(3) .glow {
  background: radial-gradient(circle at 35% 30%, #fff6a0, #ffe62f 60%, #6a5c00 100%);
  box-shadow: 0 0 60px 10px rgba(255, 230, 47, 0.6);
  animation-delay: 2s;
}
.exhibit:nth-child(4) .glow {
  background: radial-gradient(circle at 35% 30%, #b8ff8b, #6dff2f 60%, #1c5c00 100%);
  box-shadow: 0 0 60px 10px rgba(109, 255, 47, 0.6);
  animation-delay: 3s;
}

.exhibit:hover .glow {
  filter: blur(0px);
  box-shadow: 0 0 90px 20px currentColor;
}

/* click a specimen, it notices you — layered alongside the resting pulse
   (not replacing it) so the breathing glow picks back up once this ends */
.exhibit.exhibit-flinch .glow {
  animation: pulse 4s ease-in-out infinite, flinch 0.45s ease-out;
}
@keyframes flinch {
  0%   { filter: invert(0); transform: scale(1); }
  35%  { filter: invert(1); transform: scale(1.18); }
  100% { filter: invert(0); transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.exhibit .placard {
  position: relative;
  z-index: 2;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0d0116;
  background: rgba(255,255,255,0.85);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.exhibit:hover .placard { opacity: 1; }

/* a fifth specimen, grown fresh each visit instead of hung — the same
   engine that powers the New Acquisitions room, in miniature */
.new-growth {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: -1rem auto 4rem;
  text-align: center;
}
.new-growth-canvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: #050508;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.new-growth .placard {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

/* the crawl-through tunnel */
.tunnel {
  position: relative;
  z-index: 2;
  height: 60vh;
  margin: 4rem auto;
  max-width: 900px;
  perspective: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tunnel-rings {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  animation: tunnel-drift linear infinite;
  animation-duration: 8s;
  animation-timeline: scroll();
  animation-range: entry 0% cover 100%;
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid;
  opacity: 0.8;
}
.ring:nth-child(1) { border-color: #ff2fd6; transform: translateZ(0px) scale(0.4); }
.ring:nth-child(2) { border-color: #ffe62f; transform: translateZ(-80px) scale(0.65); }
.ring:nth-child(3) { border-color: #2fe0ff; transform: translateZ(-160px) scale(0.9); }
.ring:nth-child(4) { border-color: #6dff2f; transform: translateZ(-240px) scale(1.15); }
.ring:nth-child(5) { border-color: #ff2fd6; transform: translateZ(-320px) scale(1.4); }

@keyframes tunnel-drift {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.tunnel-caption {
  position: absolute;
  z-index: 3;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.75;
  bottom: -2.5rem;
}

/* archive note — never rendered on screen, only exists for the printer */
.archive-note {
  display: none;
}

@media print {
  /* the glow and the aurora don't survive contact with paper. good. */
  body.bloom::before,
  .exhibit .glow,
  .tunnel {
    display: none;
  }
  body.bloom {
    background: #fff;
    color: #000;
  }
  .archive-note {
    display: block;
    margin: 2rem auto;
    max-width: 40ch;
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
  }
}