/* Custom styles for 11B Ink */

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Selection color */
  ::selection {
    background-color: #b8d1b8;
    color: #1a2a1a;
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #fdfcfa;
  }
  ::-webkit-scrollbar-thumb {
    background: #dce8dc;
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #b8d1b8;
  }

  /* Navbar transition */
  #navbar.scrolled {
    background-color: rgba(253, 252, 250, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(45, 74, 45, 0.08);
  }

  /* Service cards - progressive enhancement for hover */
  @media (prefers-reduced-motion: no-preference) {
    .service-card {
      transform: translateY(0);
    }
    .service-card:hover {
      transform: translateY(-4px);
    }

    .gallery-item img {
      transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Scroll reveal */
    .reveal {
      opacity: 1;
      transform: translateY(0);
      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);
    }
  }

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

  /* Mobile links */
  .mobile-link {
    opacity: 1;
  }

  /* Form focus states */
  input:focus,
  textarea:focus {
    outline: none;
  }

  /* Subtle gradient for hero text area */
  @media (min-width: 1024px) {
    #hero h1 {
      background: linear-gradient(135deg, #1a2a1a 0%, #2d4a2d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  /* Button ripple-like effect */
  button, a {
    -webkit-tap-highlight-color: transparent;
  }