/* copperman family — a photographic character-select roster */

.family-page {
  background: #e9e7e1;
  overflow: hidden;
}

.family {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  isolation: isolate;
}

/* studio sweep: a lit backdrop falling into a floor */
.family::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 38% 55% at 50% 62%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    linear-gradient(to bottom, #e4e2dc 0%, #ecebe6 62%, #dcdad3 100%);
}
.family::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.05));
}

.brand {
  display: flex;
  justify-content: center;
  padding: clamp(28px, 6vh, 64px) 24px 0;
}
.brand h1 { margin: 0; }
.brand img {
  width: min(640px, 78vw);
  height: auto;
}

.prompt {
  margin: clamp(14px, 2.4vh, 26px) 0 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .28em;
  color: var(--muted);
}

.roster {
  list-style: none;
  margin: 0;
  padding: 0 4vw;
  max-width: 100vw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 1.2vw, 20px);
  min-height: 0;
}

.roster { --fig: min(56vh, 29vw); --locked: .78; }

.member {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.member > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
}

.member figure {
  position: relative;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(var(--fig) * var(--locked));
}
.member figure img {
  height: 100%;
  width: auto;
  max-width: none;
  position: relative;
  z-index: 1;
}
/* contact shadow on the floor */
.member figure::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 70%;
  height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.28), rgba(0,0,0,0));
}

/* locked: backlit silhouettes. outfit reads, identity doesn't. */
.member.locked figure img {
  filter: brightness(.12) contrast(1.35) grayscale(1);
  opacity: .92;
  transition: filter .5s ease;
}
.member.locked:hover figure img { filter: brightness(.22) contrast(1.3) grayscale(1); }

.member.unlocked { z-index: 10; margin: 0 clamp(8px, 2vw, 36px); }
.member.unlocked figure { height: var(--fig); }
.member.unlocked figure img {
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.14));
  transition: opacity .18s ease;
}
.member.unlocked figure { transition: transform .35s cubic-bezier(.3,.7,.2,1); transform-origin: 50% 100%; }
.member.unlocked figure .cool { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; }

/* hover calvin: arms cross, chin up, he steps forward; the others fade back */
.member.unlocked:hover figure, .member.unlocked.stepping figure { transform: translateY(-6px) scale(1.035); }
.member.unlocked:hover figure img:not(.cool), .member.unlocked.stepping figure img:not(.cool) { opacity: 0; }
.member.unlocked:hover figure .cool, .member.unlocked.stepping figure .cool { opacity: 1; }
.roster:has(.unlocked:hover) .locked figure img, .roster:has(.unlocked.stepping) .locked figure img { filter: brightness(.1) contrast(1.35) grayscale(1) blur(1.5px); opacity: .85; }
.hello {
  position: absolute;
  left: 50%; top: calc(-1 * var(--fig) - 18px);
  padding: 7px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(10%, 6px);
  transition: opacity .2s ease .12s, transform .2s ease .12s;
  pointer-events: none;
}
.member.unlocked:hover .hello, .member.unlocked.stepping .hello { opacity: 1; transform: translate(10%, 0); }

/* on click or tap: the button turns into a loader while he has his moment (desktop and touch) */
.enter .loading { display: none; gap: 5px; align-items: center; height: 18px; }
.enter .loading i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: dot 1s ease-in-out infinite; }
.enter .loading i:nth-child(2) { animation-delay: .15s; }
.enter .loading i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.stepping .enter { min-width: 104px; justify-content: center; }
.stepping .enter .go-label { display: none; }
.stepping .enter .loading { display: inline-flex; }
.unlocked .plate { position: relative; }

.plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: clamp(118px, 17vh, 150px);
  padding-top: 18px;
  text-align: center;
  white-space: nowrap;
}
.plate .city {
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--muted);
}
.plate .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #8a8983;
}
.plate .status svg { width: 12px; height: 12px; fill: currentColor; }

.unlocked .plate .city { color: var(--ink); }
.unlocked .plate .name {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1;
}
.unlocked .plate .enter {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: background .2s ease;
}
.unlocked a:hover .enter { background: #000; }
.unlocked a:hover .enter span { transform: translateX(3px); }
.unlocked .enter span { transition: transform .2s ease; }

/* phones: the roster becomes a sideways lineup, centred on calvin */
@media (max-width: 760px) {
  .family { min-height: 560px; }
  .brand { padding-top: 40px; }
  .brand img { width: 84vw; }
  .roster {
    /* sized to the *visible* height (safari's bars included), with headroom for the bubble */
    --fig: min(calc(100svh - 360px), 128vw);
    --locked: .74;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 64px 26vw 0;
    gap: 0;
  }
  .roster::-webkit-scrollbar { display: none; }
  .member { scroll-snap-align: center; }
  .member.unlocked { margin: 0 -4vw; }
  .member.locked { margin: 0 -7vw; }
  .locked .plate .status { font-size: 11px; gap: 4px; }
  .locked .plate .status svg { width: 10px; height: 10px; }
  .locked .plate .city { font-size: 11px; }
}

@media (max-height: 640px) and (min-width: 761px) {
  .prompt { display: none; }
}