/* Base & Scrollbar */
  html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #5B2C6F #1A0D20;
  }

  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #1A0D20; }
  ::-webkit-scrollbar-thumb { background: #5B2C6F; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #7B4A82; }

  /* Hero reveal animations — only for content below the fold */
  .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Hero elements are visible by default; JS adds .revealed for animation */
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .scroll-reveal {
      opacity: 1;
      transform: none;
    }
  }

  /* Scroll reveal for sections below fold */
  .scroll-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Nav background on scroll */
  #nav.scrolled {
    background: rgba(26, 13, 32, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(91, 44, 111, 0.3);
  }

  /* Mobile link hover */
  .mobile-link {
    transition: color 0.2s ease;
  }

  /* Image hover container */
  .rounded-3xl, .rounded-2xl {
    overflow: hidden;
  }

  /* Selection color */
  ::selection {
    background: rgba(245, 158, 11, 0.3);
    color: #F5F0F7;
  }
</style>