/* ============================================================
   CAPA 3D — CHETEOS CHECHO236
   Tilt con ratón, profundidad parallax, botones 3D, paneles
   flotantes, holo-glow y reveals. Respeta reduced-motion.
   ============================================================ */

/* ---------- Escenario global: perspectiva ---------- */
.premium-section,
.components > .component,
.premium-hero,
header.component { perspective: 1400px; perspective-origin: 50% 20%; }

.fx3d { transform-style: preserve-3d; will-change: transform; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.fx3d.is-tilting { transition: transform .08s linear; }
.fx3d-layer { transform: translateZ(46px); transform-style: preserve-3d; }
.fx3d-layer-deep { transform: translateZ(90px); }

/* Glow que sigue al cursor dentro de la carta */
.fx3d-glare {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .35s ease; border-radius: inherit;
  background: radial-gradient(560px circle at var(--fx-mx, 50%) var(--fx-my, 50%),
    rgba(var(--cl-accent), .16), transparent 42%);
  mix-blend-mode: screen;
}
.fx3d:hover .fx3d-glare, .fx3d.is-tilting .fx3d-glare { opacity: 1; }

/* Borde luminoso que se enciende al pasar el ratón */
.fx3d-edge {
  position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--fx-mx, 50%) var(--fx-my, 50%),
    rgba(var(--cl-accent), .55), transparent 45%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.fx3d:hover .fx3d-edge { opacity: 1; }

/* Sombra proyectada viva */
.fx3d-shadow { position: relative; }
.fx3d-shadow:after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 34px;
  z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
  filter: blur(8px); opacity: .5; transform: translateZ(-80px) scaleY(.75);
  transition: opacity .3s ease, transform .3s ease;
}
.fx3d-shadow:hover:after { opacity: .85; transform: translateZ(-80px) scaleY(.62) scaleX(1.03); }

/* ---------- Objetivos: cartas, paneles, ventanas ---------- */
.premium-product-card,
.feature-card,
.showcase-window,
.hero-terminal,
.stats-panel,
.discord-panel,
.purchase-timeline,
.sa-status-card,
.review-marquee-card,
.faq-premium__item,
.payment-pill,
.trust-badge,
.support-portal-card,
.support-discord-card,
.sa-why-card,
.feedback-card,
.blog-post-card,
.sa-dashboard-window,
.portal-sim,
.discord-sim,
.premium-footer__col,
footer.component { transform-style: preserve-3d; }

/* ---------- BOTONES 3D: elevación + caras + presión ---------- */
.premium-button,
button[type="button"],
button[type="submit"],
a[class*="button"],
.checkout-submit,
.sa-page-product-buy,
.sim-primary,
.sa-navbar-cart,
.premium-nav__cart {
  position: relative; transform-style: preserve-3d;
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, filter .22s ease;
}
.premium-button:hover,
.checkout-submit:hover,
.sa-page-product-buy:hover {
  transform: translateY(-3px) translateZ(24px) rotateX(7deg);
  filter: brightness(1.07) saturate(1.06);
}
.premium-button:active,
.checkout-submit:active,
.sa-page-product-buy:active,
button[type="button"]:active {
  transform: translateY(1px) translateZ(2px) rotateX(-4deg) scale(.985);
  transition-duration: .06s;
}
.premium-button--primary { box-shadow: 0 10px 26px rgba(var(--cl-accent), .3), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .22); }
.premium-button--primary:hover { box-shadow: 0 22px 48px rgba(var(--cl-accent), .45), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .22); }
.premium-button--ghost:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12); }

/* ---------- ICONOS FLOTANTES 3D ---------- */
.feature-card__preview > i,
.timeline-icon,
.discord-panel__icon,
.hero-orbit,
.stats-panel__grid i,
.sa-why-card i[class*="fa-"] {
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s ease;
}
.feature-card:hover .feature-card__preview > i { transform: translateZ(60px) rotateX(12deg) rotateY(-12deg) scale(1.08); box-shadow: 0 0 0 12px rgba(var(--cl-accent), .08), 0 30px 60px rgba(var(--cl-accent), .3); }
.timeline-icon { animation: fx3d-float 4.5s ease-in-out infinite; }
.purchase-timeline article:nth-child(2) .timeline-icon { animation-delay: .4s; }
.purchase-timeline article:nth-child(3) .timeline-icon { animation-delay: .8s; }
.purchase-timeline article:nth-child(4) .timeline-icon { animation-delay: 1.2s; }
.purchase-timeline article:nth-child(5) .timeline-icon { animation-delay: 1.6s; }
.purchase-timeline article:hover .timeline-icon { animation-play-state: paused; transform: translateZ(40px) scale(1.12) rotateY(14deg); }
@keyframes fx3d-float {
  0%, 100% { transform: translateZ(0) translateY(0) rotateZ(0); }
  50% { transform: translateZ(26px) translateY(-9px) rotateZ(2.4deg); }
}
.discord-panel:hover .discord-panel__icon { transform: translateZ(55px) rotateY(16deg) rotateX(8deg) scale(1.05); }

/* ---------- IMÁGENES con pop 3D ---------- */
.premium-product-card img,
.blog-post-card img,
.feedback-card img { transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s; transform-style: preserve-3d; }
.premium-product-card:hover img { transform: translateZ(50px) scale(1.05); filter: saturate(1.15) brightness(1.05); }

/* ---------- HERO: capas con parallax ---------- */
.premium-hero__content { animation: fx3d-hero-in 1s cubic-bezier(.2, .8, .2, 1) both; }
.premium-hero__title { transform-style: preserve-3d; }
.premium-hero__title em { display: inline-block; animation: fx3d-title-sweep 7s ease-in-out infinite; text-shadow: 0 18px 44px rgba(var(--cl-accent), .35), 0 4px 0 rgba(0, 0, 0, .55); }
@keyframes fx3d-hero-in {
  from { opacity: 0; transform: translateY(48px) translateZ(-120px) rotateX(10deg); }
  to { opacity: 1; transform: none; }
}
@keyframes fx3d-title-sweep {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); transform: translateZ(0); }
  50% { filter: hue-rotate(-12deg) brightness(1.14); transform: translateZ(18px); }
}
.premium-hero__glow { animation: fx3d-glow-drift 12s ease-in-out infinite alternate; }
@keyframes fx3d-glow-drift {
  from { transform: translate3d(0, 0, -60px) scale(1); opacity: .85; }
  to { transform: translate3d(46px, -32px, 30px) scale(1.13); opacity: 1; }
}

/* ---------- Ventanas (terminal/showcase): apertura 3D ---------- */
.hero-terminal,
.showcase-window,
.portal-sim,
.discord-sim,
.sa-dashboard-window { animation: fx3d-window-in 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .25s; }
@keyframes fx3d-window-in {
  from { opacity: 0; transform: rotateY(-16deg) rotateX(10deg) translateZ(-140px); }
  to { opacity: 1; transform: none; }
}
.window-bar b { text-shadow: 0 0 12px rgba(var(--cl-accent), .6); }

/* ---------- CARTAS product: tilt base suave al hover ---------- */
.premium-product-card { transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s; }
.premium-product-card:hover { transform: translateY(-10px) translateZ(46px) rotateX(3.5deg); box-shadow: 0 34px 70px rgba(0, 0, 0, .5), 0 18px 44px rgba(var(--cl-accent), .18); }
.feature-card:hover { transform: translateY(-9px) translateZ(40px) rotateX(3deg); box-shadow: 0 30px 66px rgba(0, 0, 0, .46), 0 14px 40px rgba(var(--cl-accent), .15); }
.review-marquee-card:hover,
.sa-status-card:hover,
.faq-premium__item:hover { transform: translateY(-7px) translateZ(34px) rotateX(2.6deg); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Secciones: reveal 3D al hacer scroll ---------- */
.reveal-on-scroll { transform: translateY(34px) translateZ(-90px) rotateX(5deg); transform-origin: 50% 100%; }
.reveal-on-scroll.is-visible { transform: none; }

/* ---------- PAYMENT pills: cascada ---------- */
.payment-pill { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.payment-pill:hover { transform: translateZ(40px) rotateY(-9deg) scale(1.04); box-shadow: 0 20px 44px rgba(var(--cl-accent), .22), 0 10px 26px rgba(0, 0, 0, .35); }

/* ---------- NAV: enlaces con profundidad ---------- */
header.component nav a,
header.component nav button { transform-style: preserve-3d; }
header.component nav a:hover { transform: translateZ(18px) translateY(-2px); }
.premium-nav__cart:hover { transform: translateZ(26px) rotateY(-10deg) scale(1.08); box-shadow: 0 14px 34px rgba(var(--cl-accent), .35); }

/* ---------- FOOTER: columnas en escena ---------- */
footer.component { perspective: 1000px; }
footer a:hover { transform: translateZ(20px) translateX(3px); }

/* ---------- Holo-grid animado de fondo (muy sutil) ---------- */
body:after {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, rgb(var(--cl-accent)) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, rgb(var(--cl-accent)) 7%, transparent) 1px, transparent 1px);
  background-size: 70px 70px;
  transform: perspective(760px) rotateX(58deg) translateY(var(--fx-grid-y, 0));
  transform-origin: 50% 100%;
  mask-image: radial-gradient(ellipse 62% 58% at 50% 96%, #000 22%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 96%, #000 22%, transparent 74%);
  animation: fx3d-grid 14s linear infinite;
  opacity: .5;
}
@keyframes fx3d-grid {
  from { --fx-grid-y: 0px; background-position: 0 0; }
  to { --fx-grid-y: 70px; background-position: 0 70px; }
}

/* ---------- Modal 3D ---------- */
[x-cloak].product-search-modal,
.product-search-modal,
.group-modal,
[x-show="searchOpen"],
[x-show="filtersModalOpen"] { transform-style: preserve-3d; }
.product-search-modal,
.group-modal { animation: fx3d-modal-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fx3d-modal-in {
  from { opacity: 0; transform: translateY(36px) translateZ(-120px) rotateX(8deg) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* ---------- Toasts con entrada 3D ---------- */
.toast, [class*="toast"] { transform-style: preserve-3d; }
[class*="toast"] { animation: fx3d-toast-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes fx3d-toast-in {
  from { opacity: 0; transform: translateX(70px) translateZ(-60px) rotateY(-14deg); }
  to { opacity: 1; transform: none; }
}

/* ---------- Scrollbar 3D ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: rgb(var(--cl-background)); }
::-webkit-scrollbar-thumb { border-radius: 8px; background: linear-gradient(180deg, var(--premium-blue-2), var(--premium-blue)); border: 2px solid rgb(var(--cl-background)); box-shadow: inset 0 0 6px rgba(0, 0, 0, .4); }
::-webkit-scrollbar-thumb:hover { background: var(--premium-blue-2); box-shadow: 0 0 14px rgba(var(--cl-accent), .5); }

/* ---------- Cuidado con reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx3d, .fx3d-layer, .fx3d-layer-deep { transform: none !important; transition: none !important; }
  .timeline-icon, .premium-hero__title em, .premium-hero__glow,
  .hero-terminal, .showcase-window, .portal-sim, .discord-sim,
  .sa-dashboard-window, .product-search-modal, .group-modal,
  [class*="toast"], body:after { animation: none !important; }
}