/* ==========================================================================
   CanadaParvaz — حرکت
   قوانین: فقط transform و opacity؛ prefers-reduced-motion رعایت شود؛
   عنصر LCP و بالای صفحه انیمیشن ورود نمی‌گیرد؛ بدون JS همه‌چیز دیده می‌شود (.js روی html).
   ========================================================================== */

@keyframes intro-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes intro-bounce{
  0%  { opacity:0; transform:translateY(14px) scale(.94); }
  60% { opacity:1; transform:translateY(-2px) scale(1.012); }
  100%{ opacity:1; transform:none; }
}
@keyframes pop-in{ 0%{ opacity:0; transform:scale(.6); } 70%{ opacity:1; transform:scale(1.08); } 100%{ transform:scale(1); } }
@keyframes afloat{ from{ transform:translateY(-4px) rotate(-.4deg); } to{ transform:translateY(5px) rotate(.5deg); } }

/* لایه‌ی حالت: شستشوی رنگی نرم + فشردگی فنری */
.state-layer{ position:relative; isolation:isolate; overflow:hidden; transition:transform var(--t-med) var(--ease-spring); }
.state-layer::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:currentColor; opacity:0; transition:opacity var(--t-fast) var(--ease-standard); }
@media (hover:hover){ .state-layer:hover::after{ opacity:.07; } }
.state-layer:active::after{ opacity:.12; }
.state-layer:active{ transform:scale(.97); }

/* بالا آمدن کارت روی hover (فقط ماوس) */
@media (hover:hover){
  .lift{ transition:transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-standard); }
  .lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); }
}

/* درخشش عبوری روی کارت یا دکمه‌ی ویژه */
.shine{ position:relative; overflow:hidden; }
.shine::before{ content:""; position:absolute; top:-60%; inset-inline-start:-35%; width:30%; height:220%; z-index:3; pointer-events:none; background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform:rotate(18deg) translateX(-60%); transition:transform .75s var(--ease-out); }
@media (hover:hover){ .shine:hover::before{ transform:rotate(18deg) translateX(420%); } }

.float{ animation:afloat 5s ease-in-out infinite alternate; }     /* فقط تزئینات، حداکثر ۲ عنصر */
.pop{ animation:pop-in .4s var(--ease-spring) both; }

/* ظاهر شدن هنگام اسکرول — فقط وقتی JS فعال است و فقط پایین‌تر از اولین صفحه */
.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.in{ animation:intro-rise .6s var(--ease-out) both; }
.js .reveal .stagger{ opacity:0; }
.js .reveal.in .stagger{ animation:intro-bounce .55s var(--ease-out) both; animation-delay:calc(.05s + var(--i, 0) * 55ms); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .reveal,.js .reveal .stagger{ opacity:1; transform:none; }
}