/* ===== SOPHISTICATED ANIMATIONS ===== */

/* Subtle parallax effect for hero visual elements */
.hero__visual-item {
  transition: all var(--transition-slower) var(--ease-out-expo);
  will-change: transform;
}

.hero__visual-item:hover {
  animation: subtleFloat 4s ease-in-out infinite;
}

@keyframes subtleFloat {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

/* Reveal animations with stagger effect */
.reveal-container {
  overflow: hidden;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(3rem) scale(0.95);
  /* Use specific properties instead of 'all' to prevent layout thrashing */
  transition: 
    opacity 1.2s var(--ease-out-expo),
    transform 1.2s var(--ease-out-expo);
  will-change: transform, opacity;
}

/* Ensure about section and below are visible - force display */
#about [data-reveal],
#philosophy [data-reveal],
#company [data-reveal],
#work [data-reveal],
#contact [data-reveal],
#about .about__company,
#about .about__description,
#about .about__quote,
#philosophy .philosophy__item,
#company .company__content,
#company .company__info,
#company .company__details,
#company .company__name,
#company .company__address,
#work .work__grid,
#contact .contact__form {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  visibility: visible !important;
  display: block !important;
}

/* Force visibility for entire sections */
#about,
#philosophy,
#company,
#work,
#contact {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Additional force for company section elements */
section#company {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.company__content,
.company__info,
.company__name,
.company__address {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: none !important;
}

/* Preserve flex layout for section header in company */
#company .section__header {
  display: flex !important;
}

.company__details {
  display: flex !important;
  flex-direction: column !important;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered delays for multiple elements */
[data-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-reveal]:nth-child(2) { transition-delay: 100ms; }
[data-reveal]:nth-child(3) { transition-delay: 200ms; }
[data-reveal]:nth-child(4) { transition-delay: 300ms; }
[data-reveal]:nth-child(5) { transition-delay: 400ms; }
[data-reveal]:nth-child(6) { transition-delay: 500ms; }

/* Text reveal animation */
.text-reveal {
  overflow: hidden;
  position: relative;
}

.text-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  transform: translateX(0);
  animation: textReveal 1.2s var(--ease-out-expo) forwards;
  animation-delay: 0.5s;
}

@keyframes textReveal {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

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

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

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-400);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-600);
}

/* Page transition effect */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-white);
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.8s var(--ease-out-expo);
}

.page-transition.active {
  transform: translateY(0);
}

/* Navigation link hover effect */
.nav__link {
  position: relative;
  overflow: hidden;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-black);
  transition: width var(--transition-base) var(--ease-out-cubic);
}

.nav__link:hover::after {
  width: 100%;
}

/* Form focus animations */
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  animation: formFocus 0.3s var(--ease-out-cubic);
}

@keyframes formFocus {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* Button press animation */
.form__submit:active {
  animation: buttonPress 0.15s var(--ease-out-cubic);
}

@keyframes buttonPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

/* Cursor trail animation */
.cursor-trail {
  animation: cursorPulse 2s ease-in-out infinite;
}

@keyframes cursorPulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Statistics counter animation */
.stat__number {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s var(--ease-out-expo);
}

.stat__number.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Philosophy item stagger animation */
.philosophy__item {
  opacity: 0;
  transform: translateY(2rem);
  transition: all 0.8s var(--ease-out-expo);
}

.philosophy__item:nth-child(1) { transition-delay: 0ms; }
.philosophy__item:nth-child(2) { transition-delay: 150ms; }
.philosophy__item:nth-child(3) { transition-delay: 300ms; }

.philosophy__item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Value items progressive reveal */
.value {
  opacity: 0;
  transform: translateX(-2rem);
  transition: all 0.6s var(--ease-out-cubic);
}

.value:nth-child(1) { transition-delay: 0ms; }
.value:nth-child(2) { transition-delay: 100ms; }
.value:nth-child(3) { transition-delay: 200ms; }
.value:nth-child(4) { transition-delay: 300ms; }
.value:nth-child(5) { transition-delay: 400ms; }

.value.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Hero visual grid animation */
.hero__visual-grid {
  opacity: 0;
  transform: scale(0.8) rotate(-5deg);
  transition: all 1s var(--ease-out-expo);
  transition-delay: 0.8s;
}

.hero__visual-grid.revealed {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Contact form slide-in animation */
.contact__form {
  opacity: 0;
  transform: translateX(2rem);
  transition: all 0.8s var(--ease-out-expo);
}

.contact__form.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Footer fade-in animation */
.footer {
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.8s var(--ease-out-cubic);
}

.footer.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Navbar scroll animation */
.nav {
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease-out-expo);
}

.nav.loaded {
  transform: translateY(0);
}

/* Mobile menu animation - DISABLED to prevent conflicts with mobile-navigation.css */

/* Hamburger animation - DISABLED to prevent conflicts with mobile-navigation.css */

/* Smooth section transitions */
.section {
  opacity: 0;
  transform: translateY(2rem);
  transition: all 1s var(--ease-out-expo);
}

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

/* Loading animation for images */
.image-loading {
  background: var(--color-gray-200);
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Micro-interactions for interactive elements */
.interactive {
  transition: all var(--transition-base) var(--ease-out-cubic);
}

.interactive:hover {
  transform: translateY(-1px);
}

.interactive:active {
  transform: translateY(0);
}

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

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

/* Reduce animations for users who prefer reduced motion */
@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;
  }

  .cursor,
  .cursor-trail {
    display: none;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .nav__link::after,
  .form__submit,
  .cursor {
    background: var(--color-black);
  }

  .section--dark {
    background: var(--color-black);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-white: #000000;
    --color-black: #FFFFFF;
    --color-gray-50: #0A0A0A;
    --color-gray-100: #0F0F0F;
    --color-gray-200: #1A1A1A;
    --color-gray-300: #2B2B2B;
    --color-gray-400: #5C5C5C;
    --color-gray-500: #8C8C8C;
    --color-gray-600: #ADADAD;
    --color-gray-700: #BFBFBF;
    --color-gray-800: #D9D9D9;
    --color-gray-900: #E8E8E8;
  }

  .section--dark {
    background-color: var(--color-white);
    color: var(--color-black);
  }
}