/* ===== بيتزا بيكر - طبقة الإبهار (wow): بطاقات 3D + فرن حي =====
   للتراجع: احذف wow.css و wow.js وسطري الربط من index.html */

/* ---------- 6) بطاقات 3D تميل مع حركة الجوال / اللمس (نسخة خفيفة) ---------- */
.card .glr { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--glx, 50%) var(--gly, 28%), rgba(255,236,170,.20), transparent 55%); }
.card.tilt-on:not(#_) { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: box-shadow .3s, border-color .3s; }
.card.tilt-on .glr { opacity: 1; }
.card.tilt-on.tp { border-color: rgba(255,198,26,.5); }
/* وضع خفيف للجوالات الضعيفة: بدون ميلان وبدون حركات الطبقات فوق الصور */
html.lite .glr { display: none; }
html.lite .card.tilt-on:not(#_) { transform: none; }
html.lite .pw.live .photo, html.lite .pw.live .st, html.lite .pw.live .tp, html.lite .pw.live .shine, html.lite .pw.live .big { animation: none !important; }
html.lite .fx { display: none; }

/* ---------- 7) فرن حي: البيتزا تنضج قدام الزبون ---------- */
.ov2 { --k: .05; position: relative; width: 210px; margin: .4rem auto 0; }
.ov2-body { position: relative; padding: 12px 12px 14px; border-radius: 22px; border: 3px solid #5a5a5a; background: linear-gradient(#444, #222); box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.12); }
.ov2-knobs { display: flex; justify-content: space-around; margin: 0 6px 9px; }
.ov2-knobs i { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ddd, #777); border: 2px solid #999; box-shadow: 0 2px 3px rgba(0,0,0,.6); }
.ov2-knobs i:nth-child(2) { background: radial-gradient(circle at 35% 30%, #ffd88a, #ff8a1a); box-shadow: 0 0 10px rgba(255,140,20,.9); }
.ov2-win { position: relative; height: 130px; border-radius: 16px; overflow: hidden; border: 3px solid #151515; background: radial-gradient(circle at 50% 95%, rgba(255,150,30,calc(.55 + var(--k)*.4)), #7a2a00 62%, #2b0d00); box-shadow: inset 0 0 26px rgba(255,170,40,.85), 0 0 24px rgba(255,120,0,.45); display: grid; place-items: center; }
.ov2-win::before { content: ""; position: absolute; inset: 0; z-index: 4; background: linear-gradient(115deg, rgba(255,255,255,.18) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.07) 100%); pointer-events: none; }
.ov2-win::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 22px; z-index: 1; background: repeating-linear-gradient(90deg, #ffb13a 0 6px, #ff6a00 6px 12px, #ffd36a 12px 16px); opacity: .85; filter: blur(5px); transform-origin: bottom; }
.pz2 { position: relative; z-index: 2; width: 92px; height: 92px; border-radius: 50%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.6)); }
.pz2 b { position: absolute; inset: 0; border-radius: 50%; }
.pz2 .raw { background: radial-gradient(circle, #fff3c2 0 52%, #f2d98a 58%, #e2b865 70%, #d3a350 100%); }
.pz2 .ckd { opacity: var(--k); background:
  radial-gradient(circle at 30% 34%, rgba(150,70,10,.55) 0 7%, transparent 9%),
  radial-gradient(circle at 66% 62%, rgba(150,70,10,.5) 0 8%, transparent 10%),
  radial-gradient(circle at 58% 26%, rgba(150,70,10,.45) 0 5%, transparent 7%),
  radial-gradient(circle, #ffbf3a 0 46%, #f5a021 58%, #cf6d12 74%, #8c4309 100%); }
.pz2 s { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0553a, #a52410); box-shadow: inset 0 0 0 2px rgba(255,255,255,.10); text-decoration: none; filter: saturate(calc(.7 + var(--k)*.5)) brightness(calc(1.05 - var(--k)*.22)); }
.pz2 s.o { width: 10px; height: 10px; background: radial-gradient(circle at 50% 50%, #222 0 32%, #4a4a4a 36%); }
.pz2 .t1 { top: 14%; left: 38%; } .pz2 .t2 { top: 44%; left: 14%; } .pz2 .t3 { top: 46%; left: 62%; } .pz2 .t4 { top: 68%; left: 40%; } .pz2 .t5 { top: 27%; left: 63%; } .pz2 .t6 { top: 60%; left: 22%; } .pz2 .t7 { top: 28%; left: 20%; } .pz2 .t8 { top: 66%; left: 66%; }
.bubs { position: absolute; inset: 0; opacity: var(--k); }
.bubs u { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd05a); text-decoration: none; box-shadow: 0 0 6px rgba(255,220,120,.9); }
.bubs .u1 { width: 9px; height: 9px; top: 33%; left: 49%; } .bubs .u2 { width: 7px; height: 7px; top: 55%; left: 30%; } .bubs .u3 { width: 8px; height: 8px; top: 60%; left: 56%; } .bubs .u4 { width: 6px; height: 6px; top: 24%; left: 38%; }
.ov2-steam { position: absolute; top: -34px; inset-inline: 30px; display: flex; justify-content: space-between; pointer-events: none; }
.ov2-steam i { width: 9px; height: 34px; border-radius: 9px; background: linear-gradient(to top, rgba(255,255,255,.55), transparent); opacity: 0; }
.ov2-bar { height: 10px; margin: .75rem 4px 0; border-radius: 10px; background: #2a2a2a; border: 1px solid #3b3b3b; overflow: hidden; }
.ov2-bar i { display: block; height: 100%; width: calc(var(--k) * 100%); border-radius: 10px; background: linear-gradient(90deg, #ffe18a, #ffb400, #ff7a00); box-shadow: 0 0 10px rgba(255,170,0,.6); transition: width 1s linear; }
.ov2-lbl { display: flex; justify-content: space-between; margin: .25rem 6px 0; font-size: .72rem; color: #9a8a5a; font-weight: 700; }
.ov2-t { margin-top: .5rem; }
.ov2-t small { display: block; margin-top: .15rem; color: #b9a56a; font-weight: 600; font-size: .78rem; }

@media (prefers-reduced-motion: no-preference) {
  .pz2 { animation: pzSpin 16s linear infinite; }
  @keyframes pzSpin { to { transform: rotate(360deg); } }
  .bubs u { animation: bubPop 1.8s ease-in-out infinite; } .bubs .u2 { animation-delay: .5s; } .bubs .u3 { animation-delay: 1s; } .bubs .u4 { animation-delay: 1.4s; }
  @keyframes bubPop { 0%, 100% { transform: scale(.2); opacity: 0; } 55% { transform: scale(1); opacity: 1; } 80% { transform: scale(1.25); opacity: 0; } }
  .ov2-win { animation: ov2Glow 1.7s ease-in-out infinite alternate; }
  @keyframes ov2Glow { to { box-shadow: inset 0 0 34px rgba(255,190,60,1), 0 0 34px rgba(255,120,0,.65); } }
  .ov2-win::after { animation: ov2Fire .45s ease-in-out infinite alternate; }
  @keyframes ov2Fire { from { transform: scaleY(.7) translateX(-4px); } to { transform: scaleY(1.15) translateX(4px); } }
  .ov2-steam i { animation: ov2Wisp 2.6s ease-in infinite; } .ov2-steam i:nth-child(2) { animation-delay: .6s; } .ov2-steam i:nth-child(3) { animation-delay: 1.2s; } .ov2-steam i:nth-child(4) { animation-delay: 1.9s; }
  @keyframes ov2Wisp { 0% { transform: translateY(14px) scaleY(.6); opacity: 0; } 30% { opacity: calc(.35 + var(--k) * .5); } 100% { transform: translateY(-16px) scaleY(1.3) translateX(5px); opacity: 0; } }
  .ov2-knobs i:nth-child(2) { animation: knobPulse 1.2s ease-in-out infinite alternate; } @keyframes knobPulse { to { box-shadow: 0 0 16px rgba(255,160,30,1); } }
}
