/* Animation styles for the portfolio site */

/* Elements with data-animate attribute start hidden by default */
[data-animate] {
  opacity: 0;
  visibility: hidden; /* Hide completely initially */
  will-change: opacity, transform; /* Performance optimization */
}

/* Elements with data-scroll attribute start completely hidden */
[data-scroll] {
  opacity: 0;
  visibility: hidden; /* Hide completely initially */
  will-change: opacity, transform; /* Performance optimization */
}

/* When animations are ready, control visibility through opacity only */
.animations-ready [data-animate] {
  visibility: visible;
  transition: opacity 0.5s ease-out;
}

/* DO NOT make data-scroll elements visible by default */
/* They should only become visible when their animation is triggered */

/* Transition utilities */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Fade-in animation */
.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

/* Glow effect */
.shadow-glow {
  box-shadow: 0 0 15px rgba(66, 135, 245, 0.5);
}

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

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

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

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

/* Animation classes - ensure visibility is set along with the animation */
.animate-fade-in {
  animation: fadeIn 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
  visibility: visible; /* Make visible when animation is applied */
}

.animate-fade-up {
  animation: fadeUp 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
  visibility: visible; /* Make visible when animation is applied */
}

.animate-slide-in {
  animation: slideIn 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
  visibility: visible; /* Make visible when animation is applied */
}

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

/* Page transition effect */
.page-transition {
  transition: opacity 0.3s ease-in-out;
}

.page-transition.exit {
  opacity: 0;
}

.page-transition.enter {
  opacity: 0;
}

.page-transition.enter-active {
  opacity: 1;
}

/* Staggered entrance for lists */
.stagger-item {
  opacity: 0;
  transform: translateY(10px);
}

.stagger-item.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hover effect for cards */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Simple motion graphic placeholder */
.motion-graphic {
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

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