/* ==========================================================================
   خادر · KHADR — طبقة الحركة (أنيميشن) + شاشة البداية (سكشنين)
   ========================================================================== */

/* ------------------------------------------------------------------
   1) شاشة البداية — بوابة الدخول
   ------------------------------------------------------------------ */
.splash{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:var(--green-950);overflow:hidden;
}
.splash.is-gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility .6s}
.splash__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.splash__bg img{
  width:100%;height:100%;object-fit:cover;opacity:.32;
  animation:kenburns 22s ease-in-out infinite alternate;filter:saturate(.9);
}
.splash__veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(90% 70% at 50% 30%,rgba(201,169,106,.16),transparent 60%),
    radial-gradient(120% 100% at 50% 120%,rgba(12,21,16,.96),rgba(7,10,7,.92) 70%);
}
.splash__particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.particle{
  position:absolute;bottom:-10vh;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,106,.55),rgba(201,169,106,0) 70%);
  filter:blur(2px);opacity:0;
  animation:floatUp linear infinite;
}
.splash__inner{
  position:relative;z-index:3;width:min(100% - 2rem,560px);text-align:center;
  padding:1.5rem 0;
}
.splash__logo{
  position:relative;margin:0 auto 1.2rem;animation:splashIn .9s cubic-bezier(.2,.9,.25,1) both;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.splash__logo-main{
  width:min(58%,220px);height:auto;object-fit:contain;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.65));
}
.splash__logo-word{
  width:min(76%,290px);height:auto;object-fit:contain;opacity:.96;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));
}
.splash__logo::after{
  content:"";position:absolute;inset-block-start:-18%;inset-inline-start:50%;transform:translateX(-50%);
  width:78%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,106,.22),transparent 68%);
  animation:ringPulse 2.8s ease-out infinite;pointer-events:none;
}
.splash__title{
  font-size:clamp(3rem,12vw,5rem);margin:0;line-height:1;
  color:var(--cream);text-shadow:0 14px 40px rgba(0,0,0,.6);
}
.splash__title span{display:inline-block;opacity:0;transform:translateY(26px) rotate(6deg);animation:letterIn .7s cubic-bezier(.2,.9,.25,1) forwards}
.splash__en{
  display:block;margin-top:.5rem;color:var(--gold);letter-spacing:.42em;font-size:.8rem;
  opacity:0;animation:splashIn .8s .55s ease both;
}
.splash__tag{
  margin:1.1rem 0 1.8rem;color:rgba(244,237,224,.78);font-size:1.02rem;
  opacity:0;animation:splashIn .8s .7s ease both;
}
.splash__actions{display:grid;gap:.8rem;max-width:420px;margin:0 auto}
.splash__btn{
  display:flex;align-items:center;gap:1rem;text-align:start;
  padding:1.05rem 1.3rem;border-radius:20px;position:relative;overflow:hidden;
  opacity:0;animation:splashIn .75s cubic-bezier(.2,.9,.25,1) forwards;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.splash__btn--gold{
  background:linear-gradient(140deg,#C8915A,var(--copper) 55%,#8E5529);color:#FFF6E8;
  box-shadow:0 16px 40px rgba(176,112,58,.35);animation-delay:.85s;
}
.splash__ic svg{width:1.6rem;height:1.6rem}
.splash__btn--ghost{
  background:rgba(244,237,224,.05);border:1.5px solid rgba(244,237,224,.22);color:var(--cream);
  animation-delay:1s;
}
.splash__btn:hover{transform:translateY(-3px);box-shadow:0 22px 52px rgba(0,0,0,.45)}
.splash__btn--ghost:hover{border-color:var(--gold);background:rgba(201,169,106,.14)}
.splash__ic{font-size:1.9rem;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.splash__tx b{display:block;font-size:1.16rem;font-family:var(--font-display)}
.splash__tx small{display:block;font-size:.84rem;opacity:.78;font-weight:500}
.splash__skip{
  display:inline-block;margin-top:1.4rem;color:rgba(244,237,224,.55);font-size:.86rem;
  text-decoration:underline;text-underline-offset:5px;opacity:0;animation:splashIn .8s 1.2s ease both;
  transition:.2s;
}
.splash__skip:hover{color:var(--gold)}
.splash__hint{
  position:absolute;inset-block-end:1.2rem;inset-inline:0;text-align:center;
  font-size:.78rem;color:rgba(244,237,224,.4);z-index:3;
}

/* ------------------------------------------------------------------
   12) شاشة البداية على الشاشات الصغيرة (جوال / تابلت)
   ------------------------------------------------------------------ */
@media (max-width:620px){
  .splash{align-content:start;overflow-y:auto;padding:1.4rem 0}
  .splash__inner{padding:.5rem 0 1rem}
  .splash__logo{width:100%;margin-bottom:.8rem;gap:.4rem}
  .splash__logo-main{width:min(52%,190px)}
  .splash__logo-word{width:min(72%,250px)}
  .splash__title{font-size:clamp(2.6rem,15vw,3.4rem)}
  .splash__en{font-size:.7rem;letter-spacing:.3em}
  .splash__tag{margin:.7rem 0 1.1rem;font-size:.95rem}
  .splash__btn{padding:.85rem 1rem;border-radius:16px;gap:.75rem}
  .splash__ic{font-size:1.5rem}
  .splash__tx b{font-size:1.05rem}
  .splash__tx small{font-size:.78rem}
  .splash__skip{margin-top:1rem}
  .splash__hint{position:static;margin-top:.4rem;padding:0 1rem;font-size:.72rem}
}
@media (max-height:560px) and (min-width:621px){
  .splash__logo{width:100%;margin-bottom:.5rem;gap:.3rem}
  .splash__logo-main{width:min(46%,170px)}
  .splash__logo-word{width:min(66%,220px)}
  .splash__title{font-size:2.8rem}
  .splash__tag{margin:.5rem 0 .9rem}
}

@keyframes splashIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes letterIn{to{opacity:1;transform:none}}
@keyframes ringPulse{
  0%{transform:scale(.9);opacity:.8}
  70%{transform:scale(1.35);opacity:0}
  100%{opacity:0}
}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}}
@keyframes floatUp{
  0%{transform:translateY(0) scale(.7);opacity:0}
  12%{opacity:.7}
  100%{transform:translateY(-115vh) scale(1.25);opacity:0}
}

/* ------------------------------------------------------------------
   2) ظهور تدريجي عند التمرير
   ------------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}
.reveal--right{transform:translateX(-34px)}
.reveal--left{transform:translateX(34px)}
.reveal--zoom{transform:scale(.93)}
.reveal--blur{filter:blur(8px)}
.reveal.is-in{filter:blur(0)}

/* ------------------------------------------------------------------
   3) البطل
   ------------------------------------------------------------------ */
.hero__copy .script{animation:splashIn .9s .1s ease both}
.hero__title span{animation:titleIn 1s cubic-bezier(.2,.9,.25,1) both}
.hero__title span:nth-child(1){animation-delay:.2s}
.hero__title span:nth-child(2){animation-delay:.34s}
.hero__title span:nth-child(3){animation-delay:.48s}
.hero__lead{animation:splashIn .9s .62s ease both}
.hero__cta{animation:splashIn .9s .74s ease both}
.perks-mini li{animation:splashIn .9s .86s ease both}
.perks-mini li:nth-child(2){animation-delay:.96s}
.perks-mini li:nth-child(3){animation-delay:1.06s}
.hero__visual{animation:visualIn 1.3s .3s cubic-bezier(.2,.9,.25,1) both}
.float-card--a{animation:cardPop .8s 1.1s cubic-bezier(.2,1.3,.4,1) both,bob 5s 2s ease-in-out infinite}
.float-card--b{animation:cardPop .8s 1.3s cubic-bezier(.2,1.3,.4,1) both,bob 6s 2.2s ease-in-out infinite}
@keyframes titleIn{from{opacity:0;transform:translateY(40px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes visualIn{from{opacity:0;transform:translateX(-50px) scale(.94)}to{opacity:1;transform:none}}
@keyframes cardPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------
   4) بطاقات المشروبات — بخار + لمعة + ميلان
   ------------------------------------------------------------------ */
.card__media::before{
  content:"";position:absolute;inset-inline-start:12%;inset-block-end:18%;width:22px;height:22px;
  border-radius:50%;filter:blur(10px);background:rgba(244,237,224,.35);opacity:0;
  animation:steam 4.2s ease-in-out infinite;pointer-events:none;z-index:2;
}
.card__media::after{
  content:"";position:absolute;inset-inline-start:26%;inset-block-end:16%;width:16px;height:16px;
  border-radius:50%;filter:blur(9px);background:rgba(244,237,224,.28);opacity:0;
  animation:steam 4.2s 1.6s ease-in-out infinite;pointer-events:none;z-index:2;
}
.card:nth-child(3n+2) .card__media::before{inset-inline-start:62%}
.card:nth-child(3n+2) .card__media::after{inset-inline-start:74%}
.card:nth-child(3n) .card__media::before{inset-inline-start:38%}
@keyframes steam{
  0%{opacity:0;transform:translateY(6px) scale(.6)}
  30%{opacity:.55}
  100%{opacity:0;transform:translateY(-70px) scale(1.5)}
}
.card__media::marker{content:""}
.card .shine{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
}
.card .shine::before{
  content:"";position:absolute;top:-60%;bottom:-60%;width:45%;inset-inline-start:-70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(0) rotate(8deg);transition:transform .9s cubic-bezier(.2,.8,.3,1);
}
.card:hover .shine::before{transform:translateX(260%) rotate(8deg)}
.card:hover{transform:translateY(-8px) scale(1.012)}
.card__media img{transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.card:hover .card__media img{transform:scale(1.08) rotate(.4deg)}

/* ------------------------------------------------------------------
   5) أزرار ذهبية — لمعان
   ------------------------------------------------------------------ */
.btn--gold{position:relative;overflow:hidden}
.btn--gold::after{
  content:"";position:absolute;top:-50%;bottom:-50%;width:40%;inset-inline-start:-70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen{0%,65%{transform:translateX(0) rotate(10deg);opacity:0}70%{opacity:.9}100%{transform:translateX(320%) rotate(10deg);opacity:0}}

/* ------------------------------------------------------------------
   6) شريط المشروبات المتحرك (ماركي)
   ------------------------------------------------------------------ */
/* التنسيق في site.css — هنا الحركة فقط (RTL: يتحرك لليمين) */
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------
   7) شريط تقدّم التمرير + ترويسة متقلصة
   ------------------------------------------------------------------ */
.scroll-progress{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;z-index:80;background:linear-gradient(90deg,var(--gold),var(--gold-soft));box-shadow:0 0 12px rgba(201,169,106,.6)}

/* ------------------------------------------------------------------
   8)，数量 نبض + موجة على الأزرار
   ------------------------------------------------------------------ */
.cart-btn.pulse{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.btn,.add-btn,.stab,.obtn,.chip{position:relative;overflow:hidden;isolation:isolate}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.35);pointer-events:none;animation:rip .6s ease-out forwards;z-index:-1}
@keyframes rip{to{transform:scale(3.2);opacity:0}}

/* ------------------------------------------------------------------
   9) بوابة الموظف — حركات
   ------------------------------------------------------------------ */
.order{animation:cardIn .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.stab{transition:transform .2s ease,background .2s ease,color .2s ease}
.stab:hover{transform:translateY(-2px)}
.obtn{transition:transform .18s ease,background .18s ease}
.obtn:hover{transform:translateY(-2px)}
.fab{animation:fabIn .6s cubic-bezier(.2,1.2,.4,1) both}
@keyframes fabIn{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
.fab::after{
  content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid rgba(201,169,106,.55);
  animation:ringPulse 2.8s ease-out infinite;pointer-events:none;
}
.badge{animation:pop .4s ease}

/* ------------------------------------------------------------------
   10) ولمعة على الأزرار العادية + معاينة روابط
   ------------------------------------------------------------------ */
.add-btn{position:relative;overflow:hidden;transition:transform .2s ease,background .2s ease}
.add-btn:hover{transform:translateY(-2px)}
.branch,.card,.feature{will-change:transform}

/* ------------------------------------------------------------------
   11) موجة على عناصر القسم (خط متحرك)
   ------------------------------------------------------------------ */
.ornament::before,.ornament::after{transition:width 1s .3s cubic-bezier(.2,.8,.3,1)}
.section__head.reveal:not(.is-in) .ornament::before,.section__head.reveal:not(.is-in) .ornament::after{width:0}