/*
 * Shared styles for meerkatplatform.com: the landing (index.html) and the
 * Console sign-in (signin.html). One stylesheet so the bronze treatment has a
 * single definition; pages keep only what is genuinely page-specific.
 *
 * Both pages use the .page.photo layout: the sentinel photo on the left and a
 * text column on the right (phone: photo on top, text centred below it).
 */
:root {
  --bg: #0a0b0d;
  --fg: #ece7df;
  --muted: rgba(236,231,223,0.62);
  /* The original mockup's footer tone was .34, which measures about 3:1 on
     --bg and fails AA for 10px text. .52 clears 4.5:1. */
  --dim: rgba(236,231,223,0.52);
  --line: rgba(200,155,108,0.40);
  --bronze: #c89b6c;
  --bronze-deep: #8a5f2e;
  --bronze-hi: #ecd5b3;
  --bronze-hover: #d8ad80;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(200,155,108,0.35); }
/* Make the hidden attribute win over display rules such as .btns { display: flex }. */
[hidden] { display: none !important; }

@keyframes bronzeShine {
  0%   { background-position: -200% 50%; }
  100% { background-position:  200% 50%; }
}
.bronze-text {
  background-image: linear-gradient(100deg,
    var(--bronze-deep) 0%, var(--bronze) 22%, var(--bronze-hi) 38%,
    var(--bronze) 54%, var(--bronze-deep) 70%, var(--bronze-hi) 86%, var(--bronze-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: bronzeShine 9s linear infinite;
}

/* Page frame: wordmark on top, content in the middle, footer at the bottom. */
.page {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* Photo: greyscale source, toned slightly warm here, with a very slow zoom.
   The box is a square a little taller than the page so the zoom never shows
   an edge; the shade fades it into --bg under the text column.
   The box is sized from the page height but the shade is laid out across the
   page width, so on wide screens the photo ends where the shade is still
   light. The mask fades the photo's own right edge to transparent, so the
   fade moves with the image at every width and the edge is always --bg. */
.photo-bg {
  position: absolute; left: -40px; top: -10px;
  height: calc(100% + 80px); aspect-ratio: 1 / 1;
  pointer-events: none;
  /* The mask sits on the photo's own box rather than on the <img>: on the
     zooming <img> Chrome drew the last pixel column unmasked, a 1px line. */
  --fade: linear-gradient(90deg, #000 65%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.5) 83%, rgba(0,0,0,.18) 92%, transparent 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.photo-bg img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: sepia(.35) saturate(.9) brightness(.82) contrast(1.06);
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,11,13,0) 18%, rgba(10,11,13,.55) 44%, rgba(10,11,13,.92) 58%, var(--bg) 70%),
    linear-gradient(0deg, rgba(10,11,13,.7) 0%, rgba(10,11,13,0) 30%);
}

/* Wordmark sits in the top-right corner, at the page margin. */
.top { position: relative; display: flex; justify-content: flex-end; padding: 40px 56px 0; }
.wm { display: block; width: 120px; height: 19px; color: var(--fg); }

.main {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}
.photo .main { align-items: flex-start; text-align: left; padding: 0 64px 0 50%; }

h1 {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: clamp(46px, 6.6vw, 84px);
  line-height: 1.02; letter-spacing: -0.025em;
}
.photo h1 { font-size: clamp(46px, 6.1vw, 78px); }
h1 em { font-style: italic; font-weight: 600; padding-right: .06em; }
h1 br.m { display: none; }

.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 56px; }
.photo .btns { margin-top: 48px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 54px; min-width: 188px; padding: 0 28px; border-radius: 999px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; transition: all .2s;
}
.photo .btn { min-width: 176px; }
.btn-p { background: var(--bronze); color: var(--bg); }
.btn-p:hover { background: var(--bronze-hover); }
.btn-g {
  color: var(--fg); border: 1px solid var(--line);
  background: rgba(10,11,13,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-g:hover { border-color: var(--bronze); }
.btn:focus-visible, .help a:focus-visible, .foot a:focus-visible, .top a:focus-visible {
  outline: 2px solid var(--bronze-hi); outline-offset: 3px;
}
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.help { margin-top: 28px; font-size: 12px; color: var(--muted); }
.keys-lead { margin-top: 28px; max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--muted); }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin-top: 28px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; }
.keys dt { color: var(--dim); }
.keys dd { margin: 0; color: var(--fg); }
.keys .fp { overflow-wrap: anywhere; }
.photo .help { margin-top: 24px; }
.help a { position: relative; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
/* 44px tall hit area on the email link without moving the text or its underline. */
.help a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.help a:hover { border-color: var(--bronze); }

.foot {
  position: relative;
  display: flex; justify-content: center; align-items: center; gap: 28px;
  padding: 0 24px 16px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.photo .foot { justify-content: flex-end; padding: 0 56px 16px; }
/* 44px tall hit area on the footer links without moving the visible text. */
.foot a { color: var(--dim); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: var(--fg); }

/* Phone: the photo sits on top and fades down into centred text. The phone
   image is a 3:4 crop of the frame, placed where the full square frame would
   put it (a 620px square at left -150px on a 390px screen). */
@media (max-width: 767px) {
  /* Between phone and tablet widths all three edges of the 3:4 crop can be
     on screen, so the mask fades the left, right and bottom edges. */
  .photo-bg {
    left: calc(50% - 221px); top: -10px; width: 446px; height: 595px; aspect-ratio: auto;
    --fade:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 9%, #000 22%, #000 68%, rgba(0,0,0,.82) 76%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 93%, transparent 100%),
      linear-gradient(180deg, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  /* First layer: a soft dark patch behind the top-right wordmark so it
     keeps 4.5:1 against the lightest part of the photo behind it. */
  .shade {
    background:
      radial-gradient(150px 64px at calc(100% - 76px) 36px, rgba(10,11,13,.82) 0%, rgba(10,11,13,.55) 45%, rgba(10,11,13,0) 100%),
      linear-gradient(180deg, rgba(10,11,13,.35) 0%, rgba(10,11,13,0) 18%, rgba(10,11,13,0) 36%, rgba(10,11,13,.88) 55%, var(--bg) 68%);
  }
  .top { padding: 28px 24px 0; }
  .wm { width: 104px; height: 17px; }
  .photo .main { justify-content: flex-end; align-items: center; text-align: center; padding: 0 24px 28px; }
  h1, .photo h1 { font-size: 46px; }
  h1 br.m { display: inline; }
  .btns, .photo .btns { flex-direction: column; flex-wrap: nowrap; width: 100%; max-width: 300px; margin-top: 32px; }
  .foot, .photo .foot { justify-content: center; gap: 20px; padding: 0 24px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bronze-text { animation: none; background-position: 50% 50%; }
  .photo-bg img { animation: none; }
}