/* ==========================================================================
   Strypse — site foundation
   1. Tokens   2. Base   3. Backdrop   4. Glass   5. Controls
   6. Top bar  7. Hello  8. Beta form  9. Footer     10. Small screens
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Brand */
  --pink: #FE6080;
  --pink-soft: #ff9fb3;
  --ink: #0d1b2a;
  --white: #ffffff;

  /* Backdrop palette (read by script.js) */
  --sky-deep: #1f5d97;
  --sky: #3f8fcc;
  --sky-pale: #b9d7ec;
  --coral: #ff8a6b;

  /* Text on the backdrop */
  --text: rgba(255, 255, 255, 0.96);
  --text-2: rgba(255, 255, 255, 0.72);
  --text-3: rgba(255, 255, 255, 0.5);
  --hairline: rgba(255, 255, 255, 0.28);

  /* Glass */
  --glass-fill: rgba(255, 255, 255, 0.14);
  --glass-fill-clear: rgba(255, 255, 255, 0.10);
  --glass-fill-inset: rgba(255, 255, 255, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.26);
  --glass-rim: rgba(255, 255, 255, 0.45);
  --glass-blur: 26px;

  /* Type */
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Oswald", "Outfit", sans-serif; /* the wordmark's typeface (drawn in its Bold) */
  --fs-display: clamp(52px, 7.6vw, 116px);
  --fs-lede: clamp(15px, 1.15vw, 17px);
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-micro: 11px;

  /* Space, shape, motion */
  --gutter: clamp(20px, 3.6vw, 48px);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Reeded glass: width of one reed in CSS px (shared with script.js) */
  --reed: 22px;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* The colour is on html, not body: a body background would paint over the backdrop (z-index -1). */
html { -webkit-text-size-adjust: 100%; background: var(--sky-deep); }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* top bar, the page, footer */
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* 3. Backdrop -------------------------------------------------------------- */
.backdrop {
  /* Taller than the window and centred on it, so it also fills the strips under the status bar and
     Safari's toolbar, and the overscroll at either end, and so its size doesn't change (and the
     canvas isn't redrawn from scratch) when the toolbar shows or hides while scrolling. */
  position: fixed;
  left: 0;
  right: 0;
  top: -25vh;
  height: 150vh;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 52% 52%, var(--coral) 0%, transparent 60%),
    linear-gradient(120deg, var(--sky-deep), var(--sky) 55%, var(--sky-pale));
}
.backdrop-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Light down the left of each reed, shade down the right */
.backdrop-reeds {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.16) 0,
    rgba(255, 255, 255, 0.05) calc(var(--reed) * 0.18),
    rgba(255, 255, 255, 0) calc(var(--reed) * 0.5),
    rgba(0, 20, 50, 0.07) calc(var(--reed) * 0.86),
    rgba(0, 20, 50, 0.14) var(--reed));
  mix-blend-mode: soft-light;
}
/* Keep text legible: a soft darkening at the bottom and top */
.backdrop-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 30, 60, 0.18), transparent 22%),
    linear-gradient(0deg, rgba(10, 30, 60, 0.32), transparent 45%);
}

/* 4. Glass ----------------------------------------------------------------- */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 18px 50px -20px rgba(8, 25, 55, 0.45);
}
.glass-clear {
  background: var(--glass-fill-clear);
  --glass-blur: 16px;
}
.glass-inset {
  background: var(--glass-fill-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 5. Controls -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.4s var(--ease), background-color 0.3s, opacity 0.3s;
}
.btn-solid { background: var(--white); color: var(--ink); }
.btn-solid:hover { transform: translateY(-1px); background: #f3f6fa; }
.btn-link { padding: 0 6px; color: var(--text); }
.btn-link:hover { opacity: 0.75; }
.arrow { font-size: 0.9em; transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translate(2px, -2px); }
.btn-block { width: 100%; justify-content: center; height: 52px; }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* 6. Top bar --------------------------------------------------------------- */
.topbar { padding: var(--gutter) var(--gutter) 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { filter: brightness(0) invert(1); }
.brand-mark { height: 20px; width: auto; }
.brand-word { height: 21px; width: auto; }
.brand-beta {
  /* The wordmark's typeface (Oswald), in Light beside its Bold */
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 20.8px; /* caps as tall as the wordmark's */
  line-height: 1;
  letter-spacing: 0.03em;
  position: relative;
  top: -0.5px;
  text-transform: uppercase;
  color: var(--white);
}

/* 7. Hello ------------------------------------------------------------------ */
.hello {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  align-items: end;
  gap: var(--gutter);
  padding: 48px var(--gutter) clamp(48px, 7vw, 88px);
}
.display {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.lede {
  max-width: 520px;
  margin-top: 28px;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 300;
  color: var(--text-2);
}
.lede time { color: var(--text); font-weight: 400; }
.beta-date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  font-size: var(--fs-small);
  font-weight: 500;
}
.beta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(254, 96, 128, 0.25), 0 0 12px var(--pink);
  animation: beta-pulse 2.4s ease-in-out infinite;
}
@keyframes beta-pulse { 50% { box-shadow: 0 0 0 7px rgba(254, 96, 128, 0.08), 0 0 12px var(--pink); } }

/* 8. Beta form --------------------------------------------------------------- */
.apply {
  padding: 28px 26px 26px;
  border-radius: var(--radius-xl);
  background: rgba(150, 195, 225, 0.2);
}
.apply-form { display: grid; gap: 18px; }
.apply-head h2, .apply-done h2 { font-size: 24px; font-weight: 400; letter-spacing: -0.02em; }
.apply-head p, .apply-done p { margin-top: 6px; font-size: var(--fs-small); font-weight: 300; color: var(--text-2); }

.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { padding: 0; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); }
.field legend { margin-bottom: 8px; }
.field input[type="text"], .field input[type="email"] {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  font-size: 16px; /* 16px or more: iOS doesn't zoom in on focus */
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.field input:focus {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}
.field input[aria-invalid="true"] { border-color: var(--pink-soft); box-shadow: 0 0 0 4px rgba(254, 96, 128, 0.18); }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-2);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.choice:hover span { color: var(--text); }
.choice input:checked + span { background: var(--white); border-color: var(--white); color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 3px; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot { display: flex; justify-content: center; }
.turnstile-slot:empty { display: none; }

.form-error {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(254, 96, 128, 0.18);
  font-size: var(--fs-small);
  color: var(--text);
}

.apply-done { display: grid; justify-items: start; gap: 4px; padding: 10px 0 6px; outline: none; }
.done-mark {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.4l3.3 3.3L17 8.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat,
    var(--pink);
  box-shadow: 0 0 24px rgba(254, 96, 128, 0.6);
}

/* 9. Footer ------------------------------------------------------------------ */
.footer { padding: 0 var(--gutter) var(--gutter); }
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  color: var(--text-2);
}
.brand-small .brand-mark { height: 16px; }
.brand-small .brand-word { height: 17px; }
.footer-copy { color: var(--text-3); }

/* 10. Small screens -------------------------------------------------------- */
@media (max-width: 900px) {
  .hello { grid-template-columns: 1fr; align-items: start; padding-top: 14vh; gap: 48px; }
  .footer-inner { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}