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

    body {
      font-family: 'Inter', sans-serif;
    }
    .title-font {
      font-family: 'Playfair Display', serif;
    }

    /* Fade-in animations (trigger on-scroll by adding .in-view) */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      will-change: opacity, transform;
    }
    /* default per-child delay exposed via CSS variable */
    .fade-up:nth-child(1) { --d: 0.1s; }
    .fade-up:nth-child(2) { --d: 0.2s; }
    .fade-up:nth-child(3) { --d: 0.3s; }
    .fade-up:nth-child(4) { --d: 0.4s; }
    .fade-up:nth-child(5) { --d: 0.5s; }
    .fade-up:nth-child(6) { --d: 0.6s; }
    .fade-up:nth-child(7) { --d: 0.7s; }
    .fade-up:nth-child(8) { --d: 0.8s; }
    .fade-up:nth-child(9) { --d: 0.9s; }
    .fade-up:nth-child(10) { --d: 1.0s; }
    .fade-up:nth-child(11) { --d: 1.1s; }
    .fade-up:nth-child(12) { --d: 1.2s; }
    .fade-up:nth-child(13) { --d: 1.3s; }
    .fade-up:nth-child(14) { --d: 1.4s; }
    .fade-up:nth-child(15) { --d: 1.5s; }
    .fade-up:nth-child(16) { --d: 1.6s; }
    .fade-up:nth-child(17) { --d: 1.7s; }
    .fade-up:nth-child(18) { --d: 1.8s; }
    .fade-up:nth-child(19) { --d: 1.9s; }
    .fade-up:nth-child(20) { --d: 2.0s; }

    .fade-up.in-view {
      opacity: 1;
      transform: translateY(0);
      transition-delay: var(--d, 0s);
    }

    /* Staggered animation for category circles */
    .category-item {
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      will-change: opacity, transform;
    }
    .category-item:nth-child(1) { --d: 0.2s; }
    .category-item:nth-child(2) { --d: 0.35s; }
    .category-item:nth-child(3) { --d: 0.5s; }
    .category-item:nth-child(4) { --d: 0.65s; }
    .category-item:nth-child(5) { --d: 0.8s; }

    .category-item.in-view {
      opacity: 1;
      transform: scale(1);
      transition-delay: var(--d, 0s);
    }

    /* Hero title animation */
    .hero-title {
      opacity: 0;
      transform: translateY(-40px);
      transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    }
    .hero-title.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    /* Search bar animation */
    .search-animate {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1s ease-out, transform 1s ease-out;
    }
    .search-animate.in-view {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.6s;
    }

    /* Search dropdown styles */
    #search-results { max-height: 40vh; padding: 0.25rem; }
    #search-results li { list-style: none; display:flex; gap:0.75rem; align-items:center; padding:0.5rem; border-radius:0.5rem; cursor:pointer; }
    #search-results li:hover, #search-results li.active { background: #f3f4f6; }
    #search-results li img { width:56px; height:40px; object-fit:cover; border-radius:6px; }
    #search-results li .sr-title { font-size:0.95rem; color:#111827; }
    #search-results li .sr-sub { font-size:0.8rem; color:#6b7280; }

    

    /* Header logo improvements */
    .logo-img {
      image-rendering: -webkit-optimize-contrast; /* helps small bitmaps look crisper in some browsers */
      image-rendering: crisp-edges;
      filter: contrast(1.05) saturate(1.05);
      max-height: 160px;
      -webkit-font-smoothing: antialiased;
    }

    /* Back to top floating button */
    .back-to-top {
      position: fixed;
      right: 1rem;
      bottom: 1rem;
      z-index: 60;
      width: 44px;
      height: 44px;
      border-radius: 9999px;
      background: #111;
      color: #fff;
      display: grid;
      place-items: center;
      box-shadow: 0 8px 24px rgba(2,6,23,0.45);
      transition: transform 0.18s ease, opacity 0.18s ease;
      opacity: 0;
      transform: translateY(8px) scale(0.95);
      pointer-events: none;
    }
    .back-to-top.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .back-to-top svg { width: 18px; height: 18px; }
    .back-to-top:focus { outline: 2px solid rgba(255,255,255,0.9); outline-offset: 2px; }

    @media (prefers-reduced-motion: reduce) {
      .back-to-top { transition: none !important; }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .fade-up, .category-item, .hero-title, .search-animate {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }