/* ============================================================================
   LA BARISTA — TV MENU BOARD  ·  theme
   Matches "new menu.pdf": deep navy + white, Abril Fatface + Lato + script,
   white-outlined section labels, engraved coffee-branch botanical.
   Everything scales from viewport height to fill any 16:9 screen.
   ========================================================================== */
:root{
  /* palette — sampled from the menu artwork */
  --navy:      #1f3b58;
  --navy-soft: #2a4460;
  --navy-deep: #16304a;
  --navy-950:  #102338;
  --white:     #ffffff;
  --cream:     #f3f1ea;            /* warm off-white for body copy */
  --dim:       rgba(243,241,234,.60);
  --line:      rgba(255,255,255,.55);
  --hair:      rgba(255,255,255,.16);
  --new:       #c0504a;            /* NEW tag */

  /* fluid base unit — scales with screen height (readable across the café) */
  --u: clamp(10px, 1.5vh, 28px);

  --display: "Abril Fatface", Georgia, serif;
  --sans:    "Lato", "Helvetica Neue", Arial, sans-serif;
  --script:  "Parisienne", cursive;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--sans);
  color:var(--cream);
  background:var(--navy);
  overflow:hidden;
  cursor:none;                      /* kiosk */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- stage ---------- */
.stage{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  padding: calc(var(--u)*1.6) calc(var(--u)*3) calc(var(--u)*1.2);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--navy-soft) 0%, var(--navy) 42%, var(--navy-deep) 100%);
  isolation:isolate;
  touch-action:none; overscroll-behavior:none;
}
.stage::before{           /* gentle vignette for depth */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(140% 105% at 50% 50%, transparent 58%, rgba(0,0,0,.42) 100%);
}
.stage > *{ position:relative; z-index:1; }

/* ---------- authentic coffee-branch botanical ---------- */
.botanical{
  position:absolute; z-index:0; pointer-events:none; opacity:.11;
  background:url("leaf.png") no-repeat; background-size:contain;
}
.botanical--tl{ top:-6vh;  left:-5vh;  width:52vh; height:52vh; transform:scaleX(-1) rotate(6deg); }
.botanical--br{ bottom:-7vh; right:-4vh; width:60vh; height:60vh; transform:rotate(8deg); }

/* ---------- story progress bar ---------- */
.progress{ position:absolute; top:0; left:0; right:0; height:4px; z-index:6; background:rgba(255,255,255,.07); }
.progress__fill{ display:block; height:100%; width:0; background:rgba(255,255,255,.9); }
.progress__fill.run{ animation:fill linear forwards; }
@keyframes fill{ from{width:0} to{width:100%} }

/* ---------- top bar ---------- */
.topbar{ display:flex; align-items:flex-start; justify-content:space-between; flex:0 0 auto; }
.brand{ display:grid; grid-template-columns:auto auto; align-items:center; column-gap:calc(var(--u)*.9); }
.brand__script{
  grid-row:1 / span 2; font-family:var(--script);
  font-size:calc(var(--u)*4); line-height:.8; color:var(--white);
  padding-right:calc(var(--u)*.3);
}
.brand__name{ font-family:var(--display); font-size:calc(var(--u)*1.7); letter-spacing:.06em; color:var(--white); align-self:end; }
.brand__tag{ font-family:var(--sans); font-weight:700; font-size:calc(var(--u)*.74); letter-spacing:.4em; color:var(--dim); align-self:start; }
.topbar__right{ display:flex; flex-direction:column; align-items:flex-end; gap:calc(var(--u)*.2); }
.clock{ font-family:var(--display); font-size:calc(var(--u)*1.7); letter-spacing:.02em; color:var(--cream); font-variant-numeric:tabular-nums; }
.topbar__menu{ font-family:var(--sans); font-weight:900; font-size:calc(var(--u)*.74); letter-spacing:.5em; color:var(--dim); }

/* ---------- slides ---------- */
.slides{ position:relative; flex:1 1 auto; margin:calc(var(--u)*1.1) 0 calc(var(--u)*.6); }
.slide{
  position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:scale(.985);
  transition:opacity .7s ease, transform .9s ease, visibility .7s;
}
.slide.is-active{ opacity:1; visibility:visible; transform:none; }

/* slide heading: small eyebrow + Abril word + script word (overlapping, like the PDF) */
.shead{ flex:0 0 auto; margin-bottom:calc(var(--u)*1.1); }
.shead__eyebrow{ font-family:var(--sans); font-weight:700; font-size:calc(var(--u)*.78); letter-spacing:.42em; color:var(--dim); margin-bottom:calc(var(--u)*.35); }
.shead__title{ position:relative; line-height:.9; color:var(--white); white-space:nowrap; }
.shead__title .ser{ font-family:var(--display); font-size:calc(var(--u)*3.2); letter-spacing:.01em; }
.shead__title .scr{ font-family:var(--script); font-size:calc(var(--u)*3.9); margin-left:calc(var(--u)*-.2); display:inline-block; transform:translateY(.22em); }

/* reveal animation for active slide content */
.slide.is-active .anim{ animation:rise .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0)*45ms); }
@keyframes rise{ from{opacity:0; transform:translateY(13px)} to{opacity:1; transform:none} }

/* ---------- columns ---------- */
.cols{ flex:1 1 auto; display:grid; grid-template-columns:1fr 1fr; column-gap:calc(var(--u)*4.5); align-content:center; align-items:start; }
.col{ display:flex; flex-direction:column; gap:calc(var(--u)*1.5); min-width:0; }

/* section label — white-outlined box (the menu's signature device) */
.sect__head{ display:flex; align-items:center; gap:calc(var(--u)*.85); margin-bottom:calc(var(--u)*.7); }
.sect__name{
  font-family:var(--sans); font-weight:900; font-size:calc(var(--u)*.98);
  letter-spacing:.13em; text-transform:uppercase; color:var(--white);
  border:2px solid var(--line); padding:calc(var(--u)*.3) calc(var(--u)*.7) calc(var(--u)*.24); white-space:nowrap;
}
.sect__note{ font-family:var(--sans); font-weight:700; font-size:calc(var(--u)*.74); letter-spacing:.14em; color:var(--dim); text-transform:uppercase; }

/* item rows — name + price on top line, description wraps underneath */
.items{ display:flex; flex-direction:column; gap:calc(var(--u)*.5); }
.item{ display:flex; flex-direction:column; gap:0; }
.item__top{ display:flex; align-items:baseline; gap:calc(var(--u)*.7); }
.item__name{ font-family:var(--sans); font-weight:700; font-size:calc(var(--u)*1.04); color:var(--cream); white-space:nowrap; letter-spacing:.01em; }
.item__spacer{ flex:1 1 auto; min-width:calc(var(--u)*1.2); }
.item__price{ font-family:var(--sans); font-weight:700; font-size:calc(var(--u)*1.04); color:var(--white); font-variant-numeric:tabular-nums; white-space:nowrap; }
.item__price .cur{ font-weight:400; font-size:.7em; color:var(--dim); margin-left:.25em; letter-spacing:.05em; }
.item__note{ display:block; font-family:var(--sans); font-weight:300; font-size:calc(var(--u)*.74); color:var(--dim); letter-spacing:.01em; line-height:1.22; margin-top:calc(var(--u)*.06); max-width:96%; }

/* NEW / badge pill */
.badge{ font-family:var(--sans); font-weight:900; font-size:calc(var(--u)*.56); letter-spacing:.12em;
  padding:.22em .5em .14em; border-radius:.2em; line-height:1; color:var(--white); background:var(--new); transform:translateY(-.16em); margin-left:.4em; }
.badge--gold{ background:transparent; border:1.5px solid var(--line); color:var(--white); }

/* ---------- SIGNATURE spotlight ---------- */
.heroes{ flex:1 1 auto; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(0,1fr); gap:calc(var(--u)*1.7); align-content:stretch; padding:calc(var(--u)*.4) 0 calc(var(--u)*1.1); }
.hero{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--u)*2) calc(var(--u)*1.7);
  border:1.5px solid var(--line); background:rgba(255,255,255,.035);
  overflow:hidden; min-height:0;
  animation:float 6s ease-in-out infinite; animation-delay:calc(var(--i,0)*.5s);
}
.hero__badge{ align-self:flex-start; }
.hero__name{ font-family:var(--display); font-size:calc(var(--u)*2.1); line-height:1.04; color:var(--white); margin:calc(var(--u)*1.1) 0 calc(var(--u)*.7); }
.hero__desc{ font-family:var(--sans); font-weight:300; font-size:calc(var(--u)*.96); line-height:1.4; color:var(--dim); flex:0 1 auto; }
.hero__price{ font-family:var(--display); font-size:calc(var(--u)*2.5); color:var(--white); margin-top:calc(var(--u)*1); }
.hero__price small{ font-family:var(--sans); font-weight:700; font-size:.32em; letter-spacing:.16em; color:var(--dim); margin-left:.4em; vertical-align:.5em; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(calc(var(--u)*-.5))} }

/* ---------- PAIRINGS ---------- */
.pairs{ flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(0,1fr); gap:calc(var(--u)*2.2); align-content:stretch; padding:calc(var(--u)*.4) 0 calc(var(--u)*1.1); }
.pair{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--u)*2.2) calc(var(--u)*1.6); border:1.5px solid var(--hair); background:rgba(255,255,255,.03); }
.pair__tag{ font-family:var(--sans); font-weight:900; font-size:calc(var(--u)*.78); letter-spacing:.3em; color:var(--dim); margin-bottom:calc(var(--u)*1.5); }
.pair__row{ display:flex; align-items:center; gap:calc(var(--u)*1.2); }
.pair__item{ font-family:var(--display); font-size:calc(var(--u)*1.6); color:var(--cream); line-height:1.08; max-width:calc(var(--u)*9); }
.pair__plus{ font-family:var(--script); font-size:calc(var(--u)*3); color:var(--white); }
.pair__desc{ font-family:var(--sans); font-weight:300; font-size:calc(var(--u)*.96); color:var(--dim); margin:calc(var(--u)*1.4) 0 calc(var(--u)*1.2); }
.pair__price{ font-family:var(--display); font-size:calc(var(--u)*2.3); color:var(--white); }
.pair__price small{ font-family:var(--sans); font-weight:700; font-size:.32em; letter-spacing:.16em; color:var(--dim); margin-left:.4em; vertical-align:.5em; }

/* ---------- bumper ---------- */
.bumper{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:calc(var(--u)*.3); }
.bumper__script{ font-family:var(--script); font-size:calc(var(--u)*7); color:var(--white); line-height:.8; }
.bumper__menu{ font-family:var(--display); font-size:calc(var(--u)*6.2); letter-spacing:.06em; color:var(--white); }
.bumper__rule{ width:calc(var(--u)*16); height:1px; background:var(--line); margin:calc(var(--u)*.9) 0; }
.bumper__sub{ font-family:var(--sans); font-weight:700; font-size:calc(var(--u)*1); letter-spacing:.46em; color:var(--dim); }

/* ---------- footer ---------- */
.footer{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding-top:calc(var(--u)*.7); border-top:1px solid var(--hair);
  font-family:var(--sans); font-weight:700; font-size:calc(var(--u)*.74); letter-spacing:.22em; color:var(--dim); }
.footer strong{ color:var(--cream); }
.footer__handle{ color:var(--cream); }
.dots{ display:flex; gap:calc(var(--u)*.7); }
.dot{ width:calc(var(--u)*.5); height:calc(var(--u)*.5); border-radius:50%; background:rgba(255,255,255,.22); transition:all .5s ease; }
.dot.on{ width:calc(var(--u)*2); border-radius:1em; background:var(--white); }

/* ---------- tap-to-start overlay ---------- */
.start{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 30%, var(--navy-soft), var(--navy) 55%, var(--navy-deep));
  cursor:pointer; transition:opacity .6s ease; }
.start::after{ content:""; position:absolute; inset:0; background:url("leaf.png") no-repeat center/70%; opacity:.10; }
.start.hide{ opacity:0; pointer-events:none; }
.start__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*.2); text-align:center; }
.start__script{ font-family:var(--script); font-size:calc(var(--u)*6); color:var(--white); line-height:.8; }
.start__menu{ font-family:var(--display); font-size:calc(var(--u)*5.4); letter-spacing:.06em; color:var(--white); }
.start__cta{ margin-top:calc(var(--u)*2); font-family:var(--sans); font-weight:900; font-size:calc(var(--u)*1); letter-spacing:.4em; color:var(--cream);
  border:2px solid var(--line); padding:calc(var(--u)*.7) calc(var(--u)*1.6); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.6} 50%{opacity:1} }