/* =====================================================================
   Tema Trustify Market (estilo "Glitch Neón").
   Lo cargan todas las páginas públicas después de sus estilos propios,
   así que aquí se pisan los componentes comunes: títulos, encabezado,
   botones y tarjetas. El fondo es el original de cada página (.atmosphere).
   ===================================================================== */
:root {
  --tm-ink: #0B0C12;
  --tm-orange: #F26A21;
  --tm-purple: #8B5CF6;
  --tm-cyan: #22D3EE;
  --tm-gold: #F5B325;
  --tm-cut: 10px;
}
/* ---------- Fondo ----------
   Cada página pinta su degradado en .atmosphere::after (capa fija, z-index -1).
   Para que se vea, el body no pinta fondo propio y el color base lo pone html. */
html { background-color: #0F1119; }
body.atmosphere { background: transparent !important; }

/* ---------- Títulos: Anton (sin negrita falsa) ---------- */
.font-display { font-weight: 400 !important; font-synthesis: none; letter-spacing: .005em; }

/* ---------- Glitch de entrada (una sola vez, lo dispara tema.js) ---------- */
/* Versión completa (portada): cada línea .tm-ln con data-t lleva dos copias que se cortan en franjas. */
.tm-ln { position: relative; display: block; }
.tm-ln::before, .tm-ln::after { content: attr(data-t); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.tm-ln::before { color: var(--tm-orange); }
.tm-ln::after  { color: var(--tm-cyan); }
.tm-glitch-full .tm-ln { animation: tm-shake .7s steps(3, end) both; }
.tm-glitch-full .tm-ln::before { animation: tm-g1 .7s steps(2, end) both; }
.tm-glitch-full .tm-ln::after  { animation: tm-g2 .7s steps(2, end) both; }
@keyframes tm-g1 {
  0%   { opacity: .9; clip-path: inset(10% 0 70% 0); transform: translate(-6px, -2px); }
  20%  { opacity: .9; clip-path: inset(60% 0 10% 0); transform: translate(5px, 2px); }
  40%  { opacity: .9; clip-path: inset(30% 0 45% 0); transform: translate(-4px, 0); }
  60%  { opacity: .9; clip-path: inset(80% 0 5% 0);  transform: translate(6px, -1px); }
  80%  { opacity: .9; clip-path: inset(5% 0 85% 0);  transform: translate(-3px, 1px); }
  100% { opacity: 0; }
}
@keyframes tm-g2 {
  0%   { opacity: .9; clip-path: inset(70% 0 10% 0); transform: translate(6px, 2px); }
  20%  { opacity: .9; clip-path: inset(15% 0 65% 0); transform: translate(-5px, -2px); }
  40%  { opacity: .9; clip-path: inset(45% 0 30% 0); transform: translate(4px, 0); }
  60%  { opacity: .9; clip-path: inset(5% 0 80% 0);  transform: translate(-6px, 1px); }
  80%  { opacity: .9; clip-path: inset(85% 0 5% 0);  transform: translate(3px, -1px); }
  100% { opacity: 0; }
}
@keyframes tm-shake {
  0%   { transform: translate(-2px, 0) skewX(-4deg); text-shadow: 3px 0 var(--tm-orange), -3px 0 var(--tm-cyan); }
  50%  { transform: translate(2px, 0) skewX(3deg); }
  100% { transform: none; text-shadow: none; }
}

/* ---------- Encabezado ---------- */
header.sticky { background: rgba(11,12,18,.72) !important; border-bottom-color: rgba(255,255,255,.06) !important; backdrop-filter: blur(14px); }
header nav a:has(> .nav-flip) { position: relative; }
header nav a:has(> .nav-flip)::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 2px; height: 2px;
  background: var(--tm-orange); box-shadow: 0 0 10px var(--tm-orange);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
header nav a:has(> .nav-flip):hover::after,
header nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Botones: esquinas cortadas + destello al pasar el mouse ---------- */
.btn-glow, .btn-red {
  border-radius: 0 !important; overflow: hidden;
  clip-path: polygon(var(--tm-cut) 0, 100% 0, 100% calc(100% - var(--tm-cut)), calc(100% - var(--tm-cut)) 100%, 0 100%, 0 var(--tm-cut));
}
.btn-glow::before { display: none !important; }
.btn-glow::after, .btn-red::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-120%) skewX(-20deg);
}
.btn-red { position: relative; }
.btn-glow:hover::after, .btn-red:hover::after { animation: tm-shine .7s ease; }
@keyframes tm-shine { to { transform: translateX(320%) skewX(-20deg); } }

/* ---------- Tarjetas y etiquetas: más angulares ---------- */
.notch-tr, .notch-bl, .notch-both { border-radius: 4px !important; }
.tag { border-radius: 2px !important; }

/* ---------- Detalles ---------- */
::selection { background: var(--tm-orange); color: var(--tm-ink); }
html { scrollbar-color: #2C3145 var(--tm-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tm-ink); }
::-webkit-scrollbar-thumb { background: #2C3145; border: 2px solid var(--tm-ink); }
::-webkit-scrollbar-thumb:hover { background: var(--tm-orange); }

/* ---------- Cinta de skins en movimiento (portada) ---------- */
.tm-belt {
  position: relative; z-index: 2; padding: 22px 0; overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(90deg, rgba(242,106,33,.06), rgba(139,92,246,.06));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tm-belt.rev { margin-top: -10px; border-top: 0; transform: skewY(-1.2deg); background: rgba(7,8,12,.6); }
.tm-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: tm-marquee 45s linear infinite; }
.tm-belt.rev .tm-track { animation-direction: reverse; animation-duration: 60s; }
.tm-belt:hover .tm-track { animation-play-state: paused; }
@keyframes tm-marquee { to { transform: translateX(-50%); } }
.tm-skin { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.tm-skin img { height: 60px; width: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); transition: transform .4s; }
.tm-skin:hover img { transform: scale(1.15) rotate(-4deg); }
.tm-skin span { font-family: Anton, sans-serif; text-transform: uppercase; font-size: 22px; color: rgba(238,240,246,.25); white-space: nowrap; }
.tm-word { font-family: Anton, sans-serif; font-size: 40px; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(242,106,33,.6); }
.tm-word.f { color: var(--tm-orange); -webkit-text-stroke: 0; }

/* ---------- Tarjeta holográfica (portada: cuenta más cara) ---------- */
@property --tm-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.tm-holo-wrap { perspective: 1200px; }
.tm-holo { position: relative; display: block; width: 340px; border-radius: 16px; padding: 2px; transform-style: preserve-3d; animation: tm-holo-float 9s ease-in-out infinite; transition: transform .15s; }
@keyframes tm-holo-float { 0%,100% { transform: rotateY(-7deg) rotateX(3deg) translateY(0); } 50% { transform: rotateY(7deg) rotateX(-3deg) translateY(-12px); } }
.tm-holo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from var(--tm-a), var(--tm-orange), var(--tm-gold), var(--tm-cyan), var(--tm-purple), var(--tm-orange)); animation: tm-spin 5s linear infinite; }
.tm-holo::after { content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 40px; background: conic-gradient(from var(--tm-a), var(--tm-orange), var(--tm-purple), var(--tm-cyan), var(--tm-orange)); filter: blur(40px); opacity: .4; }
@keyframes tm-spin { to { --tm-a: 360deg; } }
.tm-holo-in { position: relative; border-radius: 14px; overflow: hidden; background: #151824; }
.tm-holo-img { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: #0d0f17; }
.tm-holo-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 48%, rgba(139,92,246,.22) 52%, transparent 70%); background-size: 250% 250%; mix-blend-mode: overlay; animation: tm-sheen 4s linear infinite; }
@keyframes tm-sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .tm-glitch-full .tm-ln, .tm-glitch-full .tm-ln::before, .tm-glitch-full .tm-ln::after,
  .tm-track, .tm-holo, .tm-holo::before, .tm-holo::after, .tm-holo-img::after { animation: none !important; }
}

/* ---------- Vitrina 3D (buscador de skins) ----------
   La rotación y el tamaño del anillo los maneja el JS de buscar-skin.html.
   Cada tarjeta se ubica con --a (ángulo), --r (radio), --x y --b (podio),
   así que pasar de anillo a podio es una sola transición. */
.tm-stage { position: relative; height: 400px; perspective: 1400px; display: grid; place-items: center; transition: background .8s ease; }
.tm-stage::after { content: ""; position: absolute; bottom: 24px; left: 50%; width: 60%; height: 60px; translate: -50% 0; background: radial-gradient(closest-side, rgba(242,106,33,.35), transparent); filter: blur(10px); pointer-events: none; transition: width .8s, opacity .8s; }
.tm-stage.foco { background: radial-gradient(38% 70% at 50% 45%, rgba(242,106,33,.14), transparent 70%); }
.tm-stage.foco::after { width: 40%; opacity: 1.4; }
/* Pulso de luz al cambiar de modo */
.tm-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 2px solid #F26A21; box-shadow: 0 0 30px #F26A21, inset 0 0 20px #F26A21; opacity: 0; pointer-events: none; }
.tm-stage.flash::before { animation: tm-flash .9s ease-out; }
@keyframes tm-flash { 0% { opacity: .95; transform: scale(.2); } 100% { opacity: 0; transform: scale(16); } }

.tm-ring { position: relative; width: var(--w, 250px); height: calc(var(--w, 250px) * .62); transform-style: preserve-3d; transition: width .6s, height .6s; }
.tm-slot {
  --a: 0deg; --r: 0px; --x: 0px; --b: 0deg;
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 0 18px; cursor: pointer;
  transform: rotateY(var(--a)) translateZ(var(--r)) translateX(var(--x)) rotateY(var(--b));
  border-radius: 14px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.01));
  transition: transform .9s cubic-bezier(.2,.9,.25,1), opacity .45s ease, scale .45s ease, translate .45s ease, border-color .2s, background .2s, box-shadow .3s;
}
.tm-slot img { width: 84%; max-height: 70%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); transition: transform .3s; }
.tm-slot:hover { border-color: rgba(242,106,33,.7); }
.tm-slot:hover img { transform: scale(1.08); }
.tm-slot .n { position: absolute; bottom: 8px; left: 8px; right: 8px; text-align: center; font-family: Oswald, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8A93AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-slot .ck { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px; border: 1px solid #3A4058; background: rgba(15,17,25,.7); color: transparent; transition: background .2s, border-color .2s; }
.tm-slot[aria-pressed="true"] { border-color: #F26A21; background: linear-gradient(160deg, rgba(242,106,33,.22), rgba(242,106,33,.04)); box-shadow: 0 0 30px -8px rgba(242,106,33,.7); }
.tm-slot[aria-pressed="true"] .n { color: #EEF0F6; }
.tm-slot[aria-pressed="true"] .ck { border-color: #F26A21; background: #F26A21; color: #0F1119; }
/* En modo "solo las mías", la X indica que tocarla la quita */
.tm-stage.foco .tm-slot:hover .ck { background: #0F1119; border-color: #F26A21; color: #F26A21; }
/* Entrar y salir */
.tm-slot.entra { animation: tm-entra .8s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes tm-entra { 0% { opacity: 0; scale: .2; filter: brightness(3); } 60% { opacity: 1; filter: brightness(1.6); } 100% { scale: 1; filter: none; } }
.tm-slot.sale { opacity: 0; scale: .4; translate: 0 -80px; pointer-events: none; }
/* Podio: las elegidas flotan de frente */
.tm-ring.podio .tm-slot img { animation: tm-bob 4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -1.3s); }
@keyframes tm-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.tm-ring.podio .tm-slot:hover img { animation-play-state: paused; }

@media (max-width: 640px) { .tm-stage { height: 290px; } .tm-slot .n { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .tm-slot, .tm-slot img, .tm-stage::before { animation: none !important; transition: none !important; } }

/* Inventario dentro de la tarjeta holográfica: cada foto, quieta y ampliada, encuadrada
   arriba a la izquierda (ahí van los cuchillos y las skins más caras). Las fotos cambian
   con un fundido suave (lo maneja index.html). */
.tm-inv { position: absolute; inset: 0; overflow: hidden; }
.tm-inv img { position: absolute; left: 0; top: 0; height: 125%; width: auto; max-width: none; opacity: 0; transition: opacity .9s ease; }
.tm-inv img.on { opacity: 1; }