:root {
  --blue: #0a7ff0;
  --yellow: #FEC500;
  --glow: #FEC500;
  --shadow: rgba(0, 0, 0, 0.55);
  --face: clamp(160px, 18vw, 320px);   /* size of each head */
  --speed: 0.6s;                       /* rotate animation length (keep in sync with ROTATE_MS in script.js) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow-x: hidden; overscroll-behavior: none; }

body {
  background: var(--blue);
  color: var(--yellow);
  font-family: "Geist Pixel", monospace;
  font-weight: 400;
  overflow: hidden;
}

/* ---------- Sidebar: logo + nav ---------- */
.sidebar {
  position: fixed;
  top: clamp(24px, 6vh, 64px);
  left: clamp(24px, 3.6vw, 70px);
  z-index: 10;
}

.logo img {
  width: clamp(100px, 8vw, 155px);
  display: block;
  filter: drop-shadow(2px 3px 3px var(--shadow));
}

nav {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  margin-top: clamp(14px, 2.5vh, 28px);
}

nav a {
  color: var(--yellow);
  text-decoration: none;
  font-size: clamp(15px, 1.1vw, 20px);
  line-height: 1.6;
  text-shadow: 2px 3px 4px var(--shadow);
  transition: transform 0.2s ease, color 0.2s ease;
  width: fit-content;
}

@media (hover: hover) and (pointer: fine) {
  nav a:hover { filter: brightness(1.15); transform: translateX(6px); }
}

/* ---------- Centre stage (fixed sizes so nothing shifts on hover) ---------- */
.stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto auto auto auto 1fr;
  justify-items: center;
  pointer-events: none;
  overflow: hidden;   /* off-screen faces can't widen the page */
}
.stage > * { pointer-events: auto; }

.carousel {
  grid-row: 2;
  position: relative;
  width: 100%;
  height: calc(var(--face) * 1.25);
}

.member {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--face);
  aspect-ratio: 1;
  background: none;
  border: 0;
  cursor: inherit;   /* pointer cursor only over the actual head (set in script.js) */
  opacity: 0.7;
  transform: translate(-50%, -50%) translateX(var(--x, 0px)) scale(var(--s, 1));
  transition:
    transform var(--speed) cubic-bezier(.22, .8, .25, 1),
    opacity var(--speed) ease,
    filter 0.3s ease;
}
.member.no-anim { transition: none; }
.member.hidden { opacity: 0; pointer-events: none; }

.member img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* For photos that aren't cut out yet: oval crop */
.member.masked img {
  object-fit: cover;
  border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
  transform: scale(0.82);
}

/* Centre (active) member: full opacity, on top, yellow glow following the head's shape */
.member.active {
  opacity: 1;
  filter:
    drop-shadow(0 0 10px var(--glow))
    drop-shadow(0 0 28px var(--glow))
    drop-shadow(0 0 50px rgba(254, 197, 0, 0.6));
}

/* Head under the mouse (about to be selected): full opacity, white rim + light glow */
.member.hovered {
  opacity: 1;
  filter:
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 14px rgba(254, 197, 0, 0.8));
}

.member:focus-visible { outline: none; }
.member:focus-visible img { outline: 3px dashed var(--yellow); outline-offset: 6px; }

/* ---------- Drag scrollbar ---------- */
.scrollbar {
  grid-row: 3;
  position: relative;
  width: min(80vw, 420px);
  height: 36px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.scrollbar-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: 1px 2px 3px var(--shadow);
}

.scrollbar-thumb {
  position: absolute;
  top: 50%;
  left: var(--pos, 0%);
  width: 23px;    /* scroller.png is 330×408 */
  height: 28px;
  background: url("scroller.png") center / contain no-repeat;
  filter: drop-shadow(2px 3px 3px var(--shadow));
  transform: translate(-50%, -50%);
  transition: left var(--speed) cubic-bezier(.22, .8, .25, 1), transform 0.15s ease;
  cursor: grab;
}
.scrollbar:hover .scrollbar-thumb,
.scrollbar:focus-visible .scrollbar-thumb { transform: translate(-50%, -50%) scale(1.12); }
.scrollbar.dragging .scrollbar-thumb {
  transition: transform 0.15s ease;   /* follow the pointer directly while dragging */
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.2);
}


/* ---------- Bio box (fixed height = no layout jump) ---------- */
.bio {
  grid-row: 5;
  margin-top: clamp(8px, 3vh, 40px);
  width: min(90vw, 620px);
  height: 15em;
  text-align: center;
  text-shadow: 2px 3px 4px var(--shadow);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.bio.swap { opacity: 0; transform: translateY(6px); }

.bio h1 {
  text-align: center;
  font-size: clamp(30px, 2.5vw, 46px);
  font-weight: 400;
  margin-bottom: 0.5em;
}

.bio p {
  text-align: center;
  font-size: clamp(14px, 1.1vw, 20px);
  line-height: 1.35;
  font-weight: 400;
}

/* "learn more" link under the bio, and the website button on member pages */
.learn-more,
.btn {
  display: inline-block;
  margin-top: 0.9em;
  padding: 6px 14px;
  font-size: clamp(14px, 1vw, 18px);
  color: var(--blue);
  background: var(--yellow);
  text-decoration: none;
  text-shadow: none;
  box-shadow: 2px 3px 4px var(--shadow);
  transition: transform 0.15s ease, background 0.15s ease;
}
.learn-more:hover,
.btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn[hidden] { display: none; }

/* ---------- How-to hint ---------- */
.hint {
  grid-row: 4;
  margin-top: 2px;
  font-size: 14px;
  color: #fff;
  opacity: 0.45;
  text-align: center;
  letter-spacing: 0.02em;
}
.hint-touch { display: none; }
@media not all and (hover: hover) and (pointer: fine) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}

/* ---------- Footer ---------- */
.footer {
  position: fixed;
  left: 0; right: 0;
  bottom: clamp(12px, 2.5vh, 24px);
  text-align: center;
  font-size: 13px;
  color: var(--yellow);
  opacity: 0.8;
  text-shadow: 1px 2px 3px var(--shadow);
  z-index: 10;
  pointer-events: none;
}

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .sidebar {
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 0;
  }
  .logo img { width: 80px; }
  nav { flex-direction: row; gap: 16px; margin-top: 0; }
  nav a { font-size: 13px; }
  /* centre faces + info in the space below the header */
  .stage { padding: 72px 0 40px; }   /* bottom space keeps clear of the footer */
  .footer { font-size: 11px; }
  .bio { height: 12em; margin-top: 8px; }
  .bio h1 { margin-bottom: 0.3em; }
  .hint { margin-top: 4px; font-size: 12px; }
  :root { --face: 44vw; }
}

/* ---------- Fake loading screen (home page) ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--blue);
  transition: opacity 0.35s ease, visibility 0.35s;
}
.loader img {
  width: clamp(70px, 9vw, 120px);
  image-rendering: pixelated;
  filter: drop-shadow(2px 3px 3px var(--shadow));
  animation: globe-flash 0.24s steps(1) infinite;
}
@keyframes globe-flash {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.no-loader .loader { display: none; }

/* ---------- Member page ---------- */
body.page { overflow-y: auto; }

.profile {
  width: min(100% - 32px, 460px);
  margin: 0 auto;
  padding: clamp(40px, 10vh, 120px) 0 40px;
  text-align: center;
  text-shadow: 2px 3px 4px var(--shadow);
}

.profile-photo {
  width: min(100%, 360px);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  background: var(--yellow);
  border: 3px solid var(--yellow);
  box-shadow: 0 0 30px rgba(254, 197, 0, 0.6), 4px 6px 10px var(--shadow);
  overflow: hidden;
}
.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile h1 {
  margin-top: 28px;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 400;
}
.profile .role {
  margin-top: 6px;
  font-size: clamp(14px, 1.1vw, 18px);
  color: #fff;
  opacity: 0.8;
}
.profile .desc {
  margin-top: 18px;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.4;
}
.profile .back {
  display: block;
  margin-top: 28px;
  color: var(--yellow);
  font-size: 14px;
  opacity: 0.8;
}
.profile .back:hover { opacity: 1; }

body.page .footer { position: static; padding: 24px 16px; }

/* Desktop: photo on the left, info on the right, centred on screen */
@media (min-width: 761px) {
  .profile {
    width: min(100% - 64px, 960px);
    min-height: calc(100vh - 70px);   /* leaves room for the footer */
    padding: 40px 0;
    display: grid;
    grid-template-columns: clamp(260px, 26vw, 400px) minmax(0, 420px);
    grid-template-rows: 1fr repeat(5, auto) 1fr;   /* text block sits vertically centred */
    column-gap: clamp(32px, 4vw, 64px);
    justify-content: center;
    align-content: center;
    text-align: left;
  }
  .profile > * { grid-column: 2; }
  .profile-photo {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 100%;
    margin: 0;
  }
  .profile h1 { grid-row: 2; margin-top: 0; }
  .profile .role { grid-row: 3; }
  .profile .desc { grid-row: 4; }
  .profile .btn { grid-row: 5; justify-self: start; }
  .profile .back { grid-row: 6; justify-self: start; }
}

@media (max-width: 760px) {
  body.page { padding-top: 70px; }
  body.page .sidebar { background: var(--blue); padding-bottom: 12px; }
  .profile { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --speed: 0s; }
  .loader img { animation: none; }
  .bio { transition: none; }
}