:root{
  --bg:#0a0a0a;
  --ink:#f4f4f4;
  --muted:#b9b9b9;
  --red:#e13838;
  --red2:#ff5a4f;
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow:hidden; /* один экран */
}

/* фон */
.bg-vignette{
  position:fixed; inset:-10%; z-index:-2;
  background:
    radial-gradient(1200px 700px at 50% -10%, #141414, transparent 60%),
    radial-gradient(900px 560px at 50% 120%, #0d0d0d, transparent 65%);
  pointer-events:none;
}
.bg-noise{
  position:fixed; inset:0; z-index:-1; opacity:.06; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='120' height='120' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;
}

/* бренд */
.brandTop{
  position:fixed; top:12px; left:16px; z-index:20;
  display:flex; align-items:center; gap:10px;
  transform:translateY(-20px);
  opacity:0;
  transition:opacity .45s ease, transform .45s ease;
}
.brandTop--show{
  opacity:1;
  transform:translateY(0);
}
.brandTop__logo{
  height:48px;
  width:auto;
  display:block;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45));
}
.brandTop__name{
  font-size:18px;
  letter-spacing:.14em;
  font-weight:800;
  color:#fff;
  opacity:.95;
  text-transform:uppercase;
}

/* экран */
.hero{
  position:relative;
  height:100svh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10svh 16px 14svh;
}

/* сцена */
.stage{
  position:relative;
  width:100%;
  max-width:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.glow{
  position:absolute;
  inset:auto 10% -50px;
  height:140px;
  background:radial-gradient(circle, rgba(225,56,56,.32), transparent 65%);
  filter:blur(14px);
  animation:glow 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glow{
  0%,100%{opacity:.55;transform:scale(1);}
  50%{opacity:1;transform:scale(1.06);}
}

/* GIF поверх — чуть меньше статики */
.burgerGif{
  position:absolute;
  inset:0;
  margin:auto;
  max-width:90%;      /* гиф меньше, чем статичная картинка */
  height:auto;
  border-radius:22px;
  box-shadow:0 28px 88px rgba(0,0,0,.75);
  z-index:2;
}

/* статичный раскрытый бургер */
.burgerStatic{
  position:relative;
  width:100%;
  max-width:560px;
  opacity:0;
  transform:translateY(6px) scale(.985);
  transition:opacity .4s ease, transform .4s ease;
  z-index:3;
}
.burgerStatic--show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.burgerStatic__img{
  display:block;
  width:100%;
  height:auto;      /* фотка как есть, без сжатия по высоте */
  border-radius:22px;
  box-shadow:0 28px 88px rgba(0,0,0,.75);
}

/* подписи слоёв */
.badge{
  position:absolute;
  left:6%;
  padding:8px 12px;
  font-size:13px;
  background:rgba(12,12,12,.78);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  backdrop-filter:blur(8px);
  color:var(--ink);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .35s ease .1s, transform .35s ease .1s;
}
.badge::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  width:34px;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.24), transparent);
  transform:translateY(-50%);
}

/* вертикальные позиции, сверху вниз:
   булка – лук – соус – огурцы – помидоры – сыр – котлета – салат – нижняя булка */
.badge--top{top:10%;}
.badge--onion{top:28%;}
.badge--sauce{top:37%;}
.badge--pickle{top:46%;}
.badge--tomato{top:54%;}
.badge--cheese{top:61%;}
.badge--patty{top:69%;}
.badge--lettuce{top:77%;}
.badge--bottom{top:90%;}

/* показываем подписи вместе с бургером */
.burgerStatic--show .badge{
  opacity:1;
  transform:translateX(0);
}

/* CTA-кнопки внизу: сетка 2×2, крупнее */
.ctaRow{
  position:fixed;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:10px;
  row-gap:8px;
  width:100%;
  max-width:420px;
  padding:0 16px;
  z-index:15;
}
.chip{
  text-align:center;
  padding:12px 0;
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
}
.chip--prime{
  background:linear-gradient(135deg, var(--red), var(--red2));
  color:#111;
  border-color:transparent;
}
.chip:active{
  transform:translateY(1px);
}

@media (min-width:900px){
  .hero{
    padding:8svh 24px 16svh;
  }
}