/* JOHNNYTECH — capa 2150 (efectos de alto nivel, GPU-barato: transform/opacity/canvas liviano)
   Funciona sobre cualquier tema. Guardas: solo desktop con mouse real donde corresponde. */

/* ---------- Transiciones entre páginas (View Transitions API, cross-document) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-salir .18s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
::view-transition-new(root) {
  animation: vt-entrar .28s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes vt-salir { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Grano de papel global (textura de imprenta, sutilísima) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 350;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Barra de progreso de scroll ---------- */
#barra-scroll {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent, #4338ca); z-index: 200;
  transition: width .1s linear;
}

/* ---------- Cursor propio (solo si JS lo activa y hay mouse real) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.cursor-activo, html.cursor-activo body,
  html.cursor-activo a, html.cursor-activo button, html.cursor-activo .card { cursor: none; }
  html.cursor-activo input, html.cursor-activo textarea, html.cursor-activo select { cursor: auto; }
}
#cursor-punto, #cursor-anillo {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 300;
  border-radius: 50%; will-change: transform;
}
#cursor-punto {
  width: 7px; height: 7px; background: var(--accent, #4338ca);
}
#cursor-anillo {
  width: 34px; height: 34px; border: 1.5px solid var(--accent, #4338ca);
  opacity: .45; transition: width .2s, height .2s, opacity .2s;
}
#cursor-anillo.sobre {
  width: 52px; height: 52px; opacity: .9;
}

/* ---------- Titular del hero: revelado palabra por palabra con máscara ---------- */
.hero h1 .palabra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero h1 .palabra-inner {
  display: inline-block; transform: translateY(110%);
  animation: palabra-sube .75s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 60ms);
}
@keyframes palabra-sube { to { transform: translateY(0); } }
/* cuando el split está activo, el h1 entra visible (la magia la hacen las palabras) */
.hero h1.split { opacity: 1 !important; animation: none !important; }
/* Red de seguridad: con reduce-motion las palabras llegan al estado final al instante
   (la animación no se desactiva — corre en .01s — así nada queda oculto) */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .palabra-inner { animation-duration: .01s; animation-delay: 0s; }
}

/* ---------- Campo de puntos interactivo del hero ---------- */
.hero { position: relative; }
#campo-puntos {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}

/* ---------- Tilt 3D en cards y botones magnéticos (el JS setea el transform) ---------- */
@media (hover: hover) and (pointer: fine) {
  .card.tilt { transition: transform .18s cubic-bezier(0.23, 1, 0.32, 1); }
  .magnetico { transition: transform .14s cubic-bezier(0.23, 1, 0.32, 1); }
}

/* ---------- Kicker decodificándose: sin estilos extra (usa el texto) ---------- */
.kicker.decodificando { font-variant-ligatures: none; }

/* ============================================================
   IDENTIDAD DE CONTENIDOS — cada tipo con su forma (capa común a todos los temas)
   Artefactos = fichas (card normal) · Tutoriales = manuales con lomo · Bitácora = entradas de texto
   ============================================================ */

/* Tutoriales: "manuales" con lomo de acento a la izquierda + etiqueta mono */
.card.manual {
  border-left: 3px solid var(--accent, #4338ca);
  position: relative;
}
.card.manual::before {
  content: "MANUAL";
  font-family: var(--mono, monospace); font-size: 9px; letter-spacing: .18em;
  color: var(--accent, #4338ca); opacity: .75;
  position: absolute; top: 10px; right: 12px;
}

/* Bitácora: entradas de diario, sin caja */
.entradas { max-width: 720px; }
.entrada {
  padding: 22px 0;
  border-bottom: 1px solid var(--border, rgba(128, 128, 128, .25));
}
.entrada:first-child { border-top: 1px solid var(--border, rgba(128, 128, 128, .25)); }
.entrada-meta {
  display: flex; gap: 14px; align-items: baseline;
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted, #888); margin-bottom: 6px;
}
.entrada-meta time { color: var(--accent, #4338ca); }
.entrada h3 { font-size: 20px; margin-bottom: 6px; }
.entrada h3 a { color: inherit; text-decoration: none; }
.entrada h3 a:hover { color: var(--accent, #4338ca); }
.entrada p { color: var(--muted, #777); font-size: 15px; max-width: 62ch; }

/* ============================================================
   IMÁGENES + ANIMACIONES SCROLL-DRIVEN (nivel editorial)
   ============================================================ */

/* Figuras sueltas (hero, mapa) */
.figura {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border, rgba(128, 128, 128, .25));
  background: #f7f5f0;
}
.figura img { display: block; width: 100%; height: auto; }

/* Hero con imagen al lado (solo home) — la figura ocupa la columna derecha,
   el texto fluye en la izquierda y las stats cruzan todo el ancho */
@media (min-width: 920px) {
  .hero.con-figura {
    display: grid; grid-template-columns: 1.05fr .95fr;
    column-gap: 48px; align-items: center; text-align: left;
  }
  .hero.con-figura > :not(.hero-figura):not(.stats) { grid-column: 1; }
  .hero.con-figura .hero-figura { grid-column: 2; grid-row: 1 / 5; align-self: center; }
  .hero.con-figura .stats { grid-column: 1 / -1; }
  .hero.con-figura .acciones { justify-content: flex-start; }
}
@media (max-width: 919px) {
  .hero-figura { margin-top: 26px; }
}

/* Media dentro de cards (features) + zoom en hover */
.card-media {
  border-radius: 10px; overflow: hidden; margin-bottom: 6px;
  background: #f7f5f0; border: 1px solid var(--border, rgba(128, 128, 128, .18));
}
.card-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .card-media img { transition: transform .6s cubic-bezier(0.23, 1, 0.32, 1); }
  .card:hover .card-media img { transform: scale(1.06); }
}

/* Scroll-driven: las imágenes se des-recortan y asientan mientras entran al viewport.
   Solo browsers con animation-timeline (Chrome/Edge); el resto las ve normales. */
@supports (animation-timeline: view()) {
  .figura, .card-media {
    animation: figura-entra linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  @keyframes figura-entra {
    from { clip-path: inset(14% 10% 14% 10% round 14px); transform: scale(1.05); }
    to { clip-path: inset(0 0 0 0 round 14px); transform: scale(1); }
  }
  /* parallax sutil del hero mientras scrolleás.
     OJO: este shorthand PISA la animación de entrada "subir" del tema
     (que llevaba la figura de opacity 0 → 1); sin el opacity: 1 explícito
     la imagen del hero quedaba invisible en todo browser con scroll-timeline. */
  .hero.con-figura .hero-figura {
    opacity: 1;
    animation: hero-flota linear both;
    animation-timeline: scroll();
    animation-range: 0 60vh;
  }
  @keyframes hero-flota { to { transform: translateY(26px); } }
}

/* ---------- Ticker de operación (marquee mono, firma del operador) ---------- */
.ticker {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--border, rgba(128, 128, 128, .25));
  border-bottom: 1px solid var(--border, rgba(128, 128, 128, .25));
  margin: 26px 0 6px; padding: 10px 0;
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted, #888);
}
.ticker .ticker-inner {
  display: inline-block;
  animation: ticker-corre 36s linear infinite;
}
.ticker b { color: var(--accent, #4338ca); font-weight: 600; }
.ticker span { margin: 0 18px; }
@keyframes ticker-corre { to { transform: translateX(-50%); } }

/* Móvil: ticker un punto más grande para que sea legible */
@media (max-width: 640px) {
  .ticker { font-size: 12px; letter-spacing: .12em; padding: 12px 0; }
}

/* Táctil: la pista de teclado "/" del buscador no aplica sin teclado físico
   (kbd.clase para ganarle en especificidad al <style> que inyecta buscar.js) */
@media (hover: none), (pointer: coarse) {
  kbd.jt-buscar-kbd { display: none; }
}