/* ============================================================
   Paul's Kitchen — nutrition kiosk (portrait TV)
   Chalkboard aesthetic matching the printed menu.
   Swap fonts: change --font-title / --font-body only.
   ============================================================ */

@font-face {
  font-family: "Flood Std";
  src: url("fonts/FloodStd.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "New Spirit";
  src: url("fonts/NewSpirit-RegularCondensed.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "New Spirit";
  src: url("fonts/NewSpirit-SemiBoldCondensed.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "New Spirit";
  src: url("fonts/NewSpirit-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* design canvas = portrait TV */
  --canvas-w: 1080px;
  --canvas-h: 1920px;

  --font-title: "Flood Std", cursive;
  --font-body: "New Spirit", system-ui, sans-serif;

  /* palette pulled from the menu PDF */
  --board: #0e0d0c;
  --board-2: #16140f;
  --chalk: #f7f2e4;
  --chalk-dim: #cfc8b6;
  --chalk-faint: rgba(247, 242, 228, 0.16);

  --c-protein: #37b089;
  --c-carb: #e8503a;
  --c-fat: #f2a72e;
  --c-frozen: #5cc6ff;

  --pad: 90px;
}

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

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--chalk);
  -webkit-font-smoothing: antialiased;
}

/* ---- Stage: scales the fixed 1080x1920 canvas to fit any TV ---- */
#stage {
  position: fixed; inset: 0;
  background: #000;
  overflow: hidden;
}
#canvas {
  position: absolute;
  top: 0; left: 0;
  width: var(--canvas-w);
  height: var(--canvas-h);
  transform-origin: top left;   /* JS sets scale + offset deterministically */
  background:
    radial-gradient(120% 80% at 50% 18%, var(--board-2) 0%, var(--board) 55%, #0a0908 100%);
  overflow: hidden;
}

/* chalk dust / board grain overlay */
#canvas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("assets/board-texture.png");
  background-size: cover;
  opacity: 0.5; mix-blend-mode: screen;
}
/* faint vignette so edges read like a real board */
#canvas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 240px 60px rgba(0,0,0,0.7);
}

/* ============================================================
   SLIDES
   ============================================================ */
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: flex-start;     /* content packs in the UPPER part */
  padding: var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  z-index: 1;
}
.slide.active { opacity: 1; visibility: visible; z-index: 2; }

/* ---- footer block: pinned to the bottom (allergens + frozen + brand) ---- */
.page-footer {
  margin-top: auto;            /* pushes the whole footer to the bottom */
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 30px;
  padding-top: 30px;
}
.brand {
  text-align: center;
  opacity: 0;
  padding: 40px 0 52px;   /* negative space above + below the logo */
}
.brand .logo {
  display: block;
  margin: 0 auto;
  width: 360px;
  height: auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35));
}

/* ---- chalk-drawn title (HTML word spans, animated by GSAP) ---- */
.title-wrap {
  width: 100%;
  margin-top: 6px;
  min-height: 210px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.title {
  font-family: var(--font-title);
  color: #fffdf6;                 /* brighter chalk for legibility on the dark board */
  line-height: 1.04;
  text-align: center;
  /* no filter — Lumios Brush carries the brush look itself; filters only fuzzed it */
  text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 0 2px rgba(255,255,255,0.18);
  width: 100%;
}
.title .line { display: block; }
.title .word {
  display: inline-block;
  white-space: pre;               /* preserve the trailing space per word */
  clip-path: inset(0 100% 0 0);   /* hidden until written */
}

/* ---- product icon ---- */
.icon-wrap {
  margin-top: 18px;
  height: 460px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(26px) scale(0.92);
}
.icon-wrap img { height: 100%; width: auto; max-width: 82%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55)); }

/* ---- description ---- */
.description {
  margin-top: 10px;
  max-width: 820px;
  text-align: center;
  font-size: 38px;
  line-height: 1.42;
  color: var(--chalk-dim);
  opacity: 0;
}

/* hand-drawn chalk divider */
.divider {
  width: 70%; height: 26px; margin: 30px 0 8px;
  opacity: 0;
}
.divider svg { width: 100%; height: 100%; }
.divider path { stroke: var(--chalk-faint); stroke-width: 3; fill: none; stroke-linecap: round; }

/* ============================================================
   NUTRITION
   ============================================================ */
.nutrition {
  margin-top: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* a size block = donut + macro columns */
.size-row {
  display: flex; align-items: center; justify-content: center;
  gap: 56px;
  opacity: 0; transform: translateY(24px);
}

.size-tag {
  font-family: var(--font-body); font-weight: 700;
  font-size: 30px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--chalk-dim);
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 6px 0;
  border-right: 2px solid var(--chalk-faint);
  margin-right: 6px;
}

/* donut */
.donut { position: relative; width: 250px; height: 250px; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .ring-bg { fill: none; stroke: rgba(247,242,228,0.10); stroke-width: 12; }
.donut .arc { fill: none; stroke-width: 12; stroke-linecap: round; }
.donut .center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.donut .kcal-num { font-weight: 700; font-size: 56px; line-height: 1; color: var(--chalk); }
.donut .kcal-lbl { font-size: 24px; color: var(--chalk-dim); letter-spacing: 0.12em; margin-top: 4px; }

/* macro columns */
.macros { display: flex; gap: 44px; }
.macro { text-align: center; min-width: 120px; }
.macro .pct { font-weight: 700; font-size: 44px; line-height: 1; }
.macro .grams { font-size: 34px; color: var(--chalk); margin-top: 8px; }
.macro .lbl { font-size: 24px; color: var(--chalk-dim); letter-spacing: 0.1em; margin-top: 4px; text-transform: uppercase; }
.macro.protein .pct { color: var(--c-protein); }
.macro.carb .pct { color: var(--c-carb); }
.macro.fat .pct { color: var(--c-fat); }

/* ---- allergens + frozen footer ---- */
.foot {
  width: 100%;
  margin-top: 30px;
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap;
  opacity: 0;
}
.chip {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 28px; color: var(--chalk-dim);
  padding: 12px 26px;
  border: 2px solid var(--chalk-faint); border-radius: 999px;
}
.chip.frozen { color: var(--c-frozen); border-color: rgba(92,198,255,0.4); }
.chip.frozen svg { width: 30px; height: 30px; }
.chip.allergen-pending { font-style: italic; opacity: 0.8; }

/* ============================================================
   GROUP PAGE (extras / sauces)
   ============================================================ */
.group .grid {
  margin-top: 30px;
  width: 100%;
  display: flex; flex-direction: column; gap: 30px;
  flex: 1; justify-content: center;
}
.gcard {
  display: flex; align-items: center; gap: 40px;
  padding: 30px 40px;
  border: 2px solid var(--chalk-faint); border-radius: 26px;
  background: rgba(255,255,255,0.018);
  opacity: 0; transform: translateY(26px);
}
.gcard .donut { width: 168px; height: 168px; }
.gcard .donut .kcal-num { font-size: 38px; }
.gcard .donut .kcal-lbl { font-size: 17px; }
.gcard .gmeta { flex: 1; }
.gcard .gname {
  font-weight: 700; font-size: 46px; color: var(--chalk);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.gcard .gname .gsize { font-weight: 400; font-size: 32px; color: var(--chalk-dim); }
.gcard .gname .snow { color: var(--c-frozen); display: inline-flex; }
.gcard .gname .snow svg { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(92,198,255,0.5)); }
.gcard .gdesc { font-size: 28px; color: var(--chalk-dim); margin-top: 6px; }
.gcard .gmacros { display: flex; gap: 40px; margin-top: 16px; }
.gcard .gmacros .gm { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.gcard .gmacros .gm b { font-size: 34px; font-weight: 700; }
.gcard .gmacros .gm i { font-style: normal; font-size: 26px; color: var(--chalk); }
.gcard .gmacros .gm u { text-decoration: none; font-size: 19px; color: var(--chalk-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.gcard .gmacros .p b { color: var(--c-protein); }
.gcard .gmacros .c b { color: var(--c-carb); }
.gcard .gmacros .f b { color: var(--c-fat); }
.gcard .gicon { width: 150px; flex: none; display: grid; place-items: center; }
.gcard .gicon img { width: 100%; height: auto; max-height: 150px; object-fit: contain; }

/* ============================================================
   PROGRESS DOTS
   ============================================================ */
#dots {
  position: absolute; bottom: 34px; left: 0; right: 0; z-index: 6;
  display: flex; justify-content: center; gap: 16px;
}
#dots .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--chalk-faint); transition: all 0.4s; }
#dots .dot.on { background: var(--chalk); transform: scale(1.25); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes writeReveal { to { transform: scaleX(1); } }
@keyframes dust {
  0% { opacity: 0; }
  15% { opacity: 0.9; }
  100% { opacity: 0; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes popIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes snowIn { to { opacity: 1; transform: scale(1) rotate(0deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}