/**
 * PropertyVault - Visual Effects & Animations
 * Advanced CSS effects with accessibility considerations
 * Uses CSS variables from global.css
 */

/* ============================================
   ACCESSIBILITY - Respect motion preferences
   ============================================ */
@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;
  }
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Animated gradient background */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Floating particles */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.3;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    transform: translateY(-20px) translateX(15px);
    opacity: 0.8;
  }
  75% {
    opacity: 0.5;
  }
}

/* Parallax depth effect */
@keyframes parallaxBg {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(20px);
  }
}

/* Glow pulse effect */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(63, 191, 160, 0.3),
                inset 0 0 20px rgba(63, 191, 160, 0.1);
  }
  50% {
    box-shadow: 0 0 40px rgba(63, 191, 160, 0.5),
                inset 0 0 30px rgba(63, 191, 160, 0.2);
  }
}

/* Card fade in with stagger */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Button bounce effect */
@keyframes buttonBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Card lift effect */
@keyframes cardLift {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 35px rgba(63, 191, 160, 0.2);
  }
}

/* Floating badge animation */
@keyframes floatingBadge {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Gradient border animation */
@keyframes gradientBorder {
  0% {
    border-image-source: linear-gradient(45deg, var(--teal), var(--teal-dark), var(--teal));
    border-image-position: 0% 0%;
  }
  50% {
    border-image-source: linear-gradient(45deg, var(--teal-light), var(--teal), var(--teal-dark));
    border-image-position: 50% 50%;
  }
  100% {
    border-image-source: linear-gradient(45deg, var(--teal), var(--teal-dark), var(--teal));
    border-image-position: 100% 100%;
  }
}

/* Teal underline sweep */
@keyframes underlineSweep {
  0% {
    width: 0;
    left: 0;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

/* Hamburger to X animation */
@keyframes hamburgerTop {
  0% {
    transform: translateY(10px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(45deg);
  }
}

@keyframes hamburgerMiddle {
  0% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

@keyframes hamburgerBottom {
  0% {
    transform: translateY(-10px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(-45deg);
  }
}

/* Counter animation pulse */
@keyframes counterPulse {
  0%, 100% {
    color: var(--teal);
  }
  50% {
    color: var(--teal-light);
  }
}

/* Mesh gradient animation */
@keyframes meshGradient {
  0%, 100% {
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
  }
  25% {
    background-position: 25% 25%, 75% 25%, 25% 75%, 75% 75%;
  }
  50% {
    background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  }
  75% {
    background-position: 75% 75%, 25% 75%, 75% 25%, 25% 25%;
  }
}

/* Typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  0%, 49% {
    border-right-color: var(--teal);
  }
  50%, 100% {
    border-right-color: transparent;
  }
}

/* ============================================
   HERO & SECTION BACKGROUNDS
   ============================================ */

/* Animated gradient hero background — applied to hero-bg, NOT hero-gradient */
.hero-bg {
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

/* Parallax background layers */
.parallax-bg {
  position: relative;
  overflow: clip;
}

.parallax-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: parallaxBg linear infinite;
  opacity: 0.05;
}

.parallax-layer:nth-child(1) {
  background: radial-gradient(circle at 30% 50%, var(--teal) 0%, transparent 50%);
  animation-duration: 20s;
}

.parallax-layer:nth-child(2) {
  background: radial-gradient(circle at 70% 30%, var(--teal-dark) 0%, transparent 50%);
  animation-duration: 25s;
  animation-direction: reverse;
}

.parallax-layer:nth-child(3) {
  background: radial-gradient(circle at 50% 70%, var(--teal-light) 0%, transparent 50%);
  animation-duration: 30s;
}

/* Mesh gradient background */
.mesh-gradient-bg {
  position: relative;
  background:
    radial-gradient(at 20% 50%, var(--teal) 0%, transparent 50%),
    radial-gradient(at 80% 50%, var(--teal-dark) 0%, transparent 50%),
    radial-gradient(at 40% 100%, var(--teal-light) 0%, transparent 50%),
    radial-gradient(at 60% 0%, var(--navy) 0%, transparent 50%),
    var(--bg-darker);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0% 0%;
  animation: meshGradient 20s ease infinite;
}

/* ============================================
   INTERSTELLAR STAR FIELD
   ============================================ */
.stars-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: clip;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: var(--teal);
  animation: starDrift linear infinite, starPulse ease-in-out infinite;
}

.star-sm {
  width: 2px;
  height: 2px;
  --star-base-opacity: 0.25;
  box-shadow: 0 0 4px rgba(63, 191, 160, 0.3);
}

.star-md {
  width: 3px;
  height: 3px;
  --star-base-opacity: 0.4;
  box-shadow: 0 0 6px rgba(63, 191, 160, 0.4), 0 0 14px rgba(63, 191, 160, 0.15);
}

.star-lg {
  width: 5px;
  height: 5px;
  --star-base-opacity: 0.6;
  box-shadow: 0 0 10px rgba(63, 191, 160, 0.5), 0 0 24px rgba(63, 191, 160, 0.2), 0 0 50px rgba(63, 191, 160, 0.08);
}

/* Small stars — slow drift, scattered */
.star-sm:nth-child(1)  { left: 5%;  top: 15%; animation-duration: 25s, 4s; animation-delay: 0s, 0s; }
.star-sm:nth-child(2)  { left: 15%; top: 70%; animation-duration: 30s, 5s; animation-delay: -5s, -1s; }
.star-sm:nth-child(3)  { left: 25%; top: 30%; animation-duration: 22s, 3.5s; animation-delay: -10s, -2s; }
.star-sm:nth-child(4)  { left: 40%; top: 85%; animation-duration: 28s, 4.5s; animation-delay: -3s, -0.5s; }
.star-sm:nth-child(5)  { left: 55%; top: 10%; animation-duration: 26s, 5.5s; animation-delay: -8s, -3s; }
.star-sm:nth-child(6)  { left: 65%; top: 55%; animation-duration: 32s, 3s; animation-delay: -12s, -1.5s; }
.star-sm:nth-child(7)  { left: 78%; top: 25%; animation-duration: 24s, 6s; animation-delay: -2s, -4s; }
.star-sm:nth-child(8)  { left: 88%; top: 65%; animation-duration: 27s, 4s; animation-delay: -7s, -2.5s; }
.star-sm:nth-child(9)  { left: 92%; top: 40%; animation-duration: 29s, 5s; animation-delay: -15s, -0.8s; }
.star-sm:nth-child(10) { left: 35%; top: 50%; animation-duration: 23s, 3.8s; animation-delay: -6s, -3.2s; }

/* Medium stars */
.star-md:nth-child(11) { left: 12%; top: 40%; animation-duration: 20s, 3s; animation-delay: -4s, -1s; }
.star-md:nth-child(12) { left: 30%; top: 20%; animation-duration: 18s, 4s; animation-delay: -9s, -2s; }
.star-md:nth-child(13) { left: 60%; top: 75%; animation-duration: 22s, 3.5s; animation-delay: -1s, -0.5s; }
.star-md:nth-child(14) { left: 75%; top: 45%; animation-duration: 19s, 5s; animation-delay: -11s, -3s; }
.star-md:nth-child(15) { left: 48%; top: 35%; animation-duration: 21s, 4.2s; animation-delay: -6s, -1.8s; }

/* Large stars — bright, slow, prominent */
.star-lg:nth-child(16) { left: 20%; top: 55%; animation-duration: 16s, 2.5s; animation-delay: -3s, -0.5s; }
.star-lg:nth-child(17) { left: 70%; top: 20%; animation-duration: 18s, 3s; animation-delay: -7s, -1.5s; }
.star-lg:nth-child(18) { left: 85%; top: 80%; animation-duration: 15s, 2.8s; animation-delay: -10s, -2s; }

/* Shooting star streaks */
.star-streak {
  position: absolute;
  width: 80px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(63, 191, 160, 0.7), rgba(63, 191, 160, 0.2), transparent);
  border-radius: 2px;
  opacity: 0;
  animation: shootingStar linear infinite;
  transform-origin: left center;
}

.star-streak::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(63, 191, 160, 0.8), 0 0 16px rgba(63, 191, 160, 0.4);
}

.star-streak:nth-child(19) {
  top: 18%;
  left: -80px;
  transform: rotate(-12deg);
  animation-delay: 1s;
  animation-duration: 4s;
}

.star-streak:nth-child(20) {
  top: 48%;
  left: -80px;
  transform: rotate(-6deg);
  animation-delay: 6s;
  animation-duration: 3.5s;
}

.star-streak:nth-child(21) {
  top: 72%;
  left: -80px;
  transform: rotate(-18deg);
  animation-delay: 10s;
  animation-duration: 4.5s;
}

@keyframes starDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(12px, -20px); }
  50%  { transform: translate(-8px, -40px); }
  75%  { transform: translate(18px, -20px); }
  100% { transform: translate(0, 0); }
}

@keyframes starPulse {
  0%, 100% {
    opacity: var(--star-base-opacity, 0.3);
    transform: scale(1);
  }
  50% {
    opacity: calc(var(--star-base-opacity, 0.3) * 2.5);
    transform: scale(1.6);
  }
}

@keyframes shootingStar {
  0%  { left: -80px; opacity: 0; }
  3%  { opacity: 0.9; }
  40% { opacity: 0.5; }
  70% { left: 110%; opacity: 0; }
  100% { left: 110%; opacity: 0; }
}

/* ============================================
   BUTTON & CTA EFFECTS
   ============================================ */

/* Enhanced CTA button with glow and bounce */
.cta-button,
.btn-primary {
  position: relative;
  overflow: clip;
  transition: all 0.3s var(--ease);
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-100%);
  opacity: 0;
}

.cta-button:hover::before {
  animation: shimmer 0.6s;
  opacity: 1;
}

.cta-button:hover,
.btn-primary:hover {
  animation: buttonBounce 0.3s ease-out;
  box-shadow: 0 0 30px var(--teal-glow),
              0 8px 24px rgba(63, 191, 160, 0.25);
}

.cta-button:active,
.btn-primary:active {
  transform: scale(0.98);
}

/* Glowing effect on hover */
.button-glow {
  position: relative;
}

.button-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, var(--teal-glow), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.button-glow:hover::after {
  opacity: 1;
  animation: glowPulse 2s ease-in-out infinite;
}

/* ============================================
   CARD & MODULE EFFECTS
   ============================================ */

/* Staggered card animations */
.card,
.module-card,
.feature-card {
  animation: fadeInUp 0.6s var(--ease) backwards;
  transition: all 0.3s var(--ease);
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }

/* Card hover lift */
.card:hover,
.module-card:hover,
.feature-card:hover {
  animation: cardLift 0.3s var(--ease) forwards;
}

/* Glow border on card hover */
.card:hover,
.module-card:hover {
  box-shadow: 0 0 1px var(--teal),
              0 0 20px var(--teal-glow),
              0 12px 35px rgba(63, 191, 160, 0.15);
  border-color: var(--teal);
}

/* Active module card with animated gradient border */
.module-card.active {
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--bg-darker), var(--bg-darker)),
    linear-gradient(45deg, var(--teal), var(--teal-dark), var(--teal));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: gradientBorder 3s ease infinite;
}

/* Glassmorphism effect */
.glass,
.glass-nav,
.glass-card {
  background: rgba(15, 43, 60, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(63, 191, 160, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass:hover,
.glass-card:hover {
  background: rgba(15, 43, 60, 0.6);
  border-color: rgba(63, 191, 160, 0.4);
  box-shadow: 0 8px 32px rgba(63, 191, 160, 0.1);
}

/* ============================================
   NAVIGATION & HEADER EFFECTS
   ============================================ */

/* Navigation link underline sweep */
.nav-link {
  position: relative;
  transition: color 0.3s var(--ease);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width 0.3s var(--ease);
}

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

/* Hamburger menu animation */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger.active span:first-child {
  animation: hamburgerTop 0.4s ease forwards;
}

.hamburger.active span:nth-child(2) {
  animation: hamburgerMiddle 0.4s ease forwards;
}

.hamburger.active span:last-child {
  animation: hamburgerBottom 0.4s ease forwards;
}

/* ============================================
   SCROLL PROGRESS INDICATOR
   ============================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--teal-dark));
  width: 0%;
  z-index: 1000;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px var(--teal-glow);
}

/* ============================================
   TEXT EFFECTS
   ============================================ */

/* Shimmer text effect */
.text-shimmer {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    var(--teal-light) 50%,
    currentColor 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* Typing effect container */
.typing-text {
  overflow: clip;
  border-right: 2px solid var(--teal);
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;
}

/* ============================================
   SECTION DIVIDERS
   ============================================ */

.section-divider {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  margin: 3rem 0;
}

.section-divider::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, var(--teal-glow), transparent);
  border-radius: 50%;
  opacity: 0.5;
}

/* ============================================
   STATS & COUNTER EFFECTS
   ============================================ */

.stat-number,
.counter {
  font-weight: 700;
  color: var(--teal);
  transition: color 0.3s var(--ease);
}

.stat-number:hover {
  animation: counterPulse 0.6s ease-in-out;
}

.stat-item {
  animation: fadeInUp 0.6s var(--ease) backwards;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }
.stat-item:nth-child(4) { animation-delay: 0.4s; }

/* ============================================
   BADGE & ACCENT ANIMATIONS
   ============================================ */

/* Floating badge (hero badge effect) */
.floating-badge {
  animation: floatingBadge 3s ease-in-out infinite;
  display: inline-block;
}

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

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  .parallax-layer {
    animation: none;
    display: none;
  }

  .particle {
    animation: float 8s infinite;
  }

  .mesh-gradient-bg {
    animation: meshGradient 30s ease infinite;
  }

  /* Adjust hero gradient speed for mobile */
  .hero-gradient {
    animation: gradientShift 20s ease infinite;
  }

  /* Stack cards with reduced animation on mobile */
  .card,
  .module-card,
  .feature-card {
    animation: fadeInUp 0.4s var(--ease) backwards;
  }

  .card:nth-child(1) { animation-delay: 0s; }
  .card:nth-child(2) { animation-delay: 0.1s; }
  .card:nth-child(3) { animation-delay: 0.2s; }
  .card:nth-child(4) { animation-delay: 0.3s; }
  .card:nth-child(5) { animation-delay: 0s; }
  .card:nth-child(6) { animation-delay: 0.1s; }

  /* Reduce button animation on mobile */
  .cta-button:hover,
  .btn-primary:hover {
    box-shadow: 0 0 20px var(--teal-glow);
  }

  /* Disable hover lift on mobile */
  @media (hover: none) {
    .card:hover,
    .module-card:hover,
    .feature-card:hover {
      animation: none;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
  }
}

@media (max-width: 480px) {
  /* Further reduce animations on very small screens */
  .mesh-gradient-bg {
    animation: none;
  }

  .section-divider {
    margin: 2rem 0;
  }

  .floating-badge {
    animation: none;
  }

  /* Simplify text effects */
  .text-shimmer {
    animation: none;
    background: none;
    -webkit-text-fill-color: unset;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATION
   ============================================ */

/* Use will-change sparingly and remove after animation */
.will-animate {
  will-change: transform, opacity;
}

.animation-complete {
  will-change: auto;
}

/* GPU acceleration for smooth animations */
.gpu-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Reduce paint areas */
.fixed-background {
  background-attachment: fixed;
}

@supports (backdrop-filter: blur(10px)) {
  .glass,
  .glass-nav,
  .glass-card {
    backdrop-filter: blur(10px);
  }
}