.font-heading {
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.015em;
  }
  .font-body {
    font-family: 'Inter', sans-serif;
  }


  @keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    transform: translateX(25px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  60% {
    opacity: 1;
    transform: translateX(-25px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Classes applied when in viewport */
.animate-bounce-in-left {
  animation: bounceInLeft 1.2s ease-out both;
}

.animate-bounce-in-right {
  animation: bounceInRight 1.2s ease-out both;
}


@media (prefers-reduced-motion: reduce) {
  .tl-card2 { transition: none !important; animation: none !important; }
}

 /* Card hover polish */
    .cat-card { transition: transform .25s, box-shadow .25s; }
    .cat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -12px rgba(209,42,42,.35); }

    /* Optional: subtle hero halo */
    .hero-halo {
      background: radial-gradient(700px 140px at 50% 30%, rgba(209,42,42,.08), transparent 70%);
    }

    .brand { color: #b82222; }
    .btn-brand { background: #b82222; }
    .btn-brand:hover { background: #b82222; }


     /* Cards: clean, solid, premium */
    .card {
      border: 1px solid #eaeaea;
      border-radius: 16px;
      box-shadow: 0 8px 30px -18px rgba(0,0,0,0.25);
      overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px -20px rgba(0,0,0,0.28);
      border-color: #e2e2e2;
    }

    /* Tile aspect helpers */
    .ar-1x1  { aspect-ratio: 1/1; }
    .ar-4x3  { aspect-ratio: 4/3; }
    .ar-3x4  { aspect-ratio: 3/4; }
    .ar-16x9 { aspect-ratio: 16/9; }

    /* Controls */
    .chip {
      display:inline-flex; align-items:center; gap:.5rem;
      border:1px solid #e6e6e6; background:#fff; color:#1f2937;
      padding:.55rem .9rem; border-radius:.6rem; font-size:.9rem;
      transition: border-color .2s, box-shadow .2s, transform .15s;
    }
    .chip:hover { border-color:#dcdcdc; transform: translateY(-1px); }
    .chip.active {
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(209,42,42,.12);
      color: var(--brand);
    }

    /* Lightbox */
    .lb-backdrop {
      background: rgba(0,0,0,.6);
      backdrop-filter: blur(4px);
    }
    .lb-btn {
      background:#fff; border:1px solid #e5e5e5; border-radius:.6rem;
      padding:.5rem .7rem; transition: transform .15s, box-shadow .2s, border-color .2s;
    }
    .lb-btn:hover { transform: translateY(-1px); border-color:#dcdcdc; box-shadow:0 10px 24px -18px rgba(0,0,0,.35); }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .reveal, .revealed { animation: none !important; transform: none !important; opacity: 1 !important; }
    }


     


    
    .field{border:1px solid #e5e7eb;border-radius:.6rem;padding:.75rem .9rem;width:100%}
    .field:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(209,42,42,.12)}
    .btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:.6rem;padding:.8rem 1.2rem}
    .btn-brand{background:var(--brand);color:#fff}
    .btn-brand:hover{filter:brightness(1.05)}
    .note{font-size:.85rem;color:#64748b}


             :root {
            --brand: #D12A2A;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            border: 1px solid #e6e6e6;
            background: #fff;
            padding: .45rem .75rem;
            border-radius: .6rem;
            font-size: .85rem
        }

        .chip.active {
            border-color: var(--brand);
            color: var(--brand);
            box-shadow: 0 0 0 2px rgba(209, 42, 42, .12)
        }




        /* ===== UNIVERSAL SCROLL REVEAL CLASSES ===== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

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

/* Direction variants */
.reveal-left {
  transform: translateX(-60px);
}
.reveal-right {
  transform: translateX(60px);
}
.reveal-up {
  transform: translateY(40px);
}
.reveal-down {
  transform: translateY(-40px);
}