/* ============================================================
   FX3D MAX — capa espectáculo para CHETEOS CHECHO236
   Estrellas 3D (canvas en JS), contadores animados, tilt
   universal, formas flotantes en el hero, borde de energía,
   entradas con profundidad al scroll y back-to-top 3D.
   ============================================================ */

/* ---------- Campo de estrellas (canvas lo crea fx3d-max.js) ---------- */
#fx3d-stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Formas flotantes 3D en el hero ---------- */
.lusive-hero-full, .premium-hero { position: relative; }
.fx3d-shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transform-style: preserve-3d;
  opacity: .5;
}
.fx3d-shape--cube {
  width: 74px;
  height: 74px;
  top: 16%;
  left: 6%;
  border: 1.5px solid rgba(var(--cl-accent), .5);
  border-radius: 14px;
  box-shadow: 0 0 34px rgba(var(--cl-accent), .25), inset 0 0 24px rgba(var(--cl-accent), .14);
  animation: fx3d-cube 14s ease-in-out infinite;
}
.fx3d-shape--cube2 {
  width: 46px;
  height: 46px;
  bottom: 20%;
  right: 8%;
  top: auto;
  left: auto;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  box-shadow: 0 0 26px rgba(var(--cl-accent), .2);
  animation: fx3d-cube 17s ease-in-out infinite reverse;
}
.fx3d-shape--ring {
  width: 150px;
  height: 150px;
  top: 10%;
  right: 14%;
  border: 1.5px dashed rgba(var(--cl-accent), .4);
  border-radius: 50%;
  animation: fx3d-ring 22s linear infinite;
}
@keyframes fx3d-cube {
  0%, 100% { transform: rotate(0deg) rotateX(18deg) translateY(0); }
  50% { transform: rotate(140deg) rotateX(-12deg) translateY(-22px); }
}
@keyframes fx3d-ring {
  from { transform: rotate(0deg) translateZ(0); }
  to { transform: rotate(360deg) translateZ(0); }
}

/* ---------- Borde de energía rotatorio en el buybox ---------- */
.checkout-card { position: relative; }
.checkout-card::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: 1;
  border-radius: 21px;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--fx-angle, 0deg),
    transparent 0deg, rgba(var(--cl-accent), .75) 60deg,
    transparent 130deg, transparent 200deg,
    rgba(255, 255, 255, .35) 250deg, transparent 320deg);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  animation: fx3d-angle 6s linear infinite;
}
@property --fx-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes fx3d-angle {
  to { --fx-angle: 360deg; }
}

/* Móvil/tablet: la animación del conic-gradient repinta la página entera cada frame */
@media (pointer: coarse), (max-width: 820px) {
  .checkout-card::after { animation-duration: 12s; }
}
@media (pointer: coarse) and (max-width: 820px) {
  .checkout-card::after { animation: none; }
}

/* ---------- Entradas con profundidad al hacer scroll ---------- */
.fx3d-pre {
  opacity: 0;
  transform: translateY(46px) translateZ(-120px) rotateX(7deg);
}
.fx3d-enter {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Tilt universal (clase puesta por JS) ---------- */
.fx3d-max-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
.fx3d-max-tilt .fx3d-pop {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.fx3d-max-tilt:hover .fx3d-pop {
  transform: translateZ(34px);
}

/* ---------- Títulos con barrido de brillo perpetuo ---------- */
.lusive-cats__title,
.section-heading h2 {
  position: relative;
}
.lusive-cats__title::after,
.section-heading h2::after {
  content: "";
  position: absolute;
  inset: -8% -4%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .09) 50%, transparent 58%);
  background-size: 260% 100%;
  animation: fx3d-shine 5.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes fx3d-shine {
  0%, 55%, 100% { background-position: 130% 0; }
  75% { background-position: -30% 0; }
}

/* ---------- Contadores: dígito con sombra azul ---------- */
.fx3d-counting {
  color: #fff;
  text-shadow: 0 0 26px rgba(var(--cl-accent), .55), 0 2px 0 rgba(0, 0, 0, .5);
}

/* ---------- Back-to-top 3D ---------- */
#fx3d-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--cl-accent), .55);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(14, 22, 38, .92), rgba(8, 12, 20, .95));
  color: var(--premium-blue-2);
  font-size: .9rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) rotateX(-30deg) scale(.9);
  pointer-events: none;
  transition: opacity .35s, transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
#fx3d-top.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#fx3d-top:hover {
  transform: translateY(-4px) translateZ(10px) rotateX(8deg);
  box-shadow: 0 18px 40px rgba(var(--cl-accent), .35);
}
#fx3d-top:active { transform: translateY(1px) scale(.95); }

/* ---------- Imágenes de producto: pop con doble sombra ---------- */
.lusive-cat:hover i { transform: translateZ(26px) scale(1.18); }
.lusive-cat i { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); display: inline-block; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #fx3d-stars, .fx3d-shape, .checkout-card::after { display: none !important; }
  .fx3d-pre { opacity: 1 !important; transform: none !important; }
  .lusive-cats__title::after, .section-heading h2::after { animation: none !important; }
  #fx3d-top { display: none !important; }
}

/* Formas 3D por ENCIMA del arte del hero (z 4 > contenido z 3) */
.fx3d-shape{ z-index: 4 !important; }

/* ---------- Móvil: sin formas flotantes ni barrido perpetuo ---------- */
@media (pointer: coarse), (max-width: 820px) {
  .fx3d-shape { display: none !important; }
  .lusive-cats__title::after,
  .section-heading h2::after { animation: none !important; content: none; }
}