@layer base {
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
  }
  
  body {
    background-color: #fdfdfd;
    color: #0f0f0f;
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: background-color 0.5s ease, color 0.5s ease;
  }

  html.dark body {
    background-color: #0f0f0f;
    color: #fdfdfd;
  }
}

/* Global Navigation Style */
.header-link {
  @apply font-display font-black text-[10px] uppercase tracking-[0.2em] transition-all hover:text-pop-blue relative cursor-pointer text-gray-400 dark:text-gray-500 no-underline;
}
.header-link.active {
  @apply text-pop-blue dark:text-pop-blue;
}

/* Branding Elements */
.vn-box {
  @apply bg-v-dark dark:bg-white text-white dark:text-v-dark flex items-center justify-center font-display font-black transition-all duration-700;
  box-shadow: 0 20px 40px -10px rgba(45, 91, 255, 0.25);
}

.vn-box:hover {
  @apply rotate-12;
}

/* Unified Category Navigation Switcher */
.cat-nav-btn { 
  @apply flex items-center gap-2 px-6 py-3 rounded-full font-display font-black text-[10px] uppercase tracking-[0.15em] transition-all duration-300 whitespace-nowrap text-gray-400 hover:text-v-dark dark:hover:text-white border-none cursor-pointer outline-none bg-transparent; 
}
.cat-nav-btn.active { 
  @apply bg-white dark:bg-v-dark shadow-xl scale-105; 
}

/* Section Labels */
.section-label-line { 
  @apply flex items-center gap-6 mb-16 opacity-0 animate-slide-up; 
}
.section-label-text { 
  @apply font-display font-black text-5xl md:text-8xl lg:text-9xl uppercase tracking-tighter leading-none text-v-dark dark:text-white; 
}
.section-line { 
  @apply flex-grow h-[1px] bg-gray-200 dark:bg-white/10; 
}

/* Typography & Layout */
.text-fluid-hero {
  font-size: clamp(3rem, 11vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
}

.text-fluid-footer {
  font-size: clamp(2rem, 15vw, 16rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Standard Gradients */
.text-gradient-new {
    background: linear-gradient(to right, #2D5BFF 0%, #9D4EDD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-wave {
    background: linear-gradient(to right, #9D4EDD 0%, #FF0080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-zen {
    background: linear-gradient(to right, #9DC08B 0%, #2D5BFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-event {
    background: linear-gradient(to right, #FF0080 0%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-drink {
    background: linear-gradient(to right, #FF5C00 0%, #FF003D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-explore {
    background: linear-gradient(to right, #00BFA5 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-style {
    background: linear-gradient(to right, #FF0080 0%, #9D4EDD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
}

/* Animations */
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-slide-up {
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Glass & Shadows */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

html.dark .glass {
  background: rgba(15, 15, 15, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mag-shadow {
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.1);
}

html.dark .mag-shadow {
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}

/* Custom Utilities */
.text-outline-white {
  -webkit-text-stroke: 1px white;
  color: transparent;
}

::selection {
  background-color: #2D5BFF;
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 20px;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
}