/* ══════════════════════════════════════════════
   KE 2.0 — ARCHIVO KINÉTICO
   ══════════════════════════════════════════════ */

/* ── FICHAS ──────────────────────────────────────
   `--accent` es el acento en primer plano y `--accent-fill` el acento como
   fondo, con `--on-accent` para el texto que va encima.
   ──────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --ink:#0a0a0a;                    /* fondo */
  --paper:#f2f0eb;                  /* texto */
  --grey:#6c6a64;
  --accent:#e8ff00;
  --accent-fill:#e8ff00;
  --on-accent:#0a0a0a;
  --blood:#ff2f00;
  --line:rgba(242,240,235,.16);
  --surface:#151513;                /* fondo de las piezas */
  --veil:rgba(10,10,10,.94);        /* fondo del visor */
  --halo:10,10,10;                  /* halo tras la tipografía (RGB) */
  --scan:rgba(0,0,0,.32);
  --grain:.28;

  /* atenuación de los elementos secundarios del HUD */
  --hud-dim:.45;
  --hud-soft:rgba(255,255,255,.55);
  --hud-faint:rgba(255,255,255,.5);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --hud:clamp(9px,.72vw,11px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none!important;}

html,body{
  height:100%;
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Mono',monospace;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

body{cursor:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:none;}
/* las obras no se arrastran ni se seleccionan (disuasión, no seguridad) */
img{
  display:block;max-width:100%;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
}

::selection{background:var(--accent-fill);color:var(--on-accent);}

/* ── GRANO / SCANLINES ───────────────────────── */
.fx-grain{
  /* El desborde justo para que el vaivén no descubra los bordes. Estaba en
     -150%, es decir una capa de 4x4 = 16 veces la pantalla, mezclada con
     `overlay` en cada fotograma: era la mayor fuente de tirones. */
  position:fixed;inset:-25%;
  z-index:9000;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}    16%{transform:translate(-4%,-2.5%)}
  33%{transform:translate(2.5%,-4.5%)} 50%{transform:translate(-2.5%,3%)}
  66%{transform:translate(4.5%,2%)}    83%{transform:translate(-2%,-4%)}
  100%{transform:translate(0,0)}
}
/* En OBRAS el fondo entero cambia en cada fotograma al arrastrar, así que hay
   que recalcular la mezcla `overlay` de toda la pantalla. Medido con la CPU
   frenada 4x: quitar el grano ahí sube de 40 a 60 fps. En INICIO y CONTACTO
   el fondo es casi estático y no cuesta nada, así que ahí se queda. */
body[data-view="obras"] .fx-grain{display:none;}

.fx-scan{
  position:fixed;inset:0;z-index:9001;pointer-events:none;
  opacity:.35;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,var(--scan) 2px 3px);
}

/* ── CURSOR ──────────────────────────────────── */
.cursor{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;mix-blend-mode:difference;}
.cursor__dot{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute;width:42px;height:42px;border-radius:50%;
  border:1px solid #fff;transform:translate(-50%,-50%) scale(1);
  display:grid;place-items:center;
  transition:width .45s var(--ease),height .45s var(--ease),border-radius .45s var(--ease),background .3s;
}
.cursor__label{
  font-size:9px;letter-spacing:.14em;color:#000;
  opacity:0;transition:opacity .25s;white-space:nowrap;
}
.cursor.is-near .cursor__ring{width:62px;height:62px;}
.cursor.is-hot .cursor__ring{width:86px;height:86px;background:#fff;}
.cursor.is-hot .cursor__label{opacity:1;}
.cursor.is-hot .cursor__dot{opacity:0;}
.cursor.is-drag .cursor__ring{width:64px;height:64px;border-radius:6px;}
@media (hover:none){ .cursor{display:none} body,button{cursor:auto} }

/* ── PRELOADER ───────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:9200;
  background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .5s,visibility .5s;
}
.boot__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:8vw 8vw;
  animation:gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse{50%{opacity:.15}}
.boot__inner{width:min(560px,80vw);}
.boot__row{display:flex;justify-content:space-between;}
.boot__tag{font-size:var(--hud);letter-spacing:.22em;color:var(--grey);}
.boot__num{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(80px,18vw,190px);line-height:.86;
  letter-spacing:-.04em;text-align:center;
  color:var(--paper);font-variant-numeric:tabular-nums;
}
.boot__bar{height:2px;background:var(--line);margin:1.4rem 0 .8rem;overflow:hidden;}
.boot__bar i{display:block;height:100%;width:0;background:var(--accent);}
body[data-state="ready"] .boot,body[data-state="live"] .boot{opacity:0;visibility:hidden;}

/* ── CORTINA ─────────────────────────────────── */
.curtain{
  position:fixed;inset:0;z-index:9100;pointer-events:none;
  display:grid;grid-template-columns:repeat(8,1fr);
}
.curtain i{
  background:var(--accent-fill);transform:scaleY(0);transform-origin:bottom;
}
.curtain.is-in i{transform:scaleY(1);transform-origin:bottom;transition:transform .5s var(--ease-in);}
.curtain.is-out i{transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);}
.curtain i:nth-child(1){transition-delay:0s}    .curtain i:nth-child(2){transition-delay:.04s}
.curtain i:nth-child(3){transition-delay:.08s}  .curtain i:nth-child(4){transition-delay:.12s}
.curtain i:nth-child(5){transition-delay:.16s}  .curtain i:nth-child(6){transition-delay:.2s}
.curtain i:nth-child(7){transition-delay:.24s}  .curtain i:nth-child(8){transition-delay:.28s}

/* ── HUD ─────────────────────────────────────── */
.hud{
  position:fixed;left:0;right:0;z-index:600;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:clamp(14px,2vw,26px) clamp(14px,2.4vw,32px);
  font-size:var(--hud);letter-spacing:.2em;
  /* `difference` invierte contra lo que haya detrás, así que la fuente es
     blanca: sobre el fondo negro sale clara y sobre una obra clara sale
     oscura, sin depender del contenido. */
  color:#fff;
  mix-blend-mode:difference;
  opacity:0;transform:translateY(-8px);
  transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s;
}
.hud--bottom{top:auto;bottom:0;align-items:flex-end;transform:translateY(8px);}
body[data-state="live"] .hud{opacity:1;transform:none;}

.brand{display:flex;gap:.65rem;align-items:center;}
.brand__logo{
  width:26px;height:26px;flex:0 0 26px;
  display:grid;place-items:center;color:#fff;
}
.brand__logo svg,.brand__logo img{width:100%;height:100%;display:block;}
.brand__logo img{object-fit:contain;}
.brand__logo.has-img{color:inherit;}
/* el nombre alterna entre las dos identidades: ancho fijo para que no salte */
.brand__meta{
  font-size:10px;letter-spacing:.16em;color:#fff;
  text-transform:uppercase;white-space:nowrap;
  min-width:15ch;
}

.nav{display:flex;gap:clamp(10px,2vw,28px);}
.nav__item{
  position:relative;letter-spacing:.2em;opacity:var(--hud-dim);
  display:flex;gap:.45rem;align-items:baseline;
  transition:opacity .35s var(--ease);
}
.nav__item span{font-size:8px;opacity:.6;}
.nav__item::after{
  content:'';position:absolute;left:0;bottom:-6px;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__item:hover{opacity:1;}
.nav__item:hover::after{transform:scaleX(1);transform-origin:left;}
.nav__item.is-active{opacity:1;}
.nav__item.is-active::after{transform:scaleX(1);transform-origin:left;}

.clock{text-align:right;line-height:1.5;}
.clock em{display:block;font-style:normal;font-size:8px;color:var(--hud-faint);}
.hud__note,.hud__coords{color:var(--hud-soft);font-size:var(--hud);letter-spacing:.2em;}
/* en contacto la marquesina ácida ocupa el pie: apartamos el HUD inferior */
body[data-view="contacto"] .hud--bottom{opacity:0;pointer-events:none;}

/* ── ESCENA / VISTAS ─────────────────────────── */
.stage{position:fixed;inset:0;}
.view{
  position:absolute;inset:0;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease),visibility .45s;
}
.view.is-active{opacity:1;visibility:visible;pointer-events:auto;}

/* ── 01 · INICIO ─────────────────────────────── */
/* red sináptica: nodos, dendritas y descargas */
.red{
  position:absolute;
  inset:0;width:100%;height:100%;
  pointer-events:none;
}

.kinetic{position:relative;z-index:3;text-align:center;padding:0 4vw;}
/* halo oscuro: mantiene la tipografía legible sobre la red */
.kinetic::before{
  content:'';position:absolute;inset:-14% -16%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 52% at center,
    rgba(var(--halo),.62) 0%, rgba(var(--halo),.34) 58%, rgba(var(--halo),0) 100%);
}
.kinetic__line{will-change:transform;}
.kinetic__line--offset{margin-top:-.09em;}
.k-word{
  display:block;
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(52px,15.5vw,240px);line-height:.82;
  letter-spacing:-.05em;text-transform:uppercase;
  transition:letter-spacing .7s var(--ease);
}
.k-word--outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--paper);
  transition:letter-spacing .7s var(--ease),-webkit-text-stroke-width .5s;
}
.kinetic:hover .k-word{letter-spacing:.02em;}
.kinetic:hover .k-word--outline{-webkit-text-stroke-width:2.5px;}

/* glitch en la palabra sólida */
.k-word{position:relative;}
.k-word::before,.k-word::after{
  content:attr(data-text);position:absolute;inset:0;
  opacity:0;pointer-events:none;
  mix-blend-mode:screen;              /* aberración cromática, no relleno */
}
.k-word::before{color:var(--blood);}
.k-word::after{color:#00e5ff;}
/* la palabra en contorno mantiene su contorno también al hacer glitch */
.k-word--outline::before,.k-word--outline::after{
  color:transparent;-webkit-text-stroke:1.5px var(--blood);
}
.k-word--outline::after{-webkit-text-stroke-color:#00e5ff;}
.kinetic:hover .k-word::before{opacity:.55;animation:gl1 .38s steps(2) infinite;}
.kinetic:hover .k-word::after{opacity:.55;animation:gl2 .38s steps(2) infinite;}
@keyframes gl1{0%,100%{transform:translate(0)}50%{transform:translate(-4px,2px)}}
@keyframes gl2{0%,100%{transform:translate(0)}50%{transform:translate(4px,-2px)}}

.kinetic__line--sub{
  display:flex;gap:clamp(8px,1.4vw,20px);align-items:center;justify-content:center;
  margin-top:clamp(14px,2vw,26px);flex-wrap:wrap;
}
.k-sub{font-size:var(--hud);letter-spacing:.34em;color:var(--grey);}
.k-dot{width:4px;height:4px;background:var(--accent);border-radius:50%;}

.badge{
  position:absolute;z-index:4;
  right:clamp(18px,6vw,90px);bottom:clamp(70px,12vh,130px);
  width:clamp(88px,10vw,132px);aspect-ratio:1;
  display:grid;place-items:center;
}
.badge__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite;}
.badge__ring text{font-family:'Space Mono',monospace;font-size:8.4px;letter-spacing:.16em;fill:var(--paper);}
@keyframes spin{to{transform:rotate(360deg)}}
.badge__arrow{
  font-size:22px;line-height:1;
  transition:transform .5s var(--ease);
}
.badge:hover .badge__arrow{transform:translate(4px,4px) scale(1.25);}
.badge::after{
  content:'';position:absolute;inset:22%;border-radius:50%;
  background:var(--accent-fill);opacity:0;transform:scale(.4);
  transition:opacity .4s,transform .5s var(--ease);z-index:-1;
}
.badge:hover::after{opacity:1;transform:scale(1);}
.badge:hover .badge__arrow{color:var(--on-accent);}

/* ── TICKER ──────────────────────────────────── */
.ticker{
  position:absolute;bottom:clamp(38px,6vh,52px);left:0;right:0;
  overflow:hidden;
  padding:.55rem 0;z-index:2;
}
/* La pista son DOS mitades idénticas, así que desplazarla un -50% exacto la
   deja en el punto de partida: el bucle no tiene costura ni huecos. Cada mitad
   la rellena initTicker() hasta superar el ancho de la pantalla. */
.ticker__track{
  display:flex;align-items:center;white-space:nowrap;
  width:max-content;
  animation:slide 26s linear infinite;
}
.ticker__half{display:flex;align-items:center;gap:4.5rem;padding-right:4.5rem;flex:0 0 auto;}
.ticker span{font-size:var(--hud);letter-spacing:.34em;}
.ticker i{color:var(--accent);font-style:normal;font-size:10px;}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker--alt{bottom:0;background:var(--accent-fill);color:var(--on-accent);padding:.3rem 0 .42rem;}
.ticker--alt i{color:var(--on-accent);}

/* ── 02 · LIENZO INFINITO ────────────────────── */
.view--obras{place-items:stretch;}
.canvas{
  position:absolute;inset:0;overflow:hidden;
  touch-action:none;
}
.canvas__layer{position:absolute;inset:0;will-change:transform;}

.work{
  position:absolute;top:0;left:0;
  width:var(--w);
  will-change:transform;
  transform-origin:center;
}
.work__box{
  position:relative;overflow:hidden;
  background:var(--surface);
  aspect-ratio:var(--ar,3/4);
  transition:filter .5s var(--ease);
  filter:grayscale(1) contrast(1.08);
}
.work__box img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  transition:transform .8s var(--ease);
}
.work:hover .work__box{filter:grayscale(0) contrast(1);}
.work:hover .work__box img{transform:scale(1);}
.work__box::after{
  content:'';position:absolute;inset:0;
  border:1px solid var(--accent);opacity:0;
  transition:opacity .3s;
}
.work:hover .work__box::after{opacity:1;}
.work__tag{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:.55rem;font-size:9px;letter-spacing:.16em;
  color:var(--grey);text-transform:uppercase;
  transition:color .35s;
}
.work:hover .work__tag{color:var(--paper);}
.work__tag b{font-weight:400;color:var(--accent);}

.canvas__hint,.canvas__count{
  position:absolute;z-index:5;pointer-events:none;
  font-size:var(--hud);letter-spacing:.22em;color:var(--hud-soft);
  mix-blend-mode:difference;
}
.canvas__hint{left:50%;transform:translateX(-50%);bottom:clamp(46px,8vh,62px);white-space:nowrap;}
.canvas__hint span{color:#fff;}
.canvas__count{right:clamp(14px,2.4vw,32px);top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;}
.canvas__count span{color:#fff;}

.canvas__empty{
  position:absolute;inset:0;display:grid;place-content:center;
  text-align:center;gap:1rem;padding:2rem;z-index:4;
}
.empty__big{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(34px,8vw,90px);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.4px var(--paper);
}
.empty__small{font-size:11px;line-height:2;letter-spacing:.14em;color:var(--grey);}
.empty__small code{color:var(--accent);}

/* ── 03 · CONTACTO ───────────────────────────── */
.view--contacto{background:var(--ink);}
.contact{text-align:center;padding:0 5vw;z-index:2;}
.contact__eyebrow{font-size:var(--hud);letter-spacing:.36em;color:var(--grey);margin-bottom:clamp(14px,2vw,24px);}
.contact__mail{display:inline-block;}
.contact__mail-in{
  display:block;position:relative;
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(48px,13vw,190px);line-height:.85;
  letter-spacing:-.05em;
  transition:color .4s,-webkit-text-stroke-width .4s;
  -webkit-text-stroke:0 var(--accent);
}
.contact__mail:hover .contact__mail-in{color:transparent;-webkit-text-stroke:1.6px var(--accent);}
.contact__addr{
  margin-top:clamp(16px,2.4vw,30px);
  font-size:12px;letter-spacing:.28em;color:var(--grey);
}
.contact__links{
  list-style:none;display:flex;gap:clamp(14px,3vw,42px);
  justify-content:center;flex-wrap:wrap;
  margin-top:clamp(26px,4vw,54px);
}
.contact__links a{
  display:inline-flex;gap:.55rem;align-items:baseline;
  font-size:var(--hud);letter-spacing:.22em;
  padding:.7rem 1.15rem;border:1px solid var(--line);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s;
}
.contact__links a:hover{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill);}
.contact__links i{font-style:normal;opacity:.6;}
/* el dato concreto, en tono menor junto a la etiqueta */
.contact__links em{
  font-style:normal;letter-spacing:.08em;text-transform:none;
  color:var(--grey);transition:color .35s var(--ease);
}
.contact__links a:hover em{color:var(--on-accent);}

/* ── VISOR ───────────────────────────────────── */
.viewer{position:fixed;inset:0;z-index:8000;display:grid;place-items:center;}
.viewer[hidden]{display:none;}
.viewer__bg{
  position:absolute;inset:0;background:var(--veil);
  backdrop-filter:blur(14px);
  opacity:0;transition:opacity .45s var(--ease);
}
.viewer.is-open .viewer__bg{opacity:1;}
.viewer__frame{
  position:relative;z-index:2;
  width:min(86vw,1100px);height:min(76vh,820px);
  display:grid;place-items:center;
  clip-path:inset(50% 0 50% 0);
  transition:clip-path .6s var(--ease);
}
.viewer.is-open .viewer__frame{clip-path:inset(0 0 0 0);}
.viewer__frame img{
  max-width:100%;max-height:100%;object-fit:contain;
  transform:scale(1.08);transition:transform .8s var(--ease);
}
.viewer.is-open .viewer__frame img{transform:scale(1);}
.viewer__meta{
  position:absolute;z-index:3;left:clamp(14px,3vw,42px);bottom:clamp(20px,4vh,40px);
  max-width:min(52ch,80vw);
  font-size:var(--hud);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease) .25s,transform .5s var(--ease) .25s;
}
.viewer.is-open .viewer__meta{opacity:1;transform:none;}
.viewer__head{
  display:flex;gap:1rem;align-items:baseline;
  letter-spacing:.2em;text-transform:uppercase;
}
/* la descripción es prosa: ni versalitas ni tracking, y con medida de lectura */
.viewer__desc{
  margin-top:.7rem;
  font-size:clamp(11px,.86vw,13px);line-height:1.65;
  letter-spacing:0;text-transform:none;
  color:var(--hud-soft);
  white-space:normal;
}
.viewer__idx{color:var(--accent);font-size:11px;}
.viewer__close{
  position:absolute;z-index:4;top:clamp(14px,3vw,34px);right:clamp(14px,3vw,34px);
  width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:13px;
  transition:background .35s,color .35s,transform .5s var(--ease);
}
.viewer__close:hover{background:var(--accent-fill);color:var(--on-accent);transform:rotate(90deg);}
.viewer__nav{
  position:absolute;z-index:4;top:50%;transform:translateY(-50%);
  width:52px;height:52px;font-size:16px;
  display:grid;place-items:center;
  opacity:.5;transition:opacity .3s,background .3s,color .3s;
}
.viewer__nav:hover{opacity:1;background:var(--accent-fill);color:var(--on-accent);}
.viewer__nav--prev{left:clamp(6px,1.6vw,22px);}
.viewer__nav--next{right:clamp(6px,1.6vw,22px);}

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width:900px){
  .badge{right:clamp(14px,4vw,40px);bottom:clamp(96px,16vh,150px);}
  .canvas__count{display:none;}
}

@media (max-width:720px){
  .hud--top{flex-wrap:wrap;gap:.9rem;}
  .brand{order:1;}
  .clock{order:2;}
  .nav{order:3;width:100%;justify-content:space-between;gap:0;}
  .nav__item{font-size:10px;}
  .hud__note{display:none;}
  .k-word{letter-spacing:-.03em;}
  .kinetic__line--sub{gap:.5rem;}
  .k-sub{letter-spacing:.2em;font-size:8px;}
  .ticker{bottom:34px;}
  .badge{width:78px;}
  .viewer__frame{width:92vw;height:70vh;}
  .viewer__nav{width:42px;height:42px;}
  .contact__links{gap:.5rem;}
  .contact__links a{padding:.5rem .8rem;}
}

@media (max-width:480px){
  .canvas__hint{font-size:8px;letter-spacing:.14em;}
  .empty__small{font-size:10px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .fx-grain{display:none;}
}