/* CJTA Lubricantes — Efectos: marquees, blobs, ruido, cursor, magnético, morph */

/* ========== MARQUEE ========== */
/* La regla base .marquee vive en la sección "MARQUEE — DUAL" más abajo;
   aquí solo quedan el track, los puntos y los keyframes. */
.marquee-track{
  display:flex;align-items:center;gap:36px;
  white-space:nowrap;
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:500;
  font-size:22px;
  letter-spacing:.02em;
  animation:marquee 40s linear infinite;
  width:max-content;
}
.mq-dot{
  color:var(--red);
  font-size:14px;
  font-style:normal;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ========== ANIMATED BLOBS ========== */
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  opacity:.4;
  pointer-events:none;
  will-change:transform;
}
.blob-gold{
  width:520px;height:520px;
  top:-120px;right:-120px;
  background:radial-gradient(circle, rgba(201,160,71,.6) 0%, rgba(201,160,71,0) 70%);
  animation:blobDrift1 22s ease-in-out infinite;
}
.blob-red{
  width:420px;height:420px;
  bottom:-100px;left:-100px;
  background:radial-gradient(circle, rgba(192,57,43,.5) 0%, rgba(192,57,43,0) 70%);
  animation:blobDrift2 28s ease-in-out infinite;
}
@keyframes blobDrift1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-80px,60px) scale(1.1)}
  66%{transform:translate(40px,-30px) scale(.95)}
}
@keyframes blobDrift2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(80px,-60px) scale(1.15)}
}

/* ========== NOISE OVERLAY ========== */
.noise{
  position:fixed;inset:0;z-index:1;
  pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ========== HERO BOTTLES — floating ========== */
.hv-b1{animation:floatBottle1 5s ease-in-out infinite}
.hv-b2{animation:floatBottle2 6s ease-in-out infinite}
.hv-b3{animation:floatBottle3 7s ease-in-out infinite}
@keyframes floatBottle1{
  0%,100%{transform:translate(var(--px,0px), calc(var(--py,20px))) }
  50%   {transform:translate(var(--px,0px), calc(var(--py,20px) - 8px)) }
}
@keyframes floatBottle2{
  0%,100%{transform:translate(calc(var(--px,-150px)), calc(var(--py,30px))) rotate(-6deg)}
  50%   {transform:translate(calc(var(--px,-150px)), calc(var(--py,30px) - 6px)) rotate(-6deg)}
}
@keyframes floatBottle3{
  0%,100%{transform:translate(calc(var(--px,150px)), calc(var(--py,30px))) rotate(6deg)}
  50%   {transform:translate(calc(var(--px,150px)), calc(var(--py,30px) - 10px)) rotate(6deg)}
}

/* ========== MARQUEE — DUAL ========== */
.marquee{
  background:var(--navy-deep);
  color:var(--gold);
  overflow:hidden;
  border-top:1px solid rgba(201,160,71,.1);
  border-bottom:1px solid rgba(201,160,71,.1);
  padding:0;
  position:relative;
  z-index:1;
}
.marquee-row{
  overflow:hidden;
  padding:18px 0;
  border-bottom:1px dashed rgba(201,160,71,.08);
}
.marquee-row:last-child{border-bottom:none;padding:14px 0}
.marquee-row .marquee-track{
  animation-duration:42s;
}
.marquee-row--rtl .marquee-track{
  animation-direction:reverse;
  font-size:14px;
  font-family:var(--ff-body);
  font-style:normal;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(201,160,71,.7);
}
.marquee-row--rtl .mq-dot{color:rgba(201,160,71,.4);font-size:10px}
.mq-thin{font-weight:500}

/* ========== COTIZAR LIQUID MORPH ========== */
.nav-cta .btn-red{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.nav-cta .btn-red::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--red-deep);
  clip-path:circle(0% at 50% 50%);
  transition:clip-path .5s cubic-bezier(.22,1,.36,1);
  z-index:-1;
}
.nav-cta .btn-red:hover::before{clip-path:circle(140% at 50% 50%)}

/* ========== PREFERENCIA DE MOVIMIENTO REDUCIDO ========== */
/* Respeta prefers-reduced-motion (CLAUDE.md §3 y §8): neutraliza toda
   animación y transición, anula los transforms que el JS escribe inline
   (botones magnéticos, parallax) y oculta el cursor custom restaurando
   el nativo. Los elementos siguen visibles: solo se detiene el
   movimiento. .noise y .hero-glow son estáticos, no se tocan. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* El JS escribe transform inline en estos elementos; !important lo
     anula aunque el handler siga calculando. */
  .hero-visual {
    transform: none !important;
  }

}