/* ============================================================
   LOSTVIEWS — "Candy Chrome"
   Pastel light world. Views drift past like confetti;
   the ones we catch flare iridescent.
   ============================================================ */

:root {
  /* --- base: barely-pink white --- */
  --cream:      #FFF8FC;
  --white:      #FFFFFF;
  --blush:      #FFEFF7;
  --sky:        #EDF6FF;
  --lilac-pale: #F5F0FF;
  --shell:      #FDF4FA;

  /* --- ink ---
     Cool navy, not plum. A purple ink fights the pink accents; a blue-grey
     one sits between the pink and the baby blue instead of competing.
     Every step clears AA on the cream ground. --------------------------- */
  --ink:        #1E2A47;
  --ink-2:      #44506B;
  --muted:      #55617D;
  --muted-dim:  #5E6B87;

  --line:       rgba(30, 42, 71, 0.13);
  --line-soft:  rgba(30, 42, 71, 0.07);

  /* --- candy --- */
  /* Bright pastels are for fills and borders. The -deep pairs are the
     text-safe versions (AA on the cream background) — never swap them. */
  --pink:       #FF7FB6;
  --pink-deep:  #C92E72;
  --blue:       #6FB6FF;
  --blue-deep:  #1668C0;
  --lilac:      #B49CFF;
  --lilac-deep: #6A4AD4;
  --mint:       #4FD3B4;
  --mint-deep:  #0B7A63;
  --butter:     #FFE08A;

  /* remapped per view: agency runs pink, marketplace runs blue */
  --accent:      var(--pink);
  --accent-deep: var(--pink-deep);
  --accent-2:    var(--lilac);
  --accent-ink:  #FFFFFF;
  --tint:        var(--blush);

  --display: "Inter", "Inter Tight", system-ui, sans-serif;
  --body:    "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --r: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* pastel-tinted shadows — never gray */
  --lift:  0 10px 30px -18px rgba(226, 63, 134, 0.35);
  --lift-2: 0 24px 60px -34px rgba(122, 92, 224, 0.4);

  /* pastel holo — for fills and borders, where it sits on colour */
  /* heart glyph, used as a mask by the likes visual */
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C12 21 3 14.6 3 8.9A4.9 4.9 0 0 1 12 6a4.9 4.9 0 0 1 9 2.9C21 14.6 12 21 12 21Z' fill='%23000'/%3E%3C/svg%3E");

  --holo: linear-gradient(100deg,
    #FF9ECB 0%, #FFC2E4 14%, #C9B6FF 30%,
    #9ED8FF 46%, #BFF3EA 60%, #FFE3B8 74%,
    #FFA9D2 88%, #C9B6FF 100%);

  /* Saturated holo for text. Runs pink → blue → teal and passes through
     violet quickly: a long violet section muddies against the pink. */
  --holo-text: linear-gradient(100deg,
    #E82B7E 0%, #D4419C 16%, #8E5FD8 32%,
    #2E7FD4 52%, #0E9CB0 72%, #E82B7E 100%);
}

body[data-view="marketplace"] {
  --accent:      var(--blue);
  --accent-deep: var(--blue-deep);
  --accent-2:    var(--mint);
  --accent-ink:  #08233F;
  --tint:        var(--sky);
}

* { box-sizing: border-box; }

/* Author `display` rules outrank the UA sheet, so any element given a
   `display` here would ignore the `hidden` attribute without this. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient pastel wash that follows the active view */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw auto;
  height: 95vh;
  background:
    radial-gradient(52% 58% at 18% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 66%),
    radial-gradient(46% 54% at 84% 8%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 68%),
    radial-gradient(40% 40% at 52% 22%, color-mix(in srgb, var(--butter) 20%, transparent), transparent 70%);
  filter: blur(30px);
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.8s var(--ease);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--accent-deep);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
}
.skip:focus { left: 12px; }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.99;
  margin: 0;
  font-variation-settings: "opsz" 40;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--holo);
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
}

.mono { font-family: var(--mono); }

/* ---------- header ---------- */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  backdrop-filter: blur(20px) saturate(1.6);
  background: color-mix(in srgb, var(--white) 72%, transparent);
  border-bottom: 1px solid var(--line-soft);
}

.masthead-inner {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--ink);
}

.wordmark span { color: var(--muted-dim); font-weight: 500; }

.pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--holo);
  background-size: 300% 100%;
  animation: pulse 2.4s infinite, holoshift 6s linear infinite;
  flex: none;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes holoshift {
  to { background-position: 300% 0; }
}

/* the two header buttons */
.switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 70%, transparent);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), var(--lift);
}

.switch-btn {
  border: 0;
  background: transparent;
  padding: 9px 20px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s var(--ease), background 0.45s var(--ease), box-shadow 0.45s var(--ease);
  white-space: nowrap;
}

/* Both pills are solid colour blocks — pink for the agency, blue for the
   marketplace, matching the two doors at the foot of the lander. The fills
   are deliberately deep: white text needs 4.5:1, and a brighter pink or
   blue only reaches about 2.6:1, which is unreadable at this size.
   The selected pill is marked by an inner ring and a lift, not by colour,
   so contrast holds in both states. */
.switch-btn {
  color: #fff;
  font-weight: 600;
}

.switch-btn[data-view="agency"] {
  background: linear-gradient(135deg, #D4326F, #BE2968);
}

.switch-btn[data-view="marketplace"] {
  background: linear-gradient(135deg, #1F74D2, #125BAB);
}

.switch-btn:hover { color: #fff; transform: translateY(-1px); }

.switch-btn[data-view="agency"][aria-current="true"] {
  box-shadow: 0 7px 18px -6px rgba(190, 41, 104, 0.85),
              inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.switch-btn[data-view="marketplace"][aria-current="true"] {
  box-shadow: 0 7px 18px -6px rgba(18, 91, 171, 0.85),
              inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 130px 80px;
  overflow: hidden;
}

#viewfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero .wrap { z-index: 2; }

.hero-title {
  font-size: clamp(38px, 6.1vw, 88px);
  margin-block: 22px 0;
  line-height: 0.99;
}

.hero-title .lost {
  color: var(--muted-dim);
}

/* the caught word goes iridescent */
.hero-title .caught {
  position: relative;
  display: inline-block;
  background: var(--holo-text);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holoshift 7s linear infinite;
}

.hero-title .caught::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 5px;
  border-radius: 5px;
  background: var(--holo-text);
  background-size: 240% 100%;
  transform-origin: left;
  animation: capture 1.2s 0.8s var(--ease) both, holoshift 7s linear infinite;
}

@keyframes capture {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-sub {
  margin-top: 26px;
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--ink-2);
  max-width: 56ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--white) 75%, transparent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--lift);
}

.btn-solid {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 78%, white),
    var(--accent));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 90%, transparent);
}

body[data-view="marketplace"] .btn-solid { color: #06305C; }

.btn-solid:hover {
  box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--accent) 95%, transparent);
}

/* gloss sweep across primary buttons */
.btn-solid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 55%;
  left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}

.btn-solid:hover::after { left: 125%; }

.btn .arw { transition: transform 0.3s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* live readout strip under the hero */
.readout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.readout b { color: var(--ink); font-weight: 500; }

/* ============================================================
   Shared form + modal primitives
   Used by the lander's apply form and by the admin panel, so they
   live here — style.css is the only sheet both pages load.
   ============================================================ */

.field { display: grid; gap: 7px; }

.field label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 16px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15.5px;
  width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--muted-dim); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}

.field textarea { resize: vertical; min-height: 66px; }

.field-hint { font-size: 12px; color: var(--muted-dim); font-family: var(--mono); }

/* username field with a fixed @ prefix */
.input-prefix {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding-left: 15px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.input-prefix span {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--muted-dim);
  flex: none;
}

.input-prefix input {
  border: 0;
  background: transparent;
  padding-left: 4px;
  border-radius: 0 14px 14px 0;
}

.input-prefix input:focus { box-shadow: none; }

.input-prefix:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}

.solid-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 74%, white), var(--accent));
  color: var(--accent-ink);
  border: 0;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 95%, transparent);
  transition: box-shadow 0.25s, transform 0.25s;
}

body[data-view="marketplace"] .solid-btn,
body.admin .solid-btn { color: #06305C; }

.solid-btn:hover {
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--accent) 100%, transparent);
  transform: translateY(-1px);
}

.solid-btn[disabled] { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; }

.solid-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 55%;
  left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}

.solid-btn:hover::after { left: 125%; }

.form-error {
  color: var(--pink-deep);
  font-size: 13.5px;
  font-family: var(--mono);
  min-height: 18px;
  margin: 0;
}

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.25s var(--ease) both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  position: relative;
  width: min(470px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  background: linear-gradient(170deg, #fff, var(--shell));
  padding: 32px;
  box-shadow: var(--lift-2);
  animation: modalIn 0.35s var(--ease) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}

.modal-close:hover { color: var(--ink); border-color: var(--muted-dim); }

/* ---------- sections ---------- */

.section { padding-block: clamp(72px, 10vw, 130px); position: relative; z-index: 1; }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }

.section-head {
  display: grid;
  gap: 20px;
  max-width: 900px;
  margin-bottom: clamp(40px, 5vw, 66px);
}

.section-title { font-size: clamp(32px, 5vw, 60px); }

/* ---------- view routing ---------- */

.view { display: none; }
.view.is-active { display: block; animation: viewIn 0.5s var(--ease) both; }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 48px 60px;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blush) 70%, transparent));
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { transition: color 0.25s; }
.footer-links a:hover { color: var(--accent-deep); }

/* ---------- mobile form sizing ---------- */

@media (max-width: 760px) {
  /* Safari on iOS zooms the whole page when a focused field is under 16px,
     so every input crosses that line on a phone regardless of its design size. */
  .field input,
  .field select,
  .field textarea,
  .input-prefix input,
  .inv-search {
    font-size: 16px;
    padding-block: 14px;
    border-radius: 16px;
  }

  .input-prefix { border-radius: 16px; }
  .input-prefix span { font-size: 16px; }

  .solid-btn { width: 100%; min-height: 52px; }
  .modal-card { padding: 26px 20px; border-radius: 24px; }
  .modal-close { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}