.pa-burger {
  --pa-ink: #2b1710;
  --pa-accent: #e35f22;
  --pa-cream: #fff8ef;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 20px 24px;
  overflow: hidden;
  color: var(--pa-ink);
  font-family: Vazirmatn, Tahoma, sans-serif;
  text-align: center;
  box-sizing: border-box;
}

.pa-burger *, .pa-burger *::before, .pa-burger *::after { box-sizing: border-box; }
.pa-burger__stage {
  position: relative;
  height: 620px;
  max-width: 800px;
  margin: 4px auto 0;
  outline: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: height .85s cubic-bezier(.2,.8,.2,1);
}

.pa-burger__whole {
  position: absolute;
  z-index: 5;
  top: 50%; left: 50%;
  width: 50%;
  max-width: 410px;
  height: auto;
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
  filter: drop-shadow(0 18px 18px rgba(48,24,13,.16));
  transition: opacity .32s ease, transform .65s cubic-bezier(.22,1,.36,1), filter .4s ease;
  user-select: none;
  pointer-events: none;
}

.pa-burger__stage:focus-visible { border-radius: 28px; box-shadow: inset 0 0 0 3px rgba(227,95,34,.35); }
.pa-burger__stage::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 35px;
  width: min(55%, 410px); height: 35px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(66,31,18,.15);
  filter: blur(18px);
  transition: .7s ease;
}

.pa-burger__layer {
  position: absolute;
  z-index: 2;
  top: 50%; left: 0;
  width: 100%; height: 0;
  transform: translate3d(0,0,0) scale(.74);
  opacity: 0;
  visibility: hidden;
  transition: transform .85s cubic-bezier(.22,1,.36,1), opacity .35s ease, visibility 0s linear .85s;
  transition-delay: 0ms;
  pointer-events: none;
  will-change: transform;
}

.pa-burger__layer img {
  position: absolute;
  left: 50%; top: 0;
  width: var(--layer-width);
  max-width: 760px;
  height: auto;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 13px 10px rgba(48,24,13,.14));
  user-select: none;
}

.pa-burger__label {
  position: absolute;
  top: 0;
  width: min(220px, 22%);
  padding: 13px 15px;
  border: 1px solid rgba(227,95,34,.15);
  border-radius: 16px;
  background: rgba(255,248,239,.95);
  box-shadow: 0 12px 30px rgba(61,32,20,.1);
  text-align: right;
  opacity: 0;
  transform: translateY(-50%) scale(.88);
  transition: opacity .35s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

.pa-burger__layer--right .pa-burger__label { right: 0; }
.pa-burger__layer--left .pa-burger__label { left: 0; }
.pa-burger__label::after { content: ""; position: absolute; top: 50%; width: 44px; height: 2px; background: var(--pa-accent); opacity: .55; }
.pa-burger__layer--right .pa-burger__label::after { right: 100%; }
.pa-burger__layer--left .pa-burger__label::after { left: 100%; }
.pa-burger__label strong { display: block; color: var(--pa-accent); font-size: 16px; }
.pa-burger__label span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.8; }

.pa-burger__hint {
  position: absolute;
  z-index: 10;
  left: 50%; bottom: 8px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  transform: translateX(-50%);
  min-width: 235px;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--pa-accent);
  box-shadow: 0 10px 25px rgba(227,95,34,.28);
  font-size: 14px;
  font-weight: 850;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.pa-burger__hint i { display: inline-block; font-style: normal; font-size: 19px; animation: pa-burger-hand 1.4s ease-in-out infinite; }
.pa-burger__stage:hover .pa-burger__hint { transform: translateX(-50%) translateY(-3px); box-shadow: 0 14px 32px rgba(227,95,34,.38); }

.pa-burger.is-open .pa-burger__stage { height: 880px; }
.pa-burger.is-open .pa-burger__whole { opacity: 0; transform: translate(-50%,-50%) scale(.82); filter: blur(4px); }
.pa-burger.is-open .pa-burger__stage::before { bottom: 7px; opacity: .6; }
.pa-burger.is-open .pa-burger__layer { transform: translate3d(0,var(--open-y),0) scale(1); opacity: 1; visibility: visible; transition-delay: var(--delay); transition-property: transform, opacity, visibility; transition-duration: .85s, .35s, 0s; }
.pa-burger.is-open .pa-burger__label { opacity: 1; transform: translateY(-50%) scale(1); transition-delay: calc(var(--delay) + 280ms); }
.pa-burger.is-open .pa-burger__hint { background: #36231c; box-shadow: 0 10px 25px rgba(54,35,28,.22); }

@keyframes pa-burger-hand { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (max-width: 767px) {
  .pa-burger { padding: 6px 6px 10px; }
  .pa-burger__stage { height: 460px; }
  .pa-burger__whole { width: 72%; max-width: 330px; }
  .pa-burger__layer:nth-of-type(1) { --open-y: -250px !important; }
  .pa-burger__layer:nth-of-type(2) { --open-y: -167px !important; }
  .pa-burger__layer:nth-of-type(3) { --open-y: -84px !important; }
  .pa-burger__layer:nth-of-type(4) { --open-y: 0px !important; }
  .pa-burger__layer:nth-of-type(5) { --open-y: 84px !important; }
  .pa-burger__layer:nth-of-type(6) { --open-y: 167px !important; }
  .pa-burger__layer:nth-of-type(7) { --open-y: 250px !important; }
  .pa-burger__layer img { width: calc(var(--layer-width) + 20%); }
  .pa-burger.is-open .pa-burger__stage { height: 700px; }
  .pa-burger__label { width: 132px; padding: 8px 9px; border-radius: 11px; }
  .pa-burger__layer--right .pa-burger__label { right: 0; }
  .pa-burger__layer--left .pa-burger__label { left: 0; }
  .pa-burger__label::after { width: 18px; }
  .pa-burger__label strong { font-size: 12px; }
  .pa-burger__label span { font-size: 9px; line-height: 1.6; }
  .pa-burger__hint { min-width: 215px; padding: 10px 16px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-burger__stage, .pa-burger__layer, .pa-burger__label { transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .pa-burger__hint i { animation: none; }
}