@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Noto+Serif+Devanagari:wght@400;700;900&family=Nunito:wght@400;500;600;700;800;900&display=swap");

/* Lenis Recommended CSS */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

:root {
  --color-brand: #c91c1c; /* Deep traditional red */
  --color-brand-dark: #8a0303;
  --color-accent: #eab308; /* Rich yellow/gold */
  --color-bg: #faf9f6; /* Warm off-white */
  --color-text: #292524; /* Stone 800 */
  --color-text-muted: #57534e; /* Stone 600 */
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}

/* Typography classes */
.font-serif-hi {
  font-family: "Noto Serif Devanagari", serif;
}
.font-ibm {
  font-family: ibm-regular, sans-serif;
}
.font-brush {
  font-family: "Kaushan Script", cursive;
}

/* Elegant Scroll Reveal */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.reveal-fade.in-view {
  opacity: 1;
}

/* Staggered delays */
.delay-100 {
  transition-delay: 100ms;
}
.delay-200 {
  transition-delay: 200ms;
}
.delay-300 {
  transition-delay: 300ms;
}
.delay-400 {
  transition-delay: 400ms;
}
.delay-500 {
  transition-delay: 500ms;
}

/* Text Blur Reveal Effect (Motion Primitives style) */
.text-blur-reveal span {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
  display: inline-block;
  animation: blur-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes blur-reveal {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

/* Magnetic Button Wrapper */
.magnetic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Editorial Image Zoom */
.editorial-image-wrapper {
  overflow: hidden;
  position: relative;
}
.editorial-image-wrapper img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.01);
}
.editorial-image-wrapper:hover img {
  transform: scale(1.06);
}

/* Soft elegant card shadow */
.editorial-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition:
    box-shadow 0.4s ease,
    transform 0.4s ease;
}
.editorial-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* Custom Scrollbar for elegance */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: #d6d3d1;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}

/* Line clamping for events */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Wave Button Effect */
.wave-btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transform: translateZ(0); /* Force hardware acceleration */
}
.wave-btn::before,
.wave-btn::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 200%;
  padding-bottom: 200%; /* Aspect ratio 1:1 fallback for older browsers */
  background-color: var(--wave-color, rgba(244, 216, 0, 0.975));
  transform: translate(-50%, 0) rotate(0deg);
  border-radius: 40%;
  z-index: -1;
  transition: transform 0.8s cubic-bezier(2, 1, 0.3, 0);
  pointer-events: none;
}
.wave-btn::after {
  background-color: var(--wave-color-2, rgba(255, 225, 0, 0.3));
  border-radius: 45%;
  transition-duration: 2.1s;
}
.wave-btn:hover::before,
.wave-btn:hover::after {
  transform: translate(-50%, -80%) rotate(180deg);
}

.wave-btn-red {
  --wave-color: #991b1b;

  --wave-color-2: #1c3263;
}
.wave-btn-white {
  --wave-color: #f3f4f6;
  --wave-color-2: #e5e7eb;
}
.group:hover .wave-btn::before,
.group:hover .wave-btn::after {
  transform: translate(-50%, -80%) rotate(180deg);
}
.group:hover .wave-btn-red {
  color: #111827 !important;
}