/**
 * Premium Scroll - Clases Utilitarias
 * @description Estilos modulares para el comportamiento del header/nav
 * Integra estas clases con tu CSS existente
 */

/* ============================================
   VARIABLES CSS (Personaliza según tu diseño)
   ============================================ */
:root {
  /* Altura del header */
  --header-height-full: 80px;
  --header-height-minimized: 60px;
  
  /* Padding del header */
  --header-padding-full: 1.5rem 2rem;
  --header-padding-minimized: 0.75rem 2rem;
  
  /* Transiciones */
  --header-transition-duration: 0.4s;
  --header-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Sombras */
  --header-shadow-scrolled: 0 2px 20px rgba(0, 0, 0, 0.1);
  --header-shadow-minimized: 0 1px 10px rgba(0, 0, 0, 0.08);
  
  /* Backgrounds (ajusta a tu diseño) */
  --header-bg-default: rgba(255, 255, 255, 0.95);
  --header-bg-scrolled: rgba(255, 255, 255, 0.98);
  
  /* Si usas dark mode */
  --header-bg-dark-default: rgba(18, 18, 18, 0.95);
  --header-bg-dark-scrolled: rgba(18, 18, 18, 0.98);
}

/* ============================================
   BASE - Asegura transiciones suaves
   ============================================ */
header,
nav,
.navbar {
  transition: 
    padding var(--header-transition-duration) var(--header-transition-easing),
    height var(--header-transition-duration) var(--header-transition-easing),
    box-shadow var(--header-transition-duration) var(--header-transition-easing),
    background-color var(--header-transition-duration) var(--header-transition-easing),
    transform var(--header-transition-duration) var(--header-transition-easing);
  
  will-change: padding, height, box-shadow, background-color, transform;
}

/* ============================================
   ESTADO: SCROLLED (después del threshold)
   ============================================ */
header.scrolled-nav,
nav.scrolled-nav,
.navbar.scrolled-nav {
  background-color: var(--header-bg-scrolled);
  box-shadow: var(--header-shadow-scrolled);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  header.scrolled-nav,
  nav.scrolled-nav,
  .navbar.scrolled-nav {
    background-color: var(--header-bg-dark-scrolled);
  }
}

/* ============================================
   ESTADO: MINIMIZED (scroll hacia abajo)
   ============================================ */
header.nav-minimized,
nav.nav-minimized,
.navbar.nav-minimized {
  padding: var(--header-padding-minimized);
  height: var(--header-height-minimized);
  box-shadow: var(--header-shadow-minimized);
}

/* Opcional: ocultar elementos secundarios en modo minimizado */
header.nav-minimized .nav-secondary,
nav.nav-minimized .nav-secondary,
.navbar.nav-minimized .nav-secondary {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.3s ease;
}

/* Ajustar tamaño del logo si es necesario */
header.nav-minimized .logo,
nav.nav-minimized .logo,
.navbar.nav-minimized .logo {
  transform: scale(0.9);
  transition: transform 0.3s var(--header-transition-easing);
}

/* ============================================
   ESTADO: EXPANDED (al entrar en sección)
   ============================================ */
header.nav-expanded,
nav.nav-expanded,
.navbar.nav-expanded {
  padding: var(--header-padding-full);
  height: var(--header-height-full);
  box-shadow: var(--header-shadow-scrolled);
}

/* Animación sutil al expandir */
header.nav-expanded,
nav.nav-expanded,
.navbar.nav-expanded {
  animation: headerExpand 0.3s var(--header-transition-easing);
}

@keyframes headerExpand {
  0% {
    transform: translateY(-5px);
    opacity: 0.95;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================
   SECCIONES OBSERVADAS
   ============================================ */
section.section-in-view {
  /* Opcional: añade un efecto visual cuando una sección está en vista */
  /* Por ejemplo, un fade-in sutil si no lo tienes ya */
}

/* ============================================
   PROTECCIÓN: Menú Abierto
   ============================================ */
/* Cuando el menú está abierto, preservar el estado completo */
header.menu-open,
nav.menu-open,
.navbar.menu-open,
body.menu-open header,
body.menu-open nav,
body.menu-open .navbar {
  padding: var(--header-padding-full) !important;
  height: auto !important;
  transform: none !important;
}

/* ============================================
   OPTIMIZACIÓN: Reduce Motion
   ============================================ */
/* Respetar preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  header,
  nav,
  .navbar {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   RESPONSIVE: Mobile
   ============================================ */
@media (max-width: 768px) {
  :root {
    --header-height-full: 70px;
    --header-height-minimized: 56px;
    --header-padding-full: 1rem 1.5rem;
    --header-padding-minimized: 0.625rem 1.5rem;
  }
  
  /* En móvil, el comportamiento minimizado puede ser más sutil */
  header.nav-minimized .logo,
  nav.nav-minimized .logo,
  .navbar.nav-minimized .logo {
    transform: scale(0.95);
  }
}

/* ============================================
   SMOOTH SCROLL GLOBAL (Lenis)
   ============================================ */
/* Lenis se encarga del scroll, evita conflictos */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ============================================
   UTILIDADES ADICIONALES
   ============================================ */

/* Desactivar smooth scroll temporalmente si es necesario */
.no-smooth-scroll {
  scroll-behavior: auto !important;
}

/* Para elementos que deben tener scroll propio (modales, etc) */
.independent-scroll {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}