/* Lunchera — estilos base y animaciones vanilla (sin frameworks JS) */

:root {
  --radius: 1rem;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--color-background);
}

h1,
h2,
h3 {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
}

.font-script {
  font-family: "Caveat", cursive;
}

/*
 * El display:flex de centrado (items-center/justify-center) solo debe
 * aplicar cuando el modal esta visible. Se fija aqui con selector de
 * ID en vez de depender del orden en que Tailwind (Play CDN) genera
 * las utilidades "hidden" vs "flex" en el mismo elemento.
 */
#whatsapp-modal:not(.hidden) {
  display: flex;
}

/* ---------- Marquee (cinta diagonal con loop continuo) ---------- */

/*
 * Wrapper exterior: overflow:visible a proposito (no recorta nada). El
 * recorte real vive en .marquee-diag-band (ver abajo) -asi rota junto
 * con la cinta en vez de cortarla desde un rectangulo exterior fijo.
 *
 * El alto SI necesita ser mayor que el alto natural de la cinta: al
 * rotar (aunque sea solo 2deg) un rectangulo tan ancho como el
 * viewport, sus puntas se proyectan por encima/debajo de su alto
 * original -geometria inevitable, con el termino dominante creciendo
 * con el ANCHO de viewport (ancho_escalado * sin(2deg)), no con el
 * alto de la cinta. Formula: alto_necesario = ancho_banda_escalada *
 * sin(2deg) + alto_banda_escalada * cos(2deg), donde "escalada" incluye
 * el scale(1.05) de .marquee-diag-band. Medido con Chrome DevTools MCP
 * (ancho real del contenedor, no asumido):
 *   375px  -> requiere ~69px   753px -> requiere ~85px
 *   1425px -> requiere ~124px  1905px -> requiere ~141px
 * Como el termino dominante escala con el ancho de viewport, un alto
 * fijo en px fallaria en pantallas anchas (y sobraria en mobile) -por
 * eso el alto usa una formula en vw+px con margen de sobra (~33-46px
 * por encima del minimo calculado en los 4 anchos medidos).
 */
.marquee-diag {
  position: relative;
  width: 100%;
  height: calc(4vw + 100px);
  overflow: visible;
  display: flex;
  align-items: center;
  z-index: 40;
}

/*
 * Banda rotada solo 2deg (no 10deg): con un rectangulo tan ancho como
 * el viewport, un angulo grande dispara el despliegue vertical de la
 * forma rotada muy por encima de lo que scale puede compensar (con
 * 10deg y ~68px de alto, ronda los 400px -de ahi el bloque/trapecio
 * gigante). Con 2deg ese despliegue es mucho menor (ver formula arriba)
 * y scale(1.05) alcanza a cubrir las esquinas. El overflow:hidden va
 * aqui (no en el wrapper) para que el recorte rote junto con la banda.
 */
.marquee-diag-band {
  width: 100%;
  overflow: hidden;
  background-color: oklch(0.21 0.04 265); /* night */
  display: flex;
  align-items: center;
  padding: 1rem 0;
  transform: rotate(-2deg) scale(1.05);
  transform-origin: center center;
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-loop 50s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

@keyframes marquee-loop {
  from {
    transform: translateX(0);
  }
  to {
    /* El contenido esta duplicado x2 (ver initMarquee en main.js), asi
       que -50% es exactamente una vuelta completa: el loop no se nota. */
    transform: translateX(-50%);
  }
}

.marquee-item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.875rem, 2vw, 1.5rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: oklch(0.86 0.2 128); /* lime */
  white-space: nowrap;
}

.marquee-dot {
  color: oklch(0.945 0.11 100); /* cream */
}

/* ---------- Reveal on scroll (IntersectionObserver) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-parallax] {
    transform: none !important;
  }

  .float-y {
    animation: none !important;
  }
}

/* ---------- Flotante suave (badge "PEDIDO GRUPAL 10+") ---------- */
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }
  50% {
    transform: translateY(-10px) rotate(-6deg);
  }
}

.float-y {
  animation: float-y 5s ease-in-out infinite;
}

/* ---------- Navbar entrada ---------- */
@keyframes nav-drop {
  from {
    transform: translate(-50%, -80px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.nav-drop {
  animation: nav-drop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/*
 * Tema dinamico: el navbar mantiene siempre el mismo efecto de vidrio
 * esmerilado (semitransparente + backdrop-blur) -lo unico que cambia
 * segun si la seccion que tiene detras (ver [data-navbar-theme] e
 * initNavbarTheme en main.js) es clara u oscura es el TINTE del
 * cristal y el color del texto, para que el contraste siempre sea
 * bueno sin perder la tecnica de glass. Por defecto (sin
 * .navbar--on-dark, seccion clara detras): cristal claro, texto night.
 * Sobre seccion oscura (.navbar--on-dark, ej. Menu, Marquee): cristal
 * oscuro, texto claro/lima.
 */
.nav-drop {
  background-color: oklch(1 0 0 / 0.8); /* card/80 */
  border: 1px solid oklch(0.929 0.013 255.508 / 0.6); /* border/60 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.nav-drop .nav-link {
  color: oklch(0.21 0.04 265 / 0.7); /* night/70 */
  transition:
    color 0.3s ease,
    background-color 0.15s ease;
}

.nav-drop .nav-link:hover {
  color: oklch(0.21 0.04 265); /* night */
  background-color: oklch(0.96 0.026 235); /* sky-soft */
}

.nav-drop .nav-logo {
  transition: filter 0.3s ease;
}

.nav-drop.navbar--on-dark {
  background-color: oklch(0.21 0.04 265 / 0.7); /* night/70 */
  border-color: oklch(1 0 0 / 0.1);
}

.nav-drop.navbar--on-dark .nav-link {
  color: oklch(0.86 0.2 128 / 0.85); /* lime */
}

.nav-drop.navbar--on-dark .nav-link:hover {
  color: oklch(0.86 0.2 128); /* lime */
  background-color: oklch(1 0 0 / 0.1);
}

.nav-drop.navbar--on-dark .nav-logo {
  filter: brightness(0) invert(1);
}

/* ---------- Hero imagen entrada ---------- */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.hero-in {
  animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* ---------- Utilidades ---------- */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}