﻿/* ==========================================================================
   EL CELLER SECRET — ANIMATIONS & TRANSITIONS
   Efectes cinematogràfics, suaus i elegants (sense estridències)
   ========================================================================== */

/* --- SCROLL REVEAL BASE CLASSES --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Delays */
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
.delay-4 { transition-delay: 0.48s; }
.delay-5 { transition-delay: 0.60s; }

/* Text reveal mask */
.reveal-text-mask {
  overflow: hidden;
  display: block;
}

.reveal-text-mask > * {
  transform: translateY(115%);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
}

.reveal-text-mask.active > * {
  transform: translateY(0);
  opacity: 1;
}

/* Slow Hero Fade-in */
.hero-fade-in {
  animation: heroEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroEntrance {
  0% {
    opacity: 0;
    transform: translateY(35px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Soft Ambient Pulse for wine glow */
@keyframes ambientGlowPulse {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.15) translate(15px, -10px);
    opacity: 0.55;
  }
}

.ambient-pulse {
  animation: ambientGlowPulse 12s infinite ease-in-out alternate;
}

/* Subtle image scale hover */
.img-zoom-hover {
  overflow: hidden;
}

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

.img-zoom-hover:hover img {
  transform: scale(1.05);
}

/* Line expander animation */
.line-reveal {
  position: relative;
}

.line-reveal::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-gold);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.line-reveal.active::after {
  width: 100%;
}

/* Shimmer subtle border */
@keyframes borderShimmer {
  0% { border-color: rgba(197, 168, 128, 0.2); }
  50% { border-color: rgba(197, 168, 128, 0.55); }
  100% { border-color: rgba(197, 168, 128, 0.2); }
}

.shimmer-border {
  animation: borderShimmer 4s infinite ease-in-out;
}

/* Parallax subtle transform */
.parallax-element {
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.1, 0.2, 0.1, 1);
}
