/* =====================================================================
   GRIFT — THE FRONT DOOR.

   The screen: the hero, the two ways in, the status strip, over a
   rotation of frames from the running city. Under it, the page: what
   the city runs, in its own frames, and the manual.

   Two things this file got wrong when the door was one still screen,
   both fixed here and both worth naming:

   THE PLATE WAS INVISIBLE. brightness(.66) and a six-pixel blur under
   a scrim at .92 is not a dark city, it is a black page with grain on
   it — the best frame the game has, on the screen, unreadable. The
   grade opens up and the scrim became a wipe across the frame: held
   down under the copy, let go over the far side.

   THE PAGE ENDED AT THE FOLD. A reader not ready to press a door had
   nowhere to go and nothing to read. The sections are back under it.

   Every colour and face comes from css/palette.css. The accent appears
   on this screen in the alpha dot, a door under the pointer, a link
   under the pointer, and the section kickers. Everything else is ink.

   The layer sits over the game canvas at z 80; js/landing.js takes it
   away when a door is used, and owns the rotation.
   ===================================================================== */

#landing {
  position: fixed; inset: 0; z-index: 80;
  display: block;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-behavior: smooth;
  background: var(--gr-void);
  color: var(--gr-ink);
  font-family: var(--gr-body);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  opacity: 1; transition: opacity .38s ease;
}
#landing.gone { opacity: 0; pointer-events: none; }
#landing a { color: inherit; text-decoration: none; }
#landing :focus-visible { outline: 2px solid var(--gr-accent); outline-offset: 3px; }

/* ---- the screen: one viewport, the door on it ----------------------- */
.fd-top {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}

/* ---- the plates: nine frames, one at a time ------------------------- */
.fd-plates { position: absolute; inset: 0; overflow: hidden; }
.fd-plate {
  position: absolute; inset: -3%;
  background: #05060a center / cover no-repeat;
  /* a city, legibly. The blur is enough to keep type off texture and no
     more; the brightness is the frame's own. */
  filter: blur(2.5px) saturate(.92) brightness(.94) contrast(1.03);
  transform: scale(1.04);
  opacity: 0; transition: opacity 1.5s ease;
  will-change: opacity;
}
.fd-plate.is-on { opacity: 1; }

/* the copy side goes down so ivory reads without a panel behind it; the
   far side is let go, so the frame behind the doors is a place */
.fd-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,7,9,.90) 0%, rgba(6,7,9,.68) 32%, rgba(6,7,9,.18) 64%, rgba(6,7,9,.34) 100%),
    linear-gradient(to top, rgba(6,7,9,.74) 0%, rgba(6,7,9,0) 30%),
    radial-gradient(130% 100% at 46% 46%, rgba(6,7,9,0) 48%, rgba(6,7,9,.46) 100%);
}
/* a fine grain, so the blur reads as film rather than as a blurred JPEG */
.fd-grain {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ---- the hero ------------------------------------------------------- */
.fd-hero {
  position: relative; z-index: 2;
  width: min(100% - 12vw, 700px);
  margin: 0 0 0 7vw;
  padding: 104px 0 150px;
}
.fd-eyebrow {
  margin: 0 0 26px; display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gr-ink-3);
}
.fd-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gr-accent); box-shadow: 0 0 0 3px var(--gr-accent-a);
}
.fd-title {
  margin: 0; font-family: var(--gr-display); font-weight: 700;
  font-size: clamp(64px, 9.4vw, 132px); line-height: .84; letter-spacing: -.04em;
  color: var(--gr-ink);
}
.fd-enter {
  margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 400;
  letter-spacing: .01em; color: var(--gr-ink-2);
}
.fd-lede {
  margin: 20px 0 0; max-width: 56ch;
  font-size: 14.5px; line-height: 1.66; color: var(--gr-ink-2);
}

/* ---- the two ways in: a filled button and an outlined one ------------
   They were two tall cards with a paragraph inside each, which reads as a
   pricing table, not a door. The reference is a button pair sized to their
   own labels — so they are NOT equal width, and that is the point: what the
   cards explained is one line underneath now, where a sentence belongs. */
/* TWO WAYS IN OF EQUAL WEIGHT. The doors size to their text by default, and
   "CONNECT WALLET" is shorter than "PLAY AS DEFAULT", so the wallet door came
   out visibly smaller than the guest one — a difference nobody chose, in the
   one place the product has a stance about not pushing anybody toward a
   wallet. The slots share the row equally; the filled-versus-outlined
   treatment is what tells them apart, which is the difference that was
   actually asked for. */
.fd-doors { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }
#landing .fd-doorslot { display: block; min-width: 0; flex: 1 1 0; }
#landing .fd-doorslot[hidden] { display: none; }
.fd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  box-sizing: border-box; padding: 17px 26px;
  border-radius: 3px; border: 1px solid transparent;
  font: inherit; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.fd-btn .fd-doorname { font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; }
.fd-btnarrow { font-size: 12px; line-height: 1; opacity: .75; }
.fd-btn b { font-family: var(--gr-data); font-size: 12px; font-weight: 400; letter-spacing: .04em; opacity: .8; }
/* the filled one: ivory on the plate, the darkest ink on it */
.fd-btn-primary { background: var(--gr-ink); color: var(--gr-void); border-color: var(--gr-ink); }
#landing .fd-btn-primary:hover, #landing .fd-btn-primary:focus-visible {
  background: #fff; border-color: #fff; transform: translateY(-1px);
}
/* the outlined one: the same button, wearing the plate instead of covering it */
.fd-btn-secondary {
  background: rgba(10, 11, 13, .34); color: var(--gr-ink); border-color: var(--gr-line-2);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#landing .fd-btn-secondary:hover, #landing .fd-btn-secondary:focus-visible {
  border-color: var(--gr-ink-2); background: rgba(10, 11, 13, .56); transform: translateY(-1px);
}
/* A PRESS HAS TO LOOK PRESSED. This was opacity alone, which on a filled ivory
   button over a moving plate is not a state change anybody can see — the only
   real feedback was a line of copy under the doors. A spinner says the press
   landed and the page is working; opacity alone says nothing happened. */
.fd-btn.busy { opacity: .78; pointer-events: none; cursor: progress; }
.fd-btn.busy .fd-btnarrow { display: none; }
.fd-btn.busy::after {
  content: ''; width: 12px; height: 12px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: fd-spin .7s linear infinite;
}
@keyframes fd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* no spin, but still a mark that the press landed */
  .fd-btn.busy::after { animation: none; border-top-color: currentColor; opacity: .5; }
}

/* what the two cards used to explain, now a sentence where a sentence goes */
.fd-doorsline { margin: 18px 0 0; max-width: 62ch; font-size: 11.5px; line-height: 1.65; letter-spacing: .01em; color: var(--gr-ink-3); }
/* and the claim, on its own line, as absolute as it was */
.fd-terms { margin: 9px 0 0; font-size: 11px; letter-spacing: .02em; color: var(--gr-ink-4); }
.fd-doornote { margin: 8px 0 0; font-size: 11px; color: var(--gr-caution); }
.fd-doornote:empty { display: none; }
/* "no wallet found on this browser. install MetaMask" — the one note that
   carries a link, and the link has to look like one or it is another dead end */
.fd-doornote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fd-doornote a:hover, .fd-doornote a:focus-visible { color: var(--gr-ink, #ece5d5); }

/* ---- the quiet links: pages to read, never a way in ----------------- */
.fd-links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 22px; }
#landing .fd-links a {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gr-ink-3);
  padding-bottom: 3px; border-bottom: 1px solid var(--gr-line);
  transition: color .16s ease, border-color .16s ease;
}
#landing .fd-links a:hover { color: var(--gr-accent); border-bottom-color: var(--gr-accent); }

/* ---- the status strip ----------------------------------------------- */
.fd-status {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 16px 7vw 18px;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gr-ink-4);
  border-top: 1px solid var(--gr-line);
  background: linear-gradient(to top, rgba(6,7,9,.72), rgba(6,7,9,0));
}
.fd-status .fd-sep { opacity: .5; }
.fd-mono { font-family: var(--gr-data); letter-spacing: .06em; text-transform: none; }
#landing .fd-status a:hover { color: var(--gr-accent); }
.fd-status .fd-on { color: var(--gr-accent); }

/* ---- the cue: a page that scrolls has to say so ---------------------- */
.fd-scroll {
  position: absolute; right: 7vw; bottom: 62px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gr-ink-3);
  transition: color .18s ease;
}
#landing .fd-scroll:hover { color: var(--gr-accent); }
.fd-scrollarrow {
  display: inline-block; font-size: 13px; line-height: 1;
  animation: fd-nudge 2.4s ease-in-out infinite;
}
@keyframes fd-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ---- the page under the door ---------------------------------------- */
.fd-sec {
  position: relative;
  background: var(--gr-bg);
  border-top: 1px solid var(--gr-line);
  padding-block: clamp(64px, 8vw, 118px);
}
.fd-secshell { position: relative; z-index: 2; width: min(100% - 14vw, 1180px); margin-inline: auto; }
.fd-kicker {
  margin: 0 0 20px; display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gr-ink-3);
}
.fd-h2 {
  margin: 0; font-family: var(--gr-display); font-weight: 700;
  font-size: clamp(30px, 4.1vw, 52px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--gr-ink); text-wrap: balance;
}
.fd-seclede { margin: 18px 0 0; max-width: 62ch; font-size: 14.5px; line-height: 1.68; color: var(--gr-ink-2); }

/* four systems, one object repeated: same edges, same baselines */
.fd-cards {
  margin-top: clamp(34px, 4vw, 54px);
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.fd-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 14px 20px;
  background: var(--gr-panel-a6); border: 1px solid var(--gr-line); border-radius: 3px;
  transition: border-color .18s ease, transform .18s ease;
}
.fd-card:hover { border-color: var(--gr-line-3); transform: translateY(-2px); }
.fd-cardimg {
  display: block; width: 100%; height: auto; max-width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--gr-void); border-radius: 2px;
}
.fd-cardtitle { margin: 4px 0 0; font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--gr-ink); }
.fd-cardcopy { margin: 0; font-size: 12.5px; line-height: 1.62; color: var(--gr-ink-3); flex: 1; }
#landing .fd-cardlink {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gr-ink-2);
  transition: color .16s ease;
}
#landing .fd-card:hover .fd-cardlink, #landing .fd-cardlink:hover { color: var(--gr-accent); }

/* ---- the manual, over the night plate -------------------------------- */
.fd-manualsec { overflow: hidden; background: var(--gr-void); }
.fd-manualbg {
  position: absolute; inset: 0;
  background: #05060a center / cover no-repeat url('../assets/landing/alley-night.jpg');
  filter: blur(3px) saturate(.8) brightness(.5) contrast(1.02);
  transform: scale(1.05);
}
.fd-manualsec::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,7,9,.94) 0%, rgba(6,7,9,.8) 46%, rgba(6,7,9,.62) 100%);
}
.fd-manualshell {
  display: grid; gap: clamp(34px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
}
.fd-manualcopy { min-width: 0; }
#landing .fd-guide {
  margin-top: 26px; display: inline-block;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gr-ink);
  padding-bottom: 4px; border-bottom: 1px solid var(--gr-line-3);
  transition: color .16s ease, border-color .16s ease;
}
#landing .fd-guide:hover { color: var(--gr-accent); border-bottom-color: var(--gr-accent); }
.fd-guidelinks { display: flex; flex-direction: column; gap: 1px; background: var(--gr-line); border: 1px solid var(--gr-line); }
.fd-guidelink {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 20px; background: var(--gr-panel-a6);
  transition: background .16s ease;
}
#landing .fd-guidelink:hover { background: var(--gr-panel-hi); }
.fd-guidetext { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fd-guidetext b { font-size: 13.5px; font-weight: 500; color: var(--gr-ink); }
.fd-guidetext i { font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--gr-ink-4); }
.fd-arrow { font-size: 13px; color: var(--gr-ink-4); transition: color .16s ease; }
#landing .fd-guidelink:hover .fd-arrow { color: var(--gr-accent); }
.fd-bottom {
  position: relative; z-index: 2;
  width: min(100% - 14vw, 1180px); margin: clamp(44px, 5vw, 72px) auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 20px; border-top: 1px solid var(--gr-line);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gr-ink-4);
}
#landing .fd-bottom a:hover { color: var(--gr-accent); }

@media (max-width: 820px) {
  .fd-hero { width: calc(100% - 44px); margin: 0 22px; padding: 84px 0 132px; }
  /* on a phone they stack and each takes the width, so neither is a target
     you have to aim at */
  .fd-doors { flex-direction: column; align-items: stretch; }
  #landing .fd-btn { width: 100%; justify-content: center; }
  .fd-lede { font-size: 13.5px; }
  .fd-status { padding: 14px 22px 16px; gap: 8px; font-size: 9px; }
  .fd-links { gap: 16px; }
  .fd-scroll { right: 22px; bottom: 58px; font-size: 9px; }
  .fd-secshell, .fd-bottom { width: calc(100% - 44px); }
  .fd-manualshell { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #landing, .fd-btn, .fd-card, .fd-plate { transition: none; }
  #landing { scroll-behavior: auto; }
  #landing .fd-btn:hover, #landing .fd-card:hover { transform: none; }
  /* the rotation is stopped in js/landing.js as well — this is the
     belt: whatever is showing stays showing */
  .fd-scrollarrow { animation: none; }
}