/* ================================================================
   LUXURY FX — DB Maquillaje (Fase 4)
   Animaciones elegantes y lentas: pseudo-3D CSS + parallax + Lottie
   ----------------------------------------------------------------
   Paleta respetada: #c4a882 (oro perla), #f5f3ef (superficie), #1a1614 (texto)
   Principios: respiración lenta (6-10s), nunca interrumpe la lectura,
   respeta prefers-reduced-motion.
   ================================================================ */

:root {
  --lux-gold: #c4a882;
  --lux-gold-soft: rgba(196, 168, 130, 0.35);
  --lux-gold-glow: rgba(196, 168, 130, 0.55);
}

/* ============================================================
   1. HERO PARALLAX + SHIMMER
   ============================================================ */

/* La hero-bg-image se mueve más lento que el scroll — look cinematográfico.
   Usamos translate3d con variable actualizada por luxury-fx.js. */
#hero .hero-bg-image {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0), 0) scale(var(--parallax-scale, 1));
  transition: transform 80ms linear;
}

/* Shimmer dorado que recorre el título una vez cada 8 segundos */
#hero .hero-title em {
  background: linear-gradient(
    110deg,
    var(--lux-gold) 0%,
    var(--lux-gold) 40%,
    #fff4d8 50%,
    var(--lux-gold) 60%,
    var(--lux-gold) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: luxShimmer 8s ease-in-out infinite;
}

@keyframes luxShimmer {
  0%, 100% { background-position: 200% 50%; }
  50%      { background-position: -50% 50%; }
}

/* ============================================================
   2. PARTÍCULAS DORADAS FLOTANTES (SVG inline en HTML)
   ============================================================ */

.lux-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.lux-particles .lp {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lux-gold) 0%, transparent 70%);
  opacity: 0;
  animation: luxFloat var(--dur, 14s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

.lux-particles .lp.small { width: 3px; height: 3px; }
.lux-particles .lp.big   { width: 9px; height: 9px; }

@keyframes luxFloat {
  0%   { transform: translate3d(0, 100%, 0) scale(0.4); opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { transform: translate3d(var(--x-mid, 40px), 10%, 0) scale(1); opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translate3d(var(--x-end, 80px), -120%, 0) scale(0.3); opacity: 0; }
}

/* ============================================================
   3. PÉTALOS FLOTANTES (decorativo para bio / paquetes)
   ============================================================ */

.lux-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.lux-petals .petal {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0;
  animation: petalDrift var(--dur, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

.lux-petals .petal svg {
  width: 100%;
  height: 100%;
  fill: var(--lux-gold-soft);
  filter: drop-shadow(0 2px 8px var(--lux-gold-soft));
}

@keyframes petalDrift {
  0%   { transform: translate3d(0, -30%, 0) rotate(0deg);    opacity: 0; }
  15%  { opacity: 0.7; }
  50%  { transform: translate3d(var(--x-mid, 40px), 50%, 0) rotate(180deg); }
  85%  { opacity: 0.4; }
  100% { transform: translate3d(var(--x-end, -30px), 130%, 0) rotate(360deg); opacity: 0; }
}

/* ============================================================
   4. PSEUDO-3D TILT EN FOTOS (mouse-follow)
   ============================================================ */

/* La clase `.lux-tilt` activa un tilt 3D al pasar el ratón.
   Las variables --rx, --ry se actualizan desde luxury-fx.js */
.lux-tilt {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.lux-tilt > * {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 260ms cubic-bezier(.23,1,.32,1);
  will-change: transform;
}

/* Brillo que se mueve con el mouse (efecto "glass card") */
.lux-tilt::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 244, 216, 0.18) 0%,
    transparent 40%
  );
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 3;
  border-radius: inherit;
}

.lux-tilt:hover::before { opacity: 1; }

/* ============================================================
   5. HOVER 3D EN TARJETAS DE PAQUETES Y TIMELINE
   ============================================================ */

#paquetes .package-card,
#timeline .timeline-step,
#formacion .course-mini,
#coursesLevels .course-level {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0) rotateY(0) translateZ(0);
  transition: transform 500ms cubic-bezier(.23,1,.32,1),
              box-shadow 500ms ease;
}

#paquetes .package-card:hover,
#timeline .timeline-step:hover,
#formacion .course-mini:hover,
#coursesLevels .course-level:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) translateZ(8px);
  box-shadow: 0 25px 60px -15px rgba(196, 168, 130, 0.28);
}

/* ============================================================
   6. SLOT PARA LOTTIE OPCIONAL
   ============================================================ */

.lux-lottie {
  position: relative;
  display: inline-block;
  pointer-events: none;
}

.lux-lottie lottie-player,
.lux-lottie dotlottie-player {
  display: block;
  filter: drop-shadow(0 4px 20px var(--lux-gold-glow));
}

/* Variantes de posición cuando se superpone al hero u otros elementos */
.lux-lottie--hero-tr {
  position: absolute;
  top: 6%;
  right: 4%;
  width: 180px;
  height: 180px;
  z-index: 3;
}

.lux-lottie--bio-accent {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  z-index: 2;
}

.lux-lottie--divider {
  display: block;
  margin: 0 auto;
  width: 160px;
  height: 80px;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .lux-lottie--hero-tr { width: 120px; height: 120px; top: 4%; right: 3%; }
  .lux-lottie--bio-accent { width: 100px; height: 100px; top: -20px; right: -20px; }
}

/* ============================================================
   7. SCROLL-REVEAL CON DEPTH (ya existe `.sr`, añadimos variante 3D)
   ============================================================ */

.sr.depth {
  opacity: 0;
  transform: translateY(40px) rotateX(-8deg);
  transform-origin: center top;
  transition: opacity .9s ease, transform .9s cubic-bezier(.23,1,.32,1);
}

.sr.depth.visible {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* ============================================================
   8. DIVISOR ELEGANTE ENTRE SECCIONES (línea con brillo que pulsa)
   ============================================================ */

.lux-divider {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 1px;
  margin: 40px auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--lux-gold-soft) 30%,
    var(--lux-gold) 50%,
    var(--lux-gold-soft) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: luxDividerFlow 6s ease-in-out infinite;
  position: relative;
}

.lux-divider::before,
.lux-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--lux-gold);
  box-shadow: 0 0 12px var(--lux-gold-glow);
}
.lux-divider::before { left: 45%; }
.lux-divider::after  { right: 45%; }

@keyframes luxDividerFlow {
  0%, 100% { background-position: 200% 50%; }
  50%      { background-position: -100% 50%; }
}

/* ============================================================
   9. ACCESIBILIDAD — prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #hero .hero-title em,
  .lux-particles .lp,
  .lux-petals .petal,
  .lux-divider {
    animation: none !important;
  }
  #hero .hero-bg-image {
    transform: none !important;
  }
  .lux-tilt > *,
  #paquetes .package-card,
  #timeline .timeline-step,
  #formacion .course-mini,
  #coursesLevels .course-level {
    transform: none !important;
    transition: none !important;
  }
}