:root {
  --bg: #ffffff;
  --ink: #000000;
  --ring: #000000;
}

@font-face {
  font-family: 'AlbertusNova';
  src: url('../fonts/AlbertusNova.woff2') format('woff2'),
       url('../fonts/AlbertusNova.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'AlbertusNova', ui-serif, Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Background animation container — full screen */
.bg-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
.bg-anim.is-visible { opacity: 1; }

.bg-anim svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Brand title — circular text rotating around the enter button */
.brand-title {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Slightly larger than the enter button so the text orbits just outside it */
  width: clamp(200px, 30vmin, 320px);
  height: clamp(200px, 30vmin, 320px);
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 5;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.brand-title__svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: rhv-spin 18s linear infinite;
  transform-origin: 50% 50%;
}
.brand-title__text {
  fill: #000;
  font-family: 'AlbertusNova', ui-serif, Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 18px;
  text-transform: uppercase;
}
@keyframes rhv-spin {
  to { transform: rotate(360deg); }
}
.brand-title.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Enter button (initial circle) */
.enter-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: clamp(120px, 18vmin, 200px);
  height: clamp(120px, 18vmin, 200px);
  border-radius: 50%;
  background: #000;
  color: #fff;
  border: 2px solid var(--ring);
  cursor: pointer;
  z-index: 5;
  font-family: 'AlbertusNova', ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.6vmin, 20px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), opacity 400ms ease;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* Continuous breathing pulse so the button never feels static */
.enter-btn::before {
  content: none;
}
.enter-btn__label {
  position: relative;
  display: inline-block;
}
@keyframes rhv-ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.35); opacity: 0;    }
  100% { transform: scale(1.35); opacity: 0;    }
}
@keyframes rhv-breathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.06); }
}

.enter-btn:hover { transform: translate(-50%, -50%) scale(1.05); }
.enter-btn:active { transform: translate(-50%, -50%) scale(0.97); }

/* Loading state: faster, more urgent pulse while intro JSON is loading */
.enter-btn.is-loading {
  cursor: wait;
}
.enter-btn.is-loading::before {
  content: none;
}
@keyframes rhv-loading {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  50%      { transform: translate(-50%, -50%) scale(1.08); }
}

.enter-btn.is-hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
  animation: none;
}
.enter-btn.is-hidden::before { animation: none; opacity: 0; }

/* Form circle that zooms in after intro */
.form-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.form-wrap.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.lead-form {
  position: relative;
  width: min(86vmin, 560px);
  height: min(86vmin, 560px);
  display: block;
  transform: scale(0.05);
  opacity: 0;
  transition:
    transform 700ms cubic-bezier(.2,.8,.2,1),
    opacity 500ms ease;
}
.form-wrap.is-visible .lead-form {
  transform: scale(1);
  opacity: 1;
}
.form-wrap.is-hiding .lead-form {
  transform: scale(0.05);
  opacity: 0;
}
.form-wrap.is-hiding { opacity: 0; }

.form-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  padding: clamp(28px, 7vmin, 64px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  position: relative;
}

.lead-form__inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vmin, 20px);
  position: relative;
}

.field { display: flex; flex-direction: column; gap: 8px; align-items: center; position: relative; }
.field__label {
  font-size: clamp(16px, 2.2vmin, 22px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.field__input {
  width: 100%;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 999px;
  padding: clamp(10px, 1.6vmin, 14px) 18px;
  font: inherit;
  font-size: clamp(15px, 1.9vmin, 18px);
  outline: none;
  text-align: center;
}
.field__input:focus { box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }

/* Checkbox group */
.checks {
  border: 0;
  margin: clamp(6px, 1.2vmin, 12px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vmin, 10px);
  align-self: center;
  position: relative;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.check input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.check__dot {
  width: clamp(16px, 2.2vmin, 22px);
  height: clamp(16px, 2.2vmin, 22px);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  display: inline-block;
  flex: 0 0 auto;
  transition: background 150ms ease;
}
.check input:checked + .check__dot { background: #fff; box-shadow: inset 0 0 0 3px #000; }
.check input:focus-visible + .check__dot { box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }
.check__label {
  font-size: clamp(15px, 2vmin, 19px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Separate submit button (own circle) */
.submit-btn {
  position: absolute;
  left: 50%;
  top: 100%;
  /* Push button fully below the form circle with a clear gap */
  transform: translate(-50%, clamp(16px, 3vmin, 32px));
  width: clamp(90px, 14vmin, 140px);
  height: clamp(90px, 14vmin, 140px);
  border-radius: 50%;
  background: #000;
  color: #fff;
  border: 4px solid #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(13px, 1.6vmin, 17px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  transition: transform 150ms ease;
}
.submit-btn:hover  { transform: translate(-50%, clamp(16px, 3vmin, 32px)) scale(1.05); }
.submit-btn:active { transform: translate(-50%, clamp(16px, 3vmin, 32px)) scale(0.97); }
.submit-btn:disabled { opacity: 0.6; cursor: wait; }

/* Honeypot — visually hidden but not via display:none (so bots find it) */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Field-level error messages — absolutely positioned so they don't push
   layout when they appear/disappear. */
.field__error {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #ff8a8a;
  text-align: center;
  pointer-events: none;
}
.field.has-error .field__input { box-shadow: 0 0 0 2px #ff8a8a; }
.checks.has-error .check__dot  { border-color: #ff8a8a; }

/* Form-level status — sits in the empty space below the inner content,
   inside the lower padding of the circle. Has its own pill background so
   it never visually clashes with fields or the submit button. */
.form-status {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, clamp(8px, 1.5vmin, 16px));
  width: max-content;
  max-width: 80%;
  text-align: center;
  font-size: clamp(11px, 1.3vmin, 13px);
  letter-spacing: 0.06em;
  pointer-events: none;
  background: rgba(0,0,0,0.7);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.form-status.is-error   { color: #ff8a8a; }
.form-status.is-success { color: #a8f0a8; }

/* Thank-you panel */
.thank-you {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease 200ms;
  color: #fff;
  text-align: center;
  padding: 24px;
}
.thank-you.is-visible { opacity: 1; }
.thank-you p {
  background: #000;
  padding: 22px 28px;
  border-radius: 999px;
  font-size: clamp(14px, 1.8vmin, 18px);
  letter-spacing: 0.06em;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

@media (prefers-reduced-motion: reduce) {
  .enter-btn, .form-circle, .bg-anim { transition: none; }
}


@media (max-width: 767px) {
  .field {
    width: 80%;
    margin: 0 auto;
  }

  /* Bigger circle so all fields + checkboxes fit comfortably */
  .lead-form {
    width: min(94vw, 94vmin);
    height: min(94vw, 94vmin);
  }
  .form-circle {
    padding: clamp(36px, 9vw, 56px) clamp(28px, 8vw, 44px);
  }

  /* Tighter spacing inside the circle on mobile */
  .lead-form__inner {
    gap: 8px;
    max-width: 100%;
  }

  .field__label {
    font-size: 14px;
    letter-spacing: 0.16em;
  }
  .field__input {
    padding: 10px 14px;
    font-size: 15px;
  }

  .checks {
    gap: 6px;
    margin-top: 4px;
    width: 100%;
    align-self: stretch;
    align-items: flex-start;
    padding-left: clamp(8px, 4vw, 24px);
    max-width: 200px;
    margin-inline: auto;
  }
  .check { gap: 8px; }
  .check__dot {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
  }
  .check__label {
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
  }
}

/* Very small phones — shrink type a bit more */
@media (max-width: 360px) {
  .form-circle { padding: 32px 22px; }
  .field__label { font-size: 12px; }
  .check__label { font-size: 10px; }
}

/* 1920×1080 specific: at this exact viewport the checkboxes were touching
   the bottom edge of the circle. Pull content up slightly without resizing
   the circle. Scoped tightly so other screens are unaffected. */
@media (min-width: 1900px) and (max-width: 1940px) and (min-height: 1000px) and (max-height: 1100px) {
  .form-circle {
    align-items: start;
    padding-top: clamp(70px, 9vmin, 110px);
  }
  .lead-form__inner {
    margin-top: 10px;
  }
  .checks {
    margin-top: 0;
  }
}