/* ============================================================
   INFERMONDS — arriving soon
   pure black · crystalline mark · magenta bloom
   ============================================================ */

:root {
  --bg: #000000;
  --ink: #f6f5f2;
  --ink-dim: rgba(246, 245, 242, 0.80);
  --ink-faint: rgba(246, 245, 242, 0.60);
  --ink-ghost: rgba(246, 245, 242, 0.34);
  --line: rgba(246, 245, 242, 0.24);
  --line-bright: rgba(246, 245, 242, 0.58);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* vertical rhythm — one knob for the whole page */
  --gap-xs: clamp(0.5rem, 1.2svh, 0.8rem);
  --gap-sm: clamp(0.85rem, 2svh, 1.3rem);
  --gap-md: clamp(1.35rem, 3.2svh, 2.1rem);
  --gap-lg: clamp(1.9rem, 4.6svh, 3rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Painted before anything else resolves, so the first frame is never white. */
html { height: 100%; background: #000; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- accessibility ---------- */

:focus-visible { outline: 1px solid var(--line-bright); outline-offset: 3px; }
.field:focus-within :focus-visible { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* Honeypot. Positioned away rather than display:none — some bots skip
   hidden fields, but fill anything they can find in the DOM. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- atmosphere ---------- */

#starfield, #celestial, .flash, .grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#starfield { z-index: 0; }
#celestial { z-index: 2; }

/* The whiteout at the moment the mark lights up. Sits above the hero so the
   blow-out covers everything, but under the grain. */
.flash {
  z-index: 5;
  background: #fff;
  opacity: 0;
  will-change: opacity;
}

/* Overlay blend keeps true blacks at #000 — the grain only textures lit areas,
   so the background never turns milky grey. */
.grain {
  z-index: 6;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain-shift 0.85s steps(3) infinite;
}

@keyframes grain-shift {
  0%   { background-position: 0 0; }
  33%  { background-position: -64px 40px; }
  66%  { background-position: 48px -56px; }
  100% { background-position: 0 0; }
}

/* ---------- overture ----------
   The opening card. Deliberately transparent: the sky begins lighting up
   behind the words, so the two phases overlap instead of cutting. */

.overture {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.6svh, 1rem);
  padding: 2rem calc(1.5rem + var(--safe-r)) 2rem calc(1.5rem + var(--safe-l));
  text-align: center;
  background: transparent;
  pointer-events: none;
}

.overture.is-gone { visibility: hidden; }

.overture__line {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 5.4vw, 2.2rem);
  letter-spacing: clamp(0.1em, 0.5vw, 0.16em);
  line-height: 1.5;
  color: #d6d4cf;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(8px);
  will-change: opacity, filter, transform;
}

.overture__line.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity 1.9s var(--ease-lux), filter 1.9s var(--ease-lux),
              transform 1.9s var(--ease-lux);
}

.overture.is-out .overture__line {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 1.1s ease, filter 1.1s ease;
}

/* ---------- scroll banner ----------
   A transparent strip: no plate, no blur, no rule — just the words drifting
   across the sky. It carries only "coming soon"; the mark stays pinned in the
   page behind it and is not repeated here. The track holds the sequence twice
   and slides by exactly half its width, so the loop has no seam. */

.banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  height: calc(var(--safe-t) + 2.6rem);
  padding-top: var(--safe-t);
  overflow: hidden;
  /* Not a bar — a short scrim that fades to nothing, so copy scrolling
     underneath never collides with the mark or the marquee. */
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.62) 55%,
      rgba(0, 0, 0, 0) 100%);
  transform: translateY(-101%);
  will-change: transform, opacity;
  opacity: 0;
  transition: transform 0.75s var(--ease-lux), opacity 0.55s ease;
  pointer-events: none;
}

.banner.is-in { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* the mark, small, doubling as the home button */
.banner__home {
  flex: 0 0 auto;
  display: block;
  width: 30px;
  height: 23px;
  margin-inline: clamp(1rem, 4vw, 2rem) clamp(0.9rem, 3vw, 1.6rem);
  color: var(--ink-dim);
  opacity: 0.75;
  transition: opacity 0.4s ease, color 0.4s ease;
}

.banner__home:hover,
.banner__home:focus-visible { opacity: 1; color: var(--ink); }
.banner__home svg { display: block; width: 100%; height: 100%; }

/* the marquee runs in whatever space is left beside the mark */
.banner__marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.banner__track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 34s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.banner__item {
  display: inline-block;
  padding-inline-end: 3.25rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

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

/* justify-content:center keeps the whole composition optically dead centre
   in the viewport; the padding is symmetric top and bottom so nothing
   biases it either way. */
.hero {
  position: relative;
  z-index: 4;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:
    calc(var(--safe-t) + clamp(1.2rem, 3svh, 2rem))
    calc(var(--safe-r) + clamp(1.4rem, 6vw, 2.5rem))
    calc(var(--safe-b) + clamp(1.2rem, 3svh, 2rem))
    calc(var(--safe-l) + clamp(1.4rem, 6vw, 2.5rem));
}

/* Sizes and positions the canvas-painted mark. */
.mark-slot {
  flex: 0 0 auto;
  width: clamp(112px, 30vw, 200px);
  height: clamp(112px, 30vw, 200px);
  margin-bottom: var(--gap-xs);
}

/* ---------- wordmark ---------- */

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  /* nowrap, so this can never be allowed to exceed the viewport: the total
     advance is roughly font-size x 10 x (0.66 + letter-spacing), which these
     values keep inside the padding at every width from 320px up. */
  font-size: clamp(1.95rem, 8vw, 4.1rem);
  letter-spacing: clamp(0.22em, 1.3vw, 0.34em);
  line-height: 1.05;
  white-space: nowrap;
  color: var(--ink);
  /* tight enough that the per-glyph glow never merges into a visible box */
  /* One tight shadow only. A second, wider one merges between the letters
     and reads as a lit rectangle behind the word rather than a glow. */
  text-shadow: 0 0 16px rgba(240, 244, 255, 0.26);
  margin-bottom: var(--gap-md);
}

.wordmark__text {
  display: inline-block;
  background: linear-gradient(100deg,
      var(--ink) 0%, var(--ink) 42%, #ffffff 50%, var(--ink) 58%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.wordmark__text { animation: sheen 13s ease-in-out infinite 5s; }

@keyframes sheen {
  0%, 84%   { background-position: 100% 0; }
  94%, 100% { background-position: 0% 0; }
}

/* ---------- body ---------- */

.hero__body {
  width: 100%;
  max-width: 23rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arriving {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.72rem, 2.9vw, 0.86rem);
  letter-spacing: 0.4em;
  color: var(--ink-dim);
}

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin-top: var(--gap-sm);
}

/* ---------- subscribe ---------- */

.subscribe {
  position: relative;
  z-index: 20;          /* lifts the country dropdown clear of the legal copy */
  width: 100%;
  margin-top: var(--gap-md);
}

.mode {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--gap-sm);
}

.mode__btn {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  padding: 0.55rem 0.2rem;
  transition: color 0.5s ease;
}

.mode__btn:hover,
.mode__btn.is-active { color: var(--ink-dim); }

.mode__sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-ghost);
}

.field {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

.field:focus-within {
  border-color: var(--line-bright);
  box-shadow: 0 0 26px rgba(232, 238, 255, 0.09), inset 0 0 16px rgba(232, 238, 255, 0.035);
}

.field--phone { display: flex; align-items: stretch; }
.field__phonewrap { position: relative; flex: 1; }

.field__input {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;            /* never below 16px — iOS zooms otherwise */
  letter-spacing: 0.12em;
  padding: 1.15rem 1.15rem 1rem;
  min-height: 3.4rem;
  caret-color: var(--ink-dim);
}

.field__input::placeholder { color: transparent; }

.field__label {
  position: absolute;
  inset-inline-start: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
  transition: transform 0.45s var(--ease-lux), color 0.45s ease;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label {
  transform: translateY(-195%) scale(0.8);
  transform-origin: left center;
  transform-origin: left center;
  color: var(--ink-ghost);
}

[dir="rtl"] .field__input:focus ~ .field__label,
[dir="rtl"] .field__input:not(:placeholder-shown) ~ .field__label {
  transform-origin: right center;   /* transform-origin has no logical keywords */
}

.field--phone .field__label { inset-inline-start: 0.15rem; }

.field__error {
  min-height: 1.15rem;
  margin-top: 0.6rem;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(226, 176, 168, 0.9);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.field__error.is-visible { opacity: 1; }

/* ---------- country selector ---------- */

.country { position: relative; flex: 0 0 auto; }

.country__btn {
  appearance: none;
  background: none;
  border: 0;
  border-inline-end: 1px solid var(--line);
  cursor: pointer;
  height: 100%;
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.85rem 0 1rem;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  transition: color 0.4s ease;
}

.country__btn:hover { color: var(--ink); }
.country__flag { font-size: 1.05rem; line-height: 1; }
.country__chev { opacity: 0.5; transition: transform 0.4s var(--ease-lux); }
.country.is-open .country__chev { transform: rotate(180deg); }

.country__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  inset-inline-start: -1px;
  width: min(320px, 84vw);
  max-height: min(300px, 46svh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  background: #060608;
  border: 1px solid var(--line);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-lux);
}

.country.is-open .country__list { opacity: 1; transform: translateY(0); }
.country__list::-webkit-scrollbar { width: 3px; }
.country__list::-webkit-scrollbar-thumb { background: var(--line); }

.country__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  min-height: 44px;                 /* comfortable touch target */
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  transition: background 0.25s ease, color 0.25s ease;
}

.country__item:hover,
.country__item.is-focused { background: rgba(246, 245, 242, 0.07); color: var(--ink); }
.country__item[aria-selected="true"] { color: var(--ink); }
.country__item .flag { font-size: 1.05rem; }
.country__item .dial { margin-inline-start: auto; color: var(--ink-faint); font-size: 0.74rem; }

/* ---------- submit ---------- */

.submit {
  position: relative;
  overflow: hidden;
  appearance: none;
  width: 100%;
  margin-top: 0.5rem;
  padding: 1.15rem 1rem 1.05rem;
  min-height: 3.4rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  transition: border-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
}

.submit:hover:not(:disabled),
.submit:focus-visible {
  border-color: var(--line-bright);
  color: var(--ink);
  box-shadow: 0 0 28px rgba(232, 238, 255, 0.09);
}

.submit:disabled { cursor: default; }
.submit__text { display: inline-block; transition: opacity 0.3s ease; }
.submit.is-swapping .submit__text { opacity: 0; }

.submit__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(246, 245, 242, 0.11) 50%, transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
}

.submit:hover:not(:disabled) .submit__sweep { animation: sweep 1.1s var(--ease-lux); }
.submit.is-success { border-color: var(--line-bright); color: var(--ink); }
.submit.is-success .submit__sweep { animation: sweep 1.2s var(--ease-lux); }

@keyframes sweep { to { transform: translateX(110%); } }

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

.legal {
  margin-top: var(--gap-md);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.045em;
  color: var(--ink-faint);
  max-width: 32rem;
  text-wrap: pretty;
}

.legal-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-top: var(--gap-sm);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.legal-links__sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-ghost);
  flex: 0 0 auto;
}

.legal-links a {
  color: var(--ink-faint);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.5s ease, border-color 0.5s ease;
}

.legal-links a:hover { color: var(--ink); border-color: var(--line); }

.footer {
  margin-top: var(--gap-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
}

/* the mark again, small — bookends the page */
/* wider than tall, matching the artwork's own proportions */
.footer__mark {
  display: block;
  width: 30px;
  height: 23px;
  opacity: 0.4;
  animation: mark-breathe 6s ease-in-out infinite;
}

.footer__mark svg { display: block; width: 100%; height: 100%; }

@keyframes mark-breathe {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.1); }
}

.footer__copy {
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  line-height: 2.2;
  color: var(--ink-ghost);
}

/* ---------- intro reveal ----------
   Content is hidden until the mark has flown into place. The page already
   depends on JS for the mark itself, so gating on it here costs nothing. */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s var(--ease-lux), transform 1.1s var(--ease-lux);
}

.reveal.is-in { opacity: 1; transform: translateY(0); }

body:not(.revealed) .hero { pointer-events: none; }

/* ---------- language ----------
   A quiet control in the coda. The page picks the visitor's language on load,
   so this is a fallback rather than a first step. */

.lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang__select {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.6rem 2rem 0.6rem 0.6rem;
  min-height: 44px;
  transition: color 0.45s ease, border-color 0.45s ease;
}

[dir="rtl"] .lang__select { padding: 0.6rem 0.6rem 0.6rem 2rem; }

.lang__select:hover { color: var(--ink); }
.lang__select:focus-visible { border-color: var(--line-bright); }

/* the popup is drawn by the OS, so give its options a readable ground */
.lang__select option { background: #0a0a0c; color: #f6f5f2; letter-spacing: normal; }

.lang__chev {
  position: absolute;
  inset-inline-end: 0.6rem;
  color: var(--ink-ghost);
  pointer-events: none;
}

/* ---------- below the fold ---------- */

.coda {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  text-align: center;
  padding:
    var(--gap-lg)
    calc(var(--safe-r) + clamp(1.4rem, 6vw, 2.5rem))
    calc(var(--safe-b) + var(--gap-lg))
    calc(var(--safe-l) + clamp(1.4rem, 6vw, 2.5rem));
}

.coda .footer { margin-top: 0; }

/* ---------- desktop ---------- */

@media (min-width: 900px) {
  .hero { padding-top: calc(var(--safe-t) + clamp(2.6rem, 7svh, 5rem)); }
  .mark-slot { width: clamp(170px, 15vw, 230px); height: clamp(170px, 15vw, 230px); }
  .hero__body { max-width: 25rem; }
  .legal { font-size: 0.65rem; }
}

/* ---------- phones: tighten the rhythm so the hero holds one screen ---------- */

@media (max-width: 899px) and (max-height: 940px) {
  :root {
    --gap-xs: clamp(0.35rem, 0.9svh, 0.6rem);
    --gap-sm: clamp(0.7rem, 1.7svh, 1.05rem);
    --gap-md: clamp(1.05rem, 2.6svh, 1.6rem);
    --gap-lg: clamp(1.4rem, 3.4svh, 2.1rem);
  }
  .mark-slot { width: clamp(100px, 27vw, 165px); height: clamp(100px, 27vw, 165px); }
  .legal { font-size: 0.66rem; line-height: 1.85; }
  .footer__copy { line-height: 2; }
}

/* ---------- short / landscape phones ---------- */

@media (max-height: 700px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--safe-t) + 1.2rem); }
  .mark-slot { width: 88px; height: 88px; }
  .wordmark { font-size: clamp(1.5rem, 5vw, 2.4rem); }
  .legal { font-size: 0.58rem; line-height: 1.75; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .overture { display: none; }
  .banner__track { animation: none; }
  .banner { transition: none; }
  .flash { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .grain, .footer__mark { animation: none !important; }
  .wordmark__text { animation: none; }
}