/* Advanced Motion System - Premium smooth animations */

/* Hardware acceleration for all animations */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }

/* Custom smooth cursor */
.cursor { 
  width: 20px; height: 20px; 
  border: 2px solid var(--brand); 
  border-radius: 50%; 
  position: fixed; 
  pointer-events: none; 
  z-index: 9999; 
  transition: transform .15s cubic-bezier(.4,0,.2,1), opacity .2s, width .2s, height .2s, border-color .2s; 
  transform: translate(-50%,-50%); 
  opacity: .85;
  mix-blend-mode: difference;
}
.cursor.cursor-hover { 
  transform: translate(-50%,-50%) scale(1.5); 
  border-color: var(--accent); 
  opacity: 1;
}
.cursor-follower { 
  width: 10px; height: 10px; 
  background: linear-gradient(135deg, var(--brand), var(--accent)); 
  border-radius: 50%; 
  position: fixed; 
  pointer-events: none; 
  z-index: 9998; 
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s; 
  transform: translate(-50%,-50%); 
  opacity: .7;
  mix-blend-mode: screen;
}

/* Smooth header scroll effect */
.site-header { 
  transition: all .4s cubic-bezier(.25,1,.5,1); 
  will-change: background, box-shadow, padding, transform;
}
.site-header.scrolled { 
  background: rgba(11,12,16,0.95); 
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(110,231,255,0.1); 
  padding-top: 10px; 
  padding-bottom: 10px;
  backdrop-filter: blur(20px) saturate(1.2);
}

/* Advanced reveal system with multiple variants */
[data-motion] { 
  will-change: opacity, transform; 
  backface-visibility: hidden;
  perspective: 1000px;
}

.motion-init[data-motion="title"] { 
  opacity: 0; 
  transform: translateY(30px) scale(0.98); 
  filter: blur(2px);
}

.motion-init[data-motion="card"], 
.motion-init[data-motion="item"] { 
  opacity: 0; 
  transform: translateY(40px) scale(0.96); 
}

.motion-init[data-motion="fade-left"] {
  opacity: 0;
  transform: translateX(-40px);
}

.motion-init[data-motion="fade-right"] {
  opacity: 0;
  transform: translateX(40px);
}

.motion-init[data-motion="zoom"] {
  opacity: 0;
  transform: scale(0.9);
}

.motion-init[data-motion="rotate"] {
  opacity: 0;
  transform: rotate(-5deg) scale(0.95);
}

.is-visible[data-motion] { 
  opacity: 1; 
  transform: none; 
  filter: blur(0);
  transition: opacity .8s cubic-bezier(.25,1,.5,1), 
              transform .8s cubic-bezier(.25,1,.5,1),
              filter .8s cubic-bezier(.25,1,.5,1); 
}

/* Stagger delays for sequential animations */
.is-visible[data-motion][data-delay="1"] { transition-delay: .1s; }
.is-visible[data-motion][data-delay="2"] { transition-delay: .2s; }
.is-visible[data-motion][data-delay="3"] { transition-delay: .3s; }
.is-visible[data-motion][data-delay="4"] { transition-delay: .4s; }
.is-visible[data-motion][data-delay="5"] { transition-delay: .5s; }

/* Enhanced hero background animation */
.hero-bg { 
  will-change: transform, opacity;
  animation: motionPulse 10s ease-in-out infinite; 
}

@keyframes motionPulse { 
  0%, 100% { 
    transform: translate3d(0, 0, 0) scale(1); 
    opacity: .7;
    filter: hue-rotate(0deg);
  } 
  33% { 
    transform: translate3d(0, -8px, 0) scale(1.02); 
    opacity: .85;
    filter: hue-rotate(5deg);
  }
  66% { 
    transform: translate3d(0, 8px, 0) scale(1.03); 
    opacity: .9;
    filter: hue-rotate(-5deg);
  }
}

/* Smooth parallax scrolling */
[data-parallax] {
  will-change: transform;
  transform-style: preserve-3d;
}

[data-parallax] > * {
  will-change: transform;
  backface-visibility: hidden;
}

/* Magnetic hover effect for buttons */
.btn { 
  will-change: transform, box-shadow;
  transition: all .35s cubic-bezier(.25,1,.5,1);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.25,1,.5,1);
}

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

.btn:hover { 
  transform: translateY(-3px) scale(1.02); 
  box-shadow: 0 12px 40px rgba(110,231,255,.25), 0 6px 20px rgba(167,139,250,.2);
}

.btn:active { 
  transform: translateY(-1px) scale(0.99); 
  transition-duration: .15s;
}

/* Card hover effects with 3D tilt */
.feature-card, 
.project-card, 
.showcase-card {
  will-change: transform, box-shadow;
  transition: all .4s cubic-bezier(.25,1,.5,1);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.feature-card:hover, 
.project-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(110,231,255,.15), 0 8px 24px rgba(167,139,250,.15);
}

/* Ripple effect on click */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,255,.4), transparent 70%);
  transform: translate(-50%, -50%);
  transition: width .6s ease, height .6s ease, opacity .6s ease;
  opacity: 0;
  pointer-events: none;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition-duration: 0s;
}

/* Smooth page transitions */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(1.02);
  }
}

main {
  animation: pageEnter .7s cubic-bezier(.25,1,.5,1) both;
}

main.exiting {
  animation: pageExit .5s cubic-bezier(.25,1,.5,1) both;
}

/* Floating animation for showcase cards */
@keyframes float {
  0%, 100% { 
    transform: translateY(0) translateZ(0) rotate(0deg); 
  }
  33% { 
    transform: translateY(-12px) translateZ(10px) rotate(1deg); 
  }
  66% { 
    transform: translateY(-6px) translateZ(5px) rotate(-1deg); 
  }
}

.float-1, .float-2, .float-3 {
  animation-timing-function: cubic-bezier(.45,.05,.55,.95);
  will-change: transform;
}

/* Gradient animation for backgrounds */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* Glow pulse effect */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(110,231,255,.3), 0 0 40px rgba(167,139,250,.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(110,231,255,.5), 0 0 60px rgba(167,139,250,.3);
  }
}

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* Smooth focus states */
input:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  transition: outline-offset .25s cubic-bezier(.25,1,.5,1);
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* Text shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.text-shimmer {
  background: linear-gradient(90deg, 
    var(--text) 25%, 
    var(--brand) 50%, 
    var(--text) 75%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* Smooth scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255,255,255,.02);
}

::-webkit-scrollbar-thumb {
  background: rgba(110,231,255,.3);
  border-radius: 5px;
  transition: background .3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(110,231,255,.5);
}

/* Reduce motion for accessibility */
@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;
  }
}