/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal[data-state="hidden"] {
  opacity: 0;
  transform: translateY(24px);
}

/* ── Mobile Menu Animation ── */
#mobile-menu.open { display: flex; }
#menu-btn[aria-expanded="true"] #bar1 { transform: translateY(5px) rotate(45deg); }
#menu-btn[aria-expanded="true"] #bar2 { opacity: 0; }
#menu-btn[aria-expanded="true"] #bar3 { transform: translateY(-5px) rotate(-45deg); }

/* ── Selection ── */
::selection { background: color-mix(in srgb, currentColor 20%, transparent); }