/* =================================================================
   آيبال — نظام الحركة (Motion)
   مبدأ: دخول واحد منسّق لكل صفحة + تفاعلات دقيقة على ما يلمسه الزبون.
   منحنى موحّد --ease ومدد 250–1000ms. تتوقف كلها مع prefers-reduced-motion
   (القاعدة الحاسمة بـ !important في store.css).
   ================================================================= */

/* انتقال سلس بين صفحات الشراء (متصفحات Chromium) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .22s ease both; }
::view-transition-new(root) { animation: vtIn .42s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }

@keyframes riseBlur { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fieldIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes orbit { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(38deg) translate(-14px, 10px); } }
@keyframes pop { 50% { transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- الأزرار: لمعة عابرة + ضغط + حالة تحميل ---------- */
.btn-primary, .btn-orange { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-orange::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform: translateX(120%); transition: transform .8s var(--ease);
}
.btn-primary:hover::after, .btn-orange:hover::after { transform: translateX(-120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { transition: transform .35s var(--ease); }
.btn:hover .lucide-arrow-left { transform: translateX(-4px); }
.btn:hover .lucide-arrow-right { transform: translateX(4px); }
.btn.is-loading { pointer-events: none; opacity: .9 !important; }
.btn.is-loading svg { display: none; }
.btn.is-loading::before {
    content: ''; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 2.5px solid currentColor; border-inline-end-color: transparent; animation: spin .7s linear infinite;
}

/* ---------- صفحة الباقات ---------- */
.pay-head h1 { animation: riseBlur .8s var(--ease) both; }
.pay-head p { animation: riseBlur .8s .1s var(--ease) both; }
.plan.load-in { animation: planIn .9s var(--ease) backwards; } /* backwards: لا يحجز transform بعد الانتهاء فيبقى تأثير hover */
.plan.load-in.d1 { animation-delay: .12s; } .plan.load-in.d2 { animation-delay: .22s; } .plan.load-in.d3 { animation-delay: .32s; }
@keyframes planIn { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
.plan.featured.load-in { animation-name: planInFeatured; }
@keyframes planInFeatured { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: translateY(-14px); } }
.plan-features li { animation: fadeSide .6s var(--ease) both; }
.plan-features li:nth-child(1) { animation-delay: .45s; } .plan-features li:nth-child(2) { animation-delay: .52s; }
.plan-features li:nth-child(3) { animation-delay: .59s; } .plan-features li:nth-child(4) { animation-delay: .66s; }
.plan-features li:nth-child(n+5) { animation-delay: .73s; }
@keyframes fadeSide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.plan-icon { transition: transform .5s var(--ease); }
.plan:hover .plan-icon { transform: rotate(-10deg) scale(1.08); }
.plan.featured::before { animation: orbit 14s ease-in-out infinite; }
.plan-badge { animation: badgeIn .7s .55s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes badgeIn { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
.plan-price b { display: inline-block; min-width: 1ch; }
.pay-trust div { animation: riseBlur .7s var(--ease) both; }
.pay-trust div:nth-child(1) { animation-delay: .5s; } .pay-trust div:nth-child(2) { animation-delay: .58s; } .pay-trust div:nth-child(3) { animation-delay: .66s; }

/* ---------- شريط المراحل ---------- */
.stepper { animation: riseBlur .6s var(--ease) both; }
.stepper-item.done:not(:last-child)::after { transform-origin: right center; animation: lineFill .7s var(--ease) both; }
.stepper-item:nth-child(1)::after { animation-delay: .1s; } .stepper-item:nth-child(2)::after { animation-delay: .2s; }
.stepper-item:nth-child(3)::after { animation-delay: .3s; } .stepper-item:nth-child(4)::after { animation-delay: .4s; }
@keyframes lineFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stepper-item.done .stepper-dot svg { animation: checkPop .5s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes checkPop { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
.stepper-item.current .stepper-dot { animation: dotIn .6s .25s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes dotIn { from { transform: scale(.6) rotate(20deg); } to { transform: rotate(-8deg); } }
.stepper-item.current .stepper-dot::after {
    content: ''; position: absolute; inset: -7px; border-radius: 18px; border: 2px solid var(--ib-primary);
    opacity: 0; animation: ring 2.2s 1s var(--ease) infinite;
}
@keyframes ring { 0% { opacity: .55; transform: scale(.85); } 70%, 100% { opacity: 0; transform: scale(1.25); } }

/* ---------- لوحة المرحلة + الملخص ---------- */
.wizard > .panel { animation: panelIn .7s .08s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
.summary-card { animation: summaryIn .8s .2s var(--ease) both; }
@keyframes summaryIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.summary-hero::after { animation: orbit 16s ease-in-out infinite; }
.panel-head .ico { animation: icoIn .7s .3s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes icoIn { from { opacity: 0; transform: scale(.5) rotate(-25deg); } to { opacity: 1; transform: none; } }
.form-grid > .field, .panel-body > .field, .amount-lock, .otp-sent-to, .otp-input, .timer-row { animation: fieldIn .6s var(--ease) both; }
.form-grid > .field:nth-child(1), .amount-lock, .otp-sent-to { animation-delay: .25s; }
.form-grid > .field:nth-child(2), .panel-body > .field, .otp-input { animation-delay: .33s; }
.form-grid > .field:nth-child(3), .timer-row { animation-delay: .41s; }
.form-grid > .field:nth-child(4) { animation-delay: .49s; }
.form-grid > .field:nth-child(n+5) { animation-delay: .57s; }
.panel-foot { animation: fieldIn .6s .5s var(--ease) both; }

/* الحقول */
.input { transition: border-color .25s, background .25s, box-shadow .35s var(--ease); }
.input.is-invalid { animation: shake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
.field-error { animation: errIn .4s var(--ease) both; }
@keyframes errIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.chip span { transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease); }
.chip span:active { transform: scale(.94); }
.chip input:checked + span { animation: pop .4s cubic-bezier(.2,.9,.3,1.5); }
.chip span::before { transition: transform .45s var(--ease), background .25s; }
.chip input:checked + span::before { transform: rotate(108deg); }
.notice { animation: noticeIn .55s var(--ease) both; }
@keyframes noticeIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.otp-input:focus { animation: otpGlow 2s ease-in-out infinite; }
@keyframes otpGlow { 50% { box-shadow: 0 0 0 9px rgba(112, 38, 123, .07); } }

/* ---------- الاستلام ---------- */
.deliver h2 { animation: riseBlur .8s .35s var(--ease) both; }
.deliver > p { animation: riseBlur .8s .45s var(--ease) both; }
.code-ticket { animation: ticketIn 1s .55s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes ticketIn { from { opacity: 0; transform: perspective(900px) rotateX(35deg) translateY(30px) scale(.94); } to { opacity: 1; transform: none; } }
.code-ticket .sq-a { animation: orbit 12s ease-in-out infinite; }
.code-ticket .sq-b { animation: floatSq 5s ease-in-out infinite; }
@keyframes floatSq { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(40deg) translateY(-6px); } }
.code-value.scrambling { color: rgba(255,255,255,.7); }
.deliver-actions, .deliver-meta, .deliver-note { animation: fieldIn .7s var(--ease) both; }
.deliver-actions { animation-delay: .9s; } .deliver-meta { animation-delay: 1s; } .deliver-note { animation-delay: 1.1s; }
.copy-btn.copied { animation: pop .45s cubic-bezier(.2,.9,.3,1.5); background: #fff; }

/* قصاصات احتفال بمربعات الهوية */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.confetti i { position: absolute; top: -20px; display: block; border-radius: 3px; opacity: 0; animation: confettiFall var(--d) var(--delay) cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes confettiFall {
    0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--x), 105vh, 0) rotate(var(--r)); }
}

@media (max-width: 1020px) {
    .plan.featured.load-in { animation-name: planIn; }
    .summary-card, .wizard > .panel { animation-name: fieldIn; }
}
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .confetti { display: none; }
}