/* ====================================================
   ANIMATIONS — keyframes, transiciones scroll
==================================================== */

/* === FADE IN === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

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

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

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

@keyframes slideInUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.12s; }
.reveal--delay-2 { transition-delay: 0.24s; }
.reveal--delay-3 { transition-delay: 0.36s; }
.reveal--delay-4 { transition-delay: 0.48s; }
.reveal--delay-5 { transition-delay: 0.6s; }

.reveal--left {
  transform: translateX(-40px);
}
.reveal--left.is-visible { transform: translateX(0); }

.reveal--right {
  transform: translateX(40px);
}
.reveal--right.is-visible { transform: translateX(0); }

.reveal--scale {
  transform: scale(0.94);
}
.reveal--scale.is-visible { transform: scale(1); }

/* === TEXTO LÍNEA POR LÍNEA === */
.split-line {
  overflow: hidden;
  display: block;
}

.split-line-inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 1.1s var(--ease-out-expo);
}

.is-visible .split-line-inner {
  transform: translateY(0);
}

.split-line:nth-child(2) .split-line-inner { transition-delay: 0.1s; }
.split-line:nth-child(3) .split-line-inner { transition-delay: 0.2s; }
.split-line:nth-child(4) .split-line-inner { transition-delay: 0.3s; }

/* === KEN BURNS (imagen que se mueve lentamente) === */
@keyframes kenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(-2%, -1%); }
}

.ken-burns {
  animation: kenBurns 20s var(--ease-smooth) infinite alternate;
}

/* === PARALLAX === */
.parallax-layer {
  will-change: transform;
}

/* === FLOAT === */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.float {
  animation: float 4s var(--ease-smooth) infinite;
}

/* === SHIMMER (texto dorado) === */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.gold-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-gold-dark) 0%,
    var(--color-gold-light) 25%,
    var(--color-gold) 50%,
    var(--color-gold-light) 75%,
    var(--color-gold-dark) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

/* === PULSE === */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

.pulse {
  animation: pulse 2s var(--ease-smooth) infinite;
}

/* === ROTACIÓN LENTA === */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotate-slow {
  animation: rotateSlow 60s linear infinite;
}

/* === MARQUESINA (texto que scrollea) === */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.marquee-track {
  display: inline-flex;
  gap: 4rem;
  animation: marquee 40s linear infinite;
  padding-right: 4rem;
}

/* === CAÍDA DE HOJAS (decorativo) === */
@keyframes leafFall {
  0% {
    transform: translateY(-20vh) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% {
    transform: translateY(110vh) rotate(540deg) translateX(40px);
    opacity: 0;
  }
}

/* === SMOKE/STEAM (vapor de plato caliente) === */
@keyframes steam {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  20% { opacity: 0.25; }
  100% {
    transform: translateY(-80px) scale(1.8);
    opacity: 0;
  }
}

/* ====================================================
   CRAFT POLISH — detalles que separan "bonito" de
   "premium". Todo se apoya en el observer nativo
   (.reveal.is-visible), sin depender de GSAP/CDN.
==================================================== */

/* --- Trazo que se dibuja bajo los acentos en cursiva ---
   La metáfora del concept: las cosas buenas se subrayan
   despacio. El pincel pasa cuando el título se revela. */
.section-title em,
.chef-title em,
.reservas-title em,
.prensa-title em,
.reservas-mapa-title em {
  position: relative;
}

.section-title em::after,
.chef-title em::after,
.reservas-title em::after,
.prensa-title em::after,
.reservas-mapa-title em::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.02em;
  height: 0.07em;
  min-height: 2px;
  background: currentColor;
  opacity: 0.5;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease-out-expo) 0.35s;
}

.reveal.is-visible .section-title em::after,
.reveal.is-visible .chef-title em::after,
.reveal.is-visible .reservas-title em::after,
.reveal.is-visible .prensa-title em::after,
.reveal.is-visible .reservas-mapa-title em::after {
  transform: scaleX(1);
}

/* --- Clip-reveal del plato signature (Alba) ---
   La pizza se descubre de abajo arriba, como saliendo
   del horno, emparejada con su vapor. */
.plato-card--feature .plato-image {
  clip-path: inset(0 0 0 0);
  transition: transform 1s var(--ease-out-expo),
              clip-path 1.1s var(--ease-out-expo) 0.1s;
}

.plato-card--feature.reveal:not(.is-visible) .plato-image {
  clip-path: inset(0 0 100% 0);
}

@media (prefers-reduced-motion: reduce) {
  .section-title em::after,
  .chef-title em::after,
  .reservas-title em::after,
  .prensa-title em::after,
  .reservas-mapa-title em::after { transition: none; transform: scaleX(1); }
  .plato-card--feature .plato-image { clip-path: none !important; }
}