/* ── SCROLL REVEAL ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="fade"]  { transform: none; }

/* Photo — wrapper slides in (no filter here — applied to img in sections.css) */
[data-reveal="photo"] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.0s cubic-bezier(0.16,1,0.3,1),
              transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal="photo-left"] {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1),
              transform 1.25s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal="photo-right"] {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1),
              transform 1.25s cubic-bezier(0.16,1,0.3,1);
}
/* Scale burst — for small decorative elements */
[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.65s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.65s cubic-bezier(0.34,1.56,0.64,1);
}
/* Clip — for eyebrows and headings (top curtain) */
[data-reveal="clip"] {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              clip-path 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal="clip"].visible {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
}

[data-reveal].visible { opacity: 1; transform: none; filter: none; }

/* ── LOADER ── */
#loader {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-symbol {
  font-size: 2rem; color: var(--rose);
  animation: pulse 1.8s ease-in-out infinite;
}
.loader-bar {
  width: 100px; height: 1px;
  background: rgba(176,90,110,0.2);
  margin-top: 1.2rem; overflow: hidden;
}
.loader-progress {
  height: 100%; width: 0;
  background: var(--rose);
  animation: fill 1.1s ease-out forwards;
}
@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
@keyframes fill { to { width: 100%; } }

/* ── NAV scrolled ── */
#nav.scrolled {
  background: rgba(250,246,240,0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

/* ════════════════════════════
   HERO ENTRANCE — cinematográfico
════════════════════════════ */

/* Imagen: arranca ligeramente zoom y difusa, se asienta */
@keyframes heroImgReveal {
  0%   { transform: scale(1.08); filter: brightness(0.6) blur(6px); }
  100% { transform: scale(1.02); filter: brightness(1) blur(0px); }
}

/* Overlay: se oscurece suavemente al asentarse */
@keyframes overlaySettle {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Línea ornamental que se dibuja de izquierda a derecha */
@keyframes lineDraw {
  0%   { width: 0; opacity: 0; }
  30%  { opacity: 1; }
  100% { width: 48px; opacity: 1; }
}

/* Texto: sube desde abajo con fade */
@keyframes textRise {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Botón: escala desde 0.85 */
@keyframes btnEnter {
  0%   { opacity: 0; transform: scale(0.88) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Estado inicial — oculto antes de que arranque la secuencia */
.hero-bg img          { animation: none; }
.hero-bg::after       { animation: none; }
.hero-eyebrow,
.hero h1,
.hero-rose,
.hero-tagline,
.hero-subtitle,
.hero .btn-cta        { opacity: 0; }

/* Activo cuando body tiene .hero-ready (se agrega desde JS tras loader) */
body.hero-ready .hero-bg img {
  animation: heroImgReveal 2.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
body.hero-ready .hero-bg::after {
  animation: overlaySettle 2s ease forwards;
}
body.hero-ready .hero-eyebrow {
  animation: textRise 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s forwards;
}
body.hero-ready .hero h1 {
  animation: textRise 1s cubic-bezier(0.16,1,0.3,1) 0.65s forwards;
}
body.hero-ready .hero-rose {
  animation: textRise 1s cubic-bezier(0.16,1,0.3,1) 0.85s forwards;
}
body.hero-ready .hero-tagline {
  animation: textRise 0.9s cubic-bezier(0.16,1,0.3,1) 1.1s forwards;
}
body.hero-ready .hero-subtitle {
  animation: textRise 0.9s cubic-bezier(0.16,1,0.3,1) 1.3s forwards;
}
body.hero-ready .hero .btn-cta {
  animation: btnEnter 0.8s cubic-bezier(0.16,1,0.3,1) 1.55s forwards;
}

/* Línea ornamental sobre el eyebrow */
.hero-line {
  display: block;
  height: 1px;
  background: rgba(210,170,150,0.6);
  margin: 0 auto 0.9rem;
  width: 0; opacity: 0;
}
body.hero-ready .hero-line {
  animation: lineDraw 1s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;
}

/* ── HOVER lift en cards ── */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(122,32,48,0.1);
}