/* =========================================================
   Hairun Trading — Animations
   Keyframes, reveal helpers, mascot motion
   ========================================================= */

@keyframes hairun-fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hairun-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hairun-fade-down {
  from { opacity: 0; transform: translate3d(0, -24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hairun-scale-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes hairun-mascot-peek {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}

@keyframes hairun-shine {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes hairun-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,97,.4); }
  100% { box-shadow: 0 0 0 16px rgba(201,169,97,0); }
}

/* ---- Reveal on scroll ------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  will-change: opacity, transform;
  transition:
    opacity var(--hairun-duration-slow) var(--hairun-ease-out-quart),
    transform var(--hairun-duration-slow) var(--hairun-ease-out-quart);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="fade"]     { transform: none; }
[data-reveal="scale"]    { transform: scale(.92); }
[data-reveal="down"]     { transform: translate3d(0, -16px, 0); }
[data-reveal="left"]     { transform: translate3d(16px, 0, 0); }
[data-reveal="right"]    { transform: translate3d(-16px, 0, 0); }
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* ---- Stagger group --------------------------------- */
.stagger-group > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--hairun-duration-slow) var(--hairun-ease-out-quart),
    transform var(--hairun-duration-slow) var(--hairun-ease-out-quart);
}
.stagger-group.is-visible > * { opacity: 1; transform: translate3d(0, 0, 0); }
.stagger-group.is-visible > *:nth-child(1)  { transition-delay: 60ms; }
.stagger-group.is-visible > *:nth-child(2)  { transition-delay: 120ms; }
.stagger-group.is-visible > *:nth-child(3)  { transition-delay: 180ms; }
.stagger-group.is-visible > *:nth-child(4)  { transition-delay: 240ms; }
.stagger-group.is-visible > *:nth-child(5)  { transition-delay: 300ms; }
.stagger-group.is-visible > *:nth-child(6)  { transition-delay: 360ms; }
.stagger-group.is-visible > *:nth-child(7)  { transition-delay: 420ms; }
.stagger-group.is-visible > *:nth-child(8)  { transition-delay: 480ms; }
.stagger-group.is-visible > *:nth-child(9)  { transition-delay: 540ms; }
.stagger-group.is-visible > *:nth-child(10) { transition-delay: 600ms; }
.stagger-group.is-visible > *:nth-child(11) { transition-delay: 660ms; }
.stagger-group.is-visible > *:nth-child(12) { transition-delay: 720ms; }

/* ---- Parallax -------------------------------------- */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  transition: transform var(--hairun-duration-base) var(--hairun-ease-out-quart);
}

/* ---- Page entrance --------------------------------- */
.page-enter {
  animation: hairun-fade-in var(--hairun-duration-base) var(--hairun-ease-out-quart) both;
}

/* ---- Shine effect on hero accents ----------------- */
.shine {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: hairun-shine 2.4s linear infinite;
}

/* ---- Reduced motion override ----------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="fade"],
  [data-reveal="scale"],
  [data-reveal="down"],
  [data-reveal="left"],
  [data-reveal="right"] {
    opacity: 1 !important;
    transform: none !important;
  }
  .stagger-group > * {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-parallax] { transform: none !important; }
  .page-enter { animation: none; }
  .shine { animation: none; }
}