/* ==========================================================================
   3D ANIMATIONS & TACTILE MICRO-INTERACTIONS
   ========================================================================== */

/* Perspective container */
.perspective-container {
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* 3D Tilt Element */
.tilt-card {
  transition: transform 0.15s ease-out, box-shadow 0.25s ease-out, border-color 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* 3D Depth on children when card tilts */
.tilt-card .depth-1 {
  transform: translateZ(10px);
  transition: transform 0.2s ease;
}

.tilt-card .depth-2 {
  transform: translateZ(20px);
  transition: transform 0.2s ease;
}

.tilt-card .depth-3 {
  transform: translateZ(32px);
  transition: transform 0.2s ease;
}

/* Floating animation for avatar */
@keyframes softFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.avatar-float {
  animation: softFloat 6s ease-in-out infinite;
}

/* Magnetic Dock Item Bounce */
@keyframes magneticPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15) translateY(-4px);
  }
  100% {
    transform: scale(1);
  }
}

.dock-item:active {
  transform: scale(0.92) translateY(1px);
}

/* Tab Transition Keyframes */
@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.view-enter {
  animation: viewFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth Ripple or Click Effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}

@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Subtle Shimmer for Highlighting */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-text {
  background: linear-gradient(90deg, var(--text-primary) 0%, var(--accent-blue) 50%, var(--text-primary) 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 8s linear infinite;
}

/* 3D Stack Button Isometric Hover */
.stack-tile {
  transform: perspective(600px) rotateX(0deg) rotateY(0deg) translateZ(0px);
}

.stack-tile:hover {
  transform: perspective(600px) translateY(-5px) scale(1.1) translateZ(10px);
}

/* Subtle Ambient Glow */
.ambient-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.08) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
}

[data-theme="dark"] .ambient-glow {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
}