/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Quicksand', sans-serif; background: #FDF2F8; color: #4A1942; overflow-x: hidden; }

/* ── Scroll reveal ──────────────────────────────────── */
.reveal       { opacity: 0; transform: translateY(40px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }

/* ── Gradient text ──────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #DB2777 0%, #F472B6 50%, #A855F7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glass card ─────────────────────────────────────── */
.glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244, 114, 182, 0.2);
}

/* ── Floating particles ─────────────────────────────── */
.particle {
  position: absolute;
  pointer-events: none;
  animation: drift linear infinite;
}

/* ── Heartbeat hover ────────────────────────────────── */
.heart-hover { transition: transform 0.2s ease; }
.heart-hover:hover { transform: scale(1.15); }

/* ── Timeline connector ─────────────────────────────── */
.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, #F472B6, #FBCFE8);
}


/* ── Hero section hearts ────────────────────────────── */
.hero-heart {
  position: absolute;
  pointer-events: none;
  animation: heroFloat ease-in-out infinite;
}

/* ── Keyframe animations ────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg)   scale(1); }
  33%       { transform: translateY(-18px) rotate(6deg)  scale(1.05); }
  66%       { transform: translateY(-8px)  rotate(-4deg) scale(0.97); }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

@keyframes drift {
  0%   { transform: translateX(-100px) translateY(0px) rotate(0deg);                            opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100px)) translateY(-80px) rotate(360deg); opacity: 0; }
}

@keyframes twinkle {
  0%   { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1;   transform: scale(1.2); }
}

/* ── Focus visible — keyboard nav rings ─────────────── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #DB2777;
  outline-offset: 3px;
  border-radius: 6px;
}
/* CTA button on dark bg needs white ring */
a.focus-ring-white:focus-visible {
  outline-color: #fff;
  outline-offset: 3px;
}

/* ── Nav active link ─────────────────────────────────── */
.nav-link-active { color: #EC4899 !important; }

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
  /* hero hearts use inline styles — override explicitly */
  .hero-heart { animation: none !important; }
}

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #FDF2F8; }
::-webkit-scrollbar-thumb { background: #F472B6; border-radius: 3px; }