/* ── Bilingual toggle ─────────────────────────────── */
[data-en], [data-es] { display: none !important; }
html[data-lang="en"] [data-en] { display: revert !important; }
html[data-lang="es"] [data-es] { display: revert !important; }
html[data-lang="en"] span[data-en],
html[data-lang="es"] span[data-es] { display: inline !important; }
html[data-lang="en"] p[data-en], html[data-lang="en"] div[data-en],
html[data-lang="en"] h2[data-en], html[data-lang="en"] h3[data-en],
html[data-lang="en"] h4[data-en], html[data-lang="en"] li[data-en],
html[data-lang="en"] a[data-en], html[data-lang="en"] button[data-en],
html[data-lang="en"] label[data-en],
html[data-lang="es"] p[data-es], html[data-lang="es"] div[data-es],
html[data-lang="es"] h2[data-es], html[data-lang="es"] h3[data-es],
html[data-lang="es"] h4[data-es], html[data-lang="es"] li[data-es],
html[data-lang="es"] a[data-es], html[data-lang="es"] button[data-es],
html[data-lang="es"] label[data-es] { display: revert !important; }

/* ── Glass cards ──────────────────────────────────── */
.glass-card {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Scroll reveal ────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Nav hide on scroll ───────────────────────────── */
#main-nav { transition: transform 0.3s ease; }
#main-nav.nav-hidden { transform: translateY(-100%); }

/* ── Mobile menu overlay ──────────────────────────── */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(244, 250, 255, 0.97);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#mobile-menu.open { transform: translateX(0); }

/* ── Hamburger lines ──────────────────────────────── */
.ham-line {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: all 0.3s ease;
}
#ham-btn.open .ham-line:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
#ham-btn.open .ham-line:nth-child(2) { opacity: 0; }
#ham-btn.open .ham-line:nth-child(3) { transform: rotate(-45deg) translate(3px, -3px); }

/* ── FAQ accordion ────────────────────────────────── */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .chevron { transform: rotate(180deg); }
.chevron { transition: transform 0.3s ease; }
details[open] .faq-body { animation: faqOpen 0.3s ease forwards; }

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

/* ── Language toggle pill ─────────────────────────── */
.lang-btn { transition: background 0.2s, color 0.2s; }
.lang-btn.active { background: #b80049; color: #fff; }
.lang-btn:not(.active) { background: #f4dce4; color: #b80049; }

/* ── Base ─────────────────────────────────────────── */
body { min-height: 100dvh; }


/* ════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════ */

/* 1. HEARTBEAT PULSE — primary CTA buttons */
@keyframes heartbeat {
  0%   { transform: scale(1);    box-shadow: 0 4px 20px rgba(184,0,73,0.25); }
  14%  { transform: scale(1.05); box-shadow: 0 6px 28px rgba(184,0,73,0.40); }
  28%  { transform: scale(1);    box-shadow: 0 4px 20px rgba(184,0,73,0.25); }
  42%  { transform: scale(1.03); box-shadow: 0 5px 24px rgba(184,0,73,0.35); }
  70%  { transform: scale(1);    box-shadow: 0 4px 20px rgba(184,0,73,0.25); }
  100% { transform: scale(1);    box-shadow: 0 4px 20px rgba(184,0,73,0.25); }
}
.btn-heartbeat {
  animation: heartbeat 2.4s ease-in-out infinite;
}
.btn-heartbeat:hover {
  animation-play-state: paused;
  transform: scale(1.06) !important;
}

/* 2. FLOATING ORBS — hero background */
@keyframes floatOrb {
  0%, 100% { transform: translateY(0px)   scale(1);    opacity: 0.35; }
  33%       { transform: translateY(-18px) scale(1.06); opacity: 0.55; }
  66%       { transform: translateY(10px)  scale(0.96); opacity: 0.40; }
}
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  background: radial-gradient(circle at 40% 40%,
    rgba(233, 30, 99, 0.22) 0%,
    rgba(233, 30, 99, 0.08) 50%,
    transparent 70%
  );
  animation: floatOrb var(--orb-duration, 7s) ease-in-out infinite;
  animation-delay: var(--orb-delay, 0s);
}

/* 3. HERO TEXT STAGGER */
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-line {
  opacity: 0;
  animation: heroSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-line-1 { animation-delay: 0.15s; }
.hero-line-2 { animation-delay: 0.38s; }
.hero-line-3 { animation-delay: 0.58s; }
.hero-line-4 { animation-delay: 0.75s; }

/* 4. SHIMMER — emotional script text */
@keyframes shimmer {
  0%   { background-position: -250% center; }
  100% { background-position:  250% center; }
}
.shimmer-text {
  background: linear-gradient(
    90deg,
    #b80049 0%,
    #E91E63 35%,
    #ffb2be 50%,
    #E91E63 65%,
    #b80049 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* 5. PARALLAX — hero image (driven by JS) */
#hero-bg-img {
  will-change: transform;
  transform-origin: center center;
}

/* 6. PULSING RING — Jovana's portrait */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0   rgba(184,0,73,0.35), 0 20px 60px rgba(184,0,73,0.18); }
  50%  { box-shadow: 0 0 0 10px rgba(184,0,73,0.0),  0 24px 64px rgba(184,0,73,0.28); }
  100% { box-shadow: 0 0 0 0   rgba(184,0,73,0.35), 0 20px 60px rgba(184,0,73,0.18); }
}
.portrait-pulse {
  animation: pulseRing 3s ease-in-out infinite;
}

/* 7. HEADING UNDERLINE GROW */
@keyframes lineGrow {
  from { width: 0; opacity: 0; }
  to   { width: 5rem; opacity: 1; }
}
.heading-line {
  display: block;
  height: 4px;
  background: #b80049;
  border-radius: 9999px;
  margin: 0 auto;
  width: 0;
  opacity: 0;
}
.heading-line.in {
  animation: lineGrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 8. FLOATING HEARTS — testimonial */
@keyframes floatHeart {
  0%   { transform: translateY(0)     rotate(-8deg)  scale(1);    opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-90px) rotate(8deg)   scale(0.85); opacity: 0; }
}
.floating-heart {
  position: absolute;
  color: #E91E63;
  pointer-events: none;
  font-size: 1rem;
  will-change: transform, opacity;
  animation: floatHeart var(--heart-duration, 4s) ease-in-out infinite;
  animation-delay: var(--heart-delay, 0s);
  user-select: none;
}