/* =====================================================
   Masia Moliner — animations.css
   Cargar DESPUÉS de styles.css
   ===================================================== */

/* ── Scroll reveal base ────────────────────────────── */
.reveal, .reveal-up, .reveal-left, .reveal-right,
.pillar, .exp-card, .info-card {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal      { transform: translateY(36px); }
.reveal-up   { transform: translateY(52px) scale(0.98); }
.reveal-left { transform: translateX(-48px); }
.reveal-right{ transform: translateX(48px); }
.pillar      { transform: translateY(40px); }
.exp-card    { transform: translateY(32px); transition-delay: calc(var(--stagger,0) * 120ms); }
.info-card   { transform: translateY(28px); transition-delay: calc(var(--stagger,0) * 100ms); }

.reveal.in-view, .reveal-up.in-view, .reveal-left.in-view,
.reveal-right.in-view, .pillar.in-view, .exp-card.in-view,
.info-card.in-view {
  opacity: 1;
  transform: none;
}

/* ── Hero entrance ──────────────────────────────────── */
.hero-content .eyebrow {
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.hero-content h1 {
  animation: fadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.hero-content > p {
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.hero-content .btns {
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ── Hero parallax ──────────────────────────────────── */
.hero .hero-bg {
  will-change: transform;
  transform: scale(1.1);
  transition: transform 0.1s linear;
}

/* ── Header on scroll ───────────────────────────────── */
.site-header {
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.site-header.scrolled {
  background: rgba(246,241,230,0.97) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* ── Gold divider animate ───────────────────────────── */
.gold-divider::before,
.gold-divider::after {
  transition: max-width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 0 !important;
}
.gold-divider.in-view::before,
.gold-divider.in-view::after {
  max-width: 160px !important;
}

/* ── Section title stagger ──────────────────────────── */
.section-title {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-title.in-view {
  opacity: 1;
  transform: none;
}

/* ── Pillar image hover ─────────────────────────────── */
.pillar-img {
  overflow: hidden;
}
.pillar-img img {
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.pillar-img:hover img {
  transform: scale(1.06) !important;
}

/* ── Badge pop ──────────────────────────────────────── */
.badge {
  opacity: 0;
  transform: translateY(-8px) scale(0.92);
  transition: opacity 0.5s ease 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.pillar.in-view .badge {
  opacity: 1;
  transform: none;
}

/* ── CTA section ────────────────────────────────────── */
.cta-section {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.cta-section.in-view {
  opacity: 1;
}

/* ── Btn hover lift ─────────────────────────────────── */
.btn {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.2s ease,
              box-shadow 0.2s ease,
              background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease !important;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.2);
}

/* ── Narrow section entrance ────────────────────────── */
.bg-cream .narrow {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.bg-cream .narrow.in-view {
  opacity: 1;
  transform: none;
}

/* ── Link arrow hover ───────────────────────────────── */
.link-arrow {
  display: inline-block;
  transition: transform 0.25s ease, color 0.25s ease !important;
}
.link-arrow:hover {
  transform: translateX(4px);
  color: var(--gold) !important;
}

/* ── Exp card image zoom ────────────────────────────── */
.exp-card .exp-img img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.exp-card:hover .exp-img img {
  transform: scale(1.06) !important;
}

/* ── Footer fade ────────────────────────────────────── */
.site-footer {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.site-footer.in-view {
  opacity: 1;
  transform: none;
}

/* ── Lang switcher ──────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
}
.lang-btn {
  background: none;
  border: 1px solid rgba(201,163,90,0.4);
  border-radius: 3px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--gold);
  transition: all .2s;
  font-family: 'Inter', sans-serif;
}
.lang-btn.active {
  background: var(--gold);
  color: var(--gold-fg);
  border-color: var(--gold);
}
.lang-btn:hover:not(.active) {
  background: rgba(201,163,90,0.12);
}
/* transparent header variant */
.site-header.transparent .lang-btn {
  border-color: rgba(246,241,230,0.5);
  color: rgba(246,241,230,0.85);
}
.site-header.transparent .lang-btn.active {
  background: var(--gold);
  color: var(--gold-fg);
  border-color: var(--gold);
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}