/* Anno XL — gate.css
   The roll. Sits above the altitude loader: you name yourself, then the
   ground comes up. Same rules as everything else here — cut corners, no
   border-radius, sand on sea ink.                                         */

/* Above #loader (90) — the roll is answered BEFORE the descent starts, so it
   has to cover the altitude readout. Below the grain/vignette (95/96) so it
   sits under the same film as everything else. */
/* Skirted, not height-sized (see --skirt in base.css): this panel has to
   OBSCURE the photograph behind it whatever the viewport resolves to; a
   viewport-unit height went stale on a real iPhone and let the aerial show
   underneath. The skirt is folded into padding-bottom so the roll stays
   optically centred on the actual screen. */
#gate {
  position: fixed; top: 0; left: 0; right: 0; z-index: 92;
  bottom: calc(-1 * var(--skirt));
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom) + var(--skirt));
  transition: opacity .5s var(--ease-soft);
}
#gate[hidden] { display: none; }
#gate.gone { opacity: 0; pointer-events: none; }

/* A hint of the headland you're about to fall onto, almost entirely dark.
   Deliberately a 9KB 640x360 blur, not the full aerial: at brightness .28
   under a scrim there is no detail to see, and pointing this at aerial.jpg
   made every retina first-visit download BOTH that and the 1.9MB 2x — 3MB
   before the map even appeared. */
#gate::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/photos/aerial-gate.webp') center/cover no-repeat;
  filter: brightness(.28) saturate(.7);
}
#gate::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 46%, rgba(12, 33, 38, .5), rgba(12, 33, 38, .95) 78%);
}

.gate-inner {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  height: 100%;
  max-height: 620px;
  display: flex; flex-direction: column; align-items: center;
}

.gate-chev {
  width: 74px; height: auto; flex: none;
  fill: none; stroke: var(--gold); stroke-width: 6.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.gate-chev path:nth-child(2) { stroke: var(--sand); }
.gate-chev path:nth-child(3) { stroke: var(--sand); opacity: .55; }

.gate-title {
  flex: none;
  margin-top: 14px;
  font: 400 clamp(28px, 8vw, 36px)/1.05 var(--serif);
  color: var(--bone);
  letter-spacing: -.01em;
}
.gate-count {
  flex: none;
  margin-top: 7px;
  font: 400 11px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--lagoon-2);
  opacity: .8;
  text-align: center;
}

/* ---- the list ---- */

.gate-listwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin-top: 16px;
}
.gate-list {
  position: absolute; inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 0 34px;
  gap: 1px;
}
.gate-list::-webkit-scrollbar { width: 0; height: 0; }

.gate-name {
  font: 400 20px/1.7 var(--serif);
  color: rgba(231, 217, 189, .52);
  padding: 3px 22px;
  transition: color .2s, font-size .2s;
}
.gate-name:hover { color: rgba(231, 217, 189, .85); }
.gate-name[aria-selected='true'] {
  width: 240px; text-align: center;
  font-size: 27px; line-height: 1.15;
  color: var(--bone);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 9px 0; margin: 5px 0;
}

/* Two plates rather than a mask — a mask would eat the scroll shadow too. */
.gate-fade {
  position: absolute; left: 0; right: 0; height: 40px;
  pointer-events: none;
}
.gate-fade-t { top: 0;    background: linear-gradient(180deg, var(--ink), transparent); }
.gate-fade-b { bottom: 0; background: linear-gradient(0deg,   var(--ink), transparent); }

/* ---- the way through ---- */

.gate-cta {
  flex: none;
  width: 100%;
  margin-top: 4px;
  padding: 15px 0;
  background: var(--gold);
  color: #16262b;
  font: 700 11px/1 var(--sans);
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  clip-path: var(--cut-s);
  opacity: .32;
  transition: opacity .3s;
}
.gate-cta.armed { opacity: 1; }
.gate-cta:disabled { cursor: default; }

.gate-deny {
  flex: none;
  margin-top: 12px;
  padding: 6px;
  font: 400 italic 12.5px/1 var(--serif);
  color: rgba(231, 217, 189, .45);
  transition: color .2s;
}
.gate-deny:hover { color: var(--sand); }

@media (max-height: 560px) {
  .gate-chev { width: 54px; }
  .gate-title { margin-top: 9px; }
  .gate-list { padding: 16px 0 22px; }
}

/* A big screen with a mouse: the whole roll fits without scrolling, so the
   phone column — and the scroll-fade plates that read as a hard-edged box
   over the photo backdrop — give way to a centred cloud of names. */
@media (min-width: 900px) and (pointer: fine) {
  .gate-inner { width: min(860px, 92%); max-height: 660px; }
  .gate-list {
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    column-gap: 10px;
    padding: 10px 0 18px;
  }
  .gate-fade { display: none; }
  .gate-name { padding: 3px 14px; }
  .gate-name[aria-selected='true'] {
    width: auto;
    padding: 9px 20px;
    margin: 0 6px;
  }
  .gate-cta { width: min(340px, 100%); align-self: center; }
}