*, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background-color: rgba(184, 97, 59, 0.4);
    color: #f5f5f5;
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar-track {
    background: #0c0a07;
  }
  ::-webkit-scrollbar-thumb {
    background: #3d3529;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #b8613b;
  }

  /* Scroll reveal animations - progressive enhancement */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
  }

  /* Mobile menu animation */
  #mobile-menu.open {
    opacity: 1;
    pointer-events: all;
  }

  /* Hamburger animation */
  #menu-toggle.active #bar1 {
    transform: rotate(45deg) translate(5px, 5px);
  }
  #menu-toggle.active #bar2 {
    opacity: 0;
  }
  #menu-toggle.active #bar3 {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Navbar scroll state */
  #navbar.scrolled {
    background-color: rgba(12, 10, 7, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(61, 53, 41, 0.5);
  }

  /* Subtle shimmer on gold accents */
  @media (prefers-reduced-motion: no-preference) {
    .shimmer {
      position: relative;
      overflow: hidden;
    }
    .shimmer::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.08), transparent);
      animation: shimmer 4s ease-in-out infinite;
    }
    @keyframes shimmer {
      0%, 100% { left: -100%; }
      50% { left: 100%; }
    }
  }

  /* Focus styles for accessibility */
  a:focus-visible, button:focus-visible {
    outline: 2px solid #d4a574;
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Image aspect ratios */
  .aspect-square {
    aspect-ratio: 1 / 1;
  }