/* =========================================================
   Deer Café — page-intro.css
   Creative page load animation system
   ========================================================= */

/* ── keyframes ───────────────────────────────────────────── */

/* عمومی: fade + slide از پایین */
@keyframes deerSlideUp {
  0%   { opacity: 0; transform: translateY(28px) scale(.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* هدر: از بالا */
@keyframes deerSlideDown {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0);     }
}

/* نام کاربر: از راست (RTL) */
@keyframes deerSlideRight {
  0%   { opacity: 0; transform: translateX(32px); }
  100% { opacity: 1; transform: translateX(0);    }
}

/* لوگو hero: bounce با زاویه */
@keyframes deerCupBounce {
  0%   { opacity: 0; transform: scale(.55) rotate(-12deg); }
  55%  { opacity: 1; transform: scale(1.08) rotate(3deg);  }
  72%  { transform: scale(.95) rotate(-1.5deg); }
  86%  { transform: scale(1.03) rotate(.5deg);  }
  100% { transform: scale(1)   rotate(0deg);    }
}

/* card های سریع: pop */
@keyframes deerPopIn {
  0%   { opacity: 0; transform: translateY(20px) scale(.88); }
  62%  { transform: translateY(-5px) scale(1.03); }
  80%  { transform: translateY(2px)  scale(.99);  }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* loyalty card: spring از پایین */
@keyframes deerSpringUp {
  0%   { opacity: 0; transform: translateY(48px) scale(.92); }
  58%  { opacity: 1; transform: translateY(-8px) scale(1.02);  }
  76%  { transform: translateY(4px) scale(.99);  }
  89%  { transform: translateY(-2px) scale(1.005); }
  100% { transform: translateY(0) scale(1);       }
}

/* nav: liquid glass materialize */
@keyframes deerNavIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(72px) scale(.82);
    filter: blur(14px);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px) scale(1.03);
    filter: blur(0px);
  }
  76% { transform: translateX(-50%) translateY(5px)  scale(.985); }
  88% { transform: translateX(-50%) translateY(-3px) scale(1.005); }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* shimmer sweep روی loyalty card */
@keyframes deerShimmer {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(320%)  skewX(-18deg); }
}

/* progress bar fill */
@keyframes deerProgressGrow {
  from { width: 0% !important; }
}

/* background bloom — یه بار موقع load */
@keyframes deerBloom {
  0%   { opacity: 0; transform: scale(.7); }
  100% { opacity: 1; transform: scale(1);  }
}

/* greeting fade */
@keyframes deerFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── initial hidden states ───────────────────────────────── */
/* JS موقع load این کلاس رو به المان‌ها میده */

.intro-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

/* nav جداگانه چون transform داره */
.bottom-nav.intro-hidden {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(80px) scale(.82) !important;
  filter: blur(14px) !important;
}

/* ── animation classes (JS اضافه می‌کنه) ─────────────────── */

.anim-slide-down {
  animation: deerSlideDown .55s cubic-bezier(.22,1,.36,1) forwards;
}

.anim-slide-up {
  animation: deerSlideUp .58s cubic-bezier(.22,1,.36,1) forwards;
}

.anim-slide-right {
  animation: deerSlideRight .52s cubic-bezier(.22,1,.36,1) forwards;
}

.anim-cup-bounce {
  animation: deerCupBounce .72s cubic-bezier(.22,1,.36,1) forwards;
}

.anim-pop {
  animation: deerPopIn .56s cubic-bezier(.22,1,.36,1) forwards;
}

.anim-spring-up {
  animation: deerSpringUp .72s cubic-bezier(.22,1,.36,1) forwards;
}

.anim-nav {
  animation: deerNavIn .80s cubic-bezier(.22,1,.36,1) forwards;
}

.anim-fade {
  animation: deerFade .50s ease forwards;
}

/* shimmer overlay روی loyalty card */
.lc-card {
  position: relative;
  overflow: hidden;
}

.lc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.48) 50%,
    transparent 70%
  );
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
}

.lc-card.do-shimmer::after {
  animation: deerShimmer .90s cubic-bezier(.4,0,.2,1) forwards;
}

/* progress bar re-animate */
.lc-progress-fill.do-grow {
  animation: deerProgressGrow .90s cubic-bezier(.22,1,.36,1) both;
}

/* ── page background bloom ───────────────────────────────── */
body.page-loading {
  animation: deerBloom .45s ease forwards;
}

/* ── stagger helpers ─────────────────────────────────────── */
.anim-delay-1  { animation-delay:  40ms  !important; }
.anim-delay-2  { animation-delay:  90ms  !important; }
.anim-delay-3  { animation-delay: 140ms  !important; }
.anim-delay-4  { animation-delay: 190ms  !important; }
.anim-delay-5  { animation-delay: 240ms  !important; }
.anim-delay-6  { animation-delay: 300ms  !important; }