/**
 * Arzoon — Homepage Motion Layer (2026)
 * GPU-accelerated keyframes & utilities. Respects prefers-reduced-motion.
 * Loaded alongside home.css on the homepage only.
 * Prefix: .hm-*  (home-motion)
 */

/* ════════════════════════════════════════════════════════════
   0. SAFETY NET — اگر JS غیرفعال بود یا خطا داد، محتوا
      حتماً نمایش داده شود. فقط وقتی <html.js> فعال است
      (یعنی JS اجرا شده) عناصر مخفی می‌شوند.
   ════════════════════════════════════════════════════════════ */
[data-hm-reveal],
[data-hm-stagger] > * {
  opacity: 1;
  transform: none;
}

html.js [data-hm-reveal] {
  opacity: 0;
}

html.js [data-hm-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
}

/* ════════════════════════════════════════════════════════════
   1. SCROLL REVEAL — data-hm-reveal="..."
   ════════════════════════════════════════════════════════════ */

html.js [data-hm-reveal] {
  opacity: 0;
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-emphasis),
    filter var(--duration-slower) var(--ease-out),
    clip-path var(--duration-slower) var(--ease-emphasis);
  will-change: opacity, transform;
}

html.js [data-hm-reveal="fade-up"]   { transform: translateY(28px); }
html.js [data-hm-reveal="fade-down"] { transform: translateY(-28px); }
html.js [data-hm-reveal="fade-right"]{ transform: translateX(-28px); }
html.js [data-hm-reveal="fade-left"] { transform: translateX(28px); }
html.js [data-hm-reveal="scale"]     { transform: scale(0.94); }
html.js [data-hm-reveal="blur"]      { filter: blur(12px); transform: translateY(16px); }
html.js [data-hm-reveal="clip"]      { clip-path: inset(0 0 100% 0); transform: translateY(20px); }

html.js [data-hm-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Stagger children via data-hm-stagger on parent */
html.js [data-hm-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-emphasis);
  transition-delay: calc(var(--hm-i, 0) * var(--hm-step, 70ms));
  will-change: opacity, transform;
}

html.js [data-hm-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ════════════════════════════════════════════════════════════
   2. FLOAT — ambient decorative motion
   ════════════════════════════════════════════════════════════ */

.hm-float {
  animation: hm-float 8s var(--ease-in-out) infinite;
  will-change: transform;
}

.hm-float--slow  { animation-duration: 12s; }
.hm-float--fast  { animation-duration: 5s; }

@keyframes hm-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -18px, 0); }
}

.hm-float-x {
  animation: hm-float-x 10s var(--ease-in-out) infinite;
  will-change: transform;
}

@keyframes hm-float-x {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(20px, -10px, 0); }
}

/* ════════════════════════════════════════════════════════════
   3. SHINE SWEEP — premium hover sheen
   ════════════════════════════════════════════════════════════ */

.hm-shine {
  position: relative;
  overflow: hidden;
}

.hm-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-accent-shimmer);
  background-size: 200% 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: 3;
}

.hm-shine:hover::after,
.hm-shine:focus-within::after {
  opacity: 1;
  animation: hm-shine-sweep 0.85s var(--ease-smooth);
}

@keyframes hm-shine-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ════════════════════════════════════════════════════════════
   4. SHIMMER — gold rank badge glow
   ════════════════════════════════════════════════════════════ */

.hm-shimmer {
  position: relative;
  overflow: hidden;
}

.hm-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: hm-shimmer-move 2.8s var(--ease-in-out) infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes hm-shimmer-move {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════
   5. KEN BURNS — subtle image life
   ════════════════════════════════════════════════════════════ */

.hm-kenburns img,
.hm-kenburns {
  animation: hm-kenburns 18s var(--ease-out) infinite alternate;
  will-change: transform;
}

@keyframes hm-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.5%, -1.5%, 0); }
}

/* ════════════════════════════════════════════════════════════
   6. PULSE GLOW — ambient brand light
   ════════════════════════════════════════════════════════════ */

.hm-glow-pulse {
  animation: hm-glow-pulse 5s var(--ease-in-out) infinite;
  will-change: opacity, transform;
}

@keyframes hm-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}

/* ════════════════════════════════════════════════════════════
   7. SKELETON LOADING
   ════════════════════════════════════════════════════════════ */

.hm-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-sunken);
  border-radius: var(--radius-md);
}

.hm-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: hm-skeleton-wave 1.6s var(--ease-in-out) infinite;
}

@keyframes hm-skeleton-wave {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.hm-skeleton--text    { height: 0.875rem; border-radius: var(--radius-full); }
.hm-skeleton--title   { height: 1.25rem; width: 70%; }
.hm-skeleton--price   { height: 1rem; width: 40%; }
.hm-skeleton--media   { aspect-ratio: var(--product-image-ratio); border-radius: var(--product-card-radius); }

/* ════════════════════════════════════════════════════════════
   8. PREMIUM TOAST — add-to-cart feedback
   ════════════════════════════════════════════════════════════ */

.hm-toast-container {
  position: fixed;
  z-index: var(--z-toast);
  bottom: var(--space-6);
  inset-inline-start: var(--space-6);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
  width: min(22rem, calc(100vw - var(--space-12)));
  pointer-events: none;
}

@media (max-width: 767px) {
  .hm-toast-container {
    bottom: calc(var(--nav-height-mobile) + var(--space-4));
    inset-inline: var(--space-4);
    width: auto;
  }
}

.hm-toast {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  pointer-events: auto;
  transform-origin: bottom start;
  animation: hm-toast-in 0.5s var(--ease-soft-spring) both;
}

.hm-toast.hm-toast--leave {
  animation: hm-toast-out 0.3s var(--ease-in) both;
}

@keyframes hm-toast-in {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes hm-toast-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    max-height: 8rem;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) scale(0.95);
    max-height: 0;
    padding-block: 0;
    margin-block: 0;
  }
}

.hm-toast__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-success-subtle);
  color: var(--color-success);
  animation: hm-toast-pop 0.5s var(--ease-spring) 0.1s both;
}

@keyframes hm-toast-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.hm-toast__icon-wrap svg {
  width: 1.25rem;
  height: 1.25rem;
}

.hm-toast__thumb {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-bg-sunken);
}

.hm-toast__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  padding-block: var(--space-1);
}

.hm-toast__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.hm-toast__msg {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hm-toast__action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.hm-toast__action:hover { gap: 0.5rem; }

.hm-toast__close {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.hm-toast:hover .hm-toast__close { opacity: 1; }
.hm-toast__close:hover { background: var(--color-bg-sunken); }

.hm-toast__progress {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--color-brand-primary);
  transform-origin: right;
  opacity: 0.5;
  animation: hm-toast-progress linear forwards;
  animation-duration: var(--hm-duration, 4000ms);
}

@keyframes hm-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ════════════════════════════════════════════════════════════
   9. FLY-TO-CART — product image flight
   ════════════════════════════════════════════════════════════ */

.hm-fly-clone {
  position: fixed;
  z-index: var(--z-toast);
  border-radius: var(--radius-lg);
  object-fit: cover;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  transition:
    transform 0.8s var(--ease-emphasis),
    opacity 0.2s var(--ease-in) 0.7s;
  will-change: transform, opacity;
}

.hm-cart-bump {
  animation: hm-cart-bump 0.6s var(--ease-spring);
}

@keyframes hm-cart-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.28); }
  55%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════
   10. MAGNET — hero button cursor attraction
   ════════════════════════════════════════════════════════════ */

.hm-magnet {
  transition: transform var(--duration-normal) var(--ease-snappy);
  will-change: transform;
}

/* ════════════════════════════════════════════════════════════
   11. RIPPLE — button click feedback
   ════════════════════════════════════════════════════════════ */

.hm-ripple {
  position: relative;
  overflow: hidden;
}

.hm-ripple__wave {
  position: absolute;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: hm-ripple 0.6s var(--ease-out);
  pointer-events: none;
}

@keyframes hm-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   12. CURSOR FOLLOW SHINE — product card glow on mousemove
   ════════════════════════════════════════════════════════════ */

.hm-spotlight {
  position: relative;
}

.hm-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 140px at var(--hm-x, 50%) var(--hm-y, 50%),
    rgba(255, 255, 255, 0.18) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: 1;
}

.hm-spotlight:hover::before { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   13. COUNT FLIP — countdown number roll
   ════════════════════════════════════════════════════════════ */

.hm-flip-num {
  display: inline-flex;
  overflow: hidden;
}

.hm-flip-num__inner {
  animation: hm-flip-roll 0.45s var(--ease-emphasis);
}

@keyframes hm-flip-roll {
  0%   { transform: translateY(-60%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   14. INFINITE MARQUEE — brands strip
   ════════════════════════════════════════════════════════════ */

.hm-marquee {
  display: flex;
  width: max-content;
  animation: hm-marquee 32s linear infinite;
  will-change: transform;
}

.hm-marquee--reverse { animation-direction: reverse; }

.hm-marquee:hover {
  animation-play-state: paused;
}

@keyframes hm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* ════════════════════════════════════════════════════════════
   15. REDUCED MOTION
   ════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html.js [data-hm-reveal],
  html.js [data-hm-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: opacity var(--duration-fast) !important;
  }

  .hm-float,
  .hm-float-x,
  .hm-kenburns,
  .hm-kenburns img,
  .hm-glow-pulse,
  .hm-shimmer::before,
  .hm-marquee,
  .hm-toast__progress {
    animation: none !important;
  }

  .hm-shine::after { display: none; }

  .hm-fly-clone {
    transition: opacity var(--duration-fast);
    transform: none !important;
  }
}