/* The chooser: who are we watching.

   A profile picker rather than a pair of posters -- the designers are the
   profiles, and their own faces are the pictures. Portraits are from Wikimedia
   Commons under CC BY, credited at the foot. */
#landing{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:var(--bg);padding:2rem;overflow:auto}
#landing.open{display:flex}
#landing::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%,rgba(187,113,122,.16),transparent 62%)}

.land-logo{position:absolute;top:1.6rem;left:2rem;font-family:var(--font);font-weight:800;
  font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);line-height:1;z-index:2}
.land-logo b{color:var(--accent);font-weight:800}

.land-inner{max-width:900px;width:100%;text-align:center;margin:auto;position:relative;z-index:1}
.land-ask{font-family:var(--font);font-weight:600;font-size:clamp(1.9rem,4.2vw,3rem);
  letter-spacing:-.02em;color:var(--ink);margin:0 0 3rem}

.land-cards{display:flex;justify-content:center;flex-wrap:wrap;gap:2.4rem}
.land-card{display:flex;flex-direction:column;align-items:center;gap:.1rem;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:center;
  color:var(--ink-dim);transition:color .2s}
.land-card:hover,.land-card:focus-visible{color:var(--ink);outline:0}

/* The tile sits above the ground rather than on it: a cast shadow underneath,
   a lit top edge and a dark under-edge inside the frame, so the square reads
   as a pressed object with thickness. */
.lc-face{position:relative;width:clamp(120px,13vw,168px);aspect-ratio:1;border-radius:10px;
  overflow:hidden;display:block;background:var(--bg-soft);
  border:3px solid transparent;
  box-shadow:
    0 1px 1px rgba(0,0,0,.28),
    0 8px 18px -6px rgba(0,0,0,.55),
    0 22px 38px -14px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.45);
  transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
/* a soft bevel over the picture, catching light at the top left */
.lc-face::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%,
    rgba(0,0,0,.14) 78%,rgba(0,0,0,.3));
  mix-blend-mode:soft-light}
.lc-face img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92)}
.land-card:hover .lc-face,.land-card:focus-visible .lc-face{border-color:var(--accent);
  transform:translateY(-6px) scale(1.03);
  box-shadow:
    0 2px 2px rgba(0,0,0,.3),
    0 14px 26px -8px rgba(0,0,0,.6),
    0 34px 56px -18px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.45)}
/* the empty slot is pressed into the ground instead of lifted off it */
.lc-add{display:grid;place-items:center;font-size:2.6rem;font-weight:300;color:var(--muted);
  border:1px dashed var(--line);background:var(--bg);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.06)}
.lc-add::after{display:none}

.lc-name{font-family:var(--font);font-size:1.05rem;font-weight:500;margin-top:1rem;color:inherit}
.lc-meta{font-family:var(--font);font-size:.82rem;color:var(--muted);margin-top:.15rem}

.land-card.soon{cursor:default}
.land-card.soon:hover{color:var(--ink-dim)}
.land-card.soon:hover .lc-face{border-color:transparent;transform:none}

.land-foot{font-family:var(--font);color:var(--muted);font-size:.8rem;margin-top:3.4rem}
.land-credit{font-family:var(--font);color:var(--muted);font-size:.68rem;margin-top:.5rem;opacity:.8}
.land-credit a{color:inherit;text-decoration:underline}
@media(max-width:640px){.land-cards{gap:1.4rem}.land-logo{left:1.2rem;top:1.2rem;font-size:1.25rem}}

@media(prefers-reduced-motion:reduce){.lc-face{transition:none}}

/* Each profile settles the last centimetre into place on arrival, one after
   the other, rather than appearing already there. */
@keyframes lc-settle{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
#landing.open .land-card{animation:lc-settle 1.5s cubic-bezier(.16,.6,.2,1) both}
#landing.open .land-card:nth-child(1){animation-delay:.22s}
#landing.open .land-card:nth-child(2){animation-delay:.42s}
#landing.open .land-card:nth-child(3){animation-delay:.62s}
#landing.open .land-ask{animation:lc-settle 1.3s cubic-bezier(.16,.6,.2,1) both}
#landing.open .land-foot{animation:lc-settle 1.2s cubic-bezier(.16,.6,.2,1) .9s both}
/* The hover lift lives on .lc-face, a different element, so it never fights
   the entrance animation on the card -- and the card must keep that
   animation on hover. Taking it away and giving it back on the way out
   restarts it, which sends the profile back to opacity nought and floats it
   in a second time every time the cursor leaves. */
@media(prefers-reduced-motion:reduce){
  #landing.open .land-card,#landing.open .land-ask,#landing.open .land-foot{animation:none}
}