/**
 * HYPE Motion System v1.0
 * Unified animation framework for all HYPE pages
 */

/* ==========================================
   0. MOTION VARIABLES
   ========================================== */
:root {
  --motion-fast: 200ms;
  --motion-normal: 500ms;
  --motion-slow: 800ms;
  --motion-ambient: 4s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================
   1. SCROLL REVEAL SYSTEM
   ========================================== */
[data-animate] {
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo),
              filter var(--motion-slow) var(--ease-out-expo);
  will-change: opacity, transform, filter;
}

[data-animate="fade-up"] { transform: translateY(40px); }
[data-animate="fade-down"] { transform: translateY(-40px); }
[data-animate="fade-left"] { transform: translateX(-40px); }
[data-animate="fade-right"] { transform: translateX(40px); }
[data-animate="scale"] { transform: scale(0.92); }
[data-animate="scale-up"] { transform: scale(0.88); }
[data-animate="blur-in"] {
  transform: translateY(30px);
  filter: blur(6px);
}
[data-animate="skew-left"] { transform: translateX(-20px) skewX(-3deg); }
[data-animate="skew-right"] { transform: translateX(20px) skewX(3deg); }
[data-animate="clip-reveal"] {
  clip-path: inset(0 100% 0 0);
  transform: none;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translate(0) scale(1) skew(0);
  filter: blur(0);
  clip-path: inset(0 0% 0 0);
  will-change: auto;
}

/* Stagger children via data-stagger on parent */
[data-stagger] > [data-animate] {
  transition-delay: calc(var(--stagger-index, 0) * 80ms);
}

/* Manual stagger delays */
[data-delay="1"] { transition-delay: 80ms; }
[data-delay="2"] { transition-delay: 160ms; }
[data-delay="3"] { transition-delay: 240ms; }
[data-delay="4"] { transition-delay: 320ms; }
[data-delay="5"] { transition-delay: 400ms; }
[data-delay="6"] { transition-delay: 480ms; }
[data-delay="7"] { transition-delay: 560ms; }
[data-delay="8"] { transition-delay: 640ms; }
[data-delay="9"] { transition-delay: 720ms; }
[data-delay="10"] { transition-delay: 800ms; }

/* ==========================================
   2. ENTRANCE ANIMATIONS (keyframe-based)
   ========================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes blurIn {
  from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lineExpand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes dataRowIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ribbonIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes thumbIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes sizeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes alsoIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes upDropIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes metaIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shoeIn {
  from { opacity: 0; transform: translateX(-40px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hudIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes tagPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes logoPulse {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes avatarPulse {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ringFill {
  from { stroke-dashoffset: 220; }
  to { stroke-dashoffset: 55; }
}
@keyframes fieldIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sidebarIn {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mainImgIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes bcIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes panelEntrance {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes actionsIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes textIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes detailsIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cdIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes priceIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes btnIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes upIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmerSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes barShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Utility animation classes */
.anim-fade-up {
  animation: fadeUp var(--motion-slow) var(--ease-out-expo) both;
}
.anim-scale-in {
  animation: scaleIn var(--motion-slow) var(--ease-out-expo) both;
}
.anim-blur-in {
  animation: blurIn var(--motion-slow) var(--ease-out-expo) both;
}
.anim-slide-in {
  animation: slideIn var(--motion-normal) var(--ease-out-expo) both;
}

/* ==========================================
   3. AMBIENT / LOOPING ANIMATIONS
   ========================================== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(168,85,247,0.2); }
  50% { box-shadow: 0 0 25px rgba(168,85,247,0.4); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes spinReverse {
  to { transform: rotate(-360deg); }
}
@keyframes glowSweep {
  0% { left: -100%; }
  100% { left: 100%; }
}
@keyframes neonPulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent); }
  50% { opacity: 0.85; text-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent); }
}
@keyframes neonFlicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.6; }
  94% { opacity: 1; }
  96% { opacity: 0.4; }
  97% { opacity: 1; }
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes shoeFloat {
  0%, 100% { transform: translateY(0) rotateY(-5deg) rotateX(2deg); }
  50% { transform: translateY(-20px) rotateY(5deg) rotateX(-2deg); }
}
@keyframes ringExpand {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
@keyframes tagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,0.1); }
  50% { box-shadow: 0 0 20px 4px rgba(168,85,247,0.06); }
}
@keyframes holoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes holoRingOut {
  0% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes glitchBar {
  0%, 90%, 100% { transform: translateX(-100%); }
  45% { transform: translateX(100%); }
}
@keyframes noise {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -2%); }
  20% { transform: translate(2%, 2%); }
  30% { transform: translate(-1%, 1%); }
  40% { transform: translate(1%, -1%); }
  50% { transform: translate(-2%, 2%); }
  60% { transform: translate(2%, -2%); }
  70% { transform: translate(-1%, -1%); }
  80% { transform: translate(1%, 1%); }
  90% { transform: translate(-2%, -1%); }
}
@keyframes barFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes slashIn {
  to { transform: rotate(-8deg) scaleX(1); }
}
@keyframes fillBar {
  from { width: 0; }
}
@keyframes checkPop {
  0% { transform: scale(0); }
  80% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
}
@keyframes successPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(168,85,247,0.4)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 16px rgba(168,85,247,0.7)); }
}
@keyframes checkoutSuccessIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes brandTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes liveScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scanlineSweep {
  0% { top: -10%; }
  100% { top: 110%; }
}
@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  70% { transform: scale(1); }
}
@keyframes fadeUpMsg {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes glitchSkew {
  0% { transform: skew(0deg); }
  20% { transform: skew(-2deg); }
  40% { transform: skew(2deg); }
  60% { transform: skew(-1deg); }
  80% { transform: skew(1deg); }
  100% { transform: skew(0deg); }
}
@keyframes glitchShake {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-2px, 1px); }
  20% { transform: translate(2px, -1px); }
  30% { transform: translate(-1px, 2px); }
  40% { transform: translate(1px, -2px); }
  50% { transform: translate(-2px, -1px); }
  60% { transform: translate(2px, 1px); }
  70% { transform: translate(-1px, -2px); }
  80% { transform: translate(1px, 2px); }
  90% { transform: translate(-2px, 1px); }
}
@keyframes skeletonShine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes holoNoise {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(1px, -2px); }
  75% { transform: translate(2px, 2px); }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.6); }
}
@keyframes scanSlide {
  0%, 100% { left: 0; }
  50% { left: 80%; }
}
@keyframes neonSlide {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes bellRing {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(10deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(5deg); }
  40% { transform: rotate(-5deg); }
  50% { transform: rotate(0); }
}
@keyframes stepIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pulseText {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes avatarIn {
  0% { opacity: 0; transform: scale(0.8); }
  60% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes letterSpacingIn {
  from { letter-spacing: 6px; opacity: 0; }
  to { letter-spacing: 2px; opacity: 1; }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glitchBar {
  0% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(-10px); }
}
@keyframes spinDots {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.anim-shake {
  animation: shake 0.4s ease;
}

/* Ambient classes */
.anim-float { animation: float var(--motion-ambient) ease-in-out infinite; }
.anim-float-slow { animation: floatSlow 6s ease-in-out infinite; }
.anim-pulse { animation: pulse 2s ease-in-out infinite; }
.anim-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }
.anim-spin { animation: spin 4s linear infinite; }
.anim-spin-slow { animation: spin 12s linear infinite; }
.anim-spin-reverse { animation: spinReverse 8s linear infinite; }
.anim-glow-pulse { animation: glowPulse 4s ease-in-out infinite; }
.anim-neon-flicker { animation: neonFlicker 4s infinite; }
.anim-shoe-float { animation: shoeFloat 6s ease-in-out infinite; }
.anim-tag-pulse { animation: tagPulse 2s ease-in-out infinite; }
.anim-live-blink { animation: liveBlink 1.5s ease-in-out infinite; }
.anim-holo-float { animation: holoFloat 4s ease-in-out infinite; }
.anim-cursor-blink { animation: cursorBlink 1s step-end infinite; }
.anim-neon-pulse { animation: neonPulse 2s ease-in-out infinite; }
.anim-glitch-skew { animation: glitchSkew 4s infinite; }
.anim-heart-beat { animation: heartBeat 0.8s ease-in-out; }
.anim-skeleton { animation: skeletonShine 1.5s infinite; }

/* ==========================================
   4. HOVER INTERACTIONS
   ========================================== */
/* Lift on hover */
.hover-lift {
  transition: transform var(--motion-fast) var(--ease-out-expo),
              box-shadow var(--motion-fast) var(--ease-out-expo);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(168,85,247,0.12);
}

/* Glow border on hover */
.hover-glow {
  transition: border-color var(--motion-fast) var(--ease-out-expo),
              box-shadow var(--motion-fast) var(--ease-out-expo);
}
.hover-glow:hover {
  border-color: rgba(168,85,247,0.4);
  box-shadow: 0 0 30px rgba(168,85,247,0.08);
}

/* Scale on hover */
.hover-scale {
  transition: transform var(--motion-fast) var(--ease-out-expo);
}
.hover-scale:hover {
  transform: scale(1.03);
}

/* Image zoom inside container */
.hover-img-zoom {
  overflow: hidden;
}
.hover-img-zoom img {
  transition: transform var(--motion-normal) var(--ease-out-expo);
}
.hover-img-zoom:hover img {
  transform: scale(1.08);
}

/* Shimmer sweep on hover */
.hover-shimmer {
  position: relative;
  overflow: hidden;
}
.hover-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 3;
  transition: none;
}
.hover-shimmer:hover::after {
  animation: shimmerSweep 0.8s ease;
}

/* Underline slide */
.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(168,85,247,0.4);
  transition: width var(--motion-normal) var(--ease-out-expo);
}
.hover-underline:hover::after {
  width: 100%;
}

/* ==========================================
   5. SCROLL PROGRESS BAR
   ========================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2, #c084fc));
  z-index: 10000;
  box-shadow: 0 0 10px var(--accent);
  transition: width 0.1s linear;
  width: 0%;
}

/* ==========================================
   6. TEXT SCRAMBLE SUPPORT
   ========================================== */
.dud {
  color: var(--text-dim, #605570);
}
.scramble-active {
  color: var(--accent2, #d8b4fe) !important;
  transition: none !important;
}

/* ==========================================
   7. MAGNETIC BUTTON EFFECT
   ========================================== */
.magnetic-btn {
  transition: transform 0.2s var(--ease-out-expo);
}

/* ==========================================
}

/* Page-specific keyframes migrated from templates */
@keyframes glitch-1 {
  0% { clip-path: inset(20% 0 80% 0); }
  20% { clip-path: inset(60% 0 10% 0); }
  40% { clip-path: inset(40% 0 50% 0); }
  60% { clip-path: inset(80% 0 5% 0); }
  80% { clip-path: inset(10% 0 70% 0); }
  100% { clip-path: inset(30% 0 20% 0); }
}
@keyframes glitch-2 {
  0% { clip-path: inset(10% 0 60% 0); }
  20% { clip-path: inset(30% 0 40% 0); }
  40% { clip-path: inset(70% 0 15% 0); }
  60% { clip-path: inset(15% 0 65% 0); }
  80% { clip-path: inset(55% 0 25% 0); }
  100% { clip-path: inset(5% 0 85% 0); }
}
@keyframes brandTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes particleFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.5); opacity: 0.3; }
}

/* ==========================================
   9. REDUCED MOTION SUPPORT
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}