/* ============================================================
   Interplanetary Criminal · ATW presents · NX Newcastle
   Teaser + presale signup. Event date deliberately absent.

   Direction derived from the client artwork: a near-black
   textured field crazed with a network of gold-ochre cracks,
   overprinted with heavy condensed off-white type. Every colour
   below is sampled from the supplied JPEG, not invented -
   #6A4D21 is the literal crack pixel, #C3C2BE the literal type.

   The raw crack ochre only scores 2.37:1 on the page black, so
   it is used for STRUCTURE (hairlines, borders, plate edges)
   and never for text; a lifted #C08A3E carries the accent and
   the CTA at 6.11:1. The CTA therefore takes DARK type on gold
   - off-white on that gold is 1.70:1 and would be unreadable.

   Type: Anton (display) echoes the poster's compressed gothic;
   Archivo (body) is the wider grotesque that keeps the consent
   paragraph and the form legible. The pairing is deliberate
   width tension, not two neighbouring grotesques.

   Signature: the countdown plate. The clock sits in a single
   bordered plate divided into cells by hairlines in the crack
   ochre - the artwork's crazed-glaze motif carrying the one
   piece of live, changing information on the page. When the
   presale opens the cells collapse into one sealed gold bar.
   ============================================================ */

@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/Anton-400.woff2?v=20260807-1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260807-1") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --void:      #0B0B08;   /* page ground */
  --soot:      #14140F;   /* artwork black - panel base */
  --field:     #1B1A15;   /* form field base - OPAQUE on purpose, see autofill note */
  --ochre:     #6A4D21;   /* artwork crack - STRUCTURE ONLY, never text (2.37:1) */
  --ochre-lit: #C08A3E;   /* lifted crack - accent + CTA (6.11:1 on soot) */
  --bone:      #C3C2BE;   /* artwork type off-white */
  --bone-dim:  #8A8781;   /* secondary copy (4.86:1 on field) */
  --danger:    #E0776A;
  --whatsapp:  #25D366;

  --display: "Anton", "Helvetica Neue", Impact, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is only display:none in the UA stylesheet, which is
   the weakest layer of the cascade - so ANY author rule that sets display
   beats it and the element stays on screen with no error anywhere.
   .countdown__live{display:flex} did exactly that, showing "Presale is live"
   six days early, and the same collision would have stopped the clock from
   hiding when the plate sealed. Keep this rule ABOVE everything that sets
   display, and never remove it. */
[hidden] { display: none !important; }

/* Base colour lives on html, NOT body: an opaque body background paints
   over the z-index:-2 .bg layer and the artwork disappears. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--void);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--body);
  color: var(--bone-dim);
  background: transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- blurred artwork background ----------
   Composed from a type-free region of the artwork (the crack network in
   the top-left corner), so the texture reads as the artwork without
   ghosting a second, blurred copy of the title behind the sharp poster. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--void);
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20260807-2");
  background-position: center;
  background-size: cover;
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20260807-2"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260807-2"); }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260807-2"); }
}
/* Scrim: sits the poster and panel on the texture without killing it.
   ONE gradient, not two stacked ones. The background image is already blended
   42% with --void when it is generated, so a second dark layer on top crushed
   the crack network back into flat black - which is exactly what it looked
   like on the first pass. The panel is its own dark card and carries its own
   contrast, so the scrim only has to take the edge off. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(135% 95% at 50% 8%, rgba(11,11,8,.06) 0%, rgba(11,11,8,.40) 62%, rgba(11,11,8,.66) 100%);
}

/* Dither layer. Functional, not decorative: the background is a heavily
   blurred gradient field and WebP banding is visible across it without
   this. The artwork itself is a grainy risograph-like print, so a little
   tooth is also true to the source. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   STAGE LAYOUT
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;                 /* auto at EVERY breakpoint - never plain 0 */
  padding: clamp(20px, 4vw, 52px) clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 50px);
  align-items: center;
}

/* ---------- the poster ---------- */
.poster {
  justify-self: center;
  width: 100%;
  max-width: 560px;
}
.poster__frame {
  position: relative;
  border: 1px solid rgba(106,77,33,.30);
  box-shadow:
    0 10px 20px rgba(0,0,0,.55),
    0 40px 70px -22px rgba(0,0,0,.85);
  animation: posterIn .9s cubic-bezier(.16,.84,.36,1) both;
}
.poster img { display: block; width: 100%; height: auto; }
@keyframes posterIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNUP PANEL
   ============================================================ */
.signup { justify-self: center; width: 100%; max-width: 500px; }
.panel {
  width: 100%;
  position: relative;
  isolation: isolate;             /* keeps the country dropdown clickable above the frame */
  background: linear-gradient(180deg, rgba(20,20,15,.93), rgba(11,11,8,.96));
  border: 1px solid rgba(106,77,33,.42);
  border-radius: 4px;
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.9);
  animation: panelIn .9s .12s cubic-bezier(.16,.84,.36,1) both;
  overflow: visible;
}
/* the crack ochre drawn as the panel's top edge */
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, rgba(106,77,33,0), var(--ochre) 30%, var(--ochre-lit) 62%, rgba(192,138,62,0));
  z-index: 0;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.panel__inner { position: relative; z-index: 1; padding: clamp(24px, 3.2vw, 38px); }

/* --- state machine (app.js flips data-form-state on .panel) --- */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

/* ---------- eyebrow: the only headline element on this page ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ochre-lit);
}
.eyebrow span {
  flex: 0 0 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ochre));
}
.eyebrow span:last-child { background: linear-gradient(90deg, var(--ochre), transparent); }
/* the text span must not inherit the hairline styling */
.eyebrow span.eyebrow__text { flex: 0 1 auto; height: auto; background: none; }
@media (max-width: 460px) {
  .eyebrow { gap: 9px; font-size: 10.5px; letter-spacing: .14em; }
  .eyebrow span { flex: 0 0 14px; }
}

/* success-state title (the idle state is eyebrow-only by design) */
.panel__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.4vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--bone);
  text-wrap: balance;
}

.panel__lede {
  margin: 0 0 10px;
  font-size: 15.5px;
  color: var(--bone-dim);
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 22px; }
.panel__lede strong { color: var(--bone); font-weight: 600; }
.panel__success-note { margin: 0 0 12px; color: var(--ochre-lit); font-size: 15px; }

/* ============================================================
   COUNTDOWN PLATE  — the signature element
   One bordered plate, divided into cells by hairlines in the
   artwork's crack ochre. Seals into a single gold bar at zero.
   ============================================================ */
.countdown { margin: 0 0 18px; }
.countdown__label {
  margin: 0 0 9px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.countdown__clock {
  display: flex;
  align-items: stretch;
  background: rgba(11,11,8,.55);
  border: 1px solid rgba(106,77,33,.55);
  border-radius: 3px;
  overflow: hidden;
}
.cdseg {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 4px 10px;
}
/* the fracture: cells divided by the crack colour */
.cdseg + .cdseg { border-left: 1px solid rgba(106,77,33,.45); }
.cdseg__num {
  font-family: var(--display);
  font-size: clamp(1.45rem, 5vw, 1.95rem);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.cdseg__unit {
  margin-top: 7px;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
/* zero state: the plate seals */
.countdown__live {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ochre-lit);
  background: rgba(192,138,62,.08);
  border: 1px solid rgba(192,138,62,.55);
  border-radius: 3px;
}
.countdown__dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ochre-lit);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(192,138,62,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(192,138,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,138,62,0); }
}

/* ---------- on-sale dates ---------- */
.dates {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid rgba(106,77,33,.32);
}
.dates li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(106,77,33,.32);
}
.dates__k {
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.dates__v {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bone);
  white-space: nowrap;
}

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 14px; }
/* labels stay for screen readers; placeholders carry the meaning visually */
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form__input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 16px;                /* 16px minimum or iOS zooms on focus */
  color: var(--bone);
  background: var(--field);       /* OPAQUE - see the autofill rule below */
  border: 1px solid rgba(106,77,33,.45);
  border-radius: 3px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: #6E6B65; }
.form__input:focus {
  outline: none;
  border-color: var(--ochre-lit);
  box-shadow: 0 0 0 3px rgba(192,138,62,.16);
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background /
   background-color on :-webkit-autofill - a huge inset box-shadow is the
   only reliable override. The shadow cannot be semi-transparent, so it
   must be the FLATTENED OPAQUE equivalent of the field's rendered stack.
   That is trivially --field here because the field was made opaque on
   purpose; keep it that way, or this colour has to be recomputed by
   compositing field over panel over the background photo. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset !important;
          box-shadow: 0 0 0 1000px var(--field) inset !important;
  -webkit-text-fill-color: var(--bone) !important;
  caret-color: var(--bone);
  transition: background-color 9999s ease-in-out 0s;   /* stops the lavender flashing in first */
}

.form__error {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--danger);
}
.form__error--global { margin-top: 14px; }

/* Honeypot. display:none ONLY - off-screen positioning gets autofilled by
   Chrome/Edge, which silently blocks real signups. */
.hp-row { display: none !important; }

.form__row--check { margin: 18px 0 20px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bone-dim);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--ochre-lit);
  cursor: pointer;
}
.form__check a { color: var(--bone); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--ochre-lit); }

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  font-family: var(--display);
  font-size: clamp(.85rem, 3.2vw, 1rem);
  letter-spacing: clamp(.06em, .5vw, .14em);
  text-transform: uppercase;
  white-space: nowrap;            /* shrink type before it can ever wrap */
  text-align: center;
  text-decoration: none;          /* <a class="btn"> needs this, <button> doesn't */
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
/* DARK type on the gold: 6.11:1. Off-white here would be 1.70:1. */
.btn--primary {
  color: var(--soot);
  background: var(--ochre-lit);
  box-shadow: 0 12px 26px -12px rgba(192,138,62,.7);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn--whatsapp {
  color: #06301A;
  background: var(--whatsapp);
  margin-top: 4px;
}
.btn--whatsapp:hover { filter: brightness(1.06); }
.btn__icon { flex: 0 0 auto; width: 19px; height: 19px; }

.wa-hook {
  margin: 18px 0 12px;
  font-size: 13.5px;
  color: var(--bone-dim);
}
.wa-hook strong { color: var(--bone); font-weight: 600; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* app.js re-measures and sets padding-left inline; this is the sane default
   before it runs. Anything >= 80px breaks 320-390px viewports. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__country-container { z-index: 3; }
/* the dropdown must sit above the panel */
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* Until the vendor stylesheet loads, the hidden state does not exist and the
   whole list + search box flashes open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti__dropdown-content {
  background: var(--soot);
  border: 1px solid rgba(106,77,33,.65);
  border-radius: 4px;
  box-shadow: 0 26px 55px -18px rgba(0,0,0,.92);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal padding reservation: 30px left clears the
     absolutely positioned search icon, 28px right clears the clear button.
     A padding SHORTHAND that drops them puts the magnifier on top of the
     placeholder text. Set the vertical values, keep the horizontal ones. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--bone);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid rgba(106,77,33,.5);
}
.iti__search-input::placeholder { color: #6E6B65; }
.iti__search-input:focus { outline: none; background: #201F19; }
.iti__country-list { background: var(--soot); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--bone);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(192,138,62,.15); }
.iti__dial-code { color: var(--bone-dim); }
.iti__country-name { color: var(--bone); }
.iti__selected-country { border-radius: 3px 0 0 3px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(192,138,62,.10); }
.iti__selected-dial-code { color: var(--bone); font-family: var(--body); font-size: 15px; }
.iti__arrow { border-top-color: var(--bone-dim); }
.iti__arrow--up { border-bottom-color: var(--bone-dim); }

/* ============================================================
   FOOTER — full width band (basslayerz pattern)
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: rgba(11,11,8,.62);
  border-top: 1px solid rgba(106,77,33,.42);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal { margin: 0; font-size: 12px; color: var(--bone-dim); letter-spacing: .02em; }
.foot__legal a { color: var(--bone-dim); text-decoration: none; }
.foot__legal a:hover { color: var(--ochre-lit); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--bone-dim);
  text-decoration: none;
}
.site-built a:hover { color: var(--ochre-lit); }
.site-built img { display: block; opacity: .82; }

/* ============================================================
   RESPONSIVE
   Aspect-ratio thresholds, not width alone: width-only breakpoints
   leave gaps at squarish window shapes where neither the phone nor
   the desktop treatment applies.
   ============================================================ */

/* --- two column: artwork left, panel right --- */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: clamp(34px, 4.5vw, 60px);
    align-items: center;
  }
  .poster { justify-self: end; max-width: 500px; }
  .signup { justify-self: start; }
  .foot   { justify-content: space-between; }
}

@media (max-width: 899px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* --- landscape phones are a first-class layout ---
   A rotated phone (844x390, 932x430, 667x375) can satisfy the width and
   aspect conditions above while having almost no height, so the poster
   and panel render cramped and the page scrolls badly. Compact
   side-by-side, art height-capped, tighter type. Placed AFTER the desktop
   block so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { padding: 14px clamp(12px, 3vw, 26px); align-items: flex-start; }
  .stage__inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .poster {
    justify-self: start;
    width: auto;
    max-width: none;
    min-height: 0;
  }
  .poster img {
    width: auto;
    max-height: calc(100svh - 40px);
    max-width: 34vw;
  }
  .signup { justify-self: stretch; max-width: none; min-height: 0; }
  .panel__inner { padding: 16px 18px; }
  .panel__lede { font-size: 13.5px; margin-bottom: 7px; }
  .panel__lede--last { margin-bottom: 12px; }
  .eyebrow { margin-bottom: 10px; font-size: 10.5px; }
  .countdown { margin-bottom: 12px; }
  .countdown__label { margin-bottom: 6px; }
  .cdseg { padding: 8px 4px 7px; }
  .cdseg__num { font-size: 1.4rem; }
  .dates { margin-bottom: 14px; }
  .dates li { padding: 6px 0; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 12px 0 14px; }
  .btn { padding: 12px 16px; }
  .iti__country-list { max-height: 150px; }
}

/* --- small phones --- */
@media (max-width: 400px) {
  .panel__inner { padding: 22px 18px; }
  .cdseg { padding: 11px 2px 9px; }
  .cdseg__unit { font-size: 8.5px; letter-spacing: .12em; }
  .dates__k { font-size: 10.5px; letter-spacing: .12em; }
  .dates__v { font-size: 12.5px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--ochre-lit);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}