/* ==========================================================================
   vupil.com — parking page. Black. One giant iris. Look closer.
   ========================================================================== */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/intertight.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plexmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --black: #000;
  --fg: #EEF3FA;
  --soft: rgba(214, 228, 246, .62);
  --blue: #4C8FE0;
  --blue-hi: #9CC7F0;
  --ochre: #D2A24C;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --edge: max(18px, 3vw);
  --edge-top: var(--edge);
  --edge-right: var(--edge);
  --edge-bottom: var(--edge);
  --edge-left: var(--edge);
  --edge-top: max(var(--edge), env(safe-area-inset-top, 0px));
  --edge-right: max(var(--edge), env(safe-area-inset-right, 0px));
  --edge-bottom: max(var(--edge), env(safe-area-inset-bottom, 0px));
  --edge-left: max(var(--edge), env(safe-area-inset-left, 0px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--black);
  color: var(--fg);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue); color: #000; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 4px; border-radius: 999px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- parking page ---------- */
.park { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation; overscroll-behavior: none; }
.iris { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.pupil-content {
  position: fixed; left: 50%; top: 50%; z-index: 2;
  width: min(340px, 74vw);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px));
  will-change: transform;
}
.js .pupil-content > * { opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js.ready .pupil-content > * { opacity: 1; transform: none; }
.js.ready .pupil-content > *:nth-child(2) { transition-delay: .12s; }
.js.ready .pupil-content > *:nth-child(3) { transition-delay: .24s; }
.js.ready .pupil-content > *:nth-child(4) { transition-delay: .36s; }
.js.ready .pupil-content > *:nth-child(5) { transition-delay: .48s; }

.kicker {
  margin: 0;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-hi);
}
.title { margin: 2px 0 0; line-height: 0; }
.wm { width: min(210px, 52vw); height: auto; display: block; }
.wm-strokes { fill: none; stroke: var(--fg); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.wm-iris { fill: var(--blue); }
.wm-pupil { fill: #000; }
.claim {
  margin: 0;
  font: italic 300 clamp(20px, 2.4vw, 26px)/1.2 var(--serif);
  font-variation-settings: "opsz" 72;
  color: var(--fg);
}
.claim em { color: var(--ochre); font-style: italic; }

.offer {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  background: var(--fg); color: #000; text-decoration: none;
  font: 500 14px/1 var(--sans); letter-spacing: .01em;
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.offer::after {
  content: "";
  width: 0.45em; height: 0.45em; flex: none;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: translateY(-0.05em) rotate(45deg);
  transition: transform .35s var(--ease);
}
.offer:hover { background: var(--blue); color: #000; transform: translateY(-1px); box-shadow: 0 0 40px rgba(76, 143, 224, .45); }
.offer:hover::after { transform: translate(3px, -0.05em) rotate(45deg); }

.mail {
  border: 0; background: none; padding: 4px 6px; cursor: copy;
  font: 400 12px/1.3 var(--mono); letter-spacing: .06em; color: var(--soft);
  transition: color .25s;
}
.mail:hover { color: var(--fg); }

.corner {
  position: fixed; z-index: 3; margin: 0;
  font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .85);
}
.corner-tl { top: var(--edge-top); left: var(--edge-left); color: var(--fg); display: flex; align-items: center; gap: 10px; }
.corner-tr { top: var(--edge-top); right: var(--edge-right); font: italic 300 16px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.corner-bl { bottom: var(--edge-bottom); left: var(--edge-left); right: var(--edge-right); }
a.corner { text-decoration: none; }
a.corner:hover { color: var(--fg); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(76,143,224,.25); }

@media (min-width: 1100px) and (min-height: 700px) {
  .pupil-content { width: 400px; gap: 16px; }
  .wm { width: 250px; }
  .kicker { font-size: 11.5px; }
  .claim { font-size: 30px; }
  .offer { font-size: 15px; padding: 15px 30px; }
}
@media (max-width: 560px) {
  .corner-tr { display: none; }
  .corner-bl { font-size: 10px; }
}
@media (max-height: 520px) {
  .kicker, .mail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pupil-content > *,
  .js.ready .pupil-content > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .offer, .offer::after, .mail { transition: none; }
}

/* ---------- 404 ---------- */
.page-body { min-height: 100%; background: radial-gradient(120% 80% at 50% 0%, #0a1a33 0%, #000 60%); }
.page { max-width: 760px; margin: 0 auto; padding: 120px 22px 100px; }
.page .kicker { margin-bottom: 18px; }
.page h1 { font: 300 clamp(40px, 7vw, 76px)/1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.025em; margin: 0 0 40px; }
.page h1 em { color: var(--blue); }
.page p { color: var(--soft); margin: 0 0 14px; }
.page-404 { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 0; padding-bottom: 0; }
.page-404 .offer { margin-top: 18px; }