/* ══════════════════════════════════════════════════════════════════════════
   thepub.beer - the front door
   ══════════════════════════════════════════════════════════════════════════

   This page has one job and it is not "present two options". It is the first
   thing anyone sees of either community, so it has to look like somewhere
   worth walking into. A radio-button chooser would do the job and would say
   nothing about the place.

   So: a dark room, one lamp, and two doors drawn in CSS. The FiveM door is a
   modern panelled door with a lit sign behind the glass. The RedM door is a
   pair of saloon bats with dark beyond them. Both are built from gradients
   and borders, because a photograph of a door is 300KB and would be wrong for
   one of the two anyway.

   Every size is in rem. The root font size tracks the viewport (see
   theme.css), so this page is drawn once and is correct at 720p and at 4K.
   ══════════════════════════════════════════════════════════════════════════ */

body.splitter {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: #0a0806;
  /* Two washes: the lamp overhead, and the ground the doors stand on. The
     lamp is a radial at the top so the light falls, rather than an even fill
     which would read as a web page background. */
  background-image:
    radial-gradient(ellipse 65% 45% at 50% -6%,
      rgba(255, 207, 122, 0.20) 0%, rgba(255, 207, 122, 0.06) 38%, transparent 72%),
    radial-gradient(ellipse 90% 40% at 50% 108%,
      rgba(74, 51, 32, 0.34) 0%, transparent 70%),
    linear-gradient(180deg, #12100d 0%, #0a0806 60%, #0d0a07 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ── The lamp ──────────────────────────────────────────────────────────────
   A hanging oil lamp. It is decoration, but it is also the reason the page is
   lit from above rather than evenly, which is most of why the room reads as a
   room. */

.lamp {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.125rem;
  height: 4.5rem;
  background: linear-gradient(180deg, rgba(176,141,63,0.7), rgba(176,141,63,0.25));
  pointer-events: none;
  z-index: 1;
}

.lamp__glass {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 2.75rem;
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(ellipse at 50% 62%,
      rgba(255, 226, 168, 0.95) 0%,
      rgba(255, 190, 96, 0.55) 34%,
      rgba(180, 120, 40, 0.16) 62%,
      transparent 78%);
  box-shadow:
    0 0 3.5rem rgba(255, 200, 120, 0.30),
    0 0 8rem rgba(255, 180, 90, 0.16);
  animation: flicker 5.5s ease-in-out infinite;
}

/* Lamplight is never steady. A tiny, slow, irregular wobble reads as flame;
   a fast or large one reads as a broken animation. */
@keyframes flicker {
  0%, 100% { opacity: 1;    }
  17%      { opacity: 0.93; }
  31%      { opacity: 1;    }
  48%      { opacity: 0.88; }
  55%      { opacity: 0.97; }
  73%      { opacity: 0.91; }
  86%      { opacity: 1;    }
}

/* ── Stage ────────────────────────────────────────────────────────────── */

.splitter__stage {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 5.25rem var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-6);
}

/* ── The sign over the bar ────────────────────────────────────────────── */

.sign { text-align: center; }

.sign__est {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0.85;
}

.sign__name {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.98;
  margin: var(--sp-2) 0 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sign__line {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--cream-dim);
  max-width: 34rem;
  margin-inline: auto;
}

.sign .divider { max-width: 20rem; margin-inline: auto; }

/* ── The two doors ────────────────────────────────────────────────────── */

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  border: var(--rule-faint);
  background: linear-gradient(180deg, rgba(20,17,13,0.72), rgba(9,8,6,0.86));
  box-shadow: 0 0.75rem 2.5rem rgba(0,0,0,0.6);
  transition: border-color 220ms var(--ease),
              transform 220ms var(--ease),
              box-shadow 220ms var(--ease);
}

.door:hover,
.door:focus-visible {
  text-decoration: none;
  transform: translateY(calc(-1 * var(--sp-1)));
  border-color: var(--gold);
  box-shadow: 0 1.25rem 3.5rem rgba(0,0,0,0.72), var(--shadow-lamp);
}

/* ── The door itself, drawn ───────────────────────────────────────────── */

.door__frame {
  position: relative;
  display: block;
  width: 100%;
  /* aspect-ratio rather than a height, so the drawing keeps its proportions
     at every root size instead of stretching. */
  aspect-ratio: 5 / 7;
  max-height: 26rem;
  margin: 0 auto var(--sp-4);
  border: var(--hair2) solid var(--wood-warm);
  border-bottom-width: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.28) 0rem, rgba(0,0,0,0) 0.06rem,
      rgba(255,255,255,0.02) 0.4rem, rgba(0,0,0,0) 1.5rem),
    linear-gradient(178deg, #3a2818 0%, #241a11 60%, #17100a 100%);
  overflow: hidden;
}

/* ── FiveM: a panelled door with a lit sign behind the glass ──────────── */

.door__glass {
  position: absolute;
  inset: 8% 12% 58%;
  display: grid;
  place-items: center;
  border: var(--hair2) solid rgba(176, 141, 63, 0.5);
  background:
    linear-gradient(160deg, rgba(120, 190, 220, 0.10), rgba(20, 40, 60, 0.55));
  box-shadow: inset 0 0 1.5rem rgba(0,0,0,0.8);
  overflow: hidden;
}

/* The neon sign is the one modern note on the page, and it belongs to the
   modern door. Colour, not a font: there is no web font here by design. */
.door__neon {
  font-family: var(--font-display);
  font-size: var(--fs-head);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #9fe8ff;
  text-shadow:
    0 0 0.375rem rgba(120, 220, 255, 0.95),
    0 0 1.25rem rgba(60, 170, 255, 0.7),
    0 0 3rem rgba(40, 130, 255, 0.45);
  animation: buzz 7s steps(1, end) infinite;
}

@keyframes buzz {
  0%, 92%, 100% { opacity: 1; }
  93%           { opacity: 0.45; }
  94%           { opacity: 1; }
  96%           { opacity: 0.6; }
  97%           { opacity: 1; }
}

.door__panel {
  position: absolute;
  left: 12%;
  right: 12%;
  border: var(--hair2) solid rgba(0,0,0,0.55);
  box-shadow:
    inset 0 var(--hair) 0 rgba(255, 220, 170, 0.10),
    inset 0 calc(-1 * var(--hair)) 0 rgba(0,0,0,0.6);
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.05));
}
.door__panel--top    { top: 48%; height: 20%; }
.door__panel--bottom { top: 72%; height: 22%; }

.door__knob {
  position: absolute;
  top: 47%;
  right: 6%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--gold-bright), var(--brass-dark));
  box-shadow: 0 0 0.5rem rgba(255, 200, 110, 0.45);
}

/* ── RedM: saloon bats, dark beyond ───────────────────────────────────── */

.door__frame--saloon {
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.3) 0rem, rgba(0,0,0,0) 0.06rem,
      rgba(255,255,255,0.02) 0.4rem, rgba(0,0,0,0) 1.6rem),
    linear-gradient(178deg, #402c1a 0%, #2a1d12 55%, #1a1209 100%);
}

/* What is beyond the doors: lamplight and smoke, not a room you can see. The
   uncertainty is the point. */
.door__dark {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 50% 42%,
      rgba(255, 190, 105, 0.26) 0%, rgba(140, 80, 25, 0.10) 45%, transparent 72%),
    linear-gradient(180deg, #0a0705 0%, #120c07 100%);
}

/* Two bat wings hung on the frame. They swing on hover, and they swing from
   the hinge edge, which is why each has its own transform-origin. */
.door__bat {
  position: absolute;
  top: 18%;
  height: 56%;
  width: 44%;
  z-index: 2;
  border: var(--hair2) solid rgba(0,0,0,0.5);
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.34) 0rem, rgba(0,0,0,0.34) 0.08rem,
      rgba(0,0,0,0) 0.08rem, rgba(0,0,0,0) 1.15rem),
    linear-gradient(180deg, #5a3d23 0%, #3d2917 100%);
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.7);
  transition: transform 420ms var(--ease);
}

.door__bat--left  { left: 4%;  transform-origin: left center;  }
.door__bat--right { right: 4%; transform-origin: right center; }

/* rotateY, so they open into the room rather than sliding sideways. The
   perspective lives on the frame so both wings share one vanishing point. */
.door__frame--saloon { perspective: 40rem; }

.door--redm:hover .door__bat--left,
.door--redm:focus-visible .door__bat--left  { transform: rotateY(52deg); }
.door--redm:hover .door__bat--right,
.door--redm:focus-visible .door__bat--right { transform: rotateY(-52deg); }

/* ── The brass plate under each door ──────────────────────────────────── */

.door__plate {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}

.door__kicker {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cream-faint);
}

.door__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--paper);
  text-shadow:
    0 calc(-1 * var(--hair)) 0 rgba(255, 240, 210, 0.20),
    0 var(--hair) 0 rgba(0,0,0,0.9),
    0 0.25rem 0.75rem rgba(0,0,0,0.85);
  transition: color 220ms var(--ease);
}

.door:hover .door__title { color: var(--gold-bright); }

.door__sub {
  font-size: var(--fs-small);
  color: var(--cream-dim);
  line-height: 1.6;
  max-width: 24rem;
  margin-inline: auto;
}

.door__go {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass);
  transition: color 220ms var(--ease), letter-spacing 220ms var(--ease);
}

.door__go::after { content: " \2192"; }

.door:hover .door__go,
.door:focus-visible .door__go {
  color: var(--gold-bright);
  letter-spacing: 0.2em;
}

/* Each door keeps a hint of its own world in the frame colour, so the two are
   never mistaken for each other at a glance. */
.door--fivem:hover  { border-color: #6fb6d8; }
.door--redm:hover   { border-color: var(--gold); }

/* ── The remembered choice ────────────────────────────────────────────── */

.recall {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--sp-4);
  text-align: center;
  border: var(--rule);
  background: rgba(12, 10, 8, 0.85);
}

.recall__line { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--cream-dim); }
.recall__where { color: var(--gold-bright); }
.recall .cluster { justify-content: center; }

/* ── Foot ─────────────────────────────────────────────────────────────── */

.splitter__foot { text-align: center; font-size: var(--fs-small); }
.splitter__foot p { margin: var(--sp-1) 0; }
.splitter__forget { min-height: 1.5rem; }

/* A button that has to look like a link, because "forget my choice" is not an
   action anyone should have to hunt for but it must not compete with the
   doors either. */
.linkish {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--cream-faint);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.linkish:hover { color: var(--gold-bright); }

/* ── Narrow ───────────────────────────────────────────────────────────────
   Below two comfortable door widths the doors stack. The drawings shrink
   rather than disappear: on a phone they are the only thing that says this is
   not a generic chooser. */

@media (max-width: 720px) {
  .splitter__stage { padding-top: 4.5rem; gap: var(--sp-5); }
  .sign__name { font-size: 2.75rem; }
  .doors { grid-template-columns: 1fr; }
  .door__frame { max-height: 15rem; aspect-ratio: 8 / 7; }
  .door__title { font-size: var(--fs-title); }
}

/* Short and wide, a laptop in landscape. Keep everything on one screen by
   trimming the drawing, not the words. */
@media (max-height: 760px) and (min-width: 721px) {
  .door__frame { max-height: 14rem; }
  .splitter__stage { padding-top: 4.5rem; }
}