/* حركات إضافية - بيتزا بيكر (ملف مستقل، ما يغيّر التصميم) */
@media (prefers-reduced-motion: no-preference) {
  /* عنوان الهيرو: كل كلمة تطلع من تحت */
  .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
  .hero h1 .w > i { display: inline-block; font-style: normal; transform: translateY(110%); animation: wordUp .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * .12s + .2s); }
  @keyframes wordUp { to { transform: none; } }
  .hero h1 small { animation: fadeUp .8s .7s both; }
  .hero > p, .hero-btns { animation: fadeUp .8s .9s both; }

  /* شرارات صاعدة من البيتزا */
  .hero-pizza .ember { position: absolute; bottom: 10%; width: 5px; height: 5px; border-radius: 50%; background: #ffb21a; box-shadow: 0 0 8px 2px rgba(255,160,0,.7); opacity: 0; pointer-events: none; animation: ember var(--t) var(--d) ease-out infinite; }
  @keyframes ember { 0% { transform: translate(0,0) scale(1); opacity: 0; } 15% { opacity: .95; } 100% { transform: translate(var(--x), -150px) scale(.2); opacity: 0; } }
  .hero.off *, .hero.off *::before { animation-play-state: paused !important; }

  /* لمعة تعدّي على صورة الصنف عند الإضافة */
  .card.pop { animation: cardPop .5s cubic-bezier(.3,1.5,.5,1); }
  @keyframes cardPop { 40% { transform: scale(1.025); } }

  /* شارة السلة */
  .badge.pop { animation: badgePop .5s cubic-bezier(.3,1.8,.5,1); }
  @keyframes badgePop { 0% { transform: scale(1); } 40% { transform: scale(1.7) rotate(-8deg); } 100% { transform: scale(1); } }

  /* موجة الضغط على زر الإضافة */
  .add { position: relative; overflow: hidden; }
  .rip { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); pointer-events: none; animation: rip .6s ease-out forwards; }
  @keyframes rip { to { transform: scale(1); opacity: 0; } }

  /* صور الأصناف: تميل مع الماوس على الكمبيوتر */
  @media (hover: hover) and (pointer: fine) { .card { perspective: 900px; } .card .photo { transition: transform .15s ease-out; transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); } }

  /* قصاصات الاحتفال بعد تأكيد الطلب */
  .confetti { position: fixed; top: -40px; z-index: 100000; pointer-events: none; font-size: 1.6rem; will-change: transform; }
}

/* ملخص الطلب + زر الإلغاء */
.osum { margin: .3rem 0 .6rem; padding: .6rem .8rem; background: #1f1f1f; border-radius: 14px; }
.osum p { display: flex; justify-content: space-between; gap: .6rem; color: #fff; padding: .15rem 0; }
.osum p.disc { color: #46d36d; } .osum p.tot { border-top: 1px dashed #444; margin-top: .3rem; padding-top: .4rem; color: var(--yellow); font-weight: 900; }
.osum p.meta { color: var(--muted); justify-content: flex-start; font-size: .9rem; }
.status .cancelbtn { background: #3a1414; color: #ff8a8a; border: 1px solid #ff6b6b; font-weight: 800; font-family: inherit; }
.status p.hint { color: var(--yellow); margin-top: .5rem; }

/* غلاف صورة الصنف وطبقة المؤثرات */
.pw { position: relative; overflow: hidden; width: calc(100% + 2.2rem); margin: -1.1rem -1.1rem 0; aspect-ratio: 4 / 3; border-radius: 22px 22px 0 0; background: #222; }
.pw .photo { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx > * { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pw.live .photo { animation: kb 14s ease-in-out var(--k, 0s) infinite alternate; }
  @keyframes kb { from { scale: 1; translate: 0 0; } to { scale: 1.1; translate: -2% -1.5%; } }
  .fx .st { position: absolute; bottom: 14%; width: 9px; height: 52px; border-radius: 9px; background: linear-gradient(to top, rgba(255,255,255,.5), transparent); }
  .fx .s1 { left: 34%; } .fx .s2 { left: 50%; } .fx .s3 { left: 64%; }
  .pw.live .st { animation: wisp 3.2s ease-in infinite; } .pw.live .s2 { animation-delay: .9s; } .pw.live .s3 { animation-delay: 1.8s; }
  @keyframes wisp { 0% { transform: translateY(20px) scaleX(1); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-70px) scaleX(2.4); opacity: 0; } }
  .fx .tp { position: absolute; font-size: 1.3rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
  .fx .t0 { left: 8%; bottom: 4%; } .fx .t1 { right: 10%; bottom: 8%; } .fx .t2 { left: 28%; bottom: 0; } .fx .t3 { right: 30%; bottom: 2%; }
  .pw.live .tp { animation: drift 5.5s ease-in-out infinite; } .pw.live .t1 { animation-delay: 1.2s; } .pw.live .t2 { animation-delay: 2.4s; } .pw.live .t3 { animation-delay: 3.4s; }
  @keyframes drift { 0% { transform: translateY(0) rotate(-10deg) scale(.7); opacity: 0; } 20% { opacity: 1; } 80% { opacity: .9; } 100% { transform: translateY(-150px) rotate(25deg) scale(1.1); opacity: 0; } }
  .fx .shine { position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-18deg); }
  .pw.live .shine { animation: shine 7s var(--k, 0s) ease-in-out infinite; }
  @keyframes shine { 0% { translate: 0 0; opacity: 1; } 30%, 100% { translate: 520% 0; opacity: 1; } }
}

/* أصناف بدون صورة: شريط صغير بنفس المؤثرات */
.pw.mini { aspect-ratio: 16 / 7; background: radial-gradient(circle at 50% 80%, #4a3408 0%, #1a1a1a 75%); }
.pw .big { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.2rem; }
@media (prefers-reduced-motion: no-preference) { .pw.live .big { animation: bigFloat 4s ease-in-out infinite; } @keyframes bigFloat { 50% { transform: translateY(-8px) rotate(6deg) scale(1.08); } } }

/* ===== المقدمة السينمائية ===== */
.intro { animation-delay: 12s; }
.cin { position: relative; display: grid; place-items: center; width: 100vw; height: 100vh; overflow: hidden; }
.cin > * { grid-area: 1 / 1; }
.cin-glow { width: 120vw; height: 120vw; max-width: 700px; max-height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(255,150,0,.35) 0%, rgba(255,150,0,0) 62%); animation: glowPulse 4s ease-in-out infinite alternate; }
@keyframes glowPulse { from { transform: scale(.8); opacity: .6; } to { transform: scale(1.1); opacity: 1; } }
.cin-stage { animation: stageOut .8s 4.6s cubic-bezier(.6,0,.9,.4) forwards; }
@keyframes stageOut { to { transform: scale(2.8); opacity: 0; } }
.cin-scene { width: min(62vw, 250px); aspect-ratio: 1; perspective: 850px; }
.cin-cam { width: 100%; height: 100%; transform-style: preserve-3d; animation: camMove 4.8s cubic-bezier(.45,.05,.3,1) forwards; }
.cin-pz { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: pzSpin 4.8s cubic-bezier(.3,.1,.25,1) forwards; }
@keyframes camMove {
  0% { transform: rotateX(0) scale(.1); } 14% { transform: rotateX(0) scale(1); } 32% { transform: rotateX(62deg) scale(1); }
  50% { transform: rotateX(80deg) scale(1.15); } 68% { transform: rotateX(25deg) scale(1.35); } 85% { transform: rotateX(55deg) scale(1.05); } 100% { transform: rotateX(38deg) scale(1.08); } }
@keyframes pzSpin { from { transform: rotateZ(-260deg); } to { transform: rotateZ(430deg); } }
.ly { position: absolute; inset: 0; border-radius: 50%; }
.ly.shd { background: radial-gradient(circle, rgba(0,0,0,.65) 40%, transparent 72%); inset: -12%; filter: blur(6px); }
.ly.crust { background: radial-gradient(circle, #f0b552 0 90%, #b8741c 100%); }
.ly.sauce { inset: 7%; background: radial-gradient(circle, #e23a2a 0, #c21f1f 90%); }
.ly.cheese { inset: 9%; background: radial-gradient(circle at 30% 30%, #ffe28a 0 12%, transparent 13%), radial-gradient(circle at 70% 68%, #ffe28a 0 14%, transparent 15%), radial-gradient(circle at 68% 28%, #ffe9a8 0 8%, transparent 9%), radial-gradient(circle, #ffd35c 0, #f6bd3a 100%); }
.ly.pep { background: radial-gradient(circle at 35% 35%, #e8463f 0 12%, transparent 14%), #b3121b; inset: auto; }
.ly.oli { background: radial-gradient(circle, #ffd35c 0 30%, #2d2d2d 32%); inset: auto; }
.ly.leaf { border-radius: 50%; background: #3aa04a; inset: auto; }
.ly.cuts { background: repeating-conic-gradient(from 0deg, rgba(70,30,0,.8) 0 1.4deg, transparent 1.4deg 45deg); -webkit-mask: radial-gradient(circle, #000 79%, transparent 80%); mask: radial-gradient(circle, #000 79%, transparent 80%); opacity: 0; animation: cutsIn .6s 3.7s forwards; }
@keyframes cutsIn { to { opacity: 1; } }
.cin-flash { width: 40vw; height: 40vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,230,150,.95), rgba(255,170,0,0) 70%); opacity: 0; animation: flash .9s 4.7s ease-out forwards; }
@keyframes flash { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(4); opacity: 0; } }
.spk { width: 7px; height: 7px; border-radius: 50%; background: #ffd35c; box-shadow: 0 0 10px 3px rgba(255,190,40,.8); opacity: 0; animation: spk 1.2s 4.9s ease-out forwards; }
@keyframes spk { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(.2); opacity: 0; } }
.cin-end { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cin-logo { width: 100px; height: 100px; border-radius: 26px; opacity: 0; box-shadow: 0 0 46px rgba(255,190,40,.5); animation: logoIn .9s 5.05s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes logoIn { from { transform: scale(.3) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cin-name { color: #ffc61a; font-size: 2.7rem; line-height: 1.15; margin-top: .8rem; font-weight: 900; }
.cin-name .cw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; }
.cin-name .cw i { display: inline-block; font-style: normal; transform: translateY(115%); animation: wordUp .8s 5.4s cubic-bezier(.2,.8,.2,1) forwards; }
.cin-name .cw + .cw i { animation-delay: 5.55s; }
.cin-name small { display: block; color: #fff; font-size: 1rem; letter-spacing: 6px; opacity: 0; animation: fadeUp .8s 5.9s both; }
.cin-hello { color: #fff; font-size: 2.2rem; font-weight: 900; margin-top: 1.1rem; opacity: 0; animation: fadeUp .9s 6.1s both; }
.cin-hello::after { content: ""; display: block; height: 3px; width: 0; margin: .45rem auto 0; background: linear-gradient(90deg, transparent, #ffc61a, transparent); animation: lineGrow .9s 6.6s ease-out forwards; }
@keyframes lineGrow { to { width: 100%; } }
.cin-sub { color: #ffd98a; margin-top: .6rem; opacity: 0; animation: fadeUp .8s 6.8s both; }
.introanim { padding: 0; width: 100%; }
.cin { width: 100%; height: 100vh; height: 100dvh; }
.cin { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }


/* ===== تتبع الطلب بحركة ===== */
.tv { text-align: center; padding: .6rem .4rem .3rem; margin: .2rem 0 .5rem; background: radial-gradient(circle at 50% 40%, #2d2108, #171717 75%); border-radius: 18px; }
.tv p { color: #ffd98a !important; font-weight: 800; margin-top: .5rem; }
.tv .ring { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--yellow); font-size: 2.4rem; }
.tv .chef-e { display: inline-block; font-size: 3.4rem; }
.tv.done > span { display: inline-block; font-size: 3.4rem; }
/* الفرن */
.ov { position: relative; width: 170px; height: 118px; margin: .3rem auto 0; background: linear-gradient(#3b3b3b, #1f1f1f); border: 3px solid #555; border-radius: 16px; }
.ov-top { position: absolute; top: 8px; inset-inline: 14px; display: flex; justify-content: space-around; }
.ov-top i { width: 14px; height: 14px; border-radius: 50%; background: #888; border: 2px solid #bbb; }
.ov-win { position: absolute; inset: 30px 16px 12px; border-radius: 12px; background: radial-gradient(circle at 50% 80%, #ff9a1a, #b53a00 70%); border: 3px solid #222; box-shadow: inset 0 0 18px rgba(255,200,60,.8), 0 0 22px rgba(255,120,0,.5); display: grid; place-items: center; overflow: hidden; }
.ov-pz { font-size: 2.3rem; }
.fire { position: absolute; bottom: -4px; font-size: 1.2rem; } .fire.f1 { inset-inline-start: 10%; } .fire.f2 { inset-inline-end: 10%; }
.ov-steam { position: absolute; top: -34px; inset-inline: 0; display: flex; justify-content: space-evenly; }
.ov-steam i { width: 8px; height: 34px; border-radius: 8px; background: linear-gradient(to top, rgba(255,255,255,.5), transparent); opacity: 0; }
/* الطريق */
.road { position: relative; height: 70px; margin: .2rem .4rem 0; }
.road .a, .road .b { position: absolute; bottom: 4px; font-size: 2rem; } .road .a { right: 0; } .road .b { left: 0; }
.road .line { position: absolute; bottom: 14px; left: 2.4rem; right: 2.4rem; border-top: 3px dashed #666; }
.road .sc { position: absolute; bottom: 12px; right: calc(var(--p, .05) * (100% - 2.8rem)); font-size: 2rem; transition: right 2s linear; }
@media (prefers-reduced-motion: no-preference) {
  .tv .ring { animation: ringPulse 1.6s ease-out infinite; }
  @keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(255,198,26,.6); } 100% { box-shadow: 0 0 0 26px rgba(255,198,26,0); } }
  .tv .chef-e { animation: chefHop 1s ease-in-out infinite; }
  @keyframes chefHop { 50% { transform: translateY(-9px) rotate(-6deg); } }
  .ov-win { animation: ovGlow 1.8s ease-in-out infinite alternate; }
  @keyframes ovGlow { from { filter: brightness(.9); } to { filter: brightness(1.25); } }
  .ov-pz { animation: ovSpin 6s linear infinite; } @keyframes ovSpin { to { transform: rotate(360deg); } }
  .fire { animation: flick .5s ease-in-out infinite alternate; } .fire.f2 { animation-delay: .25s; }
  @keyframes flick { from { transform: scale(.85) translateY(2px); } to { transform: scale(1.2) translateY(-3px); } }
  .ov-steam i { animation: wisp 2.6s ease-in infinite; } .ov-steam i:nth-child(2) { animation-delay: .8s; } .ov-steam i:nth-child(3) { animation-delay: 1.6s; }
  .road .sc { animation: ride .5s ease-in-out infinite alternate; } @keyframes ride { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-3px) rotate(2deg); } }
  .road .line { animation: roadMove 1s linear infinite; background: none; } @keyframes roadMove { to { border-top-color: #aaa; } }
  .tv.done > span { animation: doneBounce 1.2s ease-in-out infinite; } @keyframes doneBounce { 30% { transform: scale(1.25) rotate(-10deg); } 60% { transform: scale(.95) rotate(8deg); } }
}

/* علبة البيتزا */
.pbx { position: fixed; z-index: 9999; pointer-events: none; will-change: transform, opacity; }
.pbx-box { position: relative; width: 100%; height: 100%; perspective: 520px; border-radius: 10px; background: linear-gradient(145deg, #d3a468, #a8743a); box-shadow: 0 10px 26px rgba(0,0,0,.55); }
.pbx-in { position: absolute; inset: 8px; border-radius: 6px; background: radial-gradient(circle, #6a3f16, #43260c); box-shadow: inset 0 0 14px rgba(0,0,0,.7); }
.pbx-pz { position: absolute; inset: 15%; display: grid; place-items: center; font-size: 3.4rem; opacity: 0; }
.pbx-pz img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #f0b552; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.pbx-lid { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(145deg, #dcae72, #b98245); border: 2px solid #8c5c28; transform-origin: top center; transform: rotateX(-172deg); display: grid; place-items: center; }
.pbx-lid img { width: 52%; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* ===== مؤشر الفرن ===== */
.ovenbar { display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem 1rem; font-size: .95rem; color: #fff; background: linear-gradient(90deg, #5a2a00, #8a3a00 50%, #5a2a00); border-bottom: 1px solid #b85a00; }
.ovenbar span { color: #ffd98a; }
.ovenbar.off { background: #232323; border-color: #3a3a3a; } .ovenbar.pause { background: #3a1414; border-color: #ff6b6b; }
.ovenbar .flm { display: inline-block; }

/* سكينة العناوين */
.sec-title { position: relative; }
.cut { position: absolute; inset-inline: 8px; bottom: -11px; height: 22px; pointer-events: none; }
.cut .ln { position: absolute; top: 10px; right: 0; height: 3px; width: 0; background: repeating-linear-gradient(270deg, #ffc61a 0 8px, transparent 8px 14px); }
.cut .wh { position: absolute; top: 0; right: 0; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.cut .sp { transform-origin: 20px 20px; }
@media (prefers-reduced-motion: no-preference) {
  .ovenbar .flm { animation: flick .5s ease-in-out infinite alternate; }
  .cut { animation: cutFade .4s 1.7s forwards; } @keyframes cutFade { to { opacity: 0; } }
  .cut .ln { animation: cutLine 1.2s cubic-bezier(.4,0,.3,1) forwards; } @keyframes cutLine { to { width: 100%; } }
  .cut .wh { animation: cutRoll 1.2s cubic-bezier(.4,0,.3,1) forwards; } @keyframes cutRoll { to { right: calc(100% - 22px); } }
  .cut .sp { animation: cutSpin 1.2s cubic-bezier(.4,0,.3,1) forwards; } @keyframes cutSpin { to { transform: rotate(-900deg); } }
}

/* الشيف */
.chef { position: fixed; left: .5rem; top: calc(env(safe-area-inset-top, 0px) + .3rem); width: 50px; z-index: 31; opacity: 0; transform: translateY(-40px); transition: opacity .5s, transform .5s cubic-bezier(.2,1.4,.4,1); cursor: pointer; }
.chef.here { opacity: 1; transform: none; }
.chef svg { display: block; width: 100%; overflow: visible; }
.chef .arm { transform-origin: 76px 82px; } .chef .swt { opacity: 0; }
.chef .bub { position: absolute; top: 100%; left: 0; transform: translate(0, -6px) scale(.8); transform-origin: top left; white-space: nowrap; background: #fff; color: #151515; font-weight: 800; font-size: .85rem; padding: .3rem .7rem; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.4); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.chef .bub::after { content: ""; position: absolute; bottom: 100%; left: 18px; border: 6px solid transparent; border-bottom-color: #fff; }
.chef.show .bub { opacity: 1; transform: translate(0, 2px) scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .chef.here svg { animation: chefIdle 3s ease-in-out infinite; } @keyframes chefIdle { 50% { transform: translateY(-2px) scale(1.02); } }
  .chef .eyes { animation: blink 4s infinite; transform-origin: 50px 52px; } @keyframes blink { 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
  .chef.wave .arm { animation: wave .5s ease-in-out 4 alternate; } @keyframes wave { from { transform: rotate(-22deg); } to { transform: rotate(28deg); } }
  .chef.clap svg { animation: chefClap .6s cubic-bezier(.3,1.6,.5,1); } @keyframes chefClap { 40% { transform: translateY(-14px) scale(1.12) rotate(-4deg); } }
  .chef.clap .arm { animation: wave .18s ease-in-out 5 alternate; }
  .chef.sweat svg { animation: chefTired 1.4s ease-in-out; } @keyframes chefTired { 25% { transform: rotate(-6deg) translateY(2px); } 60% { transform: rotate(5deg); } }
  .chef.sweat .swt { animation: drop 1.4s ease-in; } @keyframes drop { 0% { opacity: 0; transform: translateY(-4px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
}