/* ==========================================================================
   Early access (/early-access) — the site gate. Bare page (no chrome): near-black, violet accents, one centred
   column like the reference (tiltcollection.com): logo → pill → headline → email → divider → code → footer.
   Breakpoints 1200 / 810 (component system). Background slot: .ea-scene (video when site.gate.scene is set).
   ========================================================================== */
.page-gate {
  --ea-bg: #121212;
  --ea-text: #fff;
  --ea-muted: rgba(255, 255, 255, .64);   /* 8.3:1 on #121212 */
  --ea-quiet: rgba(255, 255, 255, .5);    /* 5.3:1 — placeholders, footer */
  --ea-line: rgba(255, 255, 255, .14);
  --ea-field: rgba(255, 255, 255, .4);    /* resting edge of an input: ≥3:1 on the dark gate (WCAG 1.4.11) */
  --ea-surface: rgba(255, 255, 255, .045);
  --ea-violet-hi: #8f6bff;                /* violet text/links on dark: 5.0:1 on #121212 */
  --ea-error: #ff8a97;                    /* 7.6:1 on #121212 */
  background: var(--ea-bg);
  color: var(--ea-text);
  color-scheme: dark;
}
.page-gate .main { padding-top: 0; }
.page-gate ::selection { background: var(--accent); color: #fff; }

.ea { position: relative; min-height: 100vh; min-height: 100svh; isolation: isolate; overflow: hidden; }
.ea__inner {
  position: relative; z-index: 1; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: 56px var(--gutter) 0;
}

/* ---------- Background slot ------------------------------------------------ */
.ea-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ea-scene__glow {
  position: absolute; inset: -20%;
  background:
    radial-gradient(42% 38% at 50% 92%, rgba(77, 29, 250, .42), rgba(77, 29, 250, 0) 70%),
    radial-gradient(30% 26% at 82% 14%, rgba(77, 29, 250, .16), rgba(77, 29, 250, 0) 72%),
    radial-gradient(26% 24% at 14% 30%, rgba(143, 107, 255, .08), rgba(143, 107, 255, 0) 70%);
  animation: ea-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ea-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -3%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.02); }
}
/* Brand-book motif: the mark, oversized and faint, with its construction guides running off the page. */
.ea-scene__mark {
  position: absolute; left: 50%; top: 50%; width: auto; height: max(118vh, 760px); aspect-ratio: 46.4 / 43;
  transform: translate(-50%, -50%); overflow: visible;
}
.ea-scene__strokes { stroke: rgba(77, 29, 250, .16); stroke-width: .5; }
.ea-scene__guides { stroke: rgba(255, 255, 255, .07); stroke-width: 1; stroke-dasharray: 3 7; }
.ea-scene__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* site.gate.scene = 'glass-light': the shared scene component (components.css .scene) fills the slot; its pause / play
   button sits fixed in the top-right corner, above the page (the scene itself is under it, pointer-events none). */
.ea-scene__media { position: absolute; inset: 0; }
.ea-scene__toggle { position: fixed; top: 20px; right: 20px; bottom: auto; z-index: 2; }
/* Legibility veil: darker in the middle column where the forms sit, so any loop behind stays decorative. */
.ea-scene__veil {
  position: absolute; inset: 0;
  background: radial-gradient(48% 62% at 50% 46%, rgba(18, 18, 18, .55), rgba(18, 18, 18, 0) 100%);
}
.ea-scene.has-video .ea-scene__veil { background: radial-gradient(52% 66% at 50% 46%, rgba(18, 18, 18, .78), rgba(18, 18, 18, .35) 100%); }

/* ---------- Column ---------------------------------------------------------- */
.ea__stack {
  margin: auto 0; width: 100%; max-width: 560px; padding: 24px 0 40px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ea__logo { zoom: 1.2; }
.ea__head { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 56px; }
.page-gate .ea .pill.ea-pill { background: rgba(255, 255, 255, .06); color: var(--ea-text); box-shadow: inset 0 0 0 1px var(--ea-line); }
.ea__title { margin: 0; max-width: 520px; color: var(--ea-text); }
.ea__sub { margin: 0; max-width: 460px; color: var(--ea-muted); text-wrap: pretty; }
.ea__forms { width: 100%; margin-top: 44px; display: flex; flex-direction: column; gap: 36px; }

/* ---------- Forms ----------------------------------------------------------- */
.ea-form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; text-align: left; }
.ea-field { display: flex; flex-direction: column; gap: 10px; }
.ea-interest { margin: 0 0 4px; align-self: center; display: inline-flex; align-items: center; gap: 10px; color: var(--ea-muted); }
.ea-interest::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* One pill holding icon + input + button (desktop/tablet). On phones the stacked variant splits into two pills. */
.ea-control {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 6px;
  border-radius: 100px; background: var(--ea-surface);
  box-shadow: inset 0 0 0 1px var(--ea-field);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: box-shadow .35s var(--ease-btn), background-color .35s var(--ease-btn);
}
@media (hover: hover) { .ea-control:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .56); } }
.ea-control:focus-within { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px rgba(77, 29, 250, .28); }
[data-field]:has([aria-invalid="true"]) .ea-control { box-shadow: inset 0 0 0 1px var(--ea-error); }
[data-field]:has([aria-invalid="true"]) .ea-control:focus-within { box-shadow: inset 0 0 0 1px var(--ea-error), 0 0 0 4px rgba(255, 138, 151, .18); }
.ea-control__wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding-left: 18px; }
.ea-control__icon { flex: none; color: var(--ea-quiet); transition: color .35s var(--ease-btn); }
.ea-control:focus-within .ea-control__icon { color: var(--ea-violet-hi); }

.ea-input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0; border: 0; background: transparent; color: var(--ea-text);
  font-family: var(--font-nohemi-400); font-size: 16px; line-height: 1.3; letter-spacing: 0;
  caret-color: var(--ea-violet-hi);
}
.ea-input:focus, .ea-input:focus-visible { outline: none; }
.ea-input::placeholder { color: var(--ea-quiet); opacity: 1; }
.ea-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px #1b1a22 inset; -webkit-text-fill-color: #fff; caret-color: #fff; }
.ea-input--code { letter-spacing: .18em; text-transform: uppercase; }
.ea-input--code::placeholder { letter-spacing: 0; text-transform: none; }

.ea-btn {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 48px; padding: 0 22px 0 26px; border: 0; border-radius: 100px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-nohemi-400); font-size: 16px; line-height: 1.3; letter-spacing: 0;
  transition: padding .4s var(--ease-btn), background-color .4s var(--ease-btn), color .4s var(--ease-btn), box-shadow .4s var(--ease-btn);
}
.ea-btn__icon { flex: none; transform: rotate(45deg); transition: transform .4s var(--ease-btn); }
.ea-btn--accent { background: var(--accent); color: #fff; box-shadow: 0 8px 24px -10px rgba(77, 29, 250, .9); }
.ea-btn--ghost { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px var(--ea-line); }
@media (hover: hover) {
  .ea-btn:hover { padding-inline: 30px 26px; }
  .ea-btn--accent:hover { background: #5d31ff; }
  .ea-btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #fff; }
}
.ea-btn:focus-visible { outline: 2px solid var(--ea-violet-hi); outline-offset: 3px; }
.ea-btn.is-loading, .ea-btn.is-success { cursor: default; padding-inline: 26px 22px; }
.ea-btn.is-loading .ea-btn__icon, .ea-btn.is-success .ea-btn__icon { display: none; }
.ea-btn.is-success { background: var(--accent); color: #fff; box-shadow: none; transition: none; }
.ea-btn .engine-spinner { flex: none; }

.ea-error {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding-left: 24px; color: var(--ea-error);
  font: 400 14px/1.35 var(--font-inter); font-variation-settings: "opsz" 14;
}
.ea-error::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 1.5px; border-radius: 50%;
  background: var(--ea-error) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.6v4.2' stroke='%23121212' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.2' r='.95' fill='%23121212'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.ea-note { margin: 0; padding-inline: 24px; color: var(--ea-quiet); text-align: center; text-wrap: balance; }
.ea-link { color: var(--ea-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); transition: color .3s var(--ease-btn), text-decoration-color .3s var(--ease-btn); }
@media (hover: hover) { .ea-link:hover { color: #fff; text-decoration-color: var(--accent); } }
.ea-link:focus-visible { outline: 2px solid var(--ea-violet-hi); outline-offset: 2px; border-radius: 2px; }

.ea-status {
  margin: 4px 0 0; padding: 14px 18px; border-radius: 16px; background: rgba(77, 29, 250, .14); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(77, 29, 250, .45);
  font: 400 14px/1.45 var(--font-inter); font-variation-settings: "opsz" 14; text-wrap: pretty;
}
.ea-status[data-tone="error"] { background: rgba(255, 138, 151, .08); box-shadow: inset 0 0 0 1px rgba(255, 138, 151, .4); color: var(--ea-error); }
.ea-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Success (real endpoint only). */
.ea-done {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px; border-radius: 24px; text-align: center;
  background: rgba(77, 29, 250, .12); box-shadow: inset 0 0 0 1px rgba(77, 29, 250, .5);
}
.ea-done:focus { outline: none; }
.ea-done__tick { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%; background: var(--accent); color: #fff; }
.ea-done__title { margin: 0; color: #fff; }
.ea-done__text { margin: 0; color: var(--ea-muted); overflow-wrap: anywhere; }

/* Divider: hairlines either side of the code label. */
.ea-divider { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.ea-divider::before, .ea-divider::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--ea-line)); }
.ea-divider::after { background: linear-gradient(90deg, var(--ea-line), rgba(255, 255, 255, 0)); }
.ea-divider__label { flex: none; color: var(--ea-muted); text-transform: uppercase; letter-spacing: .08em; cursor: default; }
.ea-already { margin: 0 0 4px; text-align: center; color: var(--ea-muted); }

.ea-form--code.is-wrong .ea-control { animation: ea-shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes ea-shake {
  15%, 85% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  45%, 55% { transform: translateX(-5px); }
}

/* ---------- Footer ---------------------------------------------------------- */
.ea__foot {
  width: 100%; max-width: 760px; padding: 24px 0 32px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--ea-quiet); text-align: center;
}
.ea__foot p { margin: 0; text-wrap: balance; }
.ea__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.ea__legal .ea-link { color: var(--ea-quiet); }
/* company trading disclosure (name, place of registration, number, registered office) — quiet, like the links */
.ea__company { color: var(--ea-quiet); max-width: 62ch; margin-inline: auto; }

/* ---------- Tablet / phone ------------------------------------------------- */
@media (max-width: 1199.98px) {
  .ea__inner { padding-top: 40px; }
}
@media (max-width: 809.98px) {
  .ea__inner { padding-top: 40px; }
  .ea__stack { padding: 32px 0 40px; }
  .ea__logo { zoom: 1; }
  .ea__head { margin-top: 44px; gap: 16px; }
  .ea__forms { margin-top: 36px; gap: 32px; }
  .ea-scene__mark { height: max(92vh, 640px); }
  /* The register control splits: the field pill, then a full-width button under it. */
  .ea-control--stack { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ea-control--stack:focus-within { background: none; box-shadow: none; }
  [data-field]:has([aria-invalid="true"]) .ea-control--stack { box-shadow: none; }
  .ea-control--stack .ea-control__wrap {
    min-height: 56px; padding: 4px 18px; border-radius: 100px; background: var(--ea-surface); box-shadow: inset 0 0 0 1px var(--ea-field);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: box-shadow .35s var(--ease-btn);
  }
  .ea-control--stack .ea-control__wrap:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px rgba(77, 29, 250, .28); }
  [data-field]:has([aria-invalid="true"]) .ea-control--stack .ea-control__wrap { box-shadow: inset 0 0 0 1px var(--ea-error); }
  .ea-control--stack .ea-btn { height: 52px; width: 100%; }
  .ea-control--inline { min-height: 56px; }
  .ea-control--inline .ea-control__wrap { padding-left: 14px; }
  .ea-btn { padding: 0 18px 0 22px; }
  .ea-note, .ea-error { padding-inline: 4px; }
  .ea__legal { gap: 4px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ea-scene__glow { animation: none; }
  .ea-form--code.is-wrong .ea-control { animation: none; }
  .ea-control, .ea-btn, .ea-btn__icon, .ea-control__icon, .ea-link { transition: none; }
}