/* ──────────────────────────────────────────────────────────────
   SIZZLE — design tokens
   Warm, food-forward palette · terracotta / amber / cream
   ────────────────────────────────────────────────────────────── */

:root {
  /* surfaces */
  --cream:    oklch(0.976 0.012 78);
  --cream-2:  oklch(0.958 0.017 74);
  --paper:    oklch(0.992 0.006 86);
  --line:     oklch(0.886 0.014 74);
  --line-2:   oklch(0.828 0.018 70);

  /* ink */
  --ink:      oklch(0.245 0.018 48);
  --ink-soft: oklch(0.455 0.022 52);
  --ink-mute: oklch(0.595 0.022 56);

  /* accent (overridable by Tweaks) */
  --accent:      oklch(0.635 0.142 40);
  --accent-deep: oklch(0.515 0.132 36);
  --accent-soft: oklch(0.93 0.045 60);
  --accent-ink:  oklch(0.99 0.01 80);

  /* fixed warm secondaries */
  --amber:    oklch(0.795 0.128 73);
  --amber-2:  oklch(0.86 0.10 80);
  --wine:     oklch(0.305 0.062 30);
  --wine-2:   oklch(0.255 0.05 32);
  --nav-bg:   oklch(0.976 0.012 78 / 0.82);

  /* type (display overridable by Tweaks) */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 36px;

  --shadow-sm: 0 1px 2px oklch(0.3 0.03 50 / 0.06), 0 2px 6px oklch(0.3 0.03 50 / 0.05);
  --shadow-md: 0 6px 20px oklch(0.3 0.03 50 / 0.08), 0 2px 8px oklch(0.3 0.03 50 / 0.05);
  --shadow-lg: 0 24px 60px oklch(0.28 0.04 48 / 0.16), 0 8px 24px oklch(0.28 0.04 48 / 0.10);
  --shadow-phone: 0 50px 90px oklch(0.25 0.05 45 / 0.30), 0 18px 40px oklch(0.25 0.05 45 / 0.18);

  --maxw: 1200px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* serif display variant gets a touch more weight tuning */
:root[data-display="serif"] h1,
:root[data-display="serif"] h2,
:root[data-display="serif"] h3 { letter-spacing: -0.012em; font-weight: 600; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ── shared layout helpers ───────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 100px;
  padding: 14px 24px;
  transition: transform .18s cubic-bezier(.3,.8,.4,1), box-shadow .18s, background .18s, color .18s;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px oklch(0.6 0.14 40 / 0.30); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px oklch(0.6 0.14 40 / 0.38); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--ink); background: var(--paper); }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── video placeholder slot ──────────────────────────────── */
.vslot {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(48deg,
      oklch(0.7 0.07 55 / 0.10) 0 11px,
      oklch(0.7 0.07 55 / 0.02) 11px 22px),
    linear-gradient(150deg, var(--accent-soft), var(--cream-2));
  isolation: isolate;
}
.vslot::after { /* moving sheen → suggests a playing video */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, oklch(1 0 0 / 0.42) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: vsheen 4.6s cubic-bezier(.5,0,.5,1) infinite;
  z-index: 2; pointer-events: none;
}
@keyframes vsheen { 0%,18% { transform: translateX(-120%); } 60%,100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .vslot::after { animation: none; opacity: 0; } }

.vslot-tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: oklch(1 0 0 / 0.78);
  backdrop-filter: blur(4px);
  border: 1px solid oklch(1 0 0 / 0.6);
  padding: 4px 8px; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 6px;
}
.vslot-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.62 0.2 25);
  box-shadow: 0 0 0 0 oklch(0.62 0.2 25 / 0.5);
  animation: rec 1.8s ease-out infinite;
}
@keyframes rec { 0% { box-shadow: 0 0 0 0 oklch(0.62 0.2 25 / 0.5);} 70%,100%{ box-shadow: 0 0 0 6px oklch(0.62 0.2 25 / 0);} }

.section { padding: clamp(64px, 9vw, 130px) 0; }

/* Entrance: transform-only so content is ALWAYS visible (even if the
   animation engine is throttled and freezes at frame 0). Resting visible. */
.fade-up { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fade-up.play { animation: fadeUpIn 0.7s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes fadeUpIn {
  from { transform: translateY(20px); }
  to   { transform: translateY(0); }
}

/* reel scroll-hint chevron bob */
@media (prefers-reduced-motion: no-preference) {
  .reel-chev { animation: reelBob 1.7s ease-in-out infinite; }
}
@keyframes reelBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}