/* Klypst landing page. One centred hero on warm cream, with clips from a
   made-up history floating along the viewport edges. Tokens follow
   docs/brand.md; the dark palette is designed, not inverted. */

:root {
  color-scheme: light dark;
  --orange: #FF5A36;
  --orange-deep: #E94A2B;
  --orange-soft: #FF8A6A;
  --bg: #F8F5EF;
  --surface: #FFFDF9;
  --ink: #191919;
  --muted: #77736E;
  --line: #E8E3DB;
  --shadow: 25, 20, 10;
  --thumb-a: #FF8A6A;
  --thumb-b: #E94A2B;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0B0B;
    --surface: #191919;
    --ink: #FFFDF9;
    --muted: #A39E97;
    --line: #2A2724;
    --shadow: 0, 0, 0;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* the hero fills the viewport; clips hang off its edges */
}
@media (max-height: 640px) {
  body { overflow-x: hidden; overflow-y: auto; }
}

/* A restrained orange field behind the mascot. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(255, 90, 54, .16), rgba(255, 90, 54, 0) 70%);
}
@media (prefers-color-scheme: dark) {
  body::before {
    background: radial-gradient(60% 45% at 50% 42%, rgba(255, 90, 54, .20), rgba(255, 90, 54, 0) 70%);
  }
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

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

main.home {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 24px calc(96px + env(safe-area-inset-bottom, 0px));
}
@media (max-height: 640px) {
  main.home { justify-content: flex-start; padding-top: max(24px, env(safe-area-inset-top, 0px)); }
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mascot {
  display: block;
  width: 156px;
}
.mascot img {
  filter: drop-shadow(0 18px 28px rgba(233, 74, 43, .22));
  transform: translateZ(0);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.mascot:hover img { transform: translateY(-4px) rotate(-2deg); }

.hero h1 {
  margin: 26px 0 4px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.hero .tagline {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero .blurb {
  margin: 16px auto 0;
  max-width: 24em;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(var(--shadow), .14);
  transition: transform .18s cubic-bezier(.3, 1.35, .55, 1), box-shadow .18s ease;
}
.btn svg { width: 20px; height: 20px; fill: currentColor; margin-top: -2px; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(var(--shadow), .18); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
/* Pre-launch: same shape, but it is a label, not a link. */
.btn-soon { cursor: default; }
.btn-soon:hover { transform: none; box-shadow: 0 10px 24px rgba(var(--shadow), .14); }
.cta .fine {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* ---------- Fine links (pinned to the bottom) ---------- */

.fine-links {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.fine-links a,
.fine-links button {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.fine-links a:hover,
.fine-links button:hover { color: var(--ink); }
.fine-links button {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fine-links button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Floating clips ---------- */

/* Edges only: each card sits in the outer gutters and several are cropped
   by the viewport, so the centre column stays clear for the hero. */
.clips {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.clip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(var(--shadow), .08), 0 1px 2px rgba(var(--shadow), .05);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  will-change: transform;
  /* Gentle bob. Negative delays start each card mid-cycle, so they drift
     out of sync instead of pumping together. The tilt lives in the
     keyframes because the animation owns transform. */
  animation: clip-float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}
.clip .body { overflow: hidden; text-overflow: ellipsis; }
.clip .kind {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg);
  color: var(--muted);
}
.clip .kind svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.clip-link .body { color: var(--orange-deep); }
@media (prefers-color-scheme: dark) { .clip-link .body { color: var(--orange-soft); } }
.clip .thumb {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  background:
    radial-gradient(120% 90% at 20% 15%, var(--thumb-a), var(--thumb-b) 65%, #B83A22);
}
.clip-image .body { color: var(--muted); }
.clip .pin {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  margin-left: 2px;
}

@keyframes clip-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(var(--amp, -8px)) rotate(var(--rot, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .clip { animation: none; transform: rotate(var(--rot, 0deg)); }
}

/* Placement. Left side, top to bottom, then right side. */
.c-address  { top: 9%;    left: -28px;  --rot: -5deg; --dur: 7.2s; --delay: -1.8s; --amp: -10px; }
.c-link     { top: 34%;   left: 4%;     --rot: 3deg;  --dur: 6.1s; --delay: -3.1s; --amp: -8px; }
.c-photo    { top: 58%;   left: -12px;  --rot: -7deg; --dur: 6.6s; --delay: -4.2s; --amp: -11px; }
.c-wifi     { bottom: 9%; left: 12%;    --rot: 4deg;  --dur: 8.1s; --delay: -5.4s; --amp: -9px; }
.c-code     { top: 6%;    right: 10%;   --rot: 6deg;  --dur: 7.8s; --delay: -6.3s; --amp: -10px; }
.c-phone    { top: 30%;   right: -20px; --rot: -4deg; --dur: 5.6s; --delay: -1.2s; --amp: -12px; }
.c-tracking { top: 55%;   right: 5%;    --rot: 5deg;  --dur: 6.9s; --delay: -5.0s; --amp: -9px; }
.c-quote    { bottom: 12%; right: -30px; --rot: -3deg; --dur: 7.5s; --delay: -2.1s; --amp: -8px; }
.c-photo2   { top: 2%;    left: 34%;    --rot: 8deg;  --dur: 5.2s; --delay: -0.9s; --amp: -7px; }

/* Narrow screens: fewer cards, pushed further out, so nothing touches the copy. */
@media (max-width: 760px) {
  .clip { font-size: 13px; padding: 10px 12px; max-width: 210px; }
  .c-address  { top: 4%;   left: -60px; }
  .c-code     { top: 10%;  right: -70px; }
  .c-photo    { top: 74%;  left: -24px; }
  .c-quote    { bottom: 14%; right: -90px; }
  .c-link, .c-wifi, .c-phone, .c-tracking, .c-photo2 { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .c-photo, .c-quote { display: none; }
}

/* ---------- Entrance choreography ---------- */

/* First visit: mascot and name only, then the clips slide in from their
   nearest edge, then the copy fades up. The resting states equal the
   defaults, so removing the classes afterwards changes nothing. */
html.intro .clip {
  opacity: 0;
  transform: translate(var(--in-x, 0px), var(--in-y, 0px)) rotate(var(--rot, 0deg));
  animation: none;
  transition: none;
}
html.intro.intro-clips .clip {
  opacity: 1;
  transform: translate(0, 0) rotate(var(--rot, 0deg));
  transition: transform .6s cubic-bezier(.3, 1.35, .55, 1) var(--in-delay, 0s),
              opacity .35s ease-out var(--in-delay, 0s);
}
.c-address  { --in-x: -320px; --in-delay: .05s; }
.c-link     { --in-x: -280px; --in-delay: .28s; }
.c-photo    { --in-x: -300px; --in-delay: .16s; }
.c-wifi     { --in-x: -180px; --in-y: 220px; --in-delay: .34s; }
.c-code     { --in-x: 200px;  --in-y: -200px; --in-delay: .10s; }
.c-phone    { --in-x: 320px;  --in-delay: .22s; }
.c-tracking { --in-x: 300px;  --in-delay: .02s; }
.c-quote    { --in-x: 260px;  --in-y: 200px; --in-delay: .30s; }
.c-photo2   { --in-y: -220px; --in-delay: .40s; }

html.intro .hero .tagline,
html.intro .hero .blurb,
html.intro .hero .cta,
html.intro .fine-links {
  opacity: 0;
  transform: translateY(10px);
}
html.intro.intro-ui .hero .tagline,
html.intro.intro-ui .hero .blurb,
html.intro.intro-ui .hero .cta,
html.intro.intro-ui .fine-links {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease var(--ui-delay, 0s),
              transform .55s cubic-bezier(.22, 1, .36, 1) var(--ui-delay, 0s);
}
html.intro-ui .hero .tagline { --ui-delay: 0s; }
html.intro-ui .hero .blurb   { --ui-delay: .1s; }
html.intro-ui .hero .cta     { --ui-delay: .2s; }
html.intro-ui .fine-links    { --ui-delay: .32s; }

/* ---------- Privacy page ---------- */

main.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
main.page .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
main.page .brand img { width: 32px; }
main.page h1 { font-size: 34px; letter-spacing: -0.03em; line-height: 1.1; margin: 36px 0 8px; }
main.page .updated { margin: 0 0 28px; color: var(--muted); font-size: 14px; }
main.page h2 { font-size: 19px; letter-spacing: -0.015em; margin: 32px 0 8px; }
main.page p, main.page li { color: var(--muted); }
main.page strong { color: var(--ink); font-weight: 600; }
main.page ul { padding-left: 20px; }
body.has-page { overflow: auto; }
body.has-page::before { display: none; }