/* ============================================================================
   V2 LANDING PAGE - Advanced Animations & Effects
   ============================================================================ */

/* Float Animation for Hero Mockup */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotateX(2deg) rotateY(-4deg);
  }
  50% {
    transform: translateY(-20px) rotateX(4deg) rotateY(-6deg);
  }
}

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

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

.animate-float-delayed {
  animation: float-delayed 5s ease-in-out infinite;
  animation-delay: 1s;
}

/* Gradient Animation */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

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

/* Pulse Glow */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

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

/* Scroll Reveal */
@keyframes scroll-reveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-reveal {
  opacity: 0;
  animation: scroll-reveal 0.8s ease-out forwards;
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  background-size: 1000px 100%;
  animation: shimmer 3s infinite;
}

/* 3D Card Hover */
@keyframes icon-fade-in {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-icon-fade {
  animation: icon-fade-in 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-3d:hover {
  transform: translateY(-8px) rotateX(5deg) rotateY(-5deg) scale(1.02);
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .animate-float,
  .animate-float-delayed,
  .animate-gradient,
  .animate-pulse-glow,
  .scroll-reveal {
    animation: none !important;
  }
  
  .card-3d:hover {
    transform: translateY(-4px) scale(1.02);
  }
}

/* Backdrop Blur Support */
@supports (backdrop-filter: blur(20px)) {
  .backdrop-blur-custom {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(15 23 42);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(139 92 246), rgb(236 72 153));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgb(124 58 237), rgb(219 39 119));
}

/* Text Selection */
::selection {
  background: rgba(139, 92, 246, 0.3);
  color: inherit;
}

::-moz-selection {
  background: rgba(139, 92, 246, 0.3);
  color: inherit;
}

/* Focus Visible */
*:focus-visible {
  outline: 2px solid rgb(139 92 246);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Performance Optimizations */
.will-change-transform {
  will-change: transform;
}

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

.gpu-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Interactive Gradient Background */
.interactive-gradient {
  transition: background 0.3s ease;
}

/* Safe Area Insets for Mobile */
@supports (padding: max(0px)) {
  .safe-area-inset-x {
    padding-left: max(env(safe-area-inset-left, 0px), 1rem);
    padding-right: max(env(safe-area-inset-right, 0px), 1rem);
  }
  
  .safe-area-inset-bottom {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 1rem);
  }
}

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

@media (max-width: 1023px) {
  .parallax {
    transform: none;
  }
}

/* Card Shine Effect */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  transition: transform 0.6s;
}

.card-shine:hover::before {
  transform: rotate(45deg) translate(50%, 50%);
}

/* Skeleton Loading */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, rgb(226 232 240) 25%, rgb(241 245 249) 50%, rgb(226 232 240) 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Glitch Effect (Optional - for special CTAs) */
@keyframes glitch {
  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);
  }
}

.glitch:hover {
  animation: glitch 0.3s ease-in-out;
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, rgb(139 92 246), rgb(236 72 153), rgb(59 130 246));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* Magnetic Button Effect */
.magnetic-button {
  transition: transform 0.2s ease;
}

.magnetic-button:hover {
  transform: scale(1.05);
}

.magnetic-button:active {
  transform: scale(0.95);
}

/* Glass Morphism */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark Glass */
.glass-dark {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Neon Glow */
.neon-glow {
  text-shadow: 
    0 0 10px rgba(139, 92, 246, 0.8),
    0 0 20px rgba(139, 92, 246, 0.6),
    0 0 30px rgba(139, 92, 246, 0.4);
}

/* Border Gradient Animation */
@keyframes border-rotate {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.border-gradient {
  --angle: 0deg;
  background: 
    linear-gradient(var(--angle), transparent, transparent),
    conic-gradient(from var(--angle), rgb(139 92 246), rgb(236 72 153), rgb(59 130 246), rgb(139 92 246));
  animation: border-rotate 3s linear infinite;
}

/* Tooltip */
.tooltip {
  position: relative;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 8px 12px;
  background: rgb(15 23 42);
  color: white;
  font-size: 0.875rem;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.tooltip:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

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

.spinner {
  border: 3px solid rgba(139, 92, 246, 0.3);
  border-top-color: rgb(139 92 246);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 0.5s ease-out;
}

/* Hero intro tagline — fade-in آرام */
.font-roboto {
  font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif;
}

.font-roboto-black {
  font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
}

@keyframes hero-tagline-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-tagline-fade {
  opacity: 0;
  animation: hero-tagline-fade-in 4.5s ease-out forwards;
  animation-delay: 0.6s;
}

.capati-hero-animation__svg svg {
  display: block;
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

@media (prefers-reduced-motion: reduce) {
  .hero-tagline-fade {
    opacity: 1;
    animation: none;
    transform: none;
  }
}