/* ---------------------------------------------------------------------
   HAVAN — coming soon page
   Font notes:
   - Body/UI font is Neue Haas Unica W1G. Light (300) is the weight
     actually used across the page; Regular (400) is also loaded and
     available if a heavier weight is needed somewhere later.
     font-synthesis: none below stops browsers from faking a bold/italic
     instead of silently mismatching.
   - Wordmark is the logotype image at assets/Havan_logotype_white.png.
--------------------------------------------------------------------- */

@font-face {
  font-family: "Neue Haas Unica";
  src: url("../assets/fonts/NeueHaasUnicaW1G-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Unica";
  src: url("../assets/fonts/NeueHaasUnicaW1G-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --color-text: #ffffff;
  --color-text-dim: rgba(255, 255, 255, 0.72);
  --color-charcoal: #2c2822;

  --content-max: 720px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background: var(--color-charcoal);
  font-family: var(--font-sans);
  font-weight: 300;
  font-synthesis: none;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #3a352c;
}

.hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Locks the hero/wordmark images so they can't be picked up and dragged
   (native browser ghost-image drag) or triggered via iOS long-press. */
.hero__image img,
.wordmark img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ---------- Eyebrow + signup (centered, upper-middle) ---------- */

/* top is set by positionHeroContent() in main.js, at the midpoint
   between the viewport top and the wordmark's top edge — that
   relationship shifts with viewport width, so it can't be pure CSS.
   The 25% here is just a pre-JS fallback so nothing flashes at 0,0. */
.hero__content {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  text-align: center;
  max-width: var(--content-max);
  width: 100%;
}

.eyebrow {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 300;
  color: var(--color-text);
}

.signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.signup__row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  border-bottom: 1px solid var(--color-text-dim);
  padding-bottom: 10px;
  transition: border-color 0.2s ease;
}

.signup__row:focus-within {
  border-color: var(--color-text);
}

.signup__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 2px;
  outline: none;
}

/* Placeholder doubles as the "Sign up for updates" CTA copy. It fades
   out as soon as the field is focused (rather than staying until the
   first keystroke, which is the browser default) and back in if the
   user clicks away without typing anything. */
.signup__input::placeholder {
  color: var(--color-text);
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.signup__input:focus::placeholder {
  opacity: 0;
}

/* Browsers force their own opaque background + dark text on an
   autofilled field, which can't be overridden via background-color
   directly. Delaying the background/color transition far past any real
   session length keeps the field's transparent look and white text. */
.signup__input:-webkit-autofill,
.signup__input:-webkit-autofill:hover,
.signup__input:-webkit-autofill:focus,
.signup__input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s;
}

.signup__input:autofill {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
}

/* Invisible mirror of .signup__submit, same width, on the input's other
   side — without it the arrow's one-sided width pulls the centered
   placeholder/typed text left of the row's true optical center. */
.signup__spacer {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  visibility: hidden;
}

.signup__submit {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0 2px;
  color: var(--color-text);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Scales the arrow icon (used in both .signup__spacer and
   .signup__submit) up on desktop; the mobile media query below returns
   it to its original 18×12 size. */
.signup__arrow {
  width: 21px;
  height: 14px;
}

/* Enlarges the tap target well past the small visible arrow, without
   affecting layout — important on touch since the icon alone is ~20px.
   Left is pulled in to stop short of .signup__input (10px gap away) —
   a full -16px there overlapped into the input and stole clicks meant
   for placing the text cursor near the end of the field. */
.signup__submit::before {
  content: "";
  position: absolute;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -4px;
}

.signup__submit:hover,
.signup__submit:focus-visible {
  transform: translateX(3px);
  opacity: 0.85;
}

.signup__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.signup__message {
  min-height: 16px;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-text-dim);
}

.signup__message[data-status="error"] {
  color: #e8b4a0;
}

.signup__message[data-status="success"] {
  color: var(--color-text);
}

/* ---------- Wordmark ---------- */

.wordmark {
  position: absolute;
  z-index: 2;
  /* margin-top/bottom must stay explicitly 0 — h1 has a nonzero default
     UA-stylesheet margin that otherwise adds unwanted space below it,
     throwing off the bottom inset. left/right: auto is what centers
     the mark once max-width caps its left/right-derived width. */
  margin: 0 auto;
  /* max() keeps the 40px inset on ordinary screens but grows past it on
     notched/home-indicator devices so the mark clears the safe area. */
  left: max(40px, env(safe-area-inset-left));
  right: max(40px, env(safe-area-inset-right));
  bottom: max(40px, calc(env(safe-area-inset-bottom) + 16px));
  /* Caps how large the mark can grow on very wide screens — left/right
     insets alone would let it keep expanding on ultrawide/4K monitors.
     Once the left/right-derived width exceeds this, auto margins center
     the now-fixed-width mark within that space instead. */
  max-width: 1800px;
}

.wordmark img {
  display: block;
  width: 100%;
  height: auto;
  /* Locks layout height to the native 3842×742 ratio so its top edge
     (and therefore .hero__content's computed position) is correct
     immediately, without waiting on the image to finish loading. */
  aspect-ratio: 3842 / 742;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
  .hero__content {
    gap: 22px;
  }

  /* Flat 10px, matching .signup__input exactly. This only stays a
     safe, real (non-transformed) value below 16px because the
     viewport meta tag disables pinch-zoom/user-scalable — without
     that, iOS Safari zooms the whole page in on focus of any input
     under 16px, and a transform: scale() trick tried previously to
     fake a smaller look caused a different bug (iOS's native
     selection/QuickType highlight is sized from the untransformed
     layout box, not the visually-scaled text). white-space: nowrap
     keeps it on one line — comfortably fits at 10px even at 320px. */
  .eyebrow {
    font-size: 10px;
    white-space: nowrap;
  }

  .signup__row {
    /* Wider than before, per request — still short of the full content
       width so it reads as a contained control, not an edge-to-edge bar. */
    max-width: 360px;
    gap: 8px;
  }

  .signup__message {
    font-size: 10px;
  }

  .signup__input {
    font-size: 10px;
  }

  .signup__arrow {
    width: 18px;
    height: 12px;
  }

  .signup__spacer,
  .signup__submit {
    padding: 0;
  }

  .wordmark {
    /* Sits closer to the bottom edge on mobile than the 40px desktop
       inset — still clears the home indicator via safe-area-inset. */
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  }
}