/* ============================================================
   BASEBLOOM · Concept 06 — Tactile Physics
   Sunshine yellow · ink outlines · hard toy shadows
   ============================================================ */

:root {
  --sun:    #ffd952;
  --sun-2:  #ffce29;
  --ink:    #141210;
  --ink-soft: #4c4638;
  --white:  #fffdf6;
  --coral:  #ff6b5e;
  --cobalt: #2f5bff;
  --mint:   #4be0b4;
  --shadow: 6px 6px 0 var(--ink);
  --display: "Unbounded", system-ui, sans-serif;
  --body:    "Karla", system-ui, sans-serif;
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--sun);
  color: var(--ink);
  font-family: var(--body); font-weight: 400; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--sun); }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--sun-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 0; }

/* ---------- top ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 0.9rem clamp(1.2rem, 3.5vw, 2.4rem);
  border-bottom: 2px solid var(--ink);
  background: var(--sun);
}
.top-brand {
  font-family: var(--display); font-weight: 800; font-size: 0.9rem;
  letter-spacing: 0.16em;
}
.top-note {
  margin-left: auto; font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
}
.top-cta {
  font-weight: 600; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--sun);
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 2px solid var(--ink);
  transition: background 0.3s, color 0.3s;
}
.top-cta:hover { background: var(--white); color: var(--ink); }

/* ---------- the pit ---------- */
.pit {
  position: relative; height: 100vh; overflow: hidden;
  border-bottom: 2px solid var(--ink);
  touch-action: none;    /* the pit is a toy: drags belong to the physics */
}
.pit-copy {
  position: absolute; z-index: 1;
  left: clamp(1.3rem, 5vw, 4rem); top: 50%; transform: translateY(-52%);
  max-width: 42rem; pointer-events: none;
}
.pit-copy > * { pointer-events: auto; }
.kicker {
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft); margin-bottom: 1rem;
}
.headline {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 5.6vw, 4.2rem); line-height: 1.04;
  letter-spacing: -0.01em; margin-bottom: 1.2rem;
}
.hl {
  background: var(--white); padding: 0 0.18em;
  border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: var(--shadow); display: inline-block; transform: rotate(-1.5deg);
}
.lede { font-size: clamp(0.98rem, 1.5vw, 1.12rem); max-width: 28rem; font-weight: 400; }

.hint {
  position: absolute; z-index: 1; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.55rem 1.2rem; box-shadow: var(--shadow);
  transition: opacity 0.6s var(--ease);
}
.hint.hidden { opacity: 0; }

/* tokens */
.tokens { position: absolute; inset: 0; z-index: 2; }
.token {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600;
  border: 2.5px solid var(--ink); border-radius: 50%;
  cursor: grab; user-select: none; -webkit-user-select: none;
  box-shadow: 5px 6px 0 rgba(20,18,16,0.9);
  will-change: transform;
  touch-action: none;
}
.token:active { cursor: grabbing; }
.t-white  { background: var(--white);  color: var(--ink); }
.t-coral  { background: var(--coral);  color: var(--ink); }
.t-cobalt { background: var(--cobalt); color: var(--white); }
.t-mint   { background: var(--mint);   color: var(--ink); }
.t-ink    { background: var(--ink);    color: var(--sun); }
.t-face   { font-size: 1.9rem; }

/* ---------- why ---------- */
.why { padding: clamp(3.5rem, 9vh, 6rem) clamp(1.3rem, 5vw, 4rem); }
.why-inner { max-width: 62rem; margin: 0 auto; }
.why-head {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.8rem); margin-bottom: 1.6rem;
}
.why-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.6rem 2.6rem; font-size: 1rem; max-width: 56rem;
}
.why-cols em { font-style: normal; background: var(--white); padding: 0 0.25em;
  border: 1.5px solid var(--ink); border-radius: 6px; }
.why-stats {
  margin-top: 2.6rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem;
}
.why-stats div {
  background: var(--white); border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
.why-stats dt { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft); margin-bottom: 0.2rem; }
.why-stats dd { font-family: var(--display); font-weight: 800; font-size: 1.5rem; }

/* generated toy still */
.toy-shot { margin-top: 2.4rem; }
.toy-shot img { display: block; width: 100%; max-height: 46vh; object-fit: cover;
  border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); }
.toy-shot figcaption { margin-top: 0.6rem; font-size: 0.8rem; font-style: italic; color: var(--ink-soft); }

/* ---------- closer ---------- */
.closer {
  text-align: center; border-top: 2px solid var(--ink);
  padding: clamp(4rem, 10vh, 6.5rem) 1.3rem;
  background: var(--sun-2);
}
.c-head {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.8rem); line-height: 1.05; margin-bottom: 1.1rem;
}
.c-text { max-width: 30rem; margin: 0 auto 2rem; font-size: 1.02rem; }
.c-cta {
  display: inline-block; font-family: var(--display); font-weight: 600;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  background: var(--ink); color: var(--sun);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 1rem 2rem; box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.c-cta:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }

/* ---------- foot ---------- */
.foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  padding: 1.4rem clamp(1.3rem, 5vw, 4rem) 2rem;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft);
  border-top: 2px solid var(--ink); background: var(--sun);
}
.foot-right { margin-left: auto; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .top-note { display: none; }
  .pit-copy { top: auto; bottom: 5.5rem; transform: none; right: 1.3rem; }
}

/* ---------- reduced motion: tokens rest in a tidy shelf ---------- */
@media (prefers-reduced-motion: reduce) {
  .tokens { position: absolute; inset: auto 1.3rem 6.5rem auto; display: flex; flex-wrap: wrap; gap: 0.7rem; max-width: 40vw; }
  .token { position: static; width: 74px !important; height: 74px !important; transform: none !important; }
  .hint { display: none; }
}