/**
 * HYPE Enhanced Animation Styles v2.0
 * Comprehensive CSS animation library matching HYPE dark purple aesthetic
 */

/* ==========================================
   0. ENHANCED MOTION VARIABLES
   ========================================== */
:root {
  --motion-fast: 200ms;
  --motion-normal: 500ms;
  --motion-slow: 800ms;
  --motion-ambient: 4s;
  --motion-dramatic: 1200ms;
  --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);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================
   1. SMOOTH NAVIGATION (AJAX page loads)
   ========================================== */

body[data-navigating="true"] {
  cursor: wait;
}

/* ==========================================
   2. 3D CARD TILT EFFECTS
   ========================================== */
[data-tilt] {
  transform-style: preserve-3d;
  perspective: 1000px;
  position: relative;
  transition: box-shadow 0.3s var(--ease-out-expo);
}

[data-tilt]:hover {
  box-shadow: 0 20px 60px rgba(168, 85, 247, 0.15);
}

.tilt-inner {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.tilt-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: inherit;
  z-index: 3;
}

[data-tilt]:hover .tilt-shine {
  opacity: 1;
}

/* 3D Flip Cards */
.flip-card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s var(--ease-out-expo);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* ==========================================
   3. PARALLAX LAYERS
   ========================================== */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-layer {
  position: absolute;
  inset: -20%;
  will-change: transform;
}

.parallax-layer-slow { transform: translateZ(-100px) scale(1.5); }
.parallax-layer-fast { transform: translateZ(50px) scale(0.8); }

/* ==========================================
   4. SWIPE GALLERY
   ========================================== */
[data-swipe-gallery] {
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  user-select: none;
  outline: none;
}

.swipe-track {
  display: flex;
  transition: transform 0.5s var(--ease-out-expo);
  will-change: transform;
}

[data-swipe-gallery] .swipe-track > * {
  flex: 0 0 100%;
  width: 100%;
}

.swipe-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 3;
}

.swipe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.4s var(--ease-out-expo);
  padding: 0;
}

.swipe-dot.active {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  width: 24px;
  border-radius: 4px;
}

/* Swipe hint animation */
@keyframes swipeHint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-15px); }
}

.swipe-hint {
  animation: swipeHint 2s ease-in-out 3;
}

/* ==========================================
   5. MAGNETIC BUTTONS
   ========================================== */
[data-magnetic] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.magnetic-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-out-expo);
  will-change: transform;
}

/* Magnetic glow ring */
.magnetic-ring {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s, transform 0.3s var(--ease-out-expo);
  pointer-events: none;
}

[data-magnetic]:hover .magnetic-ring {
  opacity: 0.4;
  transform: scale(1);
}

/* ==========================================
   6. TEXT SCRAMBLE & REVEAL
   ========================================== */
[data-scramble] {
  display: inline-block;
  white-space: nowrap;
}

.scramble-char {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
  transition: color 0.1s;
}

/* Text reveal (clip-path) */
[data-text-reveal] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease-out-expo);
}

[data-text-reveal].revealed {
  clip-path: inset(0 0% 0 0);
}

/* Staggered text reveal for characters */
.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%) rotateX(-90deg);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}

.char-reveal.revealed {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* Typewriter effect */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--accent);
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--accent); }
}

/* ==========================================
   7. HOVER EFFECTS
   ========================================== */
[data-zoom] {
  overflow: hidden;
  position: relative;
}

[data-zoom] img {
  transition: transform 0.6s var(--ease-out-expo);
  will-change: transform;
}

[data-zoom]:hover img {
  transform: scale(1.08);
}

/* Lift effect */
[data-lift] {
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}

[data-lift]:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.12);
}

/* Glow border */
[data-glow] {
  position: relative;
}

[data-glow]::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), transparent, var(--accent-hover));
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

[data-glow]:hover::before {
  opacity: 0.5;
}

/* Shimmer effect */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

[data-shimmer] {
  position: relative;
  overflow: hidden;
}

[data-shimmer]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transform: translateX(-100%);
  transition: transform 0s;
}

[data-shimmer]:hover::after {
  animation: shimmer 1.5s ease-in-out;
}

/* ==========================================
   8. AMBIENT ANIMATIONS
   ========================================== */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.2); }
  50% { box-shadow: 0 0 40px rgba(168, 85, 247, 0.5), 0 0 80px rgba(168, 85, 247, 0.1); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

[data-float] {
  animation: float 6s ease-in-out infinite;
}

[data-float-slow] {
  animation: floatSlow 8s ease-in-out infinite;
}

[data-pulse-glow] {
  animation: pulse-glow 3s ease-in-out infinite;
}

[data-breathe] {
  animation: breathe 4s ease-in-out infinite;
}

[data-rotate-slow] {
  animation: rotate-slow 20s linear infinite;
}

[data-orbit] {
  animation: orbit 15s linear infinite;
}

/* Gradient border animation */
@keyframes gradient-rotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

[data-gradient-border] {
  position: relative;
}

[data-gradient-border]::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #7c3aed, #ff00ff, var(--accent));
  background-size: 300% 300%;
  animation: gradient-rotate 4s ease infinite;
  z-index: -1;
  opacity: 0.6;
}

/* ==========================================
   9. ADVANCED SCROLL REVEALS
   ========================================== */

/* ---- Basic fades (used across all pages) ---- */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}
[data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-down"] {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}
[data-animate="fade-down"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-left"] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}
[data-animate="fade-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-animate="fade-right"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}
[data-animate="fade-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-animate="scale-up"] {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}
[data-animate="scale-up"].is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

[data-animate="scale-down"] {
  opacity: 0;
  transform: scale(1.08) translateY(20px);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}
[data-animate="scale-down"].is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

[data-animate="3d-flip-up"] {
  opacity: 0;
  transform: perspective(1000px) rotateX(30deg) translateY(40px);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}

[data-animate="3d-flip-up"].is-visible {
  opacity: 1;
  transform: perspective(1000px) rotateX(0) translateY(0);
}

[data-animate="reveal-block"] {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}

[data-animate="reveal-block"].is-visible {
  opacity: 1;
  transform: scaleX(1);
}

[data-animate="slide-reveal"] {
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: opacity var(--motion-dramatic) var(--ease-out-expo),
              clip-path var(--motion-dramatic) var(--ease-out-expo);
}

[data-animate="slide-reveal"].is-visible {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

[data-animate="mask-reveal"] {
  opacity: 0;
  mask-image: linear-gradient(90deg, black 0%, transparent 100%);
  mask-size: 0% 100%;
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              mask-size var(--motion-dramatic) var(--ease-out-expo);
}

[data-animate="mask-reveal"].is-visible {
  opacity: 1;
  mask-size: 200% 100%;
}

[data-animate="rotate-in"] {
  opacity: 0;
  transform: rotate(-5deg) scale(0.9) translateY(30px);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}

[data-animate="rotate-in"].is-visible {
  opacity: 1;
  transform: rotate(0) scale(1) translateY(0);
}

[data-animate="elastic-scale"] {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--motion-normal) var(--ease-spring),
              transform var(--motion-normal) var(--ease-spring);
}

[data-animate="elastic-scale"].is-visible {
  opacity: 1;
  transform: scale(1);
}

[data-animate="blur-reveal"] {
  opacity: 0;
  filter: blur(20px) brightness(0.5);
  transform: translateY(20px);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              filter var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
}

[data-animate="blur-reveal"].is-visible {
  opacity: 1;
  filter: blur(0) brightness(1);
  transform: translateY(0);
}

/* Stagger children with CSS */
[data-stagger="fast"] > [data-animate] { transition-delay: calc(var(--stagger-index, 0) * 60ms); }
[data-stagger="normal"] > [data-animate] { transition-delay: calc(var(--stagger-index, 0) * 100ms); }
[data-stagger="slow"] > [data-animate] { transition-delay: calc(var(--stagger-index, 0) * 150ms); }
[data-stagger="dramatic"] > [data-animate] { transition-delay: calc(var(--stagger-index, 0) * 200ms); }

/* ==========================================
   10. CUSTOM CURSOR
   ========================================== */
.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s, background 0.3s;
  mix-blend-mode: difference;
}

.custom-cursor.hover {
  width: 50px;
  height: 50px;
  background: rgba(168, 85, 247, 0.1);
  border-color: var(--accent-hover);
}

.cursor-trail-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

/* Hide default cursor on desktop */
@media (hover: hover) and (pointer: fine) {
  body.custom-cursor-active,
  body.custom-cursor-active * {
    cursor: none !important;
  }
}

/* ==========================================
   11. PARTICLE CANVAS
   ========================================== */
canvas[data-particles] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================
   12. VELOCITY EFFECTS
   ========================================== */
[data-velocity] {
  transition: transform 0.15s linear;
  will-change: transform;
}

/* ==========================================
   13. LOADING SKELETONS
   ========================================== */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, rgba(168,85,247,0.05) 25%, rgba(168,85,247,0.1) 50%, rgba(168,85,247,0.05) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* ==========================================
   14. MORPHING SHAPES
   ========================================== */
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

[data-morph] {
  animation: morph 8s ease-in-out infinite;
}

/* ==========================================
   15. GLITCH EFFECT (enhanced)
   ========================================== */
@keyframes glitch-1 {
  0%, 100% { clip-path: inset(0 0 85% 0); transform: translate(-2px, 0); }
  20% { clip-path: inset(40% 0 40% 0); transform: translate(2px, 0); }
  40% { clip-path: inset(10% 0 60% 0); transform: translate(-1px, 0); }
  60% { clip-path: inset(80% 0 5% 0); transform: translate(1px, 0); }
  80% { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 0); }
}

@keyframes glitch-2 {
  0%, 100% { clip-path: inset(85% 0 0 0); transform: translate(2px, 0); }
  20% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 0); }
  40% { clip-path: inset(60% 0 10% 0); transform: translate(1px, 0); }
  60% { clip-path: inset(5% 0 80% 0); transform: translate(-1px, 0); }
  80% { clip-path: inset(50% 0 30% 0); transform: translate(2px, 0); }
}

[data-glitch] {
  position: relative;
}

[data-glitch]::before,
[data-glitch]::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

[data-glitch]::before {
  text-shadow: -2px 0 #ff00ff;
  animation: glitch-1 3s infinite linear alternate-reverse;
}

[data-glitch]::after {
  text-shadow: 2px 0 #00ffff;
  animation: glitch-2 4s infinite linear alternate-reverse;
}

[data-glitch]:hover::before,
[data-glitch]:hover::after {
  opacity: 0.7;
}

/* ==========================================
   16. RIPPLE EFFECT
   ========================================== */
@keyframes ripple {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.3);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

/* ==========================================
   17. FOCUS EFFECTS
   ========================================== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  transition: outline-offset 0.2s;
}

/* ==========================================
   18. REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  [data-parallax] {
    transform: none !important;
  }
  
  [data-float],
  [data-float-slow],
  [data-pulse-glow],
  [data-breathe],
  [data-rotate-slow],
  [data-orbit] {
    animation: none !important;
  }
}

/* ==========================================
   19. CURSOR CUSTOMIZATION FOR BODY
   ========================================== */
body.custom-cursor-active {
  cursor: none;
}

/* ==========================================
   20. ENHANCED HERO CAROUSEL (existing system improvements)
   ========================================== */
.hero-carousel-slide {
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-carousel-slide img {
  transition: transform 1.2s var(--ease-out-expo);
}

.hero-carousel-slide.active img {
  transform: scale(1);
}

.hero-carousel-slide:not(.active) img {
  transform: scale(1.1);
}

/* ==========================================
   21. PRODUCT CARD ENHANCEMENTS
   ========================================== */
.product-card {
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
  will-change: transform;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(168, 85, 247, 0.12);
}

.product-card .product-img-wrap {
  overflow: hidden;
  position: relative;
}

.product-card .product-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 0, 10, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

.product-card:hover .product-img-wrap::after {
  opacity: 1;
}

.product-card .product-img-wrap img {
  transition: transform 0.6s var(--ease-out-expo);
}

.product-card:hover .product-img-wrap img {
  transform: scale(1.08);
}

/* ==========================================
   22. BUTTON ENHANCEMENTS
   ========================================== */
.btn-magnetic {
  position: relative;
  overflow: hidden;
}

.btn-magnetic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.btn-magnetic:hover::before {
  opacity: 1;
}

/* ==========================================
   23. MARQUEE / TICKER
   ========================================== */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

[data-marquee] {
  overflow: hidden;
  white-space: nowrap;
}

[data-marquee] > * {
  display: inline-block;
  animation: marquee var(--marquee-duration, 20s) linear infinite;
}

/* ==========================================
   24. PROGRESS INDICATORS
   ========================================== */
.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.6s var(--ease-out-expo);
}

/* ==========================================
   25. MODAL / DIALOG ENHANCEMENTS
   ========================================== */
.modal-enter {
  animation: modalIn 0.4s var(--ease-out-expo) forwards;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

.modal-backdrop-enter {
  animation: backdropIn 0.3s ease forwards;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================
   26. TOAST NOTIFICATIONS
   ========================================== */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(120%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(120%);
  }
}

/* ==========================================
   27. COUNTER ANIMATION HELPER
   ========================================== */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ==========================================
   28. FLIP ANIMATION FOR CARDS
   ========================================== */
@keyframes flipIn {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0);
  }
}

[data-animate="flip-in"] {
  opacity: 0;
  transform: perspective(1000px) rotateY(-30deg);
  transition: opacity var(--motion-slow) var(--ease-out-expo),
              transform var(--motion-slow) var(--ease-out-expo);
  transform-style: preserve-3d;
}

[data-animate="flip-in"].is-visible {
  opacity: 1;
  transform: perspective(1000px) rotateY(0);
}

/* ==========================================
   29. WAVE REVEAL
   ========================================== */
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

[data-wave] > * {
  animation: wave 1s ease-in-out infinite;
}

[data-wave] > *:nth-child(1) { animation-delay: 0s; }
[data-wave] > *:nth-child(2) { animation-delay: 0.1s; }
[data-wave] > *:nth-child(3) { animation-delay: 0.2s; }
[data-wave] > *:nth-child(4) { animation-delay: 0.3s; }
[data-wave] > *:nth-child(5) { animation-delay: 0.4s; }

/* ==========================================
   30. HORIZONTAL SCROLL CONTAINER
   ========================================== */
.hscroll-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hscroll-container::-webkit-scrollbar {
  display: none;
}

.hscroll-item {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ==========================================
   31. TILT PERSPECTIVE CONTAINER
   ========================================== */
.perspective-container {
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* ==========================================
   32. ENHANCED SCROLLBAR
   ========================================== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ==========================================
   33. SECTION DIVIDER ANIMATIONS
   ========================================== */
@keyframes dividerExpand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.animated-divider {
  transform-origin: left;
  animation: dividerExpand 1s var(--ease-out-expo) forwards;
}

/* ==========================================
   34. GRID STAGGER ANIMATION
   ========================================== */
@keyframes gridItemIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

[data-grid-animate] > * {
  opacity: 0;
  animation: gridItemIn 0.5s var(--ease-out-expo) forwards;
}

[data-grid-animate] > *:nth-child(1) { animation-delay: 0ms; }
[data-grid-animate] > *:nth-child(2) { animation-delay: 80ms; }
[data-grid-animate] > *:nth-child(3) { animation-delay: 160ms; }
[data-grid-animate] > *:nth-child(4) { animation-delay: 240ms; }
[data-grid-animate] > *:nth-child(5) { animation-delay: 320ms; }
[data-grid-animate] > *:nth-child(6) { animation-delay: 400ms; }
[data-grid-animate] > *:nth-child(7) { animation-delay: 480ms; }
[data-grid-animate] > *:nth-child(8) { animation-delay: 560ms; }

/* ==========================================
   35. NEON FLICKER
   ========================================== */
@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent);
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.5;
  }
}

[data-neon] {
  animation: neonFlicker 4s ease-in-out infinite;
}

/* ==========================================
   36. HOLOGRAPHIC EFFECT
   ========================================== */
[data-holographic] {
  position: relative;
  overflow: hidden;
}

[data-holographic]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(168, 85, 247, 0.1) 45%, transparent 50%, rgba(255, 0, 255, 0.05) 60%, transparent 70%);
  background-size: 200% 200%;
  animation: holographicShift 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes holographicShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ==========================================
   37. LOADING DOTS
   ========================================== */
@keyframes loadingDots {
  0%, 80%, 100% { transform: scale(0); opacity: 0; }
  40% { transform: scale(1); opacity: 1; }
}

.loading-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: loadingDots 1.4s ease-in-out infinite;
  margin: 0 2px;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ==========================================
   38. SUCCESS CHECK ANIMATION
   ========================================== */
@keyframes checkDraw {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes checkScale {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.animated-check {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: checkDraw 0.6s 0.3s ease forwards, checkScale 0.4s ease forwards;
}

/* ==========================================
   39. STICKY GLINT EFFECT
   ========================================== */
@keyframes glint {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(200%) rotate(25deg); }
}

[data-glint] {
  position: relative;
  overflow: hidden;
}

[data-glint]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-100%) rotate(25deg);
}

[data-glint]:hover::after {
  animation: glint 0.8s ease forwards;
}

/* ==========================================
   40. BOUNCE IN ANIMATION
   ========================================== */
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

[data-animate="bounce-in"] {
  opacity: 0;
}

[data-animate="bounce-in"].is-visible {
  animation: bounceIn 0.6s var(--ease-bounce) forwards;
}

/* ==========================================
   41. SLIDE UP WITH FADE
   ========================================== */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(60px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

[data-animate="slide-up-fade"] {
  opacity: 0;
}

[data-animate="slide-up-fade"].is-visible {
  animation: slideUpFade 0.7s var(--ease-out-expo) forwards;
}

/* ==========================================
   42. CIRCULAR REVEAL
   ========================================== */
[data-animate="circle-reveal"] {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1s var(--ease-out-expo);
}

[data-animate="circle-reveal"].is-visible {
  clip-path: circle(100% at 50% 50%);
}

/* ==========================================
   43. DIAGONAL WIPE
   ========================================== */
[data-animate="diagonal-wipe"] {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.8s var(--ease-out-expo);
}

[data-animate="diagonal-wipe"].is-visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ==========================================
   44. STAGGER GRID (CSS only)
   ========================================== */
[data-stagger-grid] {
  --stagger-delay: 100ms;
}

[data-stagger-grid] > *:nth-child(1) { transition-delay: calc(var(--stagger-delay) * 0); }
[data-stagger-grid] > *:nth-child(2) { transition-delay: calc(var(--stagger-delay) * 1); }
[data-stagger-grid] > *:nth-child(3) { transition-delay: calc(var(--stagger-delay) * 2); }
[data-stagger-grid] > *:nth-child(4) { transition-delay: calc(var(--stagger-delay) * 3); }
[data-stagger-grid] > *:nth-child(5) { transition-delay: calc(var(--stagger-delay) * 4); }
[data-stagger-grid] > *:nth-child(6) { transition-delay: calc(var(--stagger-delay) * 5); }
[data-stagger-grid] > *:nth-child(7) { transition-delay: calc(var(--stagger-delay) * 6); }
[data-stagger-grid] > *:nth-child(8) { transition-delay: calc(var(--stagger-delay) * 7); }

/* ==========================================
   45. CURTAIN REVEAL
   ========================================== */
[data-animate="curtain"] {
  position: relative;
  overflow: hidden;
}

[data-animate="curtain"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out-expo);
  z-index: 2;
}

[data-animate="curtain"].is-visible::after {
  transform: translateX(100%);
}

[data-animate="curtain"] > * {
  opacity: 0;
  transition: opacity 0.3s 0.3s;
}

[data-animate="curtain"].is-visible > * {
  opacity: 1;
}

/* ==========================================
   46. PULSE SCALE
   ========================================== */
@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

[data-pulse-scale] {
  animation: pulseScale 2s ease-in-out infinite;
}

/* ==========================================
   47. COLOR SHIFT
   ========================================== */
@keyframes colorShift {
  0%, 100% { color: var(--accent); }
  33% { color: #ff00ff; }
  66% { color: #00ffff; }
}

[data-color-shift] {
  animation: colorShift 4s ease-in-out infinite;
}

/* ==========================================
   48. BORDER DRAW
   ========================================== */
[data-border-draw] {
  position: relative;
}

[data-border-draw]::before,
[data-border-draw]::after {
  content: '';
  position: absolute;
  background: var(--accent);
  transition: all 0.4s var(--ease-out-expo);
}

[data-border-draw]::before {
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
}

[data-border-draw]::after {
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
}

[data-border-draw]:hover::before,
[data-border-draw]:hover::after {
  width: 100%;
}

/* ==========================================
   49. SPIN SLOW
   ========================================== */
[data-spin-slow] {
  animation: rotate-slow 30s linear infinite;
}

/* ==========================================
   50. HEARTBEAT
   ========================================== */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

[data-heartbeat] {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* ==========================================
   51. SLIDE IN FROM DIFFERENT DIRECTIONS
   ========================================== */
[data-animate="slide-from-top"] {
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.6s var(--ease-out-expo);
}

[data-animate="slide-from-bottom"] {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.6s var(--ease-out-expo);
}

[data-animate="slide-from-left"] {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.6s var(--ease-out-expo);
}

[data-animate="slide-from-right"] {
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.6s var(--ease-out-expo);
}

[data-animate="slide-from-top"].is-visible,
[data-animate="slide-from-bottom"].is-visible,
[data-animate="slide-from-left"].is-visible,
[data-animate="slide-from-right"].is-visible {
  opacity: 1;
  transform: translate(0);
}

/* ==========================================
   52. FOCUS RIPPLE
   ========================================== */
@keyframes focusRipple {
  0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
  100% { box-shadow: 0 0 0 20px rgba(168, 85, 247, 0); }
}

[data-focus-ripple]:focus {
  animation: focusRipple 0.6s ease-out;
}

/* ==========================================
   53. FLIP CARD BACK
   ========================================== */
.flip-card-back-glow {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(168, 85, 247, 0.2);
}

/* ==========================================
   54. ENHANCED TOOLTIP
   ========================================== */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s var(--ease-out-expo);
  z-index: 100;
}

[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================
   55. IMAGE COMPARISON SLIDER
   ========================================== */
.image-compare {
  position: relative;
  overflow: hidden;
}

.image-compare-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.1s;
}

/* ==========================================
   56. DROPDOWN ANIMATION
   ========================================== */
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-10px) scaleY(0.95); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

.dropdown-animated {
  animation: dropdownIn 0.2s var(--ease-out-expo) forwards;
  transform-origin: top center;
}

/* ==========================================
   57. TAB SWITCH
   ========================================== */
@keyframes tabSwitch {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.tab-content-animated {
  animation: tabSwitch 0.3s var(--ease-out-expo) forwards;
}

/* ==========================================
   58. INFINITE LOOP MARQUEE
   ========================================== */
@keyframes infiniteMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.infinite-marquee {
  display: flex;
  width: fit-content;
  animation: infiniteMarquee 20s linear infinite;
}

/* ==========================================
   59. ACCORDION ANIMATION
   ========================================== */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out-expo);
}

.accordion-content.open {
  grid-template-rows: 1fr;
}

.accordion-content > div {
  overflow: hidden;
}

/* ==========================================
   60. RAINBOW BORDER
   ========================================== */
@keyframes rainbowBorder {
  0% { border-color: #ff0000; }
  16.6% { border-color: #ff8800; }
  33.3% { border-color: #ffff00; }
  50% { border-color: #00ff00; }
  66.6% { border-color: #0088ff; }
  83.3% { border-color: #8800ff; }
  100% { border-color: #ff0000; }
}

[data-rainbow-border] {
  animation: rainbowBorder 6s linear infinite;
}

/* ==========================================
   61. SCANLINE EFFECT
   ========================================== */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

[data-scanline]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(168, 85, 247, 0.03), transparent);
  animation: scanline 4s linear infinite;
  pointer-events: none;
}

/* ==========================================
   62. COUNTER ANIMATION
   ========================================== */
.counter-value {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ==========================================
   63. BADGE PULSE
   ========================================== */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.badge-pulse {
  animation: badgePulse 2s ease-in-out infinite;
}

/* ==========================================
   64. ARROW BOUNCE
   ========================================== */
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

[data-arrow-bounce] {
  animation: arrowBounce 1.5s ease-in-out infinite;
}

/* ==========================================
   65. TEXT GRADIENT SHIFT
   ========================================== */
@keyframes gradientText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

[data-gradient-text] {
  background: linear-gradient(90deg, var(--accent), #ff00ff, #00ffff, var(--accent));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientText 4s ease infinite;
}

/* ==========================================
   66. SCROLL INDICATOR
   ========================================== */
@keyframes scrollIndicator {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.3; transform: translateY(10px); }
}

.scroll-indicator {
  animation: scrollIndicator 2s ease-in-out infinite;
}

/* ==========================================
   67. IMAGE PAN (KEN BURNS)
   ========================================== */
@keyframes kenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.15) translate(-2%, -2%); }
}

[data-ken-burns] {
  animation: kenBurns 20s ease-in-out infinite alternate;
}

/* ==========================================
   68. VIBRATE
   ========================================== */
@keyframes vibrate {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

[data-vibrate]:hover {
  animation: vibrate 0.3s linear infinite;
}

/* ==========================================
   69. SPOTLIGHT
   ========================================== */
[data-spotlight] {
  position: relative;
  overflow: hidden;
}

[data-spotlight]::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

[data-spotlight]:hover::before {
  opacity: 1;
}

/* ==========================================
   70. ENHANCED HOVER GLOW
   ========================================== */
[data-hover-glow] {
  position: relative;
  transition: all 0.3s var(--ease-out-expo);
}

[data-hover-glow]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--accent);
  opacity: 0;
  filter: blur(15px);
  transition: opacity 0.3s;
  z-index: -1;
}

[data-hover-glow]:hover::before {
  opacity: 0.3;
}

[data-hover-glow]:hover {
  transform: translateY(-2px);
}

/* ==========================================
   71. LOADING RING
   ========================================== */
@keyframes ringSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-ring {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(168, 85, 247, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ringSpin 1s linear infinite;
}

/* ==========================================
   72. EXPANDING CIRCLE BUTTON
   ========================================== */
.circle-expand {
  position: relative;
  overflow: hidden;
  transition: color 0.4s;
}

.circle-expand::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s var(--ease-out-expo), height 0.5s var(--ease-out-expo);
  z-index: -1;
}

.circle-expand:hover::before {
  width: 300%;
  height: 300%;
}

.circle-expand:hover {
  color: #fff;
}

/* ==========================================
   73. STAGGER LINE REVEAL
   ========================================== */
[data-line-reveal] {
  overflow: hidden;
}

[data-line-reveal] > * {
  transform: translateY(100%);
  transition: transform 0.6s var(--ease-out-expo);
}

[data-line-reveal].is-visible > * {
  transform: translateY(0);
}

/* ==========================================
   74. WAVE TEXT
   ========================================== */
@keyframes waveText {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.wave-char {
  display: inline-block;
  animation: waveText 1s ease-in-out infinite;
}

/* ==========================================
   75. ISOMETRIC TILT
   ========================================== */
[data-isometric] {
  transform: rotateX(60deg) rotateZ(-45deg);
  transition: transform 0.6s var(--ease-out-expo);
}

[data-isometric]:hover {
  transform: rotateX(0) rotateZ(0) scale(1.1);
}

/* ==========================================
   76. STICKY HEADER COMPACT
   ========================================== */
@keyframes headerCompact {
  from { padding: 16px 0; }
  to { padding: 8px 0; }
}

/* ==========================================
   77. FOOTER REVEAL (fixed footer effect)
   ========================================== */
.footer-reveal {
  position: relative;
  z-index: 1;
}

/* ==========================================
   78. SCROLL PROGRESS BAR
   ========================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  z-index: 10001;
  transition: width 0.1s linear;
}

/* ==========================================
   79. MOBILE SWIPE INDICATOR
   ========================================== */
@keyframes swipeHint {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(-20px); opacity: 1; }
}

.swipe-hint-indicator {
  animation: swipeHint 2s ease-in-out 3;
}

/* ==========================================
   80. BLUR BACKDROP
   ========================================== */
.backdrop-blur {
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* ==========================================
   81. SPLIT TEXT ANIMATION
   ========================================== */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px) rotateX(-90deg);
}

.split-char.visible {
  opacity: 1;
  transform: translateY(0) rotateX(0);
  transition: all 0.6s var(--ease-out-expo);
}

/* ==========================================
   82. MASKED IMAGE REVEAL
   ========================================== */
[data-mask-reveal-img] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-out-expo);
}

[data-mask-reveal-img].is-visible {
  clip-path: inset(0 0% 0 0);
}

/* ==========================================
   83. MAGNIFYING GLASS
   ========================================== */
.magnify-glass {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(168, 85, 247, 0.1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  overflow: hidden;
}

[data-magnify]:hover .magnify-glass {
  opacity: 1;
}

/* ==========================================
   84. FLIP ON SCROLL
   ========================================== */
[data-animate="flip-scroll"] {
  opacity: 0;
  transform: perspective(1000px) rotateX(45deg);
  transition: all 0.8s var(--ease-out-expo);
  transform-style: preserve-3d;
}

[data-animate="flip-scroll"].is-visible {
  opacity: 1;
  transform: perspective(1000px) rotateX(0);
}

/* ==========================================
   85. ZOOM ON SCROLL
   ========================================== */
[data-animate="zoom-scroll"] {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.7s var(--ease-spring);
}

[data-animate="zoom-scroll"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================
   86. LINE DRAW SVG
   ========================================== */
.line-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s var(--ease-out-expo);
}

.line-draw.is-visible {
  stroke-dashoffset: 0;
}

/* ==========================================
   87. MAGNETIC FIELD
   ========================================== */
.magnetic-field {
  position: relative;
}

.magnetic-field::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.magnetic-field:hover::before {
  opacity: 1;
}

/* ==========================================
   88. STICKY BADGE
   ========================================== */
.sticky-badge {
  position: sticky;
  top: 80px;
  z-index: 10;
}

/* ==========================================
   89. ASPECT RATIO ANIMATION
   ========================================== */
@keyframes aspectMorph {
  0%, 100% { aspect-ratio: 1/1; }
  50% { aspect-ratio: 16/9; }
}

[data-aspect-morph] {
  animation: aspectMorph 10s ease-in-out infinite;
}

/* ==========================================
   90. UNDERLINE DRAW
   ========================================== */
[data-underline-draw] {
  position: relative;
  display: inline-block;
}

[data-underline-draw]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.4s var(--ease-out-expo);
}

[data-underline-draw]:hover::after {
  width: 100%;
}

/* ==========================================
   91. GRADIENT MESH
   ========================================== */
@keyframes gradientMesh {
  0% { background-position: 0% 0%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

[data-gradient-mesh] {
  background: linear-gradient(135deg, rgba(168,85,247,0.1), rgba(124,58,237,0.05), rgba(255,0,255,0.05));
  background-size: 400% 400%;
  animation: gradientMesh 15s ease infinite;
}

/* ==========================================
   92. FOLDING CARD
   ========================================== */
.fold-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.fold-card-inner {
  transition: transform 0.6s var(--ease-out-expo);
  transform-origin: top center;
}

.fold-card:hover .fold-card-inner {
  transform: rotateX(-15deg);
}

/* ==========================================
   93. WATER RIPPLE
   ========================================== */
@keyframes waterRipple {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ==========================================
   94. SHADOW DEPTH
   ========================================== */
[data-shadow-depth] {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}

[data-shadow-depth]:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(168,85,247,0.08);
  transform: translateY(-4px);
}

/* ==========================================
   95. STAGGER LIST
   ========================================== */
[data-stagger-list] > * {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s var(--ease-out-expo);
}

[data-stagger-list].is-visible > *:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0ms; }
[data-stagger-list].is-visible > *:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 80ms; }
[data-stagger-list].is-visible > *:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 160ms; }
[data-stagger-list].is-visible > *:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 240ms; }
[data-stagger-list].is-visible > *:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 320ms; }
[data-stagger-list].is-visible > *:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: 400ms; }
[data-stagger-list].is-visible > *:nth-child(7) { opacity: 1; transform: translateX(0); transition-delay: 480ms; }
[data-stagger-list].is-visible > *:nth-child(8) { opacity: 1; transform: translateX(0); transition-delay: 560ms; }

/* ==========================================
   96. CIRCLE PROGRESS
   ========================================== */
.circle-progress {
  transform: rotate(-90deg);
}

.circle-progress-ring {
  fill: none;
  stroke: rgba(168, 85, 247, 0.1);
  stroke-width: 4;
}

.circle-progress-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1s var(--ease-out-expo);
}

/* ==========================================
   97. BLUR IN ON SCROLL
   ========================================== */
[data-animate="blur-scroll"] {
  opacity: 0;
  filter: blur(20px);
  transition: all 1s var(--ease-out-expo);
}

[data-animate="blur-scroll"].is-visible {
  opacity: 1;
  filter: blur(0);
}

/* ==========================================
   98. SPLIT SCREEN REVEAL
   ========================================== */
.split-reveal-left,
.split-reveal-right {
  transition: transform 1s var(--ease-out-expo);
}

.split-reveal-left {
  transform: translateX(-100%);
}

.split-reveal-right {
  transform: translateX(100%);
}

.split-reveal-left.is-visible,
.split-reveal-right.is-visible {
  transform: translateX(0);
}

/* ==========================================
   99. TYPING CURSOR
   ========================================== */
.typing-cursor::after {
  content: '|';
  color: var(--accent);
  animation: blink-caret 0.75s step-end infinite;
}

/* ==========================================
   100. FINAL ENHANCEMENTS
   ========================================== */
/* Smooth image loading */
img {
  transition: opacity 0.3s;
}

img[loading="lazy"] {
  opacity: 0;
}

img.loaded {
  opacity: 1;
}

/* Focus visible enhanced */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Selection color */
::selection {
  background: rgba(168, 85, 247, 0.3);
  color: #fff;
}

/* Scrollbar enhancement for WebKit */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);
}

/* Touch action for swipe areas */
[data-swipe-gallery] {
  touch-action: pan-y pinch-zoom;
}

/* Prevent text selection during swipe */
.swipe-tracking {
  user-select: none;
  -webkit-user-select: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}