/* ---------------------------------------------------------------------------
   Auteur waitlist
   Tokens are lifted from design/waitlist-frame.html so the page stays in step
   with the Pencil source.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter var';
  src: url('../fonts/inter-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono var';
  src: url('../fonts/jetbrains-mono-latin-variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0e0e10;
  --surface: #1d1d22;
  --surface-raised: #232329;
  --line: #2a2a31;
  --line-strong: #3a3a44;
  --text: #ededf0;
  --text-muted: #9b9ba6;
  /* One step lighter than the Pencil source's #6B6B76 so 11px labels clear
     WCAG AA (4.5:1) against the page background. */
  --text-dim: #8a8a96;
  --accent: #4a9eff;
  /* Dark ink on the bright accent: white on #4A9EFF only reaches 2.8:1. */
  --accent-ink: #0e0e10;

  --radius-sm: 5px;
  --radius: 6px;
  --radius-lg: 10px;

  --font-sans: 'Inter var', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
    sans-serif;
  --font-mono: 'JetBrains Mono var', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
    monospace;

  --gutter: clamp(20px, 5vw, 48px);
  /* How far the windows rise on hover, and how far they hang below the fold so
     the rise has something to reveal. */
  --lift: 150px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Clipping the root as well as the body is what actually pins the viewport:
     a clip that only propagates from the body still leaves the page
     scrollable by script, by the height of the windows' overhang. */
  height: 100%;
  overflow: clip;
}

body::after {
  content: '';
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: 88px;
  background: linear-gradient(180deg, rgb(14 14 16 / 0) 0%, rgb(14 14 16 / 0.72) 100%);
  pointer-events: none;
  z-index: 4;
}

body {
  margin: 0;
  /* The page is exactly one viewport tall: the app window runs off the bottom
     edge rather than scrolling. Short viewports get scrolling back at the end
     of this file. */
  height: 100svh;
  overflow: clip;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -120%;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: translate 160ms var(--ease);
}

.skip-link:focus-visible {
  translate: -50% 0;
}

/* --- Nav ------------------------------------------------------------------ */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 12px var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.brand__mark {
  width: 18px;
  height: 18px;
}

.brand__word {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav__platform {
  margin: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
}

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

main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(12px, 2vh, 20px);
  padding: clamp(24px, 6vh, 72px) var(--gutter) clamp(20px, 4vh, 48px);
  text-align: center;
}

.hero__headline {
  margin: 0;
  max-width: 820px;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.027em;
  text-wrap: balance;
}

.hero__sub {
  margin: 0;
  max-width: 560px;
  color: var(--text-muted);
  font-size: clamp(15px, 1.6vw, 16px);
  line-height: 1.5;
  text-wrap: pretty;
}

/* --- Waitlist form -------------------------------------------------------- */

.waitlist {
  width: 100%;
  max-width: 480px;
  margin-top: 12px;
}

.waitlist__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.waitlist__input {
  flex: 1 1 260px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.waitlist__input::placeholder {
  color: var(--text-dim);
}

.waitlist__input:hover {
  border-color: #4a4a56;
}

.waitlist__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(74 158 255 / 0.22);
}

.waitlist__input[aria-invalid='true'] {
  border-color: #f0883e;
}

.waitlist__submit {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}

.waitlist__submit:hover {
  background: #62adff;
}

.waitlist__submit:active {
  transform: translateY(1px);
}

.waitlist__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.waitlist__status {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 13px;
  color: var(--text-muted);
}

.waitlist__status[data-state='error'] {
  color: #f0883e;
}

.waitlist__status[data-state='success'] {
  color: #3fb950;
}

.waitlist__note {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 11px;
}

/* --- Rooms carousel ------------------------------------------------------- */

.rooms {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rooms__caption {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 var(--gutter);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.rooms__caption strong {
  color: var(--text);
  font-weight: 600;
}

.rooms__tabs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  padding: 0 var(--gutter);
}

.room-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 200ms var(--ease);
}

.room-tab:hover {
  color: var(--text-muted);
}

.room-tab__bar {
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: width 260ms var(--ease), background-color 200ms var(--ease);
}

.room-tab__label {
  font-size: 11px;
  font-weight: 500;
}

.room-tab[aria-current='true'] {
  color: var(--text);
}

.room-tab[aria-current='true'] .room-tab__bar {
  width: 28px;
}

.room-tab[aria-current='true'] .room-tab__label {
  font-weight: 600;
}

.carousel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  transition: transform 520ms var(--ease);
  /* The windows hang --lift below the carousel so the hover rise has something
     to reveal. Clipping here (rather than letting it spill) keeps that overhang
     out of the document's scrollable area, which is what otherwise makes the
     page scrollable by exactly --lift. The clip margin is what still lets the
     overhang paint once the strip rises. */
  overflow: clip;
  overflow-clip-margin: var(--lift);
}

/* Hovering the strip lifts it clear of the caption and tabs, so another 150px of
   the room shows without the page scrolling. This is deliberately keyed to the
   whole strip rather than the centred window: during a drag the centred window
   changes under the cursor, and a narrower condition drops and re-raises the
   strip mid-drag. */
@media (hover: hover) {
  .carousel:hover {
    transform: translateY(calc(var(--lift) * -1));
  }
}

.carousel__track {
  display: flex;
  align-items: stretch;
  height: calc(100% + var(--lift));
  gap: clamp(16px, 3vw, 40px);
  margin: 0;
  padding: 0 max(var(--gutter), calc((100% - min(1160px, 78vw)) / 2)) var(--lift);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__track:focus-visible {
  outline-offset: -4px;
}

/* Snapping fights a pointer drag, so it is suspended until the drag ends and
   the nearest slide is scrolled back into place. */
.carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.slide {
  flex: 0 0 auto;
  width: min(1160px, 78vw);
  height: 100%;
  scroll-snap-align: center;
  transform: scale(0.97);
  transform-origin: 50% 0;
  transition: transform 400ms var(--ease);
}

.slide.is-active {
  transform: scale(1);
}

.slide__frame {
  position: relative;
  height: calc(100% + var(--lift));
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 -8px 40px rgb(0 0 0 / 0.5);
  opacity: 0.45;
  transition: opacity 400ms var(--ease), border-color 200ms var(--ease);
}

.slide.is-active .slide__frame {
  opacity: 1;
}

/* A room off to the side is a target, not something to drag from. */
.slide:not(.is-active) .slide__frame {
  cursor: pointer;
}

.slide:not(.is-active) .slide__frame:hover {
  opacity: 0.7;
}

.slide__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  user-select: none;
  -webkit-user-drag: none;
}

.carousel__fade {
  position: absolute;
  top: 0;
  bottom: calc(var(--lift) * -1);
  width: clamp(24px, 10vw, 200px);
  pointer-events: none;
  z-index: 1;
}

.carousel__fade--left {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgb(14 14 16 / 0) 100%);
}

.carousel__fade--right {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, rgb(14 14 16 / 0) 100%);
}

/* --- Byline -------------------------------------------------------------- */

.byline {
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  z-index: 5;
}

.byline__link {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgb(29 29 34 / 0.82);
  backdrop-filter: blur(6px);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-decoration: none;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.byline__link strong {
  color: var(--text);
  font-weight: 500;
}

.byline__link:hover {
  color: var(--text);
  border-color: #4a4a56;
}

/* --- Load motion ---------------------------------------------------------- */

.reveal {
  animation: reveal 620ms var(--ease) both;
}

.reveal[data-reveal='1'] { animation-delay: 0ms; }
.reveal[data-reveal='2'] { animation-delay: 80ms; }
.reveal[data-reveal='3'] { animation-delay: 160ms; }
.reveal[data-reveal='4'] { animation-delay: 240ms; }
.reveal[data-reveal='5'] { animation-delay: 340ms; }

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

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 900px) {
  .carousel__track {
    gap: 12px;
    padding-inline: max(12px, calc((100% - 84vw) / 2));
  }

  .slide {
    width: 84vw;
  }

  .slide__frame {
    opacity: 0.6;
  }

  .slide.is-active .slide__frame {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .nav {
    justify-content: center;
  }

  .nav__platform {
    display: none;
  }

  .waitlist__row {
    flex-direction: column;
  }

  /* flex-basis becomes a height once the row stacks. */
  .waitlist__input {
    flex: 0 0 auto;
    width: 100%;
  }

  .waitlist__submit {
    width: 100%;
  }
}

/* --- Short viewports ------------------------------------------------------ */

/* Below this there is no room to hold everything on one screen, so the page
   goes back to scrolling and the screenshots take a fixed crop. */
@media (max-height: 640px) {
  :root {
    --lift: 0px;
  }

  html {
    height: auto;
    overflow: visible;
  }

  body {
    height: auto;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: visible;
  }

  body::after {
    content: none;
  }

  .carousel {
    min-height: 0;
  }

  .carousel__track {
    height: auto;
    padding-bottom: clamp(16px, 4vh, 32px);
  }

  .slide {
    height: auto;
  }

  .slide__frame {
    aspect-ratio: 1160 / 620;
    border-bottom: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
  }
}

/* Without JavaScript nothing marks the centred slide, so stop dimming them. */
@media (scripting: none) {
  .slide__frame {
    opacity: 1;
  }

  .slide {
    transform: none;
  }
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .carousel__track {
    scroll-behavior: auto;
  }

  .slide {
    transform: none;
  }
}