/* ============================================================
   SecondPass.AI — holding page.
   One non-scrolling screen over the living smoke. Near-monochrome,
   so the smoke is the only colour. Sibling of the Soho Post page
   but deliberately its own identity: no boxed monogram, wordmark
   led, teal rather than cobalt.
   ============================================================ */

:root {
  --ink: #07090f;
  --on-dark: #eceef5;
  --on-dark-dim: #838b9c;
  --accent: #12d6b8;          /* teal — distinct from Soho Post cobalt */
  --line: rgba(236,238,245,.14);

  /* read by fluid.js via setMood */
  --c-1: 18,214,184;

  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  --pad-x: clamp(1.25rem, 5vw, 5rem);
  --pad-y: clamp(1.5rem, 4vh, 2.6rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

/* Lock to a single screen: nothing here scrolls. */
html, body { height: 100%; overflow: hidden; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  color: var(--on-dark);
  background: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
canvas { display: block; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* ---------------- Background ---------------- */
.bgfx {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100svh;
  z-index: 0; pointer-events: none;
}

/* Film grain, so the background never reads as a flat digital gradient. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

/* ---------------- Skip link ---------------- */
.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 200; background: var(--accent); color: var(--ink);
  padding: .6rem 1.2rem; font: 600 .8rem/1 var(--body); border-radius: 0 0 8px 8px;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------------- Cursor ---------------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 140;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  pointer-events: none; opacity: 0;
  transition: opacity .3s var(--ease), width .3s var(--ease), height .3s var(--ease);
  will-change: transform;
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover { width: 72px; height: 72px; background: rgba(18,214,184,.2); }
.cursor__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 .62rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark); opacity: 0; transition: opacity .2s var(--ease); white-space: nowrap;
}
.cursor.is-hover .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------------- Nav ---------------- */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: var(--pad-y) var(--pad-x);
}
.brand { font: 600 1.05rem/1 var(--display); letter-spacing: -.01em; }
.brand__tld { color: var(--accent); }

.nav__link { position: relative; font-size: .92rem; color: var(--on-dark-dim); transition: color .3s var(--ease); }
.nav__link:hover { color: var(--on-dark); }
@media (max-width: 640px) { .nav__link { display: none; } }

/* ---------------- Layout ---------------- */
.hold {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  padding: var(--pad-y) var(--pad-x);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 1600px; margin-inline: auto;
}

/* ---------------- Type ---------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .88rem; color: var(--on-dark-dim);
  margin-bottom: clamp(1rem, 3vh, 1.6rem);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.title {
  font-family: var(--body);
  font-weight: 600; font-size: clamp(2rem, 5.2vw, 4.1rem); line-height: 1.0;
  letter-spacing: -.042em;
}
.title .line { display: block; }

.meta {
  margin-top: clamp(1.4rem, 4vh, 2.2rem);
  padding-top: clamp(1.1rem, 3vh, 1.6rem);
  border-top: 1px solid var(--line);
  max-width: 36rem;
}

/* A quiet text link, not a sales button. */
.enquiries { position: relative; font-weight: 500; padding-bottom: .3rem; }
.enquiries::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; opacity: .45; transition: opacity .35s var(--ease);
}
.enquiries:hover::after { opacity: 1; }

/* ---------------- Reveals ---------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Small screens: the deliberate line breaks are set for desktop measure. Held
   at narrow widths they orphan words ("models" alone on a line), so let the
   headline reflow as continuous text and balance the wrap instead. */
@media (max-width: 700px) {
  .title .line { display: inline; }
  .title { text-wrap: balance; }
}