/* ==========================================================================
   STOONE — teaser hero
   Values come from the Pencil export (teaserA / teaserB, 1440 × 800 frame).
   ========================================================================== */

:root {
  /* Colours — STOONE styleguide (stoone–presentation.pen › Styleguide) */
  --c-bg: #151519;             /* bg: page background */
  --c-ink: #f8f6ef;            /* paper: primary text, logo */
  --c-text: #d2d5c5;           /* sand: secondary text, labels, outlines */
  --c-text-muted: #d2d5c599;   /* text-muted (sand 60%): hints, captions, footer */
  --c-line: #d2d5c566;         /* outline-40 */
  --c-line-soft: #d2d5c524;    /* hairline (sand 14%): 1px rules */
  --c-brick: #8e3c39;          /* brick: fills, selected, error outline — never text */
  --c-surface-warm: #3d1817;   /* surface-warm: warm panel tint, sparingly */
  --c-btn: #cac3b8;            /* comfort: CTA default */
  --c-btn-hover: #ca9377;      /* cta: CTA hover */
  --c-btn-pressed: #a26d55;    /* cta-pressed */
  --c-btn-ink: #1c1a18;        /* ink: CTA label */

  /* Type — open-source stand-ins; fonts-licensed.css swaps these */
  --font-display: "Lexend", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", system-ui, sans-serif;
  --title-tracking: -0.045em;  /* Lexend runs wider than Plaax 6 */
  --title-weight: 600;

  /* Layout */
  --gutter: clamp(20px, 5.556vw, 80px);   /* 80px @ 1440 */
  --radius-pill: 999px;
}

/* ---------- Base ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Hero + footer together fill exactly one viewport: the hero takes
   whatever height the footer leaves. On very short screens the page
   simply grows instead of clipping content. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--c-ink);
  color: var(--c-bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

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

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  overflow: hidden;
  background: var(--c-bg);
}

/* ---------- Background layers -------------------------------------------- */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* All three images share the same 2880×1600 frame, so identical
   cover + position keeps them registered. Focus = the tower (x 50%). */
.hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 65%;
}

/* ---- Clouds ------------------------------------------------------------
   Realistic, slow motion using only transform + opacity (GPU-composited):
   · Wind blows one way only — layers never reverse direction.
   · Each layer is a pair of copies half a cycle apart. As one copy drifts
     out it fades away while its twin fades in, so the drift loops forever
     with no visible reset, and the overlapping copies make the fog shapes
     slowly evolve. Linear opacity ramps keep the pair's total density constant.
   · "fog" = the designed cloud bank; "mist" = a mirrored, fainter, faster
     layer in front of it for parallax depth.
   · The whole bank "breathes" (tiny scale/lift) on a non-matching period,
     so the motion never visibly repeats.
   ------------------------------------------------------------------------- */

.hero__clouds {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: cloud-breathe 19s ease-in-out infinite alternate;
}

.hero__cloud {
  --peak: 1;
  --from: -6%;
  --to: 6%;
  --lift: 0%;
  --sx: 1.16;              /* overscan so the drift never exposes an edge */
  --sy: 1.16;
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  animation: cloud-drift var(--dur, 40s) linear infinite;
}

.hero__cloud--fog {
  --dur: 40s;              /* ≈ 4–5 px/s at 1440 — calm but clearly alive */
}

.hero__cloud--mist {
  --dur: 26s;              /* closer to the viewer → moves faster (≈ 10 px/s) */
  --peak: 0.5;
  --from: -9%;
  --to: 9%;
  --lift: 2.5%;
  --sx: -1.26;             /* mirrored so it never lines up with the fog */
  --sy: 1.26;
}

/* Second copy of each pair starts half a cycle later */
.hero__cloud--2 {
  animation-delay: calc(var(--dur) / -2);
}

@keyframes cloud-drift {
  0% {
    opacity: 0;
    transform: translate3d(var(--from), var(--lift), 0) scale(var(--sx), var(--sy));
  }
  50% {
    opacity: var(--peak);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--to), var(--lift), 0) scale(var(--sx), var(--sy));
  }
}

/* WebGL renderer (assets/js/clouds.js) takes over when available */
.hero__clouds-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.has-gl-clouds .hero__cloud {
  display: none;
}

@keyframes cloud-breathe {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: scale(1.05); }  /* grows from the bottom edge, so no gap opens there */
}

@media (prefers-reduced-motion: reduce) {
  .hero__clouds,
  .hero__cloud {
    animation: none;
    will-change: auto;
  }

  /* Static: just the designed cloud bank */
  .hero__cloud--fog.hero__cloud--1 {
    opacity: 1;
    transform: scale(1.16);
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
}

/* Stacking: sky → tower → top scrim → clouds → bottom scrim.
   The clouds sit above the top scrim so they read bright around the tower
   (as in the moodboard), while the bottom scrim still fades them into the page. */
.hero__scrim--top { z-index: 1; }
.hero__clouds     { z-index: 2; }
.hero__scrim--bottom { z-index: 3; }

.hero__scrim--bottom {
  /* lighter than the export (#151519 0 → b3 30% → 00 62%) so more tower and
     cloud shows; still solid at the very bottom for the logo strip */
  /* solid behind the logo strip, then a longer fade so the tower dissolves
     into the page above the logos instead of showing through them */
  background: linear-gradient(0deg, #151519 0%, #151519e8 15%, #151519d1 22%, #15151997 32%, #1515194f 44%, #15151900 58%);
}

.hero__scrim--top {
  /* lighter than the export (f2 → 4d): dark enough behind the top bar and
     headline, then opens up so the tower and clouds read */
  /* midpoint between the export and the fully opened-up version */
  background: linear-gradient(180deg, #151519e6 0%, #151519c2 18%, #1515198a 45%, #1515193a 100%);
}

/* ---------- Top bar ------------------------------------------------------- */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 34px var(--gutter) 0;
}

.topbar__logo {
  display: block;
  padding-top: 7px;
  color: var(--c-ink);
  border-radius: 4px;
}

.topbar__logo svg {
  width: 132px;
  height: 22px;
  fill: currentColor;
}

.topbar__contact {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  color: var(--c-text);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.topbar__contact:hover {
  border-color: var(--c-text);
  color: var(--c-ink);
  background: #d2d5c50f;
}

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

.hero__content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  /* Extra top padding re-centres the copy on the 800px media frame, as in the export */
  padding: 90px var(--gutter) 56px;
  text-align: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.hero__title {
  max-width: 968px;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: var(--title-weight);
  /* 82px / 75px at 1440, fluid down to 40px on phones */
  font-size: clamp(40px, 1rem + 4.584vw, 82px);
  line-height: 0.915;
  letter-spacing: var(--title-tracking);
  text-wrap: balance;
  text-shadow: 0 2px 24px #15151966;
}

.hero__lead {
  max-width: 664px;
  color: var(--c-text);
  font-size: clamp(18px, 0.9rem + 0.7vw, 24px);
  line-height: 1.458; /* 35 / 24 */
  letter-spacing: 0.02em; /* styleguide lead: 24 / 1.45 · weight 420 · +0.48 */
  font-weight: 400;
  text-wrap: balance;
  /* soft halo keeps the light text legible over the lit tower and clouds */
  text-shadow: 0 1px 2px #151519b3, 0 0 18px #151519cc;
}

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  padding: 16px 40px;
  background: var(--c-btn);
  color: var(--c-btn-ink);
  font-size: 16px;
  font-weight: 700;            /* styleguide: button label Bold */
  line-height: 1.2;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn--primary:hover {
  background: var(--c-btn-hover);
}

.btn--primary:active {
  background: var(--c-btn-pressed);
  transform: scale(0.98);
}

/* styleguide: CTA focus = 1px sand stroke */
.btn--primary:focus-visible {
  outline: 1px solid var(--c-text);
  outline-offset: 3px;
}

.btn[disabled] {
  cursor: progress;
}

/* ---------- Gate (waitlist e-mail form) ---------------------------------- */

.gate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}

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

.field {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 56px;
  padding: 4px 4px 4px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field:focus-within {
  border-color: var(--c-text);
  box-shadow: 0 0 0 3px #d2d5c526;
}

.gate[data-state="error"] .field {
  border-color: var(--c-brick);   /* styleguide: brick outline */
}

.field__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-size: 16px; /* ≥16px prevents iOS zoom */
  outline: none;
}

.field__input::placeholder {
  color: var(--c-text-muted);
  opacity: 1;
}

.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--c-ink);
  -webkit-box-shadow: 0 0 0 40px var(--c-bg) inset;
  caret-color: var(--c-ink);
}

.field__submit {
  flex: none;
  padding-block: 0;
  padding-inline: 40px;
}

.field__submit[aria-busy="true"] .field__submit-label::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.5em;
  vertical-align: -0.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.gate__hint,
.gate__status,
.gate__dev-note {
  padding: 0 24px;
  text-shadow: 0 1px 2px #151519cc, 0 0 14px #151519e6;
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.4;
}

.gate__hint {
  color: var(--c-text-muted);
}

.gate__privacy {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #d2d5c566;
  text-underline-offset: 3px;
}

.gate__privacy:hover {
  color: var(--c-text);
  text-decoration-color: currentColor;
}

.gate__status:empty {
  display: none;
}

.gate[data-state="error"] .gate__status {
  color: var(--c-ink);            /* styleguide: message in paper */
}

/* styleguide D · Sent: confirmation in paper, 18px */
.gate[data-state="success"] .gate__status {
  max-width: 480px;
  color: var(--c-ink);
  font-size: 18px;
  line-height: 1.45;
}

.gate__change {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.gate__change[hidden] {
  display: none;
}

/* styleguide C · Error: the message replaces the hint */
.gate[data-state="error"] .gate__hint {
  display: none;
}

/* On success the field + hint give way to the confirmation */
.gate[data-state="success"] .field,
.gate[data-state="success"] .gate__hint {
  display: none;
}

/* Out of flow so the preview note never shifts the designed layout */
.gate__dev-note {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 6px 14px;
  border: 1px dashed #ca937759;   /* cta-35 */
  border-radius: 4px;
  color: var(--c-text);
  font-size: 13px;
}

.gate__dev-note[hidden] {
  display: none;
}

/* Honeypot — off-screen, not display:none (some bots skip hidden inputs) */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Client strip ------------------------------------------------- */

.clients {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px var(--gutter) 60px;
}

.clients__title {
  color: var(--c-text-muted);
  font-family: var(--font-text);
  font-size: 20px;
  font-weight: 400;            /* styleguide section label: Regular · +0.72 */
  line-height: normal;
  letter-spacing: 0.036em; /* 0.72px @ 20 */
}

.clients__viewport {
  --logo-gap: clamp(56px, 6.5vw, 104px);
  --fade: clamp(48px, 12%, 200px);
  position: relative;
  overflow: hidden;
  /* Logos dissolve into the background at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}

/* Two identical lists side by side; moving the track by exactly one list
   width (-50%) makes the loop seamless. */
.clients__track {
  display: flex;
  width: max-content;
  animation: logo-marquee 48s linear infinite;
}

.clients__viewport:hover .clients__track,
.clients__viewport:focus-within .clients__track {
  animation-play-state: paused;
}

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

.clients__list {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--logo-gap);
  margin: 0;
  /* trailing gap so the seam between the two copies matches */
  padding: 0 var(--logo-gap) 0 0;
  list-style: none;
}

.clients__item {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}

/* No motion: a static, centred, wrapping row; the clone is dropped. */
@media (prefers-reduced-motion: reduce) {
  .clients__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .clients__track {
    width: auto;
    animation: none;
  }

  .clients__list {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 48px;
    padding: 0;
  }

  .clients__list[aria-hidden="true"] {
    display: none;
  }
}

.clients__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

.clients__link .logo {
  transition: opacity 0.2s ease;
}

.clients__link:hover .logo,
.clients__link:focus-visible .logo {
  opacity: 1;
}

.clients__link:focus-visible {
  outline-offset: 2px;
}

.logo {
  height: auto;
  fill: var(--c-text);
  opacity: 0.75;
}

/* ---------- Footer -------------------------------------------------------- */

.footer {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding: 24px var(--gutter);
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line-soft);
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: normal;
}

.footer__copy {
  font-family: var(--font-display);
  font-weight: 600;
}

.footer__links {
  display: flex;
  gap: 0.3em;
  font-weight: 600;            /* styleguide footer: weight 580 */
}

.footer__links a {
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
  .topbar {
    padding-top: 24px;
  }

  .topbar__logo {
    padding-top: 9px;
  }

  .topbar__logo svg {
    width: 108px;
    height: 18px;
  }

  .topbar__contact {
    padding: 8px 16px;
  }

  .hero__content {
    gap: 36px;
    padding-block: 48px 40px;
  }

  .hero__copy {
    gap: 20px;
  }

  .gate__hint {
    padding: 0;
    text-wrap: balance;
  }

  /* Keep the designed two-line break: size so "for your real estate" fits */
  .hero__title {
    font-size: min(40px, 9.6vw);
    line-height: 1;
  }

  .clients {
    gap: 20px;
    padding-bottom: 40px;
  }

  .clients__title {
    font-size: 16px;
    text-align: center;
  }

  .clients__viewport {
    --logo-gap: 44px;
    --fade: 40px;
    /* full-bleed on phones so logos glide in from the screen edge */
    margin-inline: calc(-1 * var(--gutter));
  }

  .clients__track {
    animation-duration: 36s;
  }

  .clients__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

.clients__link .logo {
  transition: opacity 0.2s ease;
}

.clients__link:hover .logo,
.clients__link:focus-visible .logo {
  opacity: 1;
}

.clients__link:focus-visible {
  outline-offset: 2px;
}

.logo {
    transform: scale(0.85);
  }

  .footer {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .field {
    padding-left: 18px;
  }

  .field__submit {
    padding-inline: 22px;
  }
}

/* Very narrow phones: stack the field so the button never squeezes the input */
@media (max-width: 340px) {
  .field {
    flex-direction: column;
    height: auto;
    padding: 4px;
    border-radius: 28px;
  }

  .field__input {
    height: 48px;
    padding-inline: 18px;
  }

  .field__submit {
    height: 48px;
  }
}

@media (forced-colors: active) {
  .btn,
  .field,
  .topbar__contact {
    border: 1px solid ButtonText;
  }

  .clients__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

.clients__link .logo {
  transition: opacity 0.2s ease;
}

.clients__link:hover .logo,
.clients__link:focus-visible .logo {
  opacity: 1;
}

.clients__link:focus-visible {
  outline-offset: 2px;
}

.logo {
    fill: CanvasText;
  }
}