/* 
  NexWay Premium Animations
  Enterprise-grade micro-interactions and smooth transitions
  Optimized for performance and accessibility
*/

/* ========================================
   SMOOTH SCROLL & BASE ANIMATIONS
   ======================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Offset for fixed navbar */
}

/* Custom smooth scrolling with easing */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
   Bottom → Align with IntersectionObserver
   ======================================== */

/* Base Reveal - Bottom to Top */
.reveal,
.reveal-up {
  opacity: 0;
  transform: translateY(32px) translateZ(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active,
.reveal-up.active {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  will-change: auto;
}

/* Reveal from Left */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px) translateZ(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0) translateZ(0);
  will-change: auto;
}

/* Reveal from Right */
.reveal-right {
  opacity: 0;
  transform: translateX(32px) translateZ(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0) translateZ(0);
  will-change: auto;
}

/* Reveal with Zoom */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.95) translateZ(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-zoom.active {
  opacity: 1;
  transform: scale(1) translateZ(0);
  will-change: auto;
}

/* Legacy Fade Up - Synced with Reveal System */
.fade-up {
  opacity: 0;
  transform: translateY(32px) translateZ(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  will-change: auto;
}

/* Fade In Animation */
.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
}

/* Slide In from Left */
.slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide In from Right */
.slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale Up Animation */
.scale-up {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.scale-up.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered Animation Delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ========================================
   TEXT SLIDE-UP ANIMATIONS
   ======================================== */

/* Text Slide-Up - For Headings */
.text-slide-up,
h1.fade-up,
h2.fade-up,
h3.fade-up {
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.text-slide-up.visible,
h1.fade-up.visible,
h2.fade-up.visible,
h3.fade-up.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  will-change: auto;
}

/* Paragraph Slide-Up */
p.fade-up {
  opacity: 0;
  transform: translateY(15px) translateZ(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

p.fade-up.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  will-change: auto;
}

/* List Items Slide-Up */
li.fade-up {
  opacity: 0;
  transform: translateY(10px) translateZ(0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

li.fade-up.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}


/* ========================================
   BUTTON ANIMATIONS
   ======================================== */

.btn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0); /* Hardware acceleration */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ripple Effect on Click */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

/* Premium Button Interactions */
.btn-primary {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: scale(1.02) translateZ(0);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
}

.btn-primary:active {
  transform: scale(0.98) translateZ(0);
  transition-duration: 0.1s;
}

.btn-outline {
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-outline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-black);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

.btn-outline:hover::after {
  width: 100%;
}

.btn-outline:hover {
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ========================================
   CARD ANIMATIONS
   ======================================== */

.quality-card,
.collection-card,
.testimonial-card,
.product-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Premium card lift - desktop only */
@media (hover: hover) and (pointer: fine) {
  .quality-card:hover {
    transform: translateY(-8px) translateZ(0);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--color-muted-gold) !important;
  }
}

.collection-card {
  position: relative;
  overflow: hidden;
}

.collection-card img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.collection-card:hover img {
  transform: scale(1.08);
}

.collection-overlay {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.collection-card:hover .collection-overlay {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  padding-bottom: calc(var(--spacing-md) + 10px);
}

.testimonial-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* ========================================
   NAVIGATION ANIMATIONS
   ======================================== */

/* Navbar Scroll Animation */
nav {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

nav.scrolled {
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Navigation Link Underline Animation */
.nav-links a {
  position: relative;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-muted-gold), var(--color-black));
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-links a:hover {
  color: var(--color-muted-gold);
}

/* Hamburger Animation */
.hamburger {
  transition: transform 0.3s ease;
}

.hamburger:hover {
  transform: scale(1.1);
}

.hamburger.active .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}

.hamburger.active .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu Animation */
.mobile-menu {
  transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu a {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.active a {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu.active a:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.active a:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.active a:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.active a:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu.active a:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu.active a:nth-child(6) { transition-delay: 0.35s; }

.mobile-menu a:hover {
  color: var(--color-muted-gold);
  transform: translateX(10px);
}

/* ========================================
   ICON & IMAGE ANIMATIONS
   ======================================== */

.icon,
.feature-icon {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.quality-card:hover .icon,
.feature-item:hover .feature-icon {
  transform: scale(1.2) rotate(5deg);
}

/* Logo Animation */
.logo-link {
  transition: transform 0.3s ease;
}

.logo-link:hover {
  transform: scale(1.05);
}

.logo-img {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-link:hover .logo-img {
  transform: rotate(-5deg);
}

/* ========================================
   LOADING & SKELETON ANIMATIONS
   ======================================== */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Page Load Animation */
@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: fadeInPage 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-muted-gold), var(--color-black));
  z-index: 9999;
  transform-origin: left;
  transition: transform 0.1s ease-out;
}

/* ========================================
   FORM ANIMATIONS
   ======================================== */

input,
textarea,
select {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

input:focus,
textarea:focus,
select:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(197, 160, 89, 0.2);
}

/* ========================================
   FOOTER ANIMATIONS
   ======================================== */

footer a {
  position: relative;
  transition: all 0.3s ease;
}

footer a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-muted-gold);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

footer a:hover {
  color: var(--color-muted-gold);
  transform: translateX(5px);
}

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

.parallax {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ========================================
   ACCESSIBILITY & PERFORMANCE
   ======================================== */

/* Respect user's 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;
  }
}

/* Mobile-First Performance Optimizations */
@media (max-width: 768px) {
  .fade-up {
    transform: translateY(15px) translateZ(0);
    transition-duration: 0.4s;
  }
  
  /* Reduce text animation distance on mobile */
  h1.fade-up,
  h2.fade-up,
  h3.fade-up,
  .text-slide-up {
    transform: translateY(10px) translateZ(0);
    transition-duration: 0.3s;
  }
  
  p.fade-up {
    transform: translateY(8px) translateZ(0);
    transition-duration: 0.3s;
  }
  
  li.fade-up {
    transform: translateY(5px) translateZ(0);
    transition-duration: 0.25s;
  }
  
  .slide-left,
  .slide-right {
    transform: translateX(0);
    opacity: 0;
  }
  
  /* Disable hover effects on mobile */
  .btn::before,
  .btn-outline::after {
    display: none;
  }
  
  .quality-card:hover,
  .collection-card:hover,
  .testimonial-card:hover {
    transform: none;
  }
  
  /* Faster animations on mobile */
  * {
    transition-duration: 0.3s !important;
  }
  
  /* Reduce stagger delays on mobile */
  .stagger-1 { transition-delay: 0.05s; }
  .stagger-2 { transition-delay: 0.1s; }
  .stagger-3 { transition-delay: 0.15s; }
  .stagger-4 { transition-delay: 0.2s; }
  .stagger-5 { transition-delay: 0.25s; }
  .stagger-6 { transition-delay: 0.3s; }
}

/* Hardware acceleration for smooth animations */
.btn,
.quality-card,
.collection-card,
.testimonial-card,
.nav-links a,
.mobile-menu a {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* ========================================
   CUSTOM CURSOR EFFECTS (Optional Premium Touch)
   ======================================== */

.cursor-pointer {
  cursor: pointer;
}

a,
button,
.btn,
.quality-card,
.collection-card {
  cursor: pointer;
}

/* ========================================
   PULSE ANIMATION FOR CTAs
   ======================================== */

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

.pulse-on-load {
  animation: pulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* ========================================
   GRADIENT ANIMATIONS
   ======================================== */

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

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

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

.text-reveal {
  overflow: hidden;
  display: inline-block;
}

.text-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-reveal.visible span {
  opacity: 1;
  transform: translateY(0);
}