/* Colours and shapes are the app's, from web/design-system.css. Type is larger on purpose. */
:root {
  --ink: #203a3c;
  --quiet: #4f6160;
  --paper: #f3f1e9;
  --panel: #fffef9;
  --line: #d9ddd3;
  --accent: #e7b35c;
  --deep: #172f31;
  --chalk: #fffef9;
  --radius: 14px;
  --gutter: 24px;
  --caption-h: 46px;
  --cave-w: min(100vw, 560px);
  --stage-h: calc(var(--cave-w) * 0.282 + var(--caption-h) + env(safe-area-inset-bottom, 0px));
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3f1e9;
    --quiet: #b5bdb9;
    --paper: #172f31;
    --panel: #203a3c;
    --line: #35504f;
    --deep: #0d2022;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding-bottom: calc(var(--stage-h) + 14px);
  background: var(--paper);
  color: var(--ink);
  font: 21px/1.55 "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Top bar: the app's header, with the two ways in. */
.topbar {
  background: var(--deep);
  color: var(--paper);
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
}
.topbar-inner {
  max-width: 40rem;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 24px;
  line-height: 0.95;
  text-transform: uppercase;
}
.brand svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}
/* Create on the left, Sign in on the right: two equal buttons, like the app's tabs. */
.topbar nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  background: #fffef9;
  color: #172f31;
}

/* One thought per screen, with room around it. */
main { max-width: 40rem; margin: 0 auto; padding: 0 var(--gutter); }

section {
  min-height: calc(100vh - var(--stage-h));
  min-height: calc(100svh - var(--stage-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 0;
  scroll-margin-top: 0;
}
section + section { border-top: 1px solid var(--line); }
.hero { min-height: 0; padding-top: 56px; padding-bottom: 96px; }

h1, h2 {
  margin: 0 0 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.14;
  text-wrap: balance;
}
h1 { font-size: 44px; letter-spacing: -0.035em; }
h2 { font-size: 32px; }

p { margin: 0 0 20px; }
section > :last-child { margin-bottom: 0; }

/* The app's small spaced-out line above a heading, kept large enough to read. */
.eyebrow {
  margin: 0 0 16px;
  color: var(--quiet);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow.answer { margin-top: 12px; }
.eyebrow.answer::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: var(--accent);
}

ul { margin: 0 0 20px; padding: 0; list-style: none; }
.said li {
  margin-bottom: 10px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 600;
}
.rules li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.rules li:last-child { border-bottom: 1px solid var(--line); }

.colophon {
  margin-top: 56px;
  color: var(--quiet);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  body { font-size: 23px; }
  h1 { font-size: 60px; }
  h2 { font-size: 40px; }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .captions p { font-size: 22px; }
}

/* ---------- The picture at the bottom of the page ---------- */

.stage {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--stage-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--deep);
  color: var(--chalk);
  pointer-events: none;
  /* Its own layer, so its moving lines never make the browser repaint the text scrolling above it. */
  transform: translateZ(0);
  contain: layout style;
}
.edge {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: 14px;
  fill: var(--deep);
}

.captions {
  display: grid;
  height: var(--caption-h);
  padding: 0 16px;
  align-items: end;
  justify-items: center;
}
.captions p {
  grid-area: 1 / 1;
  margin: 0;
  font: italic 19px/1.2 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.captions p.is-on { opacity: 0.92; transition-delay: 0.3s; }
@media (max-width: 359px) { .captions p { font-size: 17px; } }

.cave {
  display: block;
  width: var(--cave-w);
  margin: 0 auto;
  overflow: visible;
  fill: none;
  stroke: var(--chalk);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cave .f { fill: var(--chalk); stroke: none; }
.cave .bg { fill: var(--deep); }
.ground { opacity: 0.55; }

/* A picture that is not showing is not painted at all. */
.scene { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; }
.scene.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }

/* Lines that draw themselves. The dash is one path long; it slides into view. */
.d { stroke-dasharray: 1 2; stroke-dashoffset: 1.05; }
.is-on .d { animation: draw 1.1s ease-out both; }
.is-on .d.slow { animation-duration: 2.4s; }
.is-on .d2 { animation-delay: 0.45s; }
.is-on .d3 { animation-delay: 0.9s; }
.is-on .d4 { animation-delay: 1.35s; }
.is-on .d5 { animation-delay: 1.9s; }
.is-on .d6 { animation-delay: 2.5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* The brushed circle: drawn once, never quite closed. */
.enso { stroke-width: 3.6; stroke-dasharray: 0.93 2; stroke-dashoffset: 0.98; }
.is-on .enso { animation: draw 2.6s 0.8s cubic-bezier(0.5, 0, 0.2, 1) both; }

/* Butler blinks. */
.eyes circle { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.eyes { transition: opacity 0.4s; }
.stage[data-scene="rest"] .eyes { opacity: 0; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }

/* Loops shared by several pictures; .r2 to .r4 start a little later. */
.r2 { animation-delay: 0.7s !important; }
.r3 { animation-delay: 1.4s !important; }
.r4 { animation-delay: 2.1s !important; }

.smoke, .rise, .drop, .rain, .puff, .zed, .chirp, .dust { opacity: 0; }

.is-on .smoke, .is-on .rise { animation: rise 3.4s ease-in-out infinite; }
@keyframes rise {
  0% { opacity: 0; transform: translateY(6px); }
  40% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-8px); }
}

.is-on .drop { animation: drop 3.6s ease-in infinite; }
@keyframes drop {
  0% { opacity: 0; transform: translateY(-46px); }
  15% { opacity: 1; }
  55% { opacity: 1; transform: translateY(0); }
  70%, 100% { opacity: 0; transform: translateY(8px); }
}

.sweep { transform-origin: 250px 26px; }
.is-on .sweep { animation: sweep 1.9s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
.is-on .dust { animation: dust 3.8s ease-in-out infinite; }
@keyframes dust { 0%, 100% { opacity: 0; } 50% { opacity: 0.9; transform: translateY(-3px); } }

.road { stroke-dasharray: 14 18; opacity: 0.55; }
.is-on .road { animation: road 1.3s linear infinite; }
@keyframes road { to { stroke-dashoffset: 32; } }
.is-on .bob { animation: bob 0.9s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-1.4px); } }
.w1 { transform-origin: 214px 88px; }
.w2 { transform-origin: 268px 88px; }
.is-on .spin { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.is-on .puff { animation: puff 2.1s ease-out infinite; }
@keyframes puff {
  0% { opacity: 0; }
  30% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-10px, -6px); }
}

.is-on .file { animation: file 5s ease-in-out infinite; }
@keyframes file {
  0%, 30% { transform: translateY(-6px); }
  90%, 100% { transform: translateY(54px); }
}

.is-on .rain { animation: rain 1.5s linear infinite; }
@keyframes rain {
  0% { opacity: 0; }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-9px, 28px); }
}

.hop { transform-origin: 262px 49px; }
.is-on .hop { animation: hop 4.2s ease-in-out infinite; }
@keyframes hop {
  0%, 62%, 78%, 100% { transform: translateY(0); }
  68% { transform: translateY(-5px) rotate(-4deg); }
  73% { transform: translateY(0); }
  75% { transform: translateY(-2px); }
}
.is-on .chirp { animation: chirp 4.2s ease-in-out infinite; }
@keyframes chirp { 0%, 20%, 55%, 100% { opacity: 0; } 30%, 45% { opacity: 0.9; } }

.sway { transform-box: fill-box; transform-origin: 50% 100%; }
.is-on .sway { animation: sway 3.2s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

.is-on .twinkle { animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.is-on .zed { animation: zed 4.2s ease-in-out infinite; }
@keyframes zed {
  0% { opacity: 0; transform: translateY(6px); }
  40% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(4px, -10px); }
}

/* A short, wide screen (a phone on its side): keep the picture small and drop the caption. */
@media (max-height: 520px) {
  :root { --caption-h: 8px; --cave-w: min(100vw, 300px); }
  .captions { display: none; }
}

/* Stillness on request: every picture is shown complete, and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage *, .stage *::before { animation: none !important; transition: none !important; }
  .d, .enso { stroke-dashoffset: 0; }
  .smoke, .rise, .drop, .rain, .puff, .zed, .chirp, .dust { opacity: 0.8; }
}