/* ============================================================
   suenavus.com homepage — layout styles
   (visual tokens come from colors_and_type.css)
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding: var(--s-9) 0; }
.section--tight { padding: var(--s-8) 0; }
.section--dark {
  background: var(--ink);
  color: var(--fg-on-deep);
  position: relative;
  overflow: hidden;
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--paper); }
.section--dark p { color: var(--fg-on-deep-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-soft);
  font-weight: var(--w-medium);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow .marker { color: var(--tide); }
.section--dark .eyebrow { color: var(--fg-on-deep-muted); }
.section--dark .eyebrow .marker { color: var(--sky); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: 15px;
  padding: 13px 20px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-glide), border-color var(--dur-fast) var(--ease-glide), color var(--dur-fast) var(--ease-glide);
  letter-spacing: -0.005em;
  text-decoration: none;
}
.btn-primary { background: var(--tide); color: var(--paper); }
.btn-primary:hover { background: var(--action-hover); color: var(--paper); }
.btn-primary:active { background: var(--action-press); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--fog-300); }
.btn-secondary:hover { border-color: var(--ink); background: var(--fog-50); }
.section--dark .btn-secondary { color: var(--paper); border-color: var(--border-on-deep); }
.section--dark .btn-secondary:hover { border-color: var(--paper); background: rgba(255,255,255,0.04); }
.btn-ghost { background: transparent; color: var(--ink); padding-left: 0; padding-right: 0; }
.btn-ghost::after { content: "→"; transition: transform var(--dur-base) var(--ease-tide); margin-left: 6px; }
.btn-ghost:hover::after { transform: translateX(4px); }
.section--dark .btn-ghost { color: var(--paper); }

/* ---- Card base ---- */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-6);
  transition: transform var(--dur-base) var(--ease-tide), box-shadow var(--dur-base) var(--ease-tide), border-color var(--dur-base) var(--ease-tide);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--fog-300); }

/* ---- Section markers (/ 01) ---- */
.marker-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--tide);
}

/* ---- Anim utilities ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp var(--dur-tidal) var(--ease-out) both; }
.reveal-1 { animation-delay: 60ms; }
.reveal-2 { animation-delay: 140ms; }
.reveal-3 { animation-delay: 220ms; }
.reveal-4 { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}