/* =========================================================
   MEMISHKII'S — hoja de estilos
   Tema: paneles diagonales, tipografía pesada, azul/blanco
   Inspirado en menús de comando de JRPG — sin assets ni
   tipografías propietarias de ningún juego en particular.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;1,700&display=swap');

:root{
  --ink:      #060a16;  /* fondo — azul casi negro */
  --ink-2:    #10192e;  /* fondo de panel */
  --paper:    #f5f7fb;  /* blanco hielo — texto principal */
  --blue:     #2b56d6;  /* azul eléctrico — acento primario */
  --blue-deep:#142f7a;  /* azul profundo — sombras y degradados */
  --ice:      #8fd6ff;  /* azul pálido — acentos claros/etiquetas */
  --grey:     #8a92a5;
  --grey-dk:  #454b5c;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Barlow Condensed', sans-serif;
  overflow-x:hidden;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

::selection{ background:var(--blue); color:var(--paper); }

/* ---------- textura de grano ---------- */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:80;
  opacity:0.05;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ---------- línea de escaneo ambiental ---------- */
.scanline{
  position:fixed; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(143,214,255,0.55), transparent);
  z-index:70;
  pointer-events:none;
  animation: scan 7s linear infinite;
}
@keyframes scan{
  0%{ top:-2px; opacity:0; }
  5%{ opacity:1; }
  95%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}

/* ---------- texto gigante de fondo ---------- */
.bg-type{
  position:fixed;
  top:38%; left:-15%;
  font-family:'Anton', sans-serif;
  font-size:min(22vw, 260px);
  color:var(--paper);
  opacity:0.045;
  white-space:nowrap;
  transform:rotate(-9deg);
  z-index:0;
  user-select:none;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:rotate(-9deg) translateX(0); }
  to{ transform:rotate(-9deg) translateX(-3%); }
}

/* ============ header ============ */
header{
  position:relative;
  z-index:2;
  padding:2.6rem 6vw 3.2rem;
  overflow:hidden;
}
header::before{
  content:"";
  position:absolute; inset:0;
  background:var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
  z-index:-2;
}
header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:60%;
  background: linear-gradient(100deg, var(--blue-deep) 0%, var(--blue) 55%, var(--blue) 100%);
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0% 100%);
  z-index:-1;
  transform-origin:left;
  animation: sweepIn .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sweepIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.eyebrow{
  font-family:'Anton', sans-serif;
  font-size:0.78rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--paper);
  opacity:0;
  margin:0 0 0.6rem;
  animation: fadeUp .5s ease .5s both;
}

.wordmark{
  font-family:'Anton', sans-serif;
  font-size:clamp(3rem, 11vw, 7rem);
  line-height:0.85;
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.01em;
  text-shadow: 4px 4px 0 var(--ink);
  position:relative;
  display:inline-block;
  animation: glitchIn .6s steps(1) .55s both;
}
.wordmark a{ text-decoration:none; color:inherit; }
.wordmark .accent{ color:var(--ink); -webkit-text-stroke:2px var(--paper); }

@keyframes glitchIn{
  0%{   opacity:0; transform:translate(0,0); text-shadow:4px 4px 0 var(--ink); }
  15%{  opacity:1; transform:translate(-4px,1px); text-shadow:-3px 0 var(--ice), 3px 0 var(--blue-deep); }
  30%{  transform:translate(3px,-1px); text-shadow:3px 0 var(--ice), -3px 0 var(--blue-deep); }
  45%{  transform:translate(-2px,0); text-shadow:-2px 0 var(--ice), 2px 0 var(--blue-deep); }
  60%{  transform:translate(1px,0); text-shadow:1px 0 var(--ice), -1px 0 var(--blue-deep); }
  100%{ opacity:1; transform:translate(0,0); text-shadow:4px 4px 0 var(--ink); }
}

.subtag{
  font-size:1.05rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-top:0.8rem;
  max-width:34ch;
  opacity:0;
  animation: fadeUp .5s ease .85s both;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============ nav tipo menú de comando ============ */
nav.cmd{
  position:relative;
  z-index:2;
  display:flex;
  gap:0;
  padding:0 6vw;
  margin-top:-1px;
}
nav.cmd a{
  position:relative;
  flex:1;
  text-align:center;
  text-decoration:none;
  font-family:'Anton', sans-serif;
  font-size:clamp(0.85rem, 1.6vw, 1.1rem);
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--paper);
  background:var(--ink);
  padding:1rem 0.5rem;
  border-right:1px solid rgba(245,247,251,0.15);
  overflow:hidden;
  transition: color .25s ease;
  opacity:0;
  transform:translateX(30px);
  animation: slideIn .45s ease both;
}
nav.cmd a:nth-child(1){ animation-delay:0.95s; }
nav.cmd a:nth-child(2){ animation-delay:1.05s; }
nav.cmd a:nth-child(3){ animation-delay:1.15s; }
nav.cmd a:nth-child(4){ animation-delay:1.25s; }
@keyframes slideIn{ to{ opacity:1; transform:translateX(0); } }

nav.cmd a:last-child{ border-right:none; }
nav.cmd a::before{
  content:"";
  position:absolute; inset:0;
  background:var(--blue);
  transform: skewX(-18deg) translateX(-115%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
nav.cmd a:hover::before,
nav.cmd a:focus-visible::before,
nav.cmd a[aria-current="page"]::before{ transform: skewX(-18deg) translateX(0%); }
nav.cmd a:focus-visible{ outline:2px dashed var(--paper); outline-offset:-4px; }

/* ============ contenido ============ */
main{
  position:relative;
  z-index:2;
  max-width:960px;
  margin:0 auto;
  padding:4rem 6vw 6rem;
}

.section-label{
  display:flex;
  align-items:center;
  gap:0.8rem;
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:0.95rem;
  color:var(--ice);
  margin-bottom:1.6rem;
}
.section-label::after{
  content:"";
  flex:1;
  height:2px;
  background:linear-gradient(90deg, var(--blue), transparent);
  transform-origin:left;
  animation: growLine .6s ease both;
}
@keyframes growLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.grid{
  display:grid;
  gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

/* ---- panel: tarjeta con esquina cortada + reveal en scroll + brillo con el cursor ---- */
.panel{
  position:relative;
  background:
    radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(43,86,214,0.22), transparent 60%),
    linear-gradient(160deg, var(--ink-2) 0%, #0b1122 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  padding:1.6rem 1.6rem 1.9rem;
  border-left:4px solid var(--blue);
  transition: transform .25s ease, border-color .25s ease, background-position .2s ease;

  opacity:0;
  transform:translateY(28px) scale(.98);
}
.panel.is-visible{
  animation: panelIn .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes panelIn{
  from{ opacity:0; transform:translateY(28px) scale(.98); clip-path: polygon(0 0, 0 0, 0 calc(100% - 22px), 0 100%, 0 100%); }
  to{   opacity:1; transform:translateY(0) scale(1); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
}
.panel:hover, .panel:focus-within{ transform: translateX(6px); border-color: var(--ice); }
.panel::after{
  content:"";
  position:absolute; top:10px; right:10px;
  width:14px; height:14px;
  border-top:2px solid var(--ice);
  border-right:2px solid var(--ice);
  transition: width .2s ease, height .2s ease;
}
.panel:hover::after{ width:20px; height:20px; }

.date-tab{
  display:inline-flex;
  align-items:baseline;
  gap:0.35rem;
  font-family:'Anton', sans-serif;
  background:var(--blue);
  color:var(--paper);
  padding:0.15rem 0.55rem;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
  font-size:0.78rem;
  letter-spacing:0.03em;
  margin-bottom:0.9rem;
}
.date-tab b{ font-size:1rem; }

.panel h2, .panel h3{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  font-size:1.25rem;
  letter-spacing:0.01em;
  margin:0 0 0.6rem;
  line-height:1.1;
}
.panel p{ font-size:1.02rem; color:#c7cede; margin:0 0 1rem; }

a.go{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-family:'Anton', sans-serif;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  text-decoration:none;
  color:var(--ice);
}
a.go:hover{ color:var(--paper); }
a.go .tri{
  display:inline-block; width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left:7px solid currentColor;
  transition: transform .2s ease;
}
a.go:hover .tri{ transform:translateX(4px); }

/* entradas del blog: todo el panel es clicable */
.entry{ text-decoration:none; color:inherit; display:block; }

/* ---- status screen (Sobre mí) ---- */
.status{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:0.5rem 1.2rem;
  font-size:1rem;
  margin-top:1rem;
}
.status dt{
  font-family:'Anton', sans-serif;
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ice);
}
.status dd{ margin:0; color:#c7cede; }

.tag{
  display:inline-block;
  font-family:'Anton', sans-serif;
  font-size:0.7rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:var(--ice);
  color:var(--ink);
  padding:0.2rem 0.55rem;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
  margin-right:0.4rem;
}
.tags{ margin-top:1.2rem; }

/* ---- navegación prev/next dentro de una entrada ---- */
.post-nav{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:2.4rem;
  font-size:0.85rem;
}
.post-nav a{
  position:relative;
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.04em;
  text-decoration:none;
  color:var(--paper);
  background:var(--ink);
  border:2px solid var(--blue);
  padding:0.55rem 0.9rem;
  overflow:hidden;
  z-index:0;
}
.post-nav a::before{
  content:"";
  position:absolute; inset:0;
  background:var(--blue);
  transform: skewX(-14deg) translateX(-110%);
  transition: transform .3s ease;
  z-index:-1;
}
.post-nav a:hover::before{ transform:skewX(-14deg) translateX(0); }

/* ---------- pie de página ---------- */
footer{
  position:relative; z-index:2;
  text-align:center;
  padding:2.4rem 1rem 3rem;
  font-size:0.85rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--grey-dk);
  border-top:1px solid rgba(245,247,251,0.1);
}
footer b, footer a{ color:var(--ice); }
footer .blink{ animation: blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
#visits{ color:var(--paper); font-weight:700; }

/* ---------- accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .bg-type{ opacity:0.04; }
  .eyebrow, .subtag, nav.cmd a{ opacity:1; transform:none; }
  .wordmark{ text-shadow:4px 4px 0 var(--ink); }
  .panel{ opacity:1; transform:none; }
  .scanline{ display:none; }
}

a:focus-visible, button:focus-visible{
  outline: 3px dashed var(--paper);
  outline-offset: 3px;
}

@media (max-width:560px){
  nav.cmd{ flex-wrap:wrap; }
  nav.cmd a{ flex:1 1 50%; border-bottom:1px solid rgba(245,247,251,0.15); }
}