/*
 * Lemu Visual WOW Layer — premium polish CSS
 *
 * Se aplica encima de los estilos existentes sin reemplazarlos.
 * Glassmorphism, animations, hover lifts, gradient borders, shimmers.
 *
 * Uso: <link rel="stylesheet" href="/lemu-wow.css">
 */

/* ─── Variables base (no chocan con :root existente) ─── */
:root {
  --wow-glow-gold: 0 0 40px rgba(201, 160, 64, 0.18);
  --wow-glow-green: 0 0 40px rgba(74, 222, 128, 0.18);
  --wow-glass-bg: rgba(255, 255, 255, 0.03);
  --wow-glass-border: rgba(255, 255, 255, 0.06);
  --wow-blur: 12px;
  --wow-curve: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Glassmorphism cards ─── */
.wow-glass {
  background: var(--wow-glass-bg);
  backdrop-filter: blur(var(--wow-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--wow-blur)) saturate(180%);
  border: 1px solid var(--wow-glass-border);
  border-radius: 16px;
}

/* ─── Gradient borders (animated) ─── */
.wow-gradient-border {
  position: relative;
  background: linear-gradient(135deg, #152218, #0D1B14);
  border-radius: 16px;
  padding: 1px;
}
.wow-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #C9A040 0%, transparent 50%, #C9A040 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: wow-rotate-gradient 6s linear infinite;
  pointer-events: none;
}
@keyframes wow-rotate-gradient {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ─── Shimmer effect en hover (premium feel) ─── */
.wow-shimmer {
  position: relative;
  overflow: hidden;
}
.wow-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.8s ease;
  pointer-events: none;
}
.wow-shimmer:hover::after {
  left: 150%;
}

/* ─── Lift on hover ─── */
.wow-lift {
  transition: transform 0.3s var(--wow-curve), box-shadow 0.3s var(--wow-curve);
}
.wow-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), var(--wow-glow-gold);
}

/* ─── Premium gradient text ─── */
.wow-gradient-text {
  background: linear-gradient(135deg, #C9A040 0%, #f4d976 50%, #C9A040 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: wow-shine 3s linear infinite;
}
@keyframes wow-shine {
  to { background-position: 200% center; }
}

/* ─── Pulse de atención (CTAs) ─── */
.wow-pulse {
  animation: wow-pulse 2s ease-in-out infinite;
}
@keyframes wow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,160,64,0.5); }
  50%      { box-shadow: 0 0 0 14px rgba(201,160,64,0); }
}

/* ─── Parallax base (combinado con JS para scroll) ─── */
.wow-parallax {
  transform: translateZ(0);
  will-change: transform;
}

/* ─── Stagger fade-in para listas ─── */
@keyframes wow-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wow-stagger > * {
  opacity: 0;
  animation: wow-fade-up 0.6s var(--wow-curve) forwards;
}
.wow-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.wow-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.wow-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.wow-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.wow-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.wow-stagger > *:nth-child(6) { animation-delay: 0.3s; }
.wow-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.wow-stagger > *:nth-child(8) { animation-delay: 0.4s; }

/* ─── Floating ambient orbs (background magic) ─── */
.wow-ambient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wow-ambient::before,
.wow-ambient::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}
.wow-ambient::before {
  background: #C9A040;
  top: -200px;
  left: -200px;
  animation: wow-orb 20s ease-in-out infinite;
}
.wow-ambient::after {
  background: #4ADE80;
  bottom: -200px;
  right: -200px;
  animation: wow-orb 25s ease-in-out infinite reverse;
}
@keyframes wow-orb {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(40px, -40px); }
  66%      { transform: translate(-30px, 30px); }
}

/* ─── Image hover zoom + dark overlay (galleries) ─── */
.wow-img-zoom {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}
.wow-img-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--wow-curve);
}
.wow-img-zoom:hover img {
  transform: scale(1.08);
}
.wow-img-zoom::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.wow-img-zoom:hover::after {
  opacity: 1;
}

/* ─── Masonry-like grid for photos (CSS columns) ─── */
.wow-masonry {
  column-count: 3;
  column-gap: 14px;
}
@media (max-width: 900px) {
  .wow-masonry { column-count: 2; }
}
@media (max-width: 500px) {
  .wow-masonry { column-count: 1; }
}
.wow-masonry > * {
  break-inside: avoid;
  margin-bottom: 14px;
  display: block;
}

/* ─── Carousel horizontal snap (estilo Temu/Instagram) ─── */
.wow-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.wow-carousel::-webkit-scrollbar { display: none; }
.wow-carousel > * {
  flex: 0 0 calc(80% - 14px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (min-width: 768px) {
  .wow-carousel > * { flex: 0 0 calc(33% - 14px); }
}

/* ─── Skeleton loader premium ─── */
.wow-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02));
  background-size: 200% 100%;
  animation: wow-shimmer-skel 1.4s infinite;
  border-radius: 8px;
}
@keyframes wow-shimmer-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Pulse dot (live indicator) ─── */
.wow-dot-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #4ADE80;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wow-dot-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80;
  animation: wow-blink-dot 1.2s ease-in-out infinite;
}
@keyframes wow-blink-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ─── Number ticker (counter animation, requires JS to set value) ─── */
.wow-counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-family: Georgia, 'Inter Tight', serif;
}

/* ─── Smooth page transitions ─── */
@media (prefers-reduced-motion: no-preference) {
  .panel.active,
  [data-screen].active {
    animation: wow-screen-in 0.35s var(--wow-curve);
  }
  @keyframes wow-screen-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* ─── Glow on focus inputs (premium feedback) ─── */
.wow-input:focus {
  border-color: #C9A040 !important;
  box-shadow: 0 0 0 4px rgba(201,160,64,0.15), 0 0 20px rgba(201,160,64,0.1) !important;
  outline: none !important;
}

/* ─── Glass header (sticky con blur) ─── */
.wow-glass-header {
  position: sticky;
  top: 0;
  background: rgba(13,27,20,0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  z-index: 50;
}

/* ─── Badge premium (gradient + glow) ─── */
.wow-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(201,160,64,0.18), rgba(201,160,64,0.05));
  border: 1px solid rgba(201,160,64,0.3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #C9A040;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(201,160,64,0.15);
}

/* ─── Card stack hover (cards que se "abren" como deck) ─── */
.wow-card-stack {
  position: relative;
}
.wow-card-stack > * {
  transition: transform 0.4s var(--wow-curve);
}
.wow-card-stack:hover > *:nth-child(1) { transform: translateY(-4px) rotate(-2deg); }
.wow-card-stack:hover > *:nth-child(2) { transform: translateY(-2px); }
.wow-card-stack:hover > *:nth-child(3) { transform: translateY(0) rotate(2deg); }

/* ─── Reduced motion respect ─── */
@media (prefers-reduced-motion: reduce) {
  .wow-shimmer::after,
  .wow-pulse,
  .wow-ambient::before,
  .wow-ambient::after,
  .wow-gradient-text,
  .wow-stagger > *,
  .panel.active,
  [data-screen].active,
  .wow-skeleton,
  .wow-dot-live::before {
    animation: none !important;
  }
  .wow-lift:hover,
  .wow-img-zoom:hover img,
  .wow-card-stack:hover > * {
    transform: none !important;
  }
}