/* Custom Animations for Devon Stank Style Website */

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

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

.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

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

.animate-fade-in-down {
  animation: fadeInDown 0.6s ease-out;
}

.animate-slide-in {
  animation: slideIn 0.5s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.5s ease-out;
}

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

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

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

/* Primary scroll animation class - "off" by default */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* "On" state triggered by JavaScript */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Legacy support - keeping old class for backward compatibility */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Variant animations for scroll */
.animate-on-scroll-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.animate-on-scroll-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.animate-on-scroll-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* ========================================
   STAGGERED ANIMATIONS
   ======================================== */

/* Transition delays for staggered effects */
.stagger-delay-1 { transition-delay: 0.1s !important; }
.stagger-delay-2 { transition-delay: 0.2s !important; }
.stagger-delay-3 { transition-delay: 0.3s !important; }
.stagger-delay-4 { transition-delay: 0.4s !important; }
.stagger-delay-5 { transition-delay: 0.5s !important; }
.stagger-delay-6 { transition-delay: 0.6s !important; }

/* Animation delays for keyframe animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* ========================================
   HOVER EFFECTS
   ======================================== */

/* Generic lift effect */
.hover-lift {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Button hover effects with scale and shadow */
.btn-hover {
  transition: all 0.2s ease-out;
}

.btn-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(246, 196, 15, 0.25);
}

/* Enhanced button hover with lift and glow */
.btn-hover-lift {
  transition: all 0.3s ease-out;
  position: relative;
}

.btn-hover-lift::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  box-shadow: 0 15px 35px rgba(246, 196, 15, 0.3);
}

.btn-hover-lift:hover {
  transform: translateY(-2px) scale(1.02);
}

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

.btn-hover-lift:active {
  transform: translateY(0) scale(0.98);
}

/* Card hover effects with lift and shadow */
.card-hover {
  transition: all 0.3s ease-out;
  will-change: transform, box-shadow;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Enhanced card hover with border glow */
.card-hover-glow {
  transition: all 0.3s ease-out;
  position: relative;
}

.card-hover-glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #F6C40F, #ff9800);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease-out;
}

.card-hover-glow:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(246, 196, 15, 0.2);
}

.card-hover-glow:hover::after {
  opacity: 0.1;
}

/* Icon hover effects */
.icon-hover {
  transition: transform 0.3s ease-out;
  display: inline-block;
}

.icon-hover:hover {
  transform: scale(1.1);
}

.icon-hover-rotate {
  transition: transform 0.3s ease-out;
  display: inline-block;
}

.icon-hover-rotate:hover {
  transform: rotate(5deg) scale(1.1);
}

/* Link hover with arrow slide */
.link-hover-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.2s ease-out;
}

.link-hover-arrow:hover {
  gap: 0.75rem;
}

/* Image hover effects */
.image-hover-zoom {
  overflow: hidden;
}

.image-hover-zoom img {
  transition: transform 0.5s ease-out;
}

.image-hover-zoom:hover img {
  transform: scale(1.1);
}

.image-hover-overlay {
  position: relative;
  overflow: hidden;
}

.image-hover-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  z-index: 1;
}

.image-hover-overlay:hover::before {
  opacity: 1;
}

/* ========================================
   HEADER EFFECTS
   ======================================== */

.header-scrolled {
  background-color: rgba(0, 0, 0, 0.98) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Ensure text remains visible when scrolled */
.header-scrolled .nav-link,
.header-scrolled .mobile-nav-link,
.header-scrolled span:not(.material-symbols-outlined) {
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

.header-scrolled .nav-link:hover,
.header-scrolled .mobile-nav-link:hover {
  color: rgb(255, 255, 255) !important;
}

.header-scrolled a[href="/"] span {
  color: rgb(255, 255, 255) !important;
}

.header-scrolled a[href="/"]:hover span {
  color: #C9A962 !important; /* brand-gold */
}

.header-scrolled a[href="/"].active span {
  color: #C9A962 !important; /* brand-gold */
  background-color: rgba(201, 169, 98, 0.15) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem !important;
}

/* Active state in scrolled header - matching SA logo style */
.header-scrolled .nav-link.active,
.header-scrolled .mobile-nav-link.active {
  background-color: rgba(201, 169, 98, 0.15) !important;
  color: #C9A962 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
}

/* Mobile menu button in scrolled header */
.header-scrolled #mobile-menu-toggle {
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

.header-scrolled #mobile-menu-toggle:hover {
  color: rgb(255, 255, 255) !important;
}

/* ========================================
   SMOOTH TRANSITIONS
   ======================================== */

/* Global smooth transitions - scoped to prevent conflicts */
a, button, [role="button"] {
  transition-property: color, background-color, border-color, transform, opacity, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* ========================================
   MOBILE MENU ANIMATION
   ======================================== */

.mobile-menu-enter {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.mobile-menu-enter.active {
  max-height: 500px;
  opacity: 1;
}

#mobile-menu {
  transition: all 0.3s ease-in-out;
  transform-origin: top;
}

#mobile-menu.hidden {
  transform: scaleY(0);
  opacity: 0;
  max-height: 0;
}

#mobile-menu:not(.hidden) {
  transform: scaleY(1);
  opacity: 1;
  max-height: 500px;
}

/* ========================================
   CAROUSEL TRANSITIONS
   ======================================== */

.carousel-slide {
  transition: transform 0.5s ease-in-out;
}

#blog-carousel-track {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   LOADING & INTERACTIVE STATES
   ======================================== */

.loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}

.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  animation: pulse 1.5s ease-in-out infinite;
}

/* Focus States for Accessibility */
.focus-ring:focus,
.focus-ring:focus-visible {
  outline: 2px solid #F6C40F;
  outline-offset: 2px;
  border-radius: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #F6C40F;
  outline-offset: 2px;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for smooth animations */
.animate-on-scroll,
.scroll-fade-in,
.card-hover,
.btn-hover,
.hover-lift {
  will-change: transform, opacity;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-on-scroll,
  .scroll-fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================
   ACTIVE NAVIGATION STYLING
   ======================================== */

/* Active navigation link styling - matching SA logo style */
.nav-link.active,
.mobile-nav-link.active {
  background-color: rgba(201, 169, 98, 0.15) !important; /* brand-gold with opacity */
  color: #C9A962 !important; /* brand-gold */
  font-weight: 500;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
}

.nav-link.active:hover,
.mobile-nav-link.active:hover {
  background-color: rgba(201, 169, 98, 0.2) !important;
  color: #C9A962 !important;
}

/* Logo/Home active state */
header a[href="/"].active span {
  color: #C9A962 !important; /* brand-gold */
  background-color: rgba(201, 169, 98, 0.15) !important;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}