/* Parallax layers */
[data-parallax] {
  will-change: transform;
}

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

.float-slow { animation: floatSlow 6s ease-in-out infinite; }

/* Vídeo de fondo del hero: la pizza con vapor, generado con IA */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
}


/* ---- Nombre del hero: cada letra entra girando en 3D ---- */
@keyframes letterIn {
  from { opacity: 0; transform: translateY(40px) rotateX(-90deg); }
  to { opacity: 1; transform: none; }
}
[data-letters] { perspective: 800px; }
[data-letters] .letter,
[data-letters] .letter-space { display: inline-block; }
[data-letters] .letter {
  opacity: 0;
  transform-origin: 50% 100%;
  animation: letterIn 1s var(--ease) forwards;
}

/* ---- Entrada en perspectiva al hacer scroll (versión 3D de .reveal) ---- */
html.reveal-armed .reveal-3d {
  opacity: 0;
  transform: perspective(1200px) rotateX(22deg) translateY(70px) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
html.reveal-armed .reveal-3d.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.12s !important; }
.reveal-delay-2 { transition-delay: 0.24s !important; }
.reveal-delay-3 { transition-delay: 0.36s !important; }

[data-tilt] { transition: transform 0.25s ease-out; will-change: transform; }

/* ---- Cinta en movimiento ---- */
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes iconBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}
.marquee {
  background: var(--negro);
  color: var(--crema);
  overflow: hidden;
  padding: 0.95rem 0;
  transform: rotate(-1.5deg) scale(1.03);
  margin: -1.4rem 0 0;
  position: relative;
  z-index: 3;
  box-shadow: 0 14px 40px -12px rgba(27, 23, 18, 0.55);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  white-space: nowrap;
  animation: marquee 34s linear infinite;
}
.marquee__track span { display: inline-flex; align-items: center; gap: 2.2rem; }
.marquee__track span::after { content: "✦"; font-style: normal; font-size: 0.7em; color: var(--oro-antico-claro); }
.marquee__icon { width: 26px; height: 26px; color: var(--oro-antico-claro); animation: iconBob 3s ease-in-out infinite; }

/* ---- Fotos en capas con profundidad (transform 2D: más compatible que
   perspective + preserve-3d, que falla en algunos navegadores) ---- */
.depth-stack {
  position: relative;
  aspect-ratio: 1 / 1.05;
}
.depth-stack__inner {
  position: absolute;
  inset: 0;
}
.depth-stack__layer {
  position: absolute;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease);
}
.depth-stack__layer img { width: 100%; height: 100%; object-fit: cover; }
.depth-stack__layer--back { inset: 0 18% 22% 0; z-index: 1; transform: rotate(-3deg); }
.depth-stack__layer--mid { inset: 30% 0 0 30%; z-index: 2; border: 5px solid var(--blanco); transform: rotate(2deg); }
.depth-stack__layer--front {
  left: 5%; bottom: 4%;
  width: 36%; aspect-ratio: 1;
  z-index: 3;
  border: 5px solid var(--rojo-pomodoro);
  transform: rotate(-4deg);
}
.depth-stack:hover .depth-stack__layer--back { transform: rotate(-5deg) translate(-6px, 4px); }
.depth-stack:hover .depth-stack__layer--mid { transform: rotate(4deg) translate(6px, -4px); }
.depth-stack:hover .depth-stack__layer--front { transform: rotate(-6deg) translate(-4px, -6px); }
.depth-stack__sticker {
  position: absolute;
  top: 6%; right: 2%;
  z-index: 4;
  transform: rotate(7deg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  color: var(--blanco);
  background: var(--rojo-pomodoro);
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 880px) { .depth-stack { max-width: 520px; margin: 0 auto; width: 100%; } }

/* ---- Tarjetas que se voltean (de la comida a la noche) ---- */
.flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.flip-card { perspective: 1100px; height: 400px; cursor: pointer; outline: none; }
.flip-card:focus-visible .flip-card__inner { box-shadow: 0 0 0 3px var(--oro-antico); }
.flip-card__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease);
}
@media (hover: hover) {
  .flip-card:hover .flip-card__inner { transform: rotateY(180deg); }
}
.flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }
.flip-card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem;
  box-shadow: var(--shadow-card);
}
.flip-card__front { isolation: isolate; background: linear-gradient(160deg, var(--rojo-pomodoro), var(--negro)); }
.flip-card__front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.flip-card__front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(27, 23, 18, 0.95) 12%, rgba(27, 23, 18, 0.05) 70%);
}
.flip-card__icon { position: absolute; top: 42%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); color: var(--oro-antico-claro); opacity: 0.9; }
.flip-card__time { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro-antico-claro); font-weight: 600; }
.flip-card__front h3 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin: 0.2rem 0 0; color: var(--blanco); }
.flip-card__turn { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--crema-suave); margin-top: 0.5rem; opacity: 0.8; }
.flip-card__back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, var(--rojo-pomodoro) 0%, var(--negro) 100%);
  border: 1px solid rgba(176, 141, 87, 0.35);
  justify-content: center;
}
.flip-card__back h3 { color: var(--oro-antico-claro); }
.flip-card__back p { color: var(--blanco); opacity: 0.88; font-size: 0.95rem; }
.flip-card__back ul { margin: 0; padding-left: 1.1rem; list-style: disc; color: var(--crema-suave); font-size: 0.9rem; }
.flip-card__back li { margin-bottom: 0.25rem; }
@media (max-width: 880px) { .flip-grid { grid-template-columns: 1fr; } .flip-card { height: 330px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.reveal-armed .reveal { opacity: 1; transform: none; transition: none; }
  html.reveal-armed .reveal-3d { opacity: 1; transform: none; transition: none; }
  .dish-card { transition: none; }
  .float-slow { animation: none; }
  [data-parallax] { transform: none !important; }
  [data-letters] .letter { animation: none; opacity: 1; }
  .marquee__track, .marquee__icon, .cube { animation: none !important; }
  .flip-card__inner { transition: none; }
}