/* ============================================================
   FX3D ULTRA — capa extra de profundidad para CHETEOS CHECHO236
   Titulares extruidos, palabras que entran en 3D, botones
   magnéticos tipo keycap, paneles con sombra que respira,
   anillos CTA, spotlight del cursor y barra de progreso.
   Todo decorativo: no toca datos ni funcionalidad.
   ============================================================ */

/* ---------- Titulares: extrusión 3D permanente ---------- */
.section-heading h2,
.stats-panel__intro h2,
.premium-hero__title,
.feedback-hero h1,
.product-review-carousel__heading h2,
.product-description-card h2,
.checkout-card h2,
.product-page-title {
  transform-style: preserve-3d;
  text-shadow:
    0 1px 0 color-mix(in srgb, rgb(var(--cl-accent)) 55%, #000),
    0 2px 0 color-mix(in srgb, rgb(var(--cl-accent)) 38%, #000),
    0 3px 0 color-mix(in srgb, rgb(var(--cl-accent)) 24%, #000),
    0 4px 0 rgba(0, 0, 0, .55),
    0 6px 2px rgba(0, 0, 0, .38),
    0 9px 6px rgba(0, 0, 0, .3),
    0 16px 22px rgba(var(--cl-accent), .18);
}

/* El titular entra palabra a palabra en 3D (clases puestas por fx3d-ultra.js) */
.fx3d-word {
  display: inline-block;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(.55em) translateZ(-160px) rotateX(-55deg);
  animation: fx3d-word-in .72s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--fx-word-i, 0) * 85ms + 60ms);
}
@keyframes fx3d-word-in {
  60% { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 1; transform: none; filter: brightness(1); }
}

/* Subtítulos de sección: flotación suave perpetua */
.section-heading > p:last-child,
.feedback-hero > p:nth-of-type(2) {
  animation: fx3d-soft-float 7.5s ease-in-out infinite;
}
@keyframes fx3d-soft-float {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50% { transform: translateY(-3px) translateZ(10px); }
}

/* ---------- BOTONES: keycap 3D magnético ---------- */
.premium-button,
.checkout-submit,
.sa-page-product-buy,
.checkout-card button[type="button"],
.checkout-card button[type="submit"] {
  --fx-lift: 0px;
  transform: translateZ(var(--fx-lift)) translateY(calc(var(--fx-lift) * -.22));
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, filter .25s ease;
}
.premium-button:hover,
.checkout-submit:hover,
.sa-page-product-buy:hover,
.checkout-card button[type="button"]:hover,
.checkout-card button[type="submit"]:hover {
  --fx-lift: 7px;
  filter: brightness(1.08) saturate(1.12);
}
.premium-button:active,
.checkout-submit:active,
.sa-page-product-buy:active,
.checkout-card button[type="button"]:active,
.checkout-card button[type="submit"]:active {
  --fx-lift: -2px;
  filter: brightness(.94);
  transition-duration: .06s;
}
/* Borde superior iluminado tipo tecla mecánica */
.premium-button--primary,
.checkout-submit,
.checkout-card button[type="submit"] {
  position: relative;
}
.premium-button--primary::before,
.checkout-submit::before,
.checkout-card button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;
  border-radius: inherit;
  border-bottom-left-radius: 40% 18%;
  border-bottom-right-radius: 40% 18%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0));
  opacity: .85;
  mix-blend-mode: screen;
}
/* Anillo pulsante en el CTA principal del hero y en "Añadir al Carrito" */
.premium-hero__actions .premium-button--primary,
.checkout-card button[type="button"][class*="bg-accent"] {
  animation: fx3d-cta-ring 3.2s ease-in-out infinite;
}
@keyframes fx3d-cta-ring {
  0%, 100% { box-shadow: 0 12px 32px rgba(var(--cl-accent), .3), 0 0 0 0 rgba(var(--cl-accent), .38); }
  50% { box-shadow: 0 18px 46px rgba(var(--cl-accent), .46), 0 0 0 13px rgba(var(--cl-accent), 0); }
}

/* Botones fantasma: barrido de luz */
.premium-button--ghost {
  overflow: hidden;
  position: relative;
}
.premium-button--ghost::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.premium-button--ghost:hover::after { left: 135%; }

/* ---------- PANELES: flotación con sombra que respira ---------- */
.premium-product-card,
.feature-card,
.showcase-window,
.hero-terminal,
.stats-panel,
.discord-panel,
.review-marquee-card,
.sa-status-card {
  animation: fx3d-panel-breathe 6.5s ease-in-out infinite;
}
.premium-product-card:nth-child(2n),
.feature-card:nth-child(2n) { animation-delay: -1.6s; }
.premium-product-card:nth-child(3n),
.feature-card:nth-child(3n) { animation-delay: -3.2s; }
.premium-product-card:nth-child(4n),
.feature-card:nth-child(4n) { animation-delay: -4.8s; }
@keyframes fx3d-panel-breathe {
  0%, 100% { box-shadow: 0 16px 38px rgba(0, 0, 0, .3), 0 0 0 rgba(var(--cl-accent), 0); }
  50% { box-shadow: 0 26px 58px rgba(0, 0, 0, .42), 0 0 26px rgba(var(--cl-accent), .13); }
}

/* Tiles del flujo de compra: entrada con flip 3D en cascada */
.purchase-flow__step {
  opacity: 0;
  transform: perspective(900px) rotateY(-32deg) translateX(-46px) translateZ(-70px);
  animation: fx3d-tile-flip .85s cubic-bezier(.2, .8, .2, 1) forwards;
}
.purchase-flow__step:nth-child(1) { animation-delay: .05s; }
.purchase-flow__step:nth-child(2) { animation-delay: .17s; }
.purchase-flow__step:nth-child(3) { animation-delay: .29s; animation-name: fx3d-tile-flip-r; }
.purchase-flow__step:nth-child(4) { animation-delay: .41s; animation-name: fx3d-tile-flip-r; }
@keyframes fx3d-tile-flip {
  to { opacity: 1; transform: none; }
}
@keyframes fx3d-tile-flip-r {
  from { opacity: 0; transform: perspective(900px) rotateY(32deg) translateX(46px) translateZ(-70px); }
  to { opacity: 1; transform: none; }
}

/* Productos: entrada escalonada con profundidad (cards en grilla) */
.products-grid > *,
.premium-catalog__grid > *,
[class*="catalog"] > .premium-product-card {
  opacity: 0;
  transform: translateY(42px) translateZ(-110px) rotateX(7deg);
  animation: fx3d-card-in .8s cubic-bezier(.2, .8, .2, 1) forwards;
}
.products-grid > *:nth-child(1) { animation-delay: .04s; }
.products-grid > *:nth-child(2) { animation-delay: .1s; }
.products-grid > *:nth-child(3) { animation-delay: .16s; }
.products-grid > *:nth-child(4) { animation-delay: .22s; }
.products-grid > *:nth-child(5) { animation-delay: .28s; }
.products-grid > *:nth-child(6) { animation-delay: .34s; }
.products-grid > *:nth-child(7) { animation-delay: .4s; }
.products-grid > *:nth-child(8) { animation-delay: .46s; }
.products-grid > *:nth-child(9) { animation-delay: .52s; }
@keyframes fx3d-card-in {
  to { opacity: 1; transform: none; }
}

/* ---------- SPOTLIGHT global del cursor (velo radial) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--fx-cx, 50%) var(--fx-cy, 40%),
    rgba(var(--cl-accent), .05), transparent 46%);
  mix-blend-mode: screen;
  opacity: var(--fx-spot, 0);
  transition: opacity .5s ease;
}
/* La malla del fondo queda por debajo del spotlight */
body::after { z-index: 0; }

/* ---------- Barra de progreso de scroll ---------- */
#fx3d-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(90deg, var(--premium-blue), var(--premium-blue-2));
  box-shadow: 0 0 14px rgba(var(--cl-accent), .7);
  transform-origin: 0 50%;
  transform: scaleX(var(--fx-progress, 0));
}

/* ---------- Contadores grandes con resplandor latido ---------- */
.stats-panel__grid strong,
.sa-page-feedback-score strong,
.store-stats__value {
  animation: fx3d-stat-pulse 4.2s ease-in-out infinite;
}
@keyframes fx3d-stat-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(var(--cl-accent), 0); }
  50% { text-shadow: 0 0 22px rgba(var(--cl-accent), .55); }
}

/* ---------- Navbar con cristal más profundo ---------- */
header.component {
  box-shadow: 0 12px 44px rgba(0, 0, 0, .42), inset 0 -14px 26px rgba(0, 0, 0, .22);
}

/* ---------- Reduced motion: apaga TODO lo decorativo ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx3d-word,
  .purchase-flow__step,
  .products-grid > *,
  .premium-catalog__grid > *,
  [class*="catalog"] > .premium-product-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .section-heading > p:last-child,
  .premium-hero__actions .premium-button--primary,
  .stats-panel__grid strong,
  .premium-product-card,
  .feature-card,
  .showcase-window,
  .hero-terminal,
  .stats-panel,
  .discord-panel,
  .review-marquee-card,
  .sa-status-card,
  .section-heading h2,
  .stats-panel__intro h2,
  .premium-hero__title,
  .feedback-hero h1,
  .product-review-carousel__heading h2 {
    animation: none !important;
  }
  body::before,
  #fx3d-progress { display: none !important; }
}