/**
 * BCW Photography - Modern Effects
 * Animations, transitions et effets visuels modernes
 */

/* ========================================
   1. SCROLL ANIMATIONS
   ======================================== */

/* État initial des éléments animés - uniquement transform, pas d'opacity */
.scroll-reveal {
  transform: translateY(30px);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal.revealed {
  transform: translateY(0);
}

/* Variantes d'animation */
.scroll-reveal.from-left {
  transform: translateX(-40px);
}

.scroll-reveal.from-left.revealed {
  transform: translateX(0);
}

.scroll-reveal.from-right {
  transform: translateX(40px);
}

.scroll-reveal.from-right.revealed {
  transform: translateX(0);
}

.scroll-reveal.scale-up {
  transform: scale(0.9);
}

.scroll-reveal.scale-up.revealed {
  transform: scale(1);
}

/* Délais échelonnés pour les grilles */
.bloom-item.scroll-reveal {
  transition-delay: calc(var(--reveal-delay, 0) * 0.08s);
}

/* ========================================
   3. ENHANCED HOVER EFFECTS
   ======================================== */

/* Effet de brillance sur hover */
.bloom-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  z-index: 3;
  transition: left 0.6s ease;
  pointer-events: none;
}

.bloom-item:hover::before {
  left: 100%;
}

/* Bordure animée sur hover */
.bloom-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border-color 0.4s ease;
  pointer-events: none;
  z-index: 2;
}

.bloom-item:hover::after {
  border-color: rgba(168, 107, 85, 0.5);
}

/* Amélioration de l'overlay */
.bloom-overlay {
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* ========================================
   4. LOADING SKELETON
   ======================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--card-bg) 25%,
    rgba(168, 107, 85, 0.1) 50%,
    var(--card-bg) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
  border-radius: 12px;
}

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

.skeleton-item {
  width: 300px;
  height: 400px;
  margin: 10px;
}

/* ========================================
   5. PARALLAX EFFECT
   ======================================== */

.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ========================================
   6. MICRO-INTERACTIONS
   ======================================== */

/* Boutons avec effet ripple */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.btn-ripple:active::after {
  transform: scale(2);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

/* Animation des filtres */
.bloom-filter-btn {
  position: relative;
  overflow: hidden;
}

.bloom-filter-btn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width 0.3s ease, left 0.3s ease;
}

.bloom-filter-btn:hover::before,
.bloom-filter-btn.active::before {
  width: 100%;
  left: 0;
}

/* Effet magnetic sur les boutons */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   7. SMOOTH PAGE TRANSITIONS
   ======================================== */

/* Transition de la grille */
.bloom-grid {
  transition: opacity 0.4s ease;
}

.bloom-grid.transitioning {
  opacity: 0;
}

/* Animation d'entrée des items */
@keyframes item-enter {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bloom-item.entering {
  animation: item-enter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ========================================
   8. LIGHTBOX ENHANCEMENTS
   ======================================== */

/* Amélioration de la lightbox */
.bloom-lightbox {
  backdrop-filter: blur(10px);
}

.lightbox-image {
  animation: lightbox-zoom-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes lightbox-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   9. TEXT ANIMATIONS
   ======================================== */

/* Effet de révélation du titre */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.text-reveal.revealed span {
  transform: translateY(0);
}

/* Animation lettre par lettre */
.letter-animate span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: letter-in 0.5s forwards;
}

@keyframes letter-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   10. SCROLL-TO-TOP ENHANCED
   ======================================== */

#scrollToTop {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

#scrollToTop:hover {
  transform: translateY(-5px) scale(1.1) !important;
  box-shadow: 0 10px 30px rgba(168, 107, 85, 0.4) !important;
}

#scrollToTop:active {
  transform: translateY(-2px) scale(0.95) !important;
}

/* ========================================
   11. NAV LINK ANIMATIONS
   ======================================== */

.nav-link {
  position: relative;
  overflow: hidden;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-color);
  transform: translateX(-101%);
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: translateX(0);
}

/* ========================================
   12. FOOTER SOCIAL ICONS
   ======================================== */

.social-links a {
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.social-links a:hover {
  transform: translateY(-5px) scale(1.2) !important;
}

/* ========================================
   13. MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Animations plus subtiles sur mobile */
  .scroll-reveal {
    transform: translateY(20px);
  }

  /* Désactiver l'effet shine sur mobile pour performance */
  .bloom-item::before {
    display: none;
  }
}

/* ========================================
   14. 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-reveal {
    transform: none;
  }
}