/* ============================================================
   RHEIN DÖNER — Schaufenster (outdoor portrait promo loop)
   Same street-food language as the menu boards, designed at
   exactly 1080 x 1920. Job: stop passers-by, not list the menu.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;1,500&display=swap');

:root {
  --bg:      #0c0b08;
  --bg-2:    #15120c;
  --ink:     #f7f1e1;
  --muted:   #a99d82;
  --muted-2: #6f6650;
  --accent:  #ffc21e;   /* mustard amber */
  --accent-d:#e69a00;
  --green:   #3a8a55;
  --red:     #e2402b;
  --line:    rgba(255,194,30,.22);

  --display: "Anton", sans-serif;
  --head:    "Bebas Neue", sans-serif;
  --name:    "Oswald", sans-serif;
  --body:    "Barlow", sans-serif;

  --slide: 6s;          /* time each dish is on screen */
}

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

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

/* ---- viewport scaler: keeps the 1080x1920 stage centred & fitted ---- */
#viewport { position:fixed; inset:0; display:grid; place-items:center; background:#000; }
.stage {
  position:relative;
  width:1080px; height:1920px;
  transform-origin:center center;
  transform:scale(var(--scale,1));
  overflow:hidden;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 60% at 78% -6%, #241d12 0%, transparent 55%),
    radial-gradient(100% 50% at 12% 108%, #1a2418 0%, transparent 50%),
    linear-gradient(170deg, var(--bg-2) 0%, var(--bg) 55%, #070603 100%);
  isolation:isolate;
}

/* ============================================================
   ATMOSPHERE (shared with the menu boards)
   ============================================================ */
.smoke { position:absolute; inset:-12%; z-index:0; pointer-events:none; filter:blur(60px); opacity:.5; }
.smoke i { position:absolute; border-radius:50%; mix-blend-mode:screen; }
.smoke i:nth-child(1){ width:760px; height:760px; left:-12%; top:30%; background:radial-gradient(circle, rgba(255,160,40,.12), transparent 70%); animation:drift1 26s ease-in-out infinite; }
.smoke i:nth-child(2){ width:620px; height:620px; right:-10%; top:6%; background:radial-gradient(circle, rgba(255,194,30,.10), transparent 70%); animation:drift2 32s ease-in-out infinite; }
.smoke i:nth-child(3){ width:640px; height:640px; left:36%; bottom:-16%; background:radial-gradient(circle, rgba(58,138,85,.16), transparent 70%); animation:drift3 38s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(70px,-60px) scale(1.15);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-60px,50px) scale(1.2);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,-70px) scale(1.1);} }

.sweep {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg, transparent 38%, rgba(255,210,90,.06) 50%, transparent 62%);
  background-size:100% 260%;
  animation:sweep 16s linear infinite;
}
@keyframes sweep{ 0%{ background-position:0 140%;} 100%{ background-position:0 -60%;} }

.grain {
  position:absolute; inset:-50%; z-index:60; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain .5s steps(3) infinite;
}
@keyframes grain{ 0%{ transform:translate(0,0);} 33%{ transform:translate(-6%,4%);} 66%{ transform:translate(5%,-5%);} 100%{ transform:translate(0,0);} }

.vignette { position:absolute; inset:0; z-index:55; pointer-events:none; box-shadow:inset 0 0 260px 60px rgba(0,0,0,.72); }

/* ============================================================
   HEADER
   ============================================================ */
.topbar {
  position:relative; z-index:10;
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:14px;
  padding:64px 48px 30px;
}
.flame { width:96px; height:96px; display:grid; place-items:center; }
.flame svg { width:100%; height:100%; filter:drop-shadow(0 0 16px rgba(255,150,30,.6)); animation:flicker 2.4s ease-in-out infinite; }
@keyframes flicker{ 0%,100%{ opacity:1; transform:scale(1);} 45%{ opacity:.82; transform:scale(.96) rotate(-1deg);} 70%{ opacity:.94; transform:scale(1.03);} }

.topbar .name {
  font-family:var(--display); font-size:104px; line-height:.9; letter-spacing:2px;
  text-transform:uppercase; color:var(--ink);
}
.topbar .name b { color:var(--accent); font-weight:400; }
.topbar .tag {
  font-family:var(--body); font-weight:600; letter-spacing:8px; font-size:22px;
  color:var(--muted); text-transform:uppercase;
}

/* ============================================================
   HERO SLIDESHOW
   ============================================================ */
.hero { position:relative; z-index:10; flex:1 1 auto; margin:24px 56px; }

.slide {
  position:absolute; inset:0;
  border-radius:26px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  opacity:0; visibility:hidden;
  transition:opacity 1s ease;
}
.slide.on { opacity:1; visibility:visible; }

.slide .photo {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.04);
}
.slide.on .photo { animation:ken var(--slide) ease-out forwards; }
@keyframes ken { from{ transform:scale(1.04);} to{ transform:scale(1.16);} }

/* readability gradient — dark at the bottom where the text sits */
.slide .scrim {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,6,3,.94) 4%, rgba(7,6,3,.55) 30%, transparent 58%);
}

.slide .caption {
  position:absolute; left:0; right:0; bottom:0;
  padding:48px 52px 54px;
  display:flex; flex-direction:column; gap:10px;
}
.slide .kicker {
  align-self:flex-start;
  font-family:var(--body); font-weight:700; letter-spacing:6px; font-size:20px;
  text-transform:uppercase; color:#0c0b08;
  background:var(--accent); padding:7px 16px 6px; border-radius:4px;
  filter:url(#grunge);
}
.slide .dish {
  font-family:var(--display); font-size:96px; line-height:.92;
  letter-spacing:1px; text-transform:uppercase; color:var(--ink);
  text-shadow:0 6px 30px rgba(0,0,0,.6);
}
.slide .ing {
  font-family:var(--body); font-size:30px; font-weight:500; font-style:italic;
  color:var(--muted); max-width:78%;
}
.slide .price {
  margin-top:6px;
  font-family:var(--display); font-size:128px; line-height:.85; color:var(--accent);
  text-shadow:0 8px 28px rgba(0,0,0,.55);
}
.slide .price small { font-size:54px; }
.slide .price .ab { /* "ab" prefix for "from" prices */
  font-family:var(--name); font-size:34px; font-weight:600; color:var(--muted);
  vertical-align:super; margin-right:10px; text-transform:lowercase;
}

/* text rides in slightly after the slide fades in */
.slide.on .kicker { animation:rise .7s .15s both; }
.slide.on .dish   { animation:rise .7s .28s both; }
.slide.on .ing    { animation:rise .7s .40s both; }
.slide.on .price  { animation:rise .7s .52s both; }
@keyframes rise { from{ opacity:0; transform:translateY(28px);} to{ opacity:1; transform:translateY(0);} }

/* progress pips */
.pips { position:absolute; top:22px; left:0; right:0; z-index:11; display:flex; justify-content:center; gap:12px; }
.pips i { width:34px; height:5px; border-radius:3px; background:rgba(255,255,255,.22); }
.pips i.on { background:var(--accent); }

/* ============================================================
   FOOTER — hours, address, QR
   ============================================================ */
.footer {
  position:relative; z-index:10; flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  padding:14px 64px 60px;
}
.hours { display:flex; flex-direction:column; gap:12px; }
.open {
  align-self:flex-start;
  font-family:var(--body); font-weight:700; letter-spacing:5px; font-size:26px;
  text-transform:uppercase; color:#06200f;
  background:var(--green); padding:10px 22px; border-radius:6px;
  box-shadow:0 0 26px rgba(58,138,85,.5);
  animation:pulse 3s ease-in-out infinite;
}
.open.closed { color:#2a0d09; background:var(--red); box-shadow:0 0 26px rgba(226,64,43,.5); }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.74;} }
.hours .hrs  { font-family:var(--head); font-size:52px; letter-spacing:1px; color:var(--ink); }
.hours .addr { font-family:var(--body); font-weight:500; font-size:26px; color:var(--muted); letter-spacing:.5px; }

.qr { display:flex; flex-direction:column; align-items:center; gap:10px; }
.qr img {
  width:184px; height:184px; border-radius:14px;
  background:#fff; padding:12px; box-shadow:0 14px 36px rgba(0,0,0,.5);
}
.qr figcaption {
  font-family:var(--body); font-weight:600; letter-spacing:3px; font-size:18px;
  text-transform:uppercase; color:var(--accent);
}