/* ---------------------------------------------------------------- */
/* Fonts — self-hosted, extracted from the A Pedir Cacao brand system */
/* ---------------------------------------------------------------- */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/SourceSerif4-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/PublicSans-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-500-latin.woff2') format('woff2');
}

/* ---------------------------------------------------------------- */
/* Tokens — ported from the A Pedir Cacao design system              */
/* Light cream theme: cacao is now an accent (bar, button, text),    */
/* not the page's dominant field color.                              */
/* ---------------------------------------------------------------- */
:root {
  --color-cream: oklch(0.97 0.01 80);
  --color-cream-panel: oklch(0.945 0.012 75);
  --color-cacao: oklch(0.32 0.045 42);
  --color-cacao-deep: oklch(0.2 0.04 40);
  --color-cacao-light: oklch(0.47 0.06 44);
  --color-cacao-light-dim: oklch(0.4 0.055 43);
  --color-line: oklch(0.85 0.016 70);
  --color-accent: oklch(0.36 0.08 38);
  --color-gold: oklch(0.68 0.12 75);
  --color-gold-dim: oklch(0.54 0.1 75);
  --color-ink: oklch(0.22 0.035 42);
  --color-ink-soft: oklch(0.36 0.035 45);
  --color-ink-muted: oklch(0.5 0.025 55);

  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --bar-w: 150px;
  --bar-h: 218px;
  --bar-d: 12px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- */
/* Layout                                                            */
/* ---------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  gap: 4px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink-muted);
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.eyebrow__glyph {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ---------------------------------------------------------------- */
/* The chocolate bar — real CSS 3D geometry, six faces               */
/* ---------------------------------------------------------------- */
.bar-stage {
  width: var(--bar-w);
  height: var(--bar-h);
  perspective: 900px;
  margin-bottom: 20px;
  /* drop-shadow lives here, not on .bar: a filter on the same element as
     transform-style: preserve-3d forces Chrome to flatten the 3D box into
     a 2D layer before compositing, which silently hid all of the bar's
     depth (side faces) regardless of --bar-d. */
  filter: drop-shadow(0 16px 22px oklch(0.3 0.045 42 / 0.22));
}

.bar {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin-bar 9s linear infinite;
  /* Each face rounds its own corners independently, so their curves don't
     line up perfectly in 3D through every rotation angle — a hairline
     sliver can show at the seams. Filling .bar itself with the dark cacao
     tone (it sits as a flat backing plane behind/between the faces) means
     any such sliver reads as chocolate shadow, not a gap to the page. */
  background: var(--color-cacao-deep);
  border-radius: 9px;
}

@keyframes spin-bar {
  from { transform: rotateY(0deg) rotateX(6deg); }
  to   { transform: rotateY(360deg) rotateX(6deg); }
}

.bar__face {
  position: absolute;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--color-cacao) 0%, var(--color-cacao-deep) 70%);
  /* Belt-and-braces seam fix: each face's corners round independently, so
     at some spin angles the browser's per-pixel face sort flickers along
     the shared edge, anti-aliasing a hairline of page background into the
     boundary pixels. An inset dark edge (rather than an outward box-shadow,
     which haloed the bar's true outer corners) darkens each face's own
     boundary pixels so that blend reads as chocolate, not a gap. */
  box-shadow: inset 0 0 0 1.5px var(--color-cacao-deep);
}

.bar__face--front,
.bar__face--back {
  /* 2px larger than the box and centered (top/left: -1px) so this face
     overlaps the side faces' edges by a hair — without it, the two faces'
     independently-rounded corners don't line up at every rotation angle
     and a hairline gap flickers along the seam as the bar spins. */
  width: calc(var(--bar-w) + 2px);
  height: calc(var(--bar-h) + 2px);
  top: -1px; left: -1px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 12px;
  background:
    linear-gradient(135deg, oklch(0.48 0.05 42 / 0.4) 0%, transparent 40%),
    linear-gradient(150deg, var(--color-cacao) 0%, var(--color-cacao-deep) 70%);
}
.bar__face--front { transform: translateZ(calc(var(--bar-d) / 2)); }
.bar__face--back   { transform: rotateY(180deg) translateZ(calc(var(--bar-d) / 2)); }

.bar__square {
  border-radius: 4px;
  background: linear-gradient(155deg, var(--color-cacao) 0%, var(--color-cacao-deep) 100%);
  box-shadow:
    inset 1px 1px 0 oklch(0.44 0.05 42 / 0.55),
    inset -1px -1px 0 oklch(0.12 0.03 40 / 0.7);
}

.bar__face--top,
.bar__face--bottom {
  width: var(--bar-w);
  height: var(--bar-d);
  left: 0;
  top: calc((var(--bar-h) - var(--bar-d)) / 2);
  /* The shared 9px .bar__face radius is sized for the big front/back faces;
     on a strip only --bar-d thin it would eat most of the width, ballooning
     into a pill shape. Scale it down with the strip so the corner stays a
     small, crisp curve instead of a blob. */
  border-radius: min(9px, calc(var(--bar-d) / 3));
  background: linear-gradient(180deg, var(--color-cacao) 0%, var(--color-cacao-deep) 100%);
}
.bar__face--top    { transform: rotateX(90deg) translateZ(calc(var(--bar-h) / 2)); }
.bar__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--bar-h) / 2)); }

.bar__face--left,
.bar__face--right {
  width: var(--bar-d);
  height: var(--bar-h);
  top: 0;
  left: calc((var(--bar-w) - var(--bar-d)) / 2);
  /* Same reasoning as .bar__face--top/bottom: scale the corner radius down
     with the strip's own thickness instead of inheriting the front face's
     9px, which would balloon into a pill shape on a thin edge. */
  border-radius: min(9px, calc(var(--bar-d) / 3));
  /* Fades to the dark cacao tone at the very top/bottom: the front/back
     faces round their own corners independently of this one, so right at
     the notch a flat lighter edge color would clash against the darker
     rounded corner it's tucked behind. Matching the tone there hides the
     seam; the lighter highlight only needs to read in the strip's middle. */
  background: linear-gradient(180deg,
    var(--color-cacao-deep) 0%,
    var(--color-cacao-light) 18%,
    var(--color-cacao-light-dim) 82%,
    var(--color-cacao-deep) 100%);
}
.bar__face--left  { transform: rotateY(-90deg) translateZ(calc(var(--bar-w) / 2)); }
.bar__face--right { transform: rotateY(90deg) translateZ(calc(var(--bar-w) / 2)); }

@media (prefers-reduced-motion: reduce) {
  .bar { animation: none; transform: rotateY(-26deg) rotateX(6deg); }
}

/* ---------------------------------------------------------------- */
/* Text                                                               */
/* ---------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 46px);
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--color-ink);
}

.tagline {
  font-size: 17px;
  color: var(--color-ink-soft);
  margin: 0 0 4px;
}

.description {
  font-size: 15px;
  color: var(--color-ink-muted);
  margin: 0 0 22px;
  max-width: 34ch;
}

/* ---------------------------------------------------------------- */
/* Signup                                                             */
/* ---------------------------------------------------------------- */
.signup {
  display: flex;
  width: 100%;
  max-width: 380px;
  gap: 8px;
}

.signup input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 13px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-line);
  background: var(--color-cream-panel);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 15px;
}
.signup input[type="email"]::placeholder {
  color: var(--color-ink-muted);
}

.signup button {
  padding: 13px 20px;
  border-radius: 6px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.signup button:hover {
  background: oklch(0.3 0.08 38);
}

.signup input:focus-visible,
.signup button:focus-visible {
  outline: 2px solid var(--color-gold-dim);
  outline-offset: 2px;
}

.signup__status {
  min-height: 20px;
  font-size: 13.5px;
  color: var(--color-ink-muted);
  margin: 10px 0 0;
}
.signup__status[data-state="ok"]   { color: oklch(0.5 0.11 75); }
.signup__status[data-state="err"] { color: oklch(0.52 0.15 30); }

.footnote {
  margin-top: 24px;
  font-size: 12.5px;
  color: var(--color-ink-muted);
  opacity: 0.85;
}
.mono {
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------- */
/* Small screens                                                     */
/* ---------------------------------------------------------------- */
@media (max-width: 420px) {
  :root {
    --bar-w: 132px;
    --bar-h: 192px;
    --bar-d: 10px;
  }
  .signup {
    flex-direction: column;
  }
  .signup button {
    width: 100%;
  }
}