/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; }

/* ── Scroll Reveal (progressive enhancement) ──────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-left { transform: translateX(-24px); }
  .reveal-right { transform: translateX(24px); }
  .reveal-up.visible,
  .reveal-left.visible,
  .reveal-right.visible {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* ── Hero shapes animation ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-shape {
    animation: float 6s ease-in-out infinite;
  }
  .hero-shape:nth-child(2) { animation-delay: -2s; animation-duration: 8s; }
  .hero-shape:nth-child(3) { animation-delay: -4s; animation-duration: 7s; }
  @keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(12px, -16px) scale(1.03); }
    66% { transform: translate(-8px, 8px) scale(0.97); }
  }
}

/* ── Mobile nav transitions ───────────────────────── */
#mobile-nav {
  animation: slideIn 0.3s ease forwards;
}
@keyframes slideIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Form focus ring ──────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
}

/* ── Smooth scroll offset for fixed header ────────── */
section[id] {
  scroll-margin-top: 80px;
}