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

  /* ── Scroll Reveal ────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    .scroll-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .scroll-reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── Navbar scroll state ──────────────────────────── */
  #navbar.scrolled {
    background: rgba(61, 10, 21, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  }

  /* ── Selection ────────────────────────────────────── */
  ::selection {
    background: rgba(255, 133, 163, 0.3);
    color: #3d0a15;
  }

  /* ── Focus visible ────────────────────────────────── */
  :focus-visible {
    outline: 2px solid #ff85a3;
    outline-offset: 2px;
  }

  /* ── Smooth image loading ─────────────────────────── */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  /* ── Custom scrollbar ─────────────────────────────── */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #fdf2f4; }
  ::-webkit-scrollbar-thumb { background: #d44066; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #b8274a; }