/* Magic UI Components CSS */

/* Particles Canvas */
#particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  background: var(--color-trio-cream);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

/* Enhanced Border Beam */
.magic-card .border-beam {
  position: absolute;
  top: -1px;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-trio-gold),
    var(--color-trio-cream),
    var(--color-trio-gold),
    transparent
  );
  animation: borderBeam 4s linear infinite;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.magic-card:hover .border-beam {
  opacity: 1;
}

/* Enhanced Shimmer Button */
.shimmer-button {
  background: var(--color-trio-btn);
  position: relative;
  overflow: hidden;
}

.shimmer-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s;
}

.shimmer-button:hover::before {
  left: 100%;
}

/* Enhanced Ripple Effect */
.ripple-button {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
}

/* Video Modal Enhancements */
#video-modal {
  backdrop-filter: blur(20px);
  transition: all var(--transition-base);
}

#video-modal.visible {
  display: flex !important;
}

#video-modal .modal-content {
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Scroll Progress Bar */
#scroll-progress {
  transition: width 0.1s ease-out;
  background: linear-gradient(
    90deg,
    var(--color-trio-gold),
    var(--color-trio-cream),
    var(--color-trio-gold)
  );
}

/* Navigation Enhancements */
nav {
  transition: all var(--transition-base);
}

nav.scrolled {
  background: rgba(41, 25, 1, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

nav a {
  position: relative;
  transition: all var(--transition-base);
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-trio-gold);
  transition: width var(--transition-base);
}

nav a:hover::after {
  width: 100%;
}

/* Form Enhancements */
input, textarea {
  transition: all var(--transition-base);
  position: relative;
}

input:focus, textarea:focus {
  border-color: var(--color-trio-gold);
  box-shadow: 0 0 0 3px rgba(154, 105, 15, 0.1);
  transform: translateY(-2px);
}

/* Card Hover Effects */
.magic-card {
  transition: all var(--transition-base);
  position: relative;
}

.magic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(154, 105, 15, 0.05),
    transparent
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.magic-card:hover::after {
  opacity: 1;
}

/* Enhanced Social Links */
.social-link {
  position: relative;
  overflow: hidden;
}

.social-link::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(--transition-base);
}

.social-link:hover::before {
  left: 100%;
}

/* Loading States */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Success/Error States */
.success {
  background: #22c55e;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  opacity: 0;
  transform: translateY(-20px);
  transition: all var(--transition-base);
}

.success.show {
  opacity: 1;
  transform: translateY(0);
}

.error {
  background: #ef4444;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
  opacity: 0;
  transform: translateY(-20px);
  transition: all var(--transition-base);
}

.error.show {
  opacity: 1;
  transform: translateY(0);
}

/* Intersection Observer Animations */
.fade-in-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced Text Animations */
.text-reveal-wrapper {
  overflow: hidden;
}

.text-reveal-char {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.6s ease;
}

.text-reveal-char.revealed {
  transform: translateY(0);
}

/* Parallax Effects */
.parallax-element {
  transition: transform 0.1s ease-out;
}

/* Mobile Menu Animation */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base), opacity var(--transition-base);
  opacity: 0;
}

#mobile-menu.open {
  max-height: 300px;
  opacity: 1;
}

/* Enhanced Hero Section */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(154, 105, 15, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* Testimonial Cards */
.testimonial-card {
  transition: all var(--transition-base);
  position: relative;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-trio-gold),
    var(--color-trio-cream),
    var(--color-trio-gold)
  );
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.testimonial-card:hover::before {
  transform: scaleX(1);
}

/* Enhanced Buttons */
button, .button {
  position: relative;
  transition: all var(--transition-base);
}

button:active, .button:active {
  transform: scale(0.98);
}

button:disabled, .button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Smooth Scrolling Enhancement */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Dark Mode Support (for future use) */
@media (prefers-color-scheme: dark) {
  .auto-dark {
    filter: invert(1) hue-rotate(180deg);
  }
}

/* High Performance Animations */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Print Optimizations */
@media print {
  .magic-card,
  .shimmer-button,
  .ripple-button {
    background: white !important;
    color: black !important;
    border: 1px solid black;
  }

  .animated-gradient-text,
  .animated-shiny-text {
    background: none !important;
    color: black !important;
    -webkit-text-fill-color: black !important;
  }
}