/* ============================================================================
   entry-screen.css — framework-agnostic landing / entry overlay
   Extracted from a single-file globe app (source CSS lines 37-104 + 676).
   Every numeric value below is the original computed value, unchanged.

   Selector map (original -> here):
     #entry            -> .entry-screen
     #entry.gone       -> .entry-screen.is-gone
     #entryTitle       -> .entry-screen .es-title
     #entryTitle.show  -> .entry-screen.is-revealed .es-title
     #entryStats       -> .entry-screen .es-stats
     #entryStats.show  -> .entry-screen.is-revealed .es-stats
     #entryCard        -> .entry-screen .es-card
   Inner class names (.est, .estw, .est-n, .est-l, .est-x, .estx-row,
   .estx-ini, .ec-title, .ec-sub, .ec-btn, .ec-mail, .ec-note, .et-eyebrow,
   .et-brand) are kept verbatim so the extraction stays traceable.
   ========================================================================== */

.entry-screen {
  /* ---- theme tokens (override on the root element or on :root) ---- */
  --es-brand: #FB651E;
  --es-paper: #FFF7F0;
  --es-border: #f0d9c6;
  --es-ink: #20140c;
  --es-graphite: #6b5443;
  --es-font-body: "Inter", system-ui, sans-serif;
  --es-font-display: "Space Grotesk", system-ui, sans-serif;
  /* z-index of the whole overlay (original: 2000) */
  --es-z: 2000;

  position: fixed;
  inset: 0;
  z-index: var(--es-z);
  background: var(--es-paper);
  overflow: hidden;
  transition: opacity .55s ease;
  font-family: var(--es-font-body);
  color: var(--es-ink);
  box-sizing: border-box;
}
.entry-screen *,
.entry-screen *::before,
.entry-screen *::after { box-sizing: border-box; }

/* dismissed state — the host removes/hides the node after the .55s fade */
.entry-screen.is-gone { opacity: 0; pointer-events: none; }

/* optional slot for a background canvas / video / image behind everything */
.entry-screen .es-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── title block ─────────────────────────────────────────────────────────── */
.entry-screen .es-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
  text-align: center;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.entry-screen.is-revealed .es-title { opacity: 1; }

.entry-screen .et-eyebrow {
  font: 600 11px/1 var(--es-font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--es-brand);
}

/* wordmark — text variant (neutral default) */
.entry-screen .et-brand {
  margin: 0 auto 9px;
  font-family: var(--es-font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 31px;
  letter-spacing: -0.02em;
  color: var(--es-brand);
}
/* wordmark — masked-SVG variant (the original technique).
   Set --es-brand-mask to url(...) plus optional --es-brand-w / --es-brand-h. */
.entry-screen .et-brand.is-mask {
  width: var(--es-brand-w, 160px);
  height: var(--es-brand-h, 31px);
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: var(--es-brand);
  -webkit-mask: var(--es-brand-mask) center/contain no-repeat;
  mask: var(--es-brand-mask) center/contain no-repeat;
}

/* ── CTA card ────────────────────────────────────────────────────────────── */
.entry-screen .es-card {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: min(340px, 90vw);
  text-align: center;
  opacity: 0;
  transition: opacity .7s ease .1s;
  pointer-events: none;
}
.entry-screen.is-revealed .es-card { opacity: 1; pointer-events: auto; }

.entry-screen .ec-title {
  font-family: var(--es-font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--es-ink);
  margin-bottom: 3px;
}
.entry-screen .ec-sub {
  font-size: 12.5px;
  color: var(--es-graphite);
  margin: 0 0 15px;
  line-height: 1.45;
}
.entry-screen .ec-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 9px;
  padding: 11px 14px;
  border-radius: 12px;
  font: 600 13.5px var(--es-font-display);
  cursor: pointer;
  border: 1px solid var(--es-border);
  background: #fff;
  color: var(--es-ink);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.entry-screen .ec-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
}
.entry-screen .ec-btn.primary {
  background: var(--es-brand);
  color: #fff;
  border-color: var(--es-brand);
}
.entry-screen .ec-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.entry-screen .ec-note {
  font-size: 10.5px;
  color: var(--es-graphite);
  margin-top: 11px;
  min-height: 14px;
}

/* ── email signup row ────────────────────────────────────────────────────── */
.entry-screen .ec-mail { display: flex; gap: 7px; margin-top: 9px; }
.entry-screen .ec-mail input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--es-border);
  border-radius: 12px;
  padding: 11px 13px;
  font: inherit;
  font-size: 13px;
  outline: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--es-ink);
}
.entry-screen .ec-mail input:focus { border-color: var(--es-brand); }
.entry-screen .ec-mail input.bad { border-color: #d64545; }
.entry-screen .ec-mail button {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--es-brand) 45%, #fff);
  border-radius: 12px;
  padding: 11px 15px;
  cursor: pointer;
  font: 600 12.5px var(--es-font-display);
  background: rgba(255, 255, 255, 0.85);
  color: var(--es-brand);
  transition: background .14s, color .14s;
}
.entry-screen .ec-mail button:hover { background: var(--es-brand); color: #fff; }
.entry-screen .ec-mail button:disabled { opacity: .6; cursor: default; }

/* ── floating glass stat cards ───────────────────────────────────────────── */
.entry-screen .es-stats .est {
  position: absolute;
  left: var(--px);
  top: var(--py);
  opacity: 0;
  transition: opacity 1.1s ease;
  cursor: pointer;
  z-index: 3;
}
.entry-screen .es-stats .est.est-r { left: auto; right: var(--px); }

.entry-screen.is-revealed .es-stats .est {
  opacity: 1;
  animation: es-estfloat 8.5s ease-in-out infinite alternate;
  animation-delay: var(--fdel, 0s);
}
/* staggered fade-in: card 2 .15s, card 3 .3s, card 4 .45s (nth-child based,
   exactly as the original; a per-card --sdel overrides it) */
.entry-screen.is-revealed .es-stats .est:nth-child(2) { transition-delay: .15s; }
.entry-screen.is-revealed .es-stats .est:nth-child(3) { transition-delay: .3s; }
.entry-screen.is-revealed .es-stats .est:nth-child(4) { transition-delay: .45s; }
.entry-screen.is-revealed .es-stats .est[style*="--sdel"] { transition-delay: var(--sdel); }

@keyframes es-estfloat {
  from { transform: translate(0, 0); }
  to   { transform: translate(5px, -9px); }
}

/* fixed width: the hover examples are hidden by max-height but still count
   towards the tile's intrinsic width, so a long name would resize the tile
   once data loads */
.entry-screen .estw {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 184px;
  padding: 12px 15px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 251, 246, 0.5), rgba(255, 251, 246, 0.18));
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-top-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 42px -22px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform-origin: top left;
  transition: transform .28s ease, box-shadow .28s ease;
}
.entry-screen .est-r .estw { transform-origin: top right; }

.entry-screen .es-stats .est:hover,
.entry-screen .es-stats .est.is-open,
.entry-screen .es-stats .est:focus-within { z-index: 6; }

.entry-screen .es-stats .est:hover .estw,
.entry-screen .es-stats .est.is-open .estw,
.entry-screen .es-stats .est:focus-within .estw {
  transform: scale(1.1);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.entry-screen .est-n {
  font: 800 21px var(--es-font-display);
  color: var(--es-brand);
  letter-spacing: -0.02em;
}
.entry-screen .est-l {
  font: 600 10px var(--es-font-display);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--es-graphite);
}

/* hover-expand detail panel */
.entry-screen .est-x {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .32s ease, opacity .32s ease, margin-top .32s ease;
}
.entry-screen .es-stats .est:hover .est-x,
.entry-screen .es-stats .est.is-open .est-x,
.entry-screen .es-stats .est:focus-within .est-x {
  max-height: 132px;
  opacity: 1;
  margin-top: 8px;
}

.entry-screen .estx-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font: 500 11px var(--es-font-body);
  color: var(--es-ink);
  white-space: nowrap;
  min-width: 0;
}
.entry-screen .estx-row span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-screen .estx-row img,
.entry-screen .estx-ini {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--es-border);
  flex: 0 0 auto;
}
.entry-screen .estx-row img.ph { object-fit: cover; }
.entry-screen .estx-ini {
  display: grid;
  place-items: center;
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
}

/* the stat card is a real button when focusable — strip the UA chrome */
.entry-screen .es-stats .est.is-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
.entry-screen .es-stats .est:focus { outline: none; }
.entry-screen .es-stats .est:focus-visible .estw {
  outline: 2px solid var(--es-brand);
  outline-offset: 3px;
}

/* ── breakpoint 1: phones / small tablets (max-width:768px) ──────────────── */
@media (max-width: 768px) {
  .entry-screen .es-title { top: 12%; }
  .entry-screen .es-card { bottom: 6%; }

  /* fallback position for any card without an explicit mobile override */
  .entry-screen .es-stats .est { --mpx: 3%; }
  .entry-screen .es-stats .est {
    left: var(--mpx, var(--px));
    top: var(--mpy, var(--py));
  }
  .entry-screen .es-stats .est.est-r {
    left: auto;
    right: var(--mpx, var(--px));
  }

  .entry-screen .estw { width: 138px; padding: 8px 11px; border-radius: 13px; }
  .entry-screen .est-n { font-size: 15px; }
  .entry-screen .est-l { font-size: 8px; }

  .entry-screen .es-stats .est:hover .est-x,
  .entry-screen .es-stats .est.is-open .est-x,
  .entry-screen .es-stats .est:focus-within .est-x { max-height: 100px; }

  .entry-screen .estx-row { font-size: 10px; }
  .entry-screen .estx-row img,
  .entry-screen .estx-ini { width: 16px; height: 16px; }

  /* iOS zooms into inputs with fonts <16px, breaking the fixed layout
     (original rule at source line 676) */
  .entry-screen .ec-mail input { font-size: 16px; }
}

/* ── breakpoint 2: short phones — keep the CTA card tappable ─────────────── */
@media (max-width: 768px) and (max-height: 620px) {
  .entry-screen .es-stats .est[data-hide-short="true"] { display: none; }
}

/* ── reduced motion (addition, not in the original stylesheet) ───────────── */
@media (prefers-reduced-motion: reduce) {
  .entry-screen,
  .entry-screen .es-title,
  .entry-screen .es-card,
  .entry-screen .es-stats .est { transition-duration: .01ms; }
  .entry-screen.is-revealed .es-stats .est { animation: none; }
}