/* ============================================
   iPHONE-STYLE MOTION DESIGN SYSTEM
   Premium Animated Gradients & Motion Effects
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  /* Premium Gradient Colors */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-tertiary: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-warm: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --gradient-cool: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --gradient-premium: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  --gradient-sunset: linear-gradient(135deg, #fe5196 0%, #f77062 100%);
  --gradient-ocean: linear-gradient(135deg, #2af598 0%, #009efd 100%);
  
  /* Animated Gradient Presets */
  --animate-gradient-1: gradient-animation-1 15s ease infinite;
  --animate-gradient-2: gradient-animation-2 20s ease infinite;
  --animate-gradient-3: gradient-animation-3 25s ease infinite;
  
  /* Motion Timing */
  --motion-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --motion-snap: cubic-bezier(0.55, 0, 0.1, 1);
  --motion-float: cubic-bezier(0.45, 0, 0.55, 1);
  
  /* Timing Durations */
  --duration-instant: 0.15s;
  --duration-fast: 0.3s;
  --duration-normal: 0.5s;
  --duration-slow: 0.8s;
  --duration-ultra: 1.2s;
  
  /* Z-Index Layers */
  --z-background: -1;
  --z-content: 1;
  --z-overlay: 10;
  --z-nav: 100;
  --z-modal: 1000;
}

/* ============================================
   ANIMATED GRADIENT BACKGROUNDS
   ============================================ */

/* Hero Section Animated Gradient */
.hero-gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-background);
  overflow: hidden;
}

.hero-gradient-bg::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(240, 147, 251, 0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 80%, rgba(79, 172, 254, 0.1) 0%, transparent 45%),
    radial-gradient(ellipse at 40% 60%, rgba(165, 61, 255, 0.08) 0%, transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 255, 0.3) 100%);
  animation: heroGradientShift 20s ease-in-out infinite;
}

@keyframes heroGradientShift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(2%, 2%) scale(1.02);
  }
  50% {
    transform: translate(-1%, 3%) scale(0.98);
  }
  75% {
    transform: translate(-2%, -1%) scale(1.01);
  }
}

/* Primary Animated Gradient */
.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #667eea, #764ba2);
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease infinite;
}

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

/* Premium Flow Gradient */
.premium-gradient-flow {
  background: linear-gradient(120deg, 
    rgba(102, 126, 234, 0.1) 0%, 
    rgba(118, 75, 162, 0.1) 25%, 
    rgba(240, 147, 251, 0.1) 50%, 
    rgba(79, 172, 254, 0.1) 75%, 
    rgba(102, 126, 234, 0.1) 100%);
  background-size: 400% 400%;
  animation: premiumFlow 12s ease infinite;
}

@keyframes premiumFlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  33% {
    background-position: 100% 50%;
  }
  66% {
    background-position: 50% 100%;
  }
}

/* Glassmorphism Gradient Overlay */
.glass-gradient-overlay {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ============================================
   FLOATING GRADIENT ORBS
   ============================================ */

.floating-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  animation: orbFloat 20s ease-in-out infinite;
  pointer-events: none;
}

.floating-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.4) 0%, transparent 70%);
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.floating-orb-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(240, 147, 251, 0.35) 0%, transparent 70%);
  top: 30%;
  right: 10%;
  animation-delay: -5s;
}

.floating-orb-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(79, 172, 254, 0.3) 0%, transparent 70%);
  bottom: 20%;
  left: 30%;
  animation-delay: -10s;
}

.floating-orb-4 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(165, 61, 255, 0.3) 0%, transparent 70%);
  top: 50%;
  right: 30%;
  animation-delay: -15s;
}

.floating-orb-5 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(250, 112, 154, 0.25) 0%, transparent 70%);
  bottom: 40%;
  right: 5%;
  animation-delay: -8s;
}

@keyframes orbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(30px, -40px) scale(1.05);
  }
  40% {
    transform: translate(-20px, 20px) scale(0.95);
  }
  60% {
    transform: translate(40px, 30px) scale(1.02);
  }
  80% {
    transform: translate(-30px, -20px) scale(0.98);
  }
}

/* Orb with morphing effect */
.morphing-orb {
  animation: orbFloat 25s ease-in-out infinite, orbMorph 10s ease-in-out infinite;
}

@keyframes orbMorph {
  0%, 100% {
    border-radius: 50%;
  }
  25% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  75% {
    border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  }
}

/* ============================================
   HERO SECTION MOTION
   ============================================ */

/* Hero Container */
.hero-motion-container {
  position: relative;
  overflow: hidden;
}

/* Hero Text Animation */
.hero-title-motion {
  opacity: 0;
  transform: translateY(60px);
  animation: heroTitleReveal 1.2s var(--motion-smooth) 0.3s forwards;
}

@keyframes heroTitleReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero Subtitle Animation */
.hero-subtitle-motion {
  opacity: 0;
  transform: translateY(40px);
  animation: heroSubtitleReveal 1s var(--motion-smooth) 0.6s forwards;
}

@keyframes heroSubtitleReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero CTA Animation */
.hero-cta-motion {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  animation: heroCTAReveal 0.8s var(--motion-bounce) 0.9s forwards;
}

@keyframes heroCTAReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hero Stats Animation */
.hero-stats-motion {
  opacity: 0;
  transform: translateY(30px);
  animation: heroStatsReveal 0.8s var(--motion-smooth) 1.2s forwards;
}

@keyframes heroStatsReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero Image Animation */
.hero-image-motion {
  opacity: 0;
  transform: translateX(60px) scale(0.9);
  animation: heroImageReveal 1.2s var(--motion-smooth) 0.5s forwards;
}

@keyframes heroImageReveal {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Continuous floating effect for hero image */
.hero-image-float {
  animation: imageFloat 6s ease-in-out infinite;
}

@keyframes imageFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* ============================================
   PARALLAX SCROLL EFFECTS
   ============================================ */

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

.parallax-bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  z-index: var(--z-background);
  pointer-events: none;
}

.parallax-element {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Parallax speeds */
.parallax-slow {
  transform: translateZ(-1px) scale(2);
}

.parallax-medium {
  transform: translateZ(-0.5px) scale(1.5);
}

.parallax-fast {
  transform: translateZ(0) scale(1);
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================ */

/* Base scroll animation state */
.scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity var(--duration-slow) var(--motion-smooth),
              transform var(--duration-slow) var(--motion-smooth);
  will-change: opacity, transform;
}

.scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Different animation directions */
.scroll-animate-up {
  transform: translateY(60px);
}

.scroll-animate-down {
  transform: translateY(-60px);
}

.scroll-animate-left {
  transform: translateX(-60px);
}

.scroll-animate-right {
  transform: translateX(60px);
}

.scroll-animate-up.is-visible,
.scroll-animate-down.is-visible,
.scroll-animate-left.is-visible,
.scroll-animate-right.is-visible {
  transform: translate(0, 0);
}

/* Scale animations */
.scroll-animate-scale {
  transform: scale(0.8);
}

.scroll-animate-scale.is-visible {
  transform: scale(1);
}

/* Rotate animations */
.scroll-animate-rotate {
  transform: rotate(-10deg) scale(0.9);
}

.scroll-animate-rotate.is-visible {
  transform: rotate(0) scale(1);
}

/* Staggered children animations */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-normal) var(--motion-smooth),
              transform var(--duration-normal) var(--motion-smooth);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }

/* ============================================
   CARD MOTION EFFECTS
   ============================================ */

/* 3D Tilt Card Effect */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1000px);
  transition: transform var(--duration-normal) var(--motion-smooth);
}

.tilt-card-content {
  transform: translateZ(20px);
}

.tilt-card:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateZ(10px);
}

/* Lift Card */
.lift-card {
  transition: transform var(--duration-normal) var(--motion-smooth),
              box-shadow var(--duration-normal) var(--motion-smooth);
}

.lift-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Glow Card */
.glow-card {
  position: relative;
  overflow: hidden;
}

.glow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--duration-slow);
}

.glow-card:hover::before {
  left: 100%;
}

/* ============================================
   BUTTON MOTION EFFECTS
   ============================================ */

/* Gradient Button Hover */
.gradient-btn {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 200% 200%;
  transition: all var(--duration-normal) var(--motion-smooth);
}

.gradient-btn:hover {
  background-position: right center;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
}

/* Shine Button Effect */
.shine-btn {
  position: relative;
  overflow: hidden;
}

.shine-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transform: rotate(30deg);
  transition: all var(--duration-slow);
  opacity: 0;
}

.shine-btn:hover::after {
  animation: shineEffect 1s;
}

@keyframes shineEffect {
  0% {
    transform: rotate(30deg) translateX(-100%);
    opacity: 1;
  }
  100% {
    transform: rotate(30deg) translateX(100%);
    opacity: 0;
  }
}

/* Pulse Button */
.pulse-btn {
  animation: pulseButton 2s infinite;
}

@keyframes pulseButton {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(165, 61, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(165, 61, 255, 0);
  }
}

/* ============================================
   TEXT REVEAL ANIMATIONS
   ============================================ */

/* Character by character reveal */
.text-reveal-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: charReveal 0.5s var(--motion-smooth) forwards;
}

@keyframes charReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Word by word reveal */
.text-reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: wordReveal 0.4s var(--motion-smooth) forwards;
}

@keyframes wordReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientText 3s ease infinite;
}

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

/* Animated underline */
.animated-underline {
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--motion-smooth);
}

.animated-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ============================================
   NAVIGATION MOTION
   ============================================ */

/* Navigation slide down */
.nav-slide-down {
  transform: translateY(-100%);
  animation: navSlideDown 0.6s var(--motion-smooth) 0.5s forwards;
}

@keyframes navSlideDown {
  to {
    transform: translateY(0);
  }
}

/* Nav link hover underline */
.nav-link-motion {
  position: relative;
}

.nav-link-motion::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary-500, #a53dff);
  transition: all var(--duration-normal) var(--motion-smooth);
  transform: translateX(-50%);
}

.nav-link-motion:hover::after {
  width: 100%;
}

/* ============================================
   SECTION TRANSITIONS
   ============================================ */

/* Section entrance */
.section-entrance {
  opacity: 0;
  transform: translateY(80px);
  transition: all var(--duration-ultra) var(--motion-smooth);
}

.section-entrance.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section with diagonal reveal */
.section-diagonal {
  position: relative;
  overflow: hidden;
}

.section-diagonal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(240, 147, 251, 0.05));
  transform: translateY(100%);
  transform-origin: bottom left;
  transition: transform var(--duration-slow) var(--motion-smooth);
  z-index: var(--z-background);
}

.section-diagonal.is-visible::before {
  transform: translateY(0);
}

/* ============================================
   LOADING ANIMATIONS
   ============================================ */

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, 
    #f0f0f0 25%, 
    #e0e0e0 50%, 
    #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s ease-in-out infinite;
}

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

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(165, 61, 255, 0.1);
  border-top-color: #a53dff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   MOUSE FOLLOW EFFECTS
   ============================================ */

/* Cursor follower */
.cursor-follower {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 61, 255, 0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease-out;
  mix-blend-mode: multiply;
}

/* Magnetic button effect */
.magnetic-btn {
  transition: transform var(--duration-fast) var(--motion-smooth);
}

/* ============================================
   SMOOTH SCROLL BEHAVIOR
   ============================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ============================================
   RESPONSIVE MOTION
   ============================================ */

@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  .floating-orb {
    filter: blur(40px);
    opacity: 0.4;
  }
  
  .floating-orb-1 {
    width: 200px;
    height: 200px;
  }
  
  .floating-orb-2 {
    width: 150px;
    height: 150px;
  }
  
  .floating-orb-3 {
    width: 180px;
    height: 180px;
  }
  
  /* Faster animations on mobile */
  .scroll-animate,
  .section-entrance {
    transition-duration: var(--duration-fast);
  }
  
  /* Disable parallax on mobile */
  .parallax-bg {
    transform: none !important;
  }
  
  /* Disable tilt on mobile */
  .tilt-card:hover {
    transform: none;
  }
}

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

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Animation delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Transition delays */
.transition-delay-100 { transition-delay: 0.1s; }
.transition-delay-200 { transition-delay: 0.2s; }
.transition-delay-300 { transition-delay: 0.3s; }
.transition-delay-400 { transition-delay: 0.4s; }
.transition-delay-500 { transition-delay: 0.5s; }

/* Duration utilities */
.duration-fast { transition-duration: var(--duration-fast); }
.duration-normal { transition-duration: var(--duration-normal); }
.duration-slow { transition-duration: var(--duration-slow); }

/* Easing utilities */
.ease-smooth { transition-timing-function: var(--motion-smooth); }
.ease-bounce { transition-timing-function: var(--motion-bounce); }
.ease-float { transition-timing-function: var(--motion-float); }

/* Will change */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* Backface visibility */
.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Transform origin */
.transform-center {
  transform-origin: center center;
}

.transform-top {
  transform-origin: top center;
}

.transform-bottom {
  transform-origin: bottom center;
}