/* =========================================================================
   MAIN.CSS — Tito Quintino Portfolio
   Estilos custom que complementan Tailwind (cargado por CDN en el head).
   Organizado en: 1) Base  2) Utilidades  3) Hero  4) Reveal/Scroll
   5) Grid 3D (Colecciones)  6) Cursor personalizado  7) Galería Invitados
   8) Modal  9) Filtros responsivos  10) Accesibilidad / reduced-motion
   ========================================================================= */

/* ---------- 1. BASE ---------- */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #FAFAFA;
  color: #171717;
  overflow-x: hidden;
}
.font-serif { font-family: 'Playfair Display', serif; }

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

.bg-noise {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none;
  z-index: 50; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ---------- 2. UTILIDADES / MARQUEE / BLOB ---------- */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { display: flex; width: max-content; animation: marquee 60s linear infinite; }

@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(20px, -30px) scale(1.05); }
  66% { transform: translate(-10px, 15px) scale(0.95); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 8s infinite; }
.animation-delay-2000 { animation-delay: 2s; }

.menu-visible { opacity: 1; pointer-events: auto; backdrop-filter: blur(16px); }
.menu-hidden { opacity: 0; pointer-events: none; backdrop-filter: blur(0px); }

/* ---------- 3. HERO / SPLIT TEXT ---------- */
/* Contenedores para el reveal de texto palabra por palabra (ver animations.js -> splitWords) */
/* Contenedores para el reveal de texto palabra por palabra (ver animations.js -> splitWords).
   padding-bottom + margin-bottom negativo: el overflow:hidden necesita espacio
   extra debajo de la línea base para no cortar descendentes (g, q, p, y) —
   sin esto, el "recorte de máscara" recorta también parte de esas letras. */
.split-line {
  overflow: hidden;
  display: block;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.split-word { display: inline-block; will-change: transform; }

/* ---------- 4. REVEAL EN SCROLL (fallback sin JS / soporte progresivo) ---------- */
.reveal { opacity: 0; transform: translateY(30px); }
.reveal.reveal-ready { transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* ---------- 5. GRID 3D — "Colecciones Destacadas" ---------- */
/* Cada tarjeta se levanta y gira levemente en 3D siguiendo el cursor.
   El contenedor da la perspectiva; la tarjeta interna hace el transform. */
.tilt-3d-wrap {
  perspective: 1000px;
}
.tilt-3d-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.4s ease;
}
.tilt-3d-card .tilt-3d-media {
  transform: translateZ(0);
  transition: filter 0.5s ease;
}
.tilt-3d-card .tilt-3d-lift {
  transform: translateZ(30px);
}
.tilt-3d-card:hover .tilt-3d-media,
.tilt-3d-card:focus-within .tilt-3d-media {
  filter: brightness(1.04);
}
.tilt-3d-shadow {
  position: absolute;
  inset: 6% 4% -6% 4%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.28), transparent 70%);
  opacity: 0;
  transform: translateZ(-10px) scale(0.92);
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
}
.tilt-3d-card:hover .tilt-3d-shadow { opacity: 1; }

/* ---------- 6. CURSOR PERSONALIZADO (magnético / contextual) ---------- */
#custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #171717;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  will-change: transform, width, height;
}
#custom-cursor.cursor-label {
  width: 90px; height: 90px;
  background: #171717;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border: 2px solid rgba(255, 255, 255, 0.9);
}
/* Dentro del modal el fondo es claro y predecible: reforzamos el contraste
   con un anillo más grueso en vez de depender de blend modes, que fallan
   tanto sobre blanco como sobre negro (ver auditoría). app.js agrega/quita
   esta clase al abrir/cerrar el modal. */
#custom-cursor.cursor-in-modal {
  border-width: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.45);
}
@media (max-width: 767px) {
  #custom-cursor { display: none !important; }
}
@media (min-width: 768px) {
  .cursor-none-desktop, .cursor-none-desktop * { cursor: none; }
}

/* Botones/elementos "magnéticos": el JS anima el transform, aquí solo dejamos
   el will-change y una transición de respaldo por si JS no corre a tiempo. */
.magnetic { display: inline-flex; will-change: transform; }

/* ---------- 7. GALERÍA "ARTISTAS Y AMIGOS INVITADOS" (filmstrip, no grid) ---------- */
#guest-track { scroll-behavior: smooth; }
#guest-track::-webkit-scrollbar { display: none; }

.guest-card {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 78vw;
  max-width: 320px;
  perspective: 1200px;
}
@media (min-width: 768px) {
  .guest-card { width: 300px; }
}

/* Glow ambiental de sección completa: al hacer hover sobre una tarjeta,
   una versión gigante y muy difuminada de ESA imagen aparece detrás de
   toda la sección (no solo detrás de la tarjeta) — como el fondo dinámico
   de Spotify/Apple Music. Vive en #invitados, no en cada .guest-card, para
   que se sienta parte del ambiente y no "encasillado" en el carrusel. */
#guest-ambient-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#guest-ambient-glow::after {
  content: '';
  position: absolute;
  inset: -15%;
  background-image: var(--ambient-img, none);
  background-size: cover;
  background-position: center;
  filter: blur(90px) saturate(1.6) brightness(1.05);
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1s ease, transform 1.2s ease;
}
#guest-ambient-glow.is-active::after {
  opacity: 0.4;
  transform: scale(1.2);
}
@media (prefers-reduced-motion: reduce) {
  #guest-ambient-glow::after { transition: none; }
}

.guest-card-inner {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background: linear-gradient(100deg, #1a1a1a 30%, #2a2a2a 50%, #1a1a1a 70%);
  background-size: 250% 100%;
  animation: guestShimmer 1.8s ease-in-out infinite;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.35);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.4s ease;
}
.guest-card-inner:hover { box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); }
.guest-card-inner.is-settled { animation: none; background: #111; }
@keyframes guestShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}

.guest-card-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.guest-card-img.is-loaded { opacity: 1; }

/* Si la imagen falla definitivamente: aviso discreto en vez de caja vacía */
.guest-card-inner.img-error { animation: none; background: #1a1a1a; }
.guest-card-inner.img-error .guest-card-img { display: none; }
.guest-card-inner.img-error::before {
  content: "Imagen no disponible";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 1.5rem;
}

.guest-card-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 1.25rem 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 10%, rgba(0,0,0,0.15) 75%, transparent 100%);
  color: #fff;
  transform: translateZ(40px);
}
.guest-card-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: #f87171;
  margin-bottom: 6px;
}
.guest-card-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.guest-card-artist { font-size: 12px; font-weight: 300; opacity: 0.8; margin-top: 2px; }

.guest-sale-tag {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: #171717;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ---------- 8. MODAL ---------- */
@keyframes slideUpMobile { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeInDesktop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-content-animate { animation: slideUpMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@media (min-width: 768px) {
  .modal-content-animate { animation: fadeInDesktop 0.3s ease-out forwards; }
}

#modal-artist-line {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #dc2626;
  margin-bottom: 0.75rem;
}

/* ---------- 9. FILTROS RESPONSIVOS (chips con scroll horizontal en mobile) ---------- */
.filter-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.25rem 1rem;
  margin: 0 -1rem;
  scroll-snap-type: x proximity;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row { -ms-overflow-style: none; scrollbar-width: none; }
.filter-row button { scroll-snap-align: start; white-space: nowrap; }

@media (min-width: 768px) {
  .filter-row {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    padding: 0;
    margin: 0;
  }
}

/* ---------- 10. ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.reveal-ready { transition: none !important; opacity: 1 !important; transform: none !important; }
  .animate-blob, .animate-marquee { animation: none !important; }
  #custom-cursor { display: none !important; }
  .cursor-none-desktop, .cursor-none-desktop * { cursor: auto !important; }
}

:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 3px;
}