/* THE LANE — Coming Soon (standalone)
   Same brand tokens, gradient formula, button styling and motion
   language as the main app's globals.css / DesktopLanding.tsx /
   MobileLanding.tsx / OnboardingCarousel.tsx — copied here rather
   than shared via import, since this page intentionally has no build
   step and no dependency on the Next.js app at all (see README.md in
   this folder for why). Four slides, swipe/scroll-snap + dots — the
   same carousel pattern as the main app's mobile onboarding, just
   with 4 screens instead of 6 and no build tooling. */

:root {
  --background: #f7f5f0;
  --foreground: #17140f;
  --surface: #efeae0;
  --border-color: #ddd6c7;
  --accent: #6b2737;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* the carousel is the only scrollable surface — a horizontal one, see .carousel-track */
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", system-ui, sans-serif;
}

h1, h2, p {
  margin: 0;
}

.wordmark,
h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
   Motion — same two primitives as globals.css: a slow continuous
   Ken Burns zoom on the hero photo, and a one-shot fade-up "reveal"
   for text, staggered with delay classes. Fully disabled under
   prefers-reduced-motion, same guard as the main app.
   ------------------------------------------------------------- */
@keyframes ken-burns-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.photo-screen-img {
  animation: ken-burns-zoom 16s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Only hidden-by-default once html.js confirms script.js is actually
   running (added synchronously in <head>, before first paint) — see
   the comment there. Without it, content stays visible with no
   animation, which is strictly better than a script failure leaving
   the waitlist form permanently invisible. */
html.js .reveal {
  opacity: 0;
}

.reveal.in-view {
  animation: reveal-up 700ms cubic-bezier(0.16, 0.8, 0.24, 1) forwards;
}

.reveal-d1.in-view { animation-delay: 90ms; }
.reveal-d2.in-view { animation-delay: 170ms; }
.reveal-d3.in-view { animation-delay: 240ms; }
.reveal-d4.in-view { animation-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .photo-screen-img,
  .reveal,
  .reveal-d1,
  .reveal-d2,
  .reveal-d3,
  .reveal-d4 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
   Buttons — the exact two shapes already used across the main app:
   a light pill over a dark photo/background (DesktopLanding's "Get
   Started"), and a dark-solid bar on a plain cream background
   (SignUpForm/LoginForm's own submit button). Both slides here are
   dark backgrounds (photo+gradient, solid burgundy), so both this
   page's buttons use the light pill — btn-dark stays defined for
   parity with the main app's system even though this page doesn't
   currently use it. Same sharp corners, uppercase, tracking-wide —
   no rounded "startup" styling either way.
   ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.btn:hover {
  opacity: 0.9;
}

.btn-light {
  background: var(--background);
  color: var(--foreground);
}

.btn-dark {
  background: var(--foreground);
  color: var(--background);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------------------------------------------------------------
   Carousel shell — fixed, full-viewport, horizontal scroll-snap.
   Same shape as OnboardingCarousel.tsx's own container in the main
   app: a flex track wider than the viewport (2 slides x 100%), snap-
   x mandatory, native touch/trackpad scrolling — no JS drag library.
   ------------------------------------------------------------- */
.carousel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  overflow: hidden;
}

/* ---------------------------------------------------------------
   Dots — shared overlay on top of the whole carousel, not inside any
   slide (shared state: the active dot has to stay put and correct
   regardless of which slide is mid-scroll underneath it). Cream/
   white rather than the brand accent colour deliberately: the accent
   IS the waitlist slide's own background, so an accent-coloured
   "active" dot would vanish against it — cream reads clearly against
   both the photo+gradient slides AND the solid burgundy one.
   ------------------------------------------------------------- */
.dots {
  position: absolute;
  bottom: 1.75rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 10;
}

.dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(247, 245, 240, 0.45);
  cursor: pointer;
}

.dot.active {
  background: var(--background);
}

/* ---------------------------------------------------------------
   .photo-screen — the hero's full-bleed pattern: fixed full-bleed
   cover photo, the same transparent-to-dark gradient formula as
   GateScreen/MobileGateScreen (linear-gradient(to bottom, transparent
   0%, transparent 40%, rgba(0,0,0,0.75) 100%)), content base-aligned,
   not centered.
   ------------------------------------------------------------- */
.photo-screen {
  width: 100%;
  height: 100%;
}

.photo-screen-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* hero.jpg is a very tall studio portrait (1920x2400) with the
   subject's face near the top and a lot of plain background above/
   below — on wide desktop viewports, object-fit:cover's default
   center crop cuts off BOTH the model's head and her boots (confirmed
   visually, not assumed). Biasing the crop toward the top keeps the
   face in frame; nothing below the mid-thigh survives on wide
   screens, which is the right trade to make over losing the face.
   Mobile is unaffected — at mobile aspect ratios this image's full
   height already fits with zero vertical cropping, so there's no
   crop window to bias in the first place. */
.hero .photo-screen-img {
  object-position: center 8%;
}

/* ai-styling.jpg — standing full-length portrait, face near the top;
   default center crop cut the face off entirely on wide desktop
   viewports (confirmed visually — only the mouth down was showing),
   same shape of problem as hero.jpg. Biased toward the top to keep
   the face in frame. Mobile is unaffected, same reasoning as hero.jpg:
   at mobile aspect ratios this image's full height already fits with
   zero vertical cropping.
   (Each photo gets its own value tuned to its own composition, not
   a fixed rule — the previous ai-styling.jpg needed the opposite
   bias. Re-check this comment/value if the photo changes again.) */
.ai-styling .photo-screen-img {
  object-position: center 8%;
}

/* rent-lend-sell.jpg — a two-person group shot, landscape
   orientation. Default center crop already keeps both faces
   comfortably in frame on both viewports (confirmed visually — the
   desktop crop here is only a minor ~5% off the top/bottom edges,
   nothing like the portrait crops above), so no override needed this
   time. Left un-overridden deliberately, not an oversight — the
   previous rent-lend-sell.jpg needed a hard top bias; this one
   doesn't. */

.photo-screen-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}

.photo-screen-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  padding: 0 1.5rem 4.5rem;
  text-align: center;
}

.eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--background);
  opacity: 0.85;
}

.hero .wordmark {
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 0.95;
  color: var(--background);
}

.hero-main {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  color: var(--background);
}

.hero-secondary {
  font-size: 1rem;
  color: var(--background);
  opacity: 0.9;
}

.hero .btn {
  margin-top: 0.75rem;
}

/* ---------------------------------------------------------------
   Slide 2 — AI Styling: a single overlay line, no separate headline
   (by design — the spec for this slide is one sentence, not a
   headline+body pair like slide 3). Sized between the other slides'
   headline and body sizes since it has to carry the whole screen on
   its own.
   ------------------------------------------------------------- */
.single-line {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.35;
  color: var(--background);
  max-width: 640px;
}

/* ---------------------------------------------------------------
   Slide 3 — Rent/Lend/Sell: headline + body, same light-on-dark-
   gradient treatment as every other photo-screen's text.
   ------------------------------------------------------------- */
.rent-lend-sell-content h2 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: var(--background);
  max-width: 640px;
}

.rent-lend-sell-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--background);
  opacity: 0.9;
  max-width: 560px;
}

/* ---------------------------------------------------------------
   Slide 4 — Waitlist: solid burgundy, cream/white text throughout.
   overflow-y: auto is a safety net (established pattern in this
   project — see DesktopLanding's own history): on a very short
   viewport, headline + subtitle + form + AU line + footer might not
   all fit in one screen height; this lets a visitor scroll within
   the slide to reach the button rather than content being cut off
   with no way to reach it. Doesn't fight the carousel's own
   horizontal snap-scroll — this scrolls vertically, the track
   scrolls horizontally, independent axes.
   ------------------------------------------------------------- */
.waitlist-slide {
  background: var(--accent);
  overflow-y: auto;
  display: flex;
  align-items: center;
}

.waitlist-inner {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 5rem 1.5rem 3rem;
  text-align: center;
}

.waitlist-inner h2 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: var(--background);
}

.waitlist-inner > p.reveal {
  margin-top: 0.75rem;
  font-size: 1.05rem;
  color: var(--background);
  opacity: 0.9;
}

/* The new context line, between the subtitle and the form — a touch
   softer than the subtitle (opacity, not size) so it reads as
   supporting copy, not a second headline. */
.waitlist-context {
  opacity: 0.8;
}

.waitlist-form {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--background);
  opacity: 0.8;
}

.field .optional {
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.75;
}

.field input {
  border: 1px solid transparent;
  background: var(--background);
  color: var(--foreground);
  padding: 0.85rem 1rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
}

.field input:focus {
  outline: 2px solid var(--foreground);
  outline-offset: 1px;
}

.waitlist-form .btn {
  margin-top: 0.25rem;
  width: 100%;
  text-align: center;
}

.form-status {
  min-height: 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--background);
}

/* Both tones read as light-on-burgundy — no second accent colour to
   distinguish error from success by hue (this page's token set is
   deliberately minimal), so the message text itself carries the
   meaning; error gets a bit of extra weight to read as more urgent. */
.form-status[data-tone="error"] {
  font-weight: 600;
}

.form-status[data-tone="success"] {
  opacity: 0.9;
}

.au-line {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: var(--background);
  opacity: 0.75;
}

/* ---------------------------------------------------------------
   Footer — inside the waitlist slide now, not a separate screen.
   ------------------------------------------------------------- */
.footer {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(247, 245, 240, 0.25);
}

.footer-wordmark {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--background);
}

.footer-domain {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--background);
  opacity: 0.8;
}

.footer-copy {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--background);
  opacity: 0.6;
}

.footer-links {
  margin-top: 0.5rem;
  font-size: 0.65rem;
}

.footer-links a {
  color: #ffffff;
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   Mobile — tested at 375/390/430px. Hero content sits a little
   higher off the bottom edge (thumb-reachable, and clear of iOS
   Safari's own bottom chrome, and above the dots overlay).
   ------------------------------------------------------------- */
@media (max-width: 480px) {
  .photo-screen-content {
    padding-bottom: 3.5rem;
    gap: 0.7rem;
  }

  .waitlist-inner {
    padding: 4rem 1.25rem 3rem;
  }

  .waitlist-form {
    gap: 1rem;
  }
}