/* Café Belmont — brand system
   colors: red #E21F26, ecru #EFE5D9, black #221C1C
   type: headings Helvetica Neue LT Pro (Medium), details Suisse Int'l Mono */

/* Brand fonts are licensed (not on Google Fonts). To use the real files in
   production, drop them into site/fonts/ and uncomment:
@font-face{
  font-family:"Helvetica Neue LT Pro";
  src:url("fonts/HelveticaNeueLTPro-Md.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Suisse Int'l Mono";
  src:url("fonts/SuisseIntlMono-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
*/

:root{
  --bg:#EFE5D9;         /* ecru */
  --ink:#221C1C;        /* black */
  --ink-soft:rgba(34,28,28,0.6);
  --red:#E21F26;
  --line:rgba(34,28,28,0.14);
  --font-head:"Helvetica Neue LT Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Suisse Int'l Mono","Suisse Intl Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --scene-scale:1;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
/* the anchor target sits a little below the top bar */
#menu{ scroll-margin-top:12px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-head);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* clip (not hidden) so position:sticky still works */
}
img,svg{display:block;max-width:100%}

/* ---------- Supreme-style photo wall (fixed page background) ---------- */
/* ---------- Supreme-style photo band (a lower section, not the hero) ---------- */
.gallery{
  width:100vw;
  margin-left:calc(-50vw + 50%);   /* full-bleed out of the centered text column */
  margin-top:46px;
  margin-bottom:10px;
}
.gallery-kicker{
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 14px;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  grid-auto-rows:118px;
  grid-auto-flow:dense;
  gap:4px;
  padding:0 4px;
  filter:saturate(0.84);
}
.gallery-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* irregular tiles break the grid — most stay 1x1 */
.gallery-grid .w2{grid-column:span 2}
.gallery-grid .h2{grid-row:span 2}
.gallery-grid .big{grid-column:span 2;grid-row:span 2}

/* ---------- pinned hero scene ---------- */
.hero{
  position:relative;
  height:170svh;   /* scroll room: the scene stays sticky while the drink fills */
}
.scene{
  position:sticky;
  top:0;
  height:100svh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}
/* slow photo slideshow behind the animation (crossfades every ~4s), dimmed by
   an ecru veil so the droplet, glass and text stay legible */
.hero-slideshow{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hs-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.5s ease;
  will-change:opacity;
}
.hs-img.active{ opacity:1; }
.hero-veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(20,15,13,0.66) 0%,
      rgba(26,20,18,0.52) 34%,
      rgba(26,20,18,0.52) 66%,
      rgba(18,13,11,0.64) 100%);
}
.scene-inner{
  position:relative;
  z-index:2;
  width:320px;
  height:640px;
  transform:translateY(4px) scale(var(--scene-scale));
  transform-origin:center center;
}

/* slim top bar — fixed (stays put on scroll); light over the dark hero,
   switches to dark once it is over the light content (.on-light, set by JS) */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  padding-top:max(16px, env(safe-area-inset-top));
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:rgba(242,233,221,0.78);
  transition:color .25s ease, background-color .25s ease, box-shadow .25s ease;
  pointer-events:none;
}
.tb-hours{ text-transform:uppercase; white-space:nowrap; }
.tb-actions{ display:inline-flex; align-items:center; gap:14px; pointer-events:auto; }
.tb-menu, .tb-cur, .tb-lang a{ transition:color .25s ease; }
.tb-menu{ color:#f2e9dd; text-decoration:none; letter-spacing:0.1em; text-transform:uppercase; }
.tb-menu:hover{ color:var(--red); }
.tb-lang{ display:inline-flex; gap:9px; align-items:center; pointer-events:auto; }
.tb-lang a, .tb-cur{ text-decoration:none; letter-spacing:0.1em; }
.tb-cur{ color:#f2e9dd; font-weight:500; }
.tb-lang a{ color:rgba(242,233,221,0.55); }
.tb-lang a:hover{ color:var(--red); }
/* over the light content: dark text on a subtle frosted-ecru bar so it never
   clashes with the text scrolling underneath */
.topbar.on-light{
  color:var(--ink-soft);
  background:rgba(239,229,217,0.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(34,28,28,0.06);
}
.topbar.on-light .tb-menu, .topbar.on-light .tb-cur{ color:var(--ink); }
.topbar.on-light .tb-lang a{ color:var(--ink-soft); }
.topbar.on-light .tb-menu:hover, .topbar.on-light .tb-lang a:hover{ color:var(--red); }

/* wordmark */
.wordmark{
  position:absolute;
  top:44px; left:0; right:0;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:4px;
  pointer-events:none;
}
/* backing plate removed — the darkened hero gives clean contrast on its own */
.wm-plate{ display:none; }
.wm-name{
  position:relative;
  z-index:1;
  align-self:center;
  font-family:var(--font-head);
  font-weight:500;
  font-size:28px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#f2e9dd;
}
/* Tokyo-style orange neon overlay: flickers on twice at entry */
.wm-neon{
  position:absolute;
  left:0; top:0;
  color:#ffcf9a;
  text-shadow:
    0 0 2px #fff1dd,
    0 0 8px #ff9b2e,
    0 0 16px #ff7a00,
    0 0 30px #ff6300,
    0 0 52px #ff5200;
  opacity:0;
  pointer-events:none;
}
/* neon lights up smoothly once the drink is poured (evening only) — no flicker */
.wm-neon{transition:opacity 1.1s ease 0.1s}
[data-time="evening"] .wordmark.lit .wm-neon{opacity:1}
/* day: neon stays off, clean black wordmark */
.wm-tag{
  position:relative;
  z-index:1;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:rgba(242,233,221,0.6);
}

/* the finished drink, annotated — a thin line leads from the glass down to the
   name of what's in the cup, sitting BELOW the glass (not a pill glued on it) */
.drink-label{
  position:absolute;
  left:50%; top:560px;              /* the line begins just under the glass (bottom ~564) */
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0 26px 10px;
  -webkit-appearance:none;
  appearance:none;
  background:none;
  border:0;
  color:#f2e9dd;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  font-family:var(--font-head);
  line-height:1;
}
/* leader line — fades in from the glass, guiding the eye down to the name */
.dl-line{
  width:1px;
  height:46px;
  background:linear-gradient(to bottom, rgba(242,233,221,0.06), rgba(242,233,221,0.55));
}
.dl-name{
  font-weight:500;
  font-size:20px;
  letter-spacing:0.01em;
  white-space:nowrap;
}
.dl-cta{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:5px;
}
/* invite the tap once the drink is poured */
.drink-label.ready .dl-line{ animation:lineGlow 1.9s ease-in-out infinite; }
.drink-label.ready .dl-arrow{ display:inline-block; animation:arrowBob 1.4s ease-in-out infinite; }
.drink-label.ready:active{ transform:translateX(-50%) scale(0.98); }
@keyframes lineGlow{ 0%,100%{ opacity:0.55 } 50%{ opacity:1 } }
@keyframes arrowBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }

/* the whole scene (droplet + glass + matcha + impact) */
.scene-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  will-change:transform;
  backface-visibility:hidden;
}
#dropFall{filter:drop-shadow(0 8px 10px rgba(34,28,28,0.16))}
#liquid{will-change:transform}

/* menu list sitting on the matcha */
.menu-card{
  position:absolute;
  left:50%; top:372px;
  transform:translate(-50%,40px);
  width:182px;
  opacity:0;
  background:rgba(239,229,217,0.85);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border:1px solid rgba(34,28,28,0.1);
  border-radius:12px;
  padding:13px 16px;
  box-shadow:0 14px 30px rgba(34,28,28,0.22);
  color:var(--ink);
  font-family:var(--font-mono);
}
.mc-kicker{
  margin:0 0 8px;
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--red);
}
.mc-list{list-style:none;margin:0;padding:0}
.mc-list li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:6px 0;
  font-size:13px;
  border-bottom:1px solid rgba(34,28,28,0.12);
}
.mc-list li:last-child{border-bottom:0}
.mc-price{color:var(--red);font-weight:500}
.mc-price::after{content:" zł";font-weight:400;color:var(--ink-soft);font-size:11px}

/* scroll hint */
.scroll-hint{
  position:absolute;
  bottom:calc(22px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:var(--red);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  animation:hintBob 1.8s ease-in-out infinite;
}
@keyframes hintBob{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,6px)}
}

/* ---------- content ---------- */
.content{
  position:relative;
  background:var(--bg);
  padding:0 24px 88px;
  max-width:560px;
  margin:0 auto;
}
.reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}

.intro{padding:76px 0 48px;text-align:center}
.intro h1{
  font-family:var(--font-head);
  font-weight:500;
  font-size:33px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  margin:0 0 14px;
}
.intro p{
  font-size:16px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:36ch;
  margin:0 auto;
}

/* positioning narrative — the citable content */
.about{padding:12px 0 44px}
.about h2{
  font-family:var(--font-head);
  font-weight:500;
  font-size:23px;
  letter-spacing:-0.01em;
  margin:0 0 14px;
}
.about p{
  font-size:15px;
  line-height:1.82;
  color:var(--ink);
  margin:0 0 18px;
}
.about p:last-child{margin-bottom:0}
.about strong{font-weight:500}

/* collapsible "read more" — content stays in the HTML (crawlable), just tucked away */
.more{ margin-top:10px; }
.more > summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red);
  padding:6px 0;
  -webkit-tap-highlight-color:transparent;
}
.more > summary::-webkit-details-marker{ display:none; }
.more > summary::after{ content:"+"; font-size:15px; line-height:1; }
.more[open] > summary::after{ content:"\2013"; }
.more[open] > summary{ margin-bottom:8px; }
.more > p{ margin:0 0 14px; }
.more > p:last-child{ margin-bottom:0; }

/* delicate dividers + generous space between sections (Japanese-minimal) */
.menu, .faq, .yume{
  border-top:1px solid rgba(34,28,28,0.09);
  margin-top:52px;
}

/* our matcha — the Yume block */
.yume{ padding:50px 0 12px; }
.yume-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 16px; }
.yume-logo{ height:22px; width:auto; opacity:0.92; flex:none; margin-top:-1px; }
.yume h2{
  font-family:var(--font-head);
  font-weight:500;
  font-size:23px;
  line-height:1.18;
  letter-spacing:-0.01em;
  margin:0;
}
.yume p{ font-size:15px; line-height:1.82; color:var(--ink); margin:0 0 18px; }
.yume-shop{ margin-top:24px; }
.yume h3{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--red);
  margin:24px 0 8px;
}
.grades{ margin:0 0 22px; }
.grades dt{ font-family:var(--font-head); font-weight:500; font-size:15px; margin-top:18px; }
.grades dd{ margin:4px 0 0; font-size:14px; line-height:1.7; color:var(--ink-soft); }
.yume-link{ color:var(--red); text-decoration:none; font-weight:500; border-bottom:1px solid rgba(226,31,38,0.32); }
.yume-link:hover{ border-bottom-color:var(--red); }

.menu{padding:50px 0 28px}
.menu h2, .visit h2{
  font-family:var(--font-head);
  font-weight:500;
  font-size:23px;
  letter-spacing:-0.01em;
  margin:0 0 18px;
}
.menu-group{margin-bottom:36px}
.menu-group h3{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 10px;
}
.menu-group ul{list-style:none;margin:0;padding:0}
.menu-group li{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:12px 0;
  font-family:var(--font-mono);
  font-size:14px;
}
.i-name{white-space:nowrap}
.i-dots{
  flex:1;
  border-bottom:1px dotted rgba(34,28,28,0.25);
  transform:translateY(-3px);
}
.i-price{color:var(--red);font-weight:500;white-space:nowrap}

.sec-note{
  font-family:var(--font-head);
  font-size:14px;
  line-height:1.7;
  color:var(--ink-soft);
  margin:0 0 14px;
  max-width:52ch;
}

/* FAQ */
.faq{padding:50px 0 8px}
.qa{margin:0 0 28px}
.qa h3{
  font-family:var(--font-head);
  font-weight:500;
  font-size:16px;
  margin:0 0 5px;
  color:var(--ink);
}
.qa p{
  font-family:var(--font-head);
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
  max-width:54ch;
}

.visit{padding:52px 0 10px;text-align:center;border-top:1px solid rgba(34,28,28,0.09);margin-top:8px}
.visit-line{
  margin:8px 0;
  font-family:var(--font-head);
  color:var(--ink-soft);
  font-size:14px;
}
.visit-muted{ font-size:12px; opacity:0.85; }
.visit-link{ color:var(--red); text-decoration:none; font-weight:500; }
.socials{
  margin-top:18px;
  display:flex;
  gap:20px;
  justify-content:center;
  align-items:baseline;
}
.ig{
  display:inline-block;
  font-family:var(--font-mono);
  color:var(--red);
  text-decoration:none;
  font-weight:500;
  letter-spacing:0.02em;
}
.foot{
  padding:30px 0 0;
  text-align:center;
  font-family:var(--font-mono);
  color:var(--ink-soft);
  font-size:12px;
  letter-spacing:0.02em;
  border-top:1px solid var(--line);
}

@media (min-width:620px){
  .wm-name{font-size:32px}
  .intro h1{font-size:40px}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .scroll-hint{animation:none}
  .wm-neon{animation:none}
  [data-time="evening"] .wm-neon{opacity:1}
  [data-time="day"] .wm-neon{opacity:0}
}