/**
 * WestPride Cultural Archive Platform
 * Animation and Micro-interactions CSS
 */

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

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

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

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

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

@keyframes rotate {
  from { transform: rotate(-5deg); opacity: 0; }
  to { transform: rotate(0); opacity: 1; }
}

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

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

@keyframes borderGlow {
  0% { box-shadow: 0 0 5px rgba(255,64,129,0.3); }
  50% { box-shadow: 0 0 20px rgba(255,64,129,0.6); }
  100% { box-shadow: 0 0 5px rgba(255,64,129,0.3); }
}

@keyframes textShadowPulse {
  0% { text-shadow: 0 0 5px rgba(255,64,129,0.3); }
  50% { text-shadow: 0 0 15px rgba(255,64,129,0.8); }
  100% { text-shadow: 0 0 5px rgba(255,64,129,0.3); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes shine {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

/* Animation Utility Classes */
.fade-in-element {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

.slide-up-element, .slide-up {
  opacity: 0;
  animation: slideUp 1s ease-out forwards;
}

.slide-down-element {
  opacity: 0;
  animation: slideDown 1s ease-out forwards;
}

.reveal-left, .reveal-text-left {
  opacity: 0;
  animation: slideRight 1s ease-out forwards;
}

.reveal-right, .reveal-text-right {
  opacity: 0;
  animation: slideLeft 1s ease-out forwards;
}

.rotate-effect {
  opacity: 0;
  animation: rotate 1s ease-out forwards;
}

.scale-effect {
  opacity: 0;
  animation: scale 1s ease-out forwards;
}

.float-element, .float-effect {
  animation: float 4s ease-in-out infinite;
}

.pulse-element {
  animation: pulse 3s ease-in-out infinite;
}

/* Specialized Animation Elements */
.gradient-text {
  background: linear-gradient(45deg, #ff4081, #7c4dff, #66bb6a, #ff9800);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s ease infinite;
}

.text-shadow-animated {
  animation: textShadowPulse 3s ease-in-out infinite;
}

.btn-interactive {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-interactive:after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0));
  background-size: 200% 100%;
  transform: rotate(45deg);
  animation: shine 5s infinite linear;
  opacity: 0;
}

.btn-interactive:hover:after {
  opacity: 1;
}

.btn-interactive:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

/* Hero Section Specific */
.reveal-grid {
  opacity: 0;
  animation: fadeIn 1.5s ease-out forwards;
}

.photo-item {
  transition: all 0.5s ease;
  position: relative;
}

.photo-item:hover {
  transform: scale(1.05);
  z-index: 2;
}

.photo-item-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  opacity: 0;
}

.photo-item:hover .photo-item-caption {
  transform: translateY(0);
  opacity: 1;
}

.split-text {
  opacity: 0;
  animation: fadeIn 1.2s ease-out forwards;
  position: relative;
}

.interactive-paragraph {
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.border-left, .border-right {
  position: absolute;
  width: 3px;
  background: linear-gradient(to bottom, transparent, #ff4081, transparent);
  top: 10%;
  bottom: 10%;
  animation: borderGlow 3s infinite;
}

.border-left {
  left: 0;
}

.border-right {
  right: 0;
}

/* Delay Classes */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1s; }
.delay-6 { animation-delay: 1.2s; }

/* Loading Indicator for Buttons */
.loading-indicator {
  position: relative;
  display: inline-block;
}

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

/* Collections Card Animations */
.collection-card {
  transition: all 0.5s ease;
  overflow: hidden;
}

.collection-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}

.collection-card img {
  transition: all 0.8s ease;
}

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

/* Mobile Optimization */
@media (max-width: 768px) {
  .reveal-grid,
  .fade-in-element,
  .slide-up-element,
  .slide-down-element,
  .reveal-left,
  .reveal-right,
  .rotate-effect,
  .scale-effect {
    animation-duration: 0.7s;
  }
  
  .delay-1, .delay-2, .delay-3, .delay-4, .delay-5, .delay-6 {
    animation-delay: 0.1s;
  }
}