/* nobother website. Colours and faces follow the app's own design system
   (ours.css): Newsreader for the wordmark, headline and captions, Hanken
   Grotesk for the small print (the step rail and the footnote),
   the warm cream ground, and the couple's colours: lavender for "both" and
   coral for the full stop. One deliberate light look: every colour is
   painted explicitly. */

:root {
  --ground: #F0E9E0;
  --ink: #2C2622;
  --soft: #8A7F76;
  --faint: #AFA396;
  --line: #E3D8CA;
  --node: #D8CCBD;
  --lav: #7C6FB8;
  --lav-done: #CFC3E6;
  --lav-halo: rgba(124, 111, 184, .18);
  --coral: #E5836B;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* One size for the rotating lines and the screen captions (owner). */
  --line-size: clamp(20px, 1.8vw, 26px);
  color-scheme: light;
}

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

html {
  background: var(--ground);
  overflow-x: clip;
}

body {
  margin: 0;
  padding-inline: 16px;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; }

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

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

/* ---- Hero: the wordmark and the rotating line --------------------------- */

.hero {
  position: relative;
  z-index: 250;
  max-width: 1100px;
  margin-inline: auto;
  padding-block: clamp(22px, 4.5vh, 48px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.8vh, 30px);
  text-align: center;
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--ink);
}
.wordmark .both { color: var(--lav); }
.wordmark .dot { color: var(--coral); }

/* The three lines share one grid cell, so the hero never jumps as they turn. */
.headline {
  margin: 0;
  display: grid;
  justify-items: center;
  max-width: 36ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--line-size);
  line-height: 1.25;
  color: var(--ink);
}
.headline-line {
  grid-area: 1 / 1;
  text-wrap: balance;
  transition: opacity .7s ease, transform .7s ease;
}
.headline-line + .headline-line { opacity: 0; }
.headline.is-rotating .headline-line { opacity: 0; transform: translateY(.3em); }
.headline.is-rotating .headline-line.is-on { opacity: 1; transform: none; }

/* ---- The tour: a plain scrolling page first -----------------------------
   Without the ring (reduced motion, or before the script runs) the hero
   sits above a list of screens, each above its caption, with the footnote
   at the end, so the whole story is readable as an ordinary page. */

.tour {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
}
.tour-stage { position: relative; }

.shots {
  list-style: none;
  margin: 0;
  padding: 56px 0 32px;
  display: grid;
  gap: clamp(56px, 9vw, 104px);
}
.shot {
  display: grid;
  justify-items: center;
  gap: 40px;
  text-align: center;
}
.shot .phone-art { width: 100%; max-width: 300px; }

/* A screen: the base image with its animation layers stacked exactly on
   top, clipped to the phone's rounded corners; the shadow sits outside. */
.phone-art {
  position: relative;
  filter: drop-shadow(0 28px 34px rgba(64, 48, 38, .24)) drop-shadow(0 6px 12px rgba(64, 48, 38, .12));
}
.phone-clip {
  position: relative;
  overflow: hidden;
  border-radius: 11.3% / 5.2%;
}
.phone-clip img {
  display: block;
  width: 100%;
  height: auto;
}
.phone-clip .layer {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* Captions share the wordmark and headline's face and size. */
.cap {
  margin: 0;
  max-width: 30ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--line-size);
  line-height: 1.28;
  text-wrap: balance;
}

@media (max-width: 640px) {
  :root { --line-size: 18px; }
  .shot .phone-art { max-width: 270px; }
}

.ring-captions { display: none; }

/* ---- Footnote: two quiet centred lines ----------------------------------- */

.foot {
  max-width: 1080px;
  margin: 48px auto 0;
  padding-block: 18px 28px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.6;
  color: var(--faint);
  text-align: center;
  text-wrap: balance;
}
.foot p { margin: 0; }
.foot a {
  text-decoration-color: rgba(175, 163, 150, .5);
  text-underline-offset: 3px;
}
.foot a:hover { color: var(--soft); }

/* ---- The site as one still screen ----------------------------------------
   The script turns this on: the page stops scrolling altogether (no
   scrollbar) and becomes one screen holding the logo, the lines, the ring,
   the caption and the footnote. The mouse wheel, a trackpad, a swipe or
   the arrow keys turn the ring instead. */

html.ring-page,
html.ring-page body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.tour.ring-on {
  max-width: none;
  margin-inline: -16px;
  height: 100vh;
  height: 100svh;
}
.tour.ring-on .tour-stage {
  height: 100%;
  overflow: hidden;
  touch-action: none;
}
.tour.ring-on .hero { padding-inline: 16px; }

/* A soft lavender glow behind the ring: an oval sized to the ring that fades
   to nothing before its own edges, so no edge ever shows. */
.tour.ring-on .tour-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--ring-y, 50%);
  width: var(--ring-w, 70vw);
  height: var(--ring-h, 70vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(149, 133, 196, .15), rgba(149, 133, 196, .06) 55%, rgba(149, 133, 196, 0) 100%);
  pointer-events: none;
}

.tour.ring-on .shots {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
}
.tour.ring-on .shot {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}
.tour.ring-on .shot .phone-art { max-width: none; }
.tour.ring-on .shot .cap { display: none; }

.tour.ring-on .foot {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: clamp(10px, 2vh, 20px);
  z-index: 250;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Screens away from the front show their opening state, exactly what the
   viewer will see the moment the screen arrives (owner, 15 Sep 2026); the
   layers only play in once it settles front and centre, and fold away
   again when it leaves. */
.tour.ring-on .shot .layer { opacity: 0; }
.tour.ring-on .shot.is-front.is-playing .layer {
  animation: layer-rise .7s cubic-bezier(.2, .75, .25, 1) var(--delay, 0s) both;
}
.tour.ring-on .shot.is-front.is-playing .layer[data-anim="up"] {
  animation-name: layer-up;
  animation-duration: .85s;
}
.tour.ring-on .shot.is-front.is-playing .layer[data-anim="reveal"] {
  animation-name: layer-reveal;
  animation-duration: .95s;
  animation-timing-function: cubic-bezier(.45, 0, .2, 1);
}
/* A slower rise, for the changes screen's last message and card. */
.tour.ring-on .shot.is-front.is-playing .layer[data-anim="rise-slow"] {
  animation-duration: 1.05s;
}
/* Screens shown in a single state: their layers are simply part of the
   picture, never hidden and never played. */
.tour.ring-on .shot .layer[data-anim="none"],
.tour.ring-on .shot.is-front .layer[data-anim="none"],
.tour.ring-on .shot.is-front.is-playing .layer[data-anim="none"] {
  opacity: 1;
  animation: none;
}
@keyframes layer-rise {
  from { opacity: 0; transform: translateY(2%); }
  to { opacity: 1; transform: none; }
}
@keyframes layer-up {
  from { opacity: 1; transform: translateY(62%); }
  to { opacity: 1; transform: none; }
}
@keyframes layer-reveal {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* The rail and the caption are placed separately: the rail on the left,
   level with the ring, and the caption centred under the front screen. */
.tour.ring-on .ring-captions {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

/* The six steps as a dated-style rail, like the app's agreement timeline. */
.spine {
  position: absolute;
  left: clamp(24px, 5vw, 90px);
  top: var(--ring-y, 50%);
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
}
.spine::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.spine-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  cursor: pointer;
}
.spine-node::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: inset 0 0 0 2px var(--node);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.spine-node:hover { color: var(--soft); }
.spine-node.is-done::before { background: var(--lav-done); box-shadow: none; }
.spine-node.is-active { color: var(--ink); }
.spine-node.is-active::before { background: var(--lav); box-shadow: 0 0 0 4px var(--lav-halo); }

.ring-cap-stack {
  position: absolute;
  left: 50%;
  top: var(--cap-top, 80%);
  transform: translateX(-50%);
  width: min(620px, calc(100% - 32px));
  display: grid;
  justify-items: center;
  text-align: center;
}
.ring-cap {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 36ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--line-size);
  line-height: 1.25;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.ring-cap.is-active { opacity: 1; transform: none; }

@media (max-width: 959px) {
  /* On a narrow screen the rail becomes a row of dots under the screen,
     with the caption beneath it. */
  .spine {
    left: 50%;
    top: var(--cap-top, 72%);
    transform: translateX(-50%);
    flex-direction: row;
    gap: 12px;
  }
  .spine::before { left: 7px; right: 7px; top: 6px; bottom: auto; width: auto; height: 2px; }
  .spine-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ring-cap-stack { top: calc(var(--cap-top, 72%) + 30px); }
  .ring-cap { line-height: 1.28; max-width: 30ch; }
  .foot { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .headline-line, .ring-cap, .spine-node::before { transition: none; }
  .tour .shot .layer { animation: none !important; opacity: 1 !important; }
}