/* THE PORTRAIT WING — they were hung facing the room on purpose. */

:root {
  --pw-wall: #2a1f2e;
  --pw-frame: #4a3a2a;
  --pw-frame-light: #7a6248;
  --pw-canvas: #d8c9a8;
}

body.portraits {
  background: var(--pw-wall);
  color: #e8dcd0;
  min-height: 100vh;
  padding: 4rem 1.5rem 10rem;
}

.pw-header {
  text-align: center;
  margin-bottom: 3rem;
}
.pw-header h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
}
.pw-header p {
  max-width: 42ch;
  margin: 0.75rem auto 0;
  font-size: 0.8rem;
  opacity: 0.8;
}

.gallery-row {
  display: grid;
  /* capped max instead of 1fr, same reasoning as the Permanent
     Collection's exhibit grid: frames hold one consistent size at
     every width instead of stretching wide on rows with fewer of them */
  grid-template-columns: repeat(auto-fill, minmax(180px, 210px));
  justify-content: center;
  gap: 2.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.frame {
  background: linear-gradient(160deg, var(--pw-frame-light), var(--pw-frame));
  padding: 14px;
  border-radius: 3px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.canvas {
  background: var(--pw-canvas);
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}

/* a face made of shapes, not an image — a head, and two eyes that scan
   left-right on their own clock, each portrait offset differently so
   they never quite move in sync */
.face {
  position: absolute;
  inset: 0;
}
.head {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 62%;
  height: 70%;
  border-radius: 46% 46% 42% 42%;
  background: color-mix(in oklch, var(--pw-canvas) 70%, #4a2f1f 30%);
}
.eyes {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  display: flex;
  gap: 22%;
}
.eye {
  width: 14px;
  height: 9px;
  background: #f4f0e4;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a1410;
  transform: translate(-50%, -50%);
  animation: scan 7s ease-in-out infinite;
}

@keyframes scan {
  0%, 100% { transform: translate(-140%, -50%); }
  45% { transform: translate(140%, -50%); }
  50% { transform: translate(140%, -50%); }
  95% { transform: translate(-140%, -50%); }
}

.frame { cursor: pointer; }

.frame:nth-child(1) .pupil { animation-delay: 0s; animation-duration: 6s; }
.frame:nth-child(2) .pupil { animation-delay: 1.4s; animation-duration: 8s; }
.frame:nth-child(3) .pupil { animation-delay: 0.6s; animation-duration: 5.5s; }
.frame:nth-child(4) .pupil { animation-delay: 2.1s; animation-duration: 7.2s; }
.frame:nth-child(5) .pupil { animation-delay: 0.3s; animation-duration: 9s; }
.frame:nth-child(6) .pupil { animation-delay: 3.4s; animation-duration: 6.6s; }
.frame:nth-child(7) .pupil { animation-delay: 1.8s; animation-duration: 5s; }
.frame:nth-child(8) .pupil { animation-delay: 2.6s; animation-duration: 6.9s; }
.frame:nth-child(9) .pupil { animation-delay: 0.9s; animation-duration: 7.7s; }

/* seven distinct occupants — different head shapes, different fills,
   different canvas colors, all pushed to full saturation. none of them
   should look like a recolor of another one. */

.frame.style-burst .canvas { background: #0c1f3d; }
.frame.style-burst .head {
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff2fd6, #ffe62f, #2fe0ff, #6dff2f, #ff2fd6);
}

.frame.style-split .canvas { background: #1a0b2e; }
.frame.style-split .head {
  background: linear-gradient(90deg, #2fe0ff 50%, #ff8a2f 50%);
}

.frame.style-angular .canvas { background: #052e1f; }
.frame.style-angular .head {
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 70% 100%, 30% 100%, 0% 60%, 10% 20%);
  background: #c6ff2f;
  border-radius: 0;
}

.frame.style-stripe .canvas { background: #2e0b1a; }
.frame.style-stripe .head {
  background: repeating-linear-gradient(90deg, #ffe62f 0 8px, #a12fd6 8px 16px);
}

.frame.style-glow .canvas { background: #05131f; }
.frame.style-glow .head {
  background: radial-gradient(circle at 50% 40%, #8ef4ff 0%, #0a6ea8 60%, transparent 100%);
  filter: blur(3px);
  box-shadow: 0 0 40px 12px rgba(47, 224, 255, 0.65);
}

.frame.style-dots .canvas { background: #3d2e05; }
.frame.style-dots .head {
  background-color: #ff5533;
  background-image: radial-gradient(circle, #ffe62f 32%, transparent 33%);
  background-size: 14px 14px;
}

.frame.style-grid .canvas { background: #1a1a1a; }
.frame.style-grid .head {
  border-radius: 8%;
  background-color: #e8e0c8;
  background-image:
    linear-gradient(#2a2a2a 1px, transparent 1px),
    linear-gradient(90deg, #2a2a2a 1px, transparent 1px);
  background-size: 9px 9px;
}

.frame.style-smoke .canvas { background: #0a0a12; }
.frame.style-smoke .head {
  background: radial-gradient(circle at 40% 35%, #d8d0e8 0%, #6a5a8a 45%, transparent 80%);
  filter: blur(6px) contrast(1.3);
}

.frame.style-hot .canvas { background: #ffd23f; }
.frame.style-hot .head {
  background: radial-gradient(circle at 35% 30%, #ff6fe0, #b8007a 80%);
}

/* click a portrait: it stops scanning and looks straight at you for a
   while, then goes back to pretending it wasn't. declared after the
   nth-child rules above (same specificity) so it wins the cascade for
   animation-delay/-duration instead of inheriting whichever portrait's
   own scan timing happened to be sitting on the element. */
.frame.portrait-freeze .pupil {
  animation: scan 7s ease-in-out infinite, freeze-stare 2.4s ease-out;
  animation-delay: 0s, 0s;
}
@keyframes freeze-stare {
  0%, 85% { transform: translate(-50%, -50%); }
  100%    { transform: translate(-140%, -50%); }
}

.plate {
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 0.6rem;
}

.pw-hint {
  max-width: 40ch;
  margin: 3rem auto 0;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* the fourth portrait — present in the DOM the whole time, but display:none
   in every normal browsing session. it only renders for a visitor whose
   system is set to reduce motion, i.e. the one visitor who won't see the
   others scan back and forth to begin with. */
.frame.hidden-portrait {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .frame.hidden-portrait {
    display: block;
  }
  .pupil {
    animation: none !important;
    transform: translate(-50%, -50%) !important;
  }
}