/* =========================================================
   NEKO NINJA — sistema visual
   Día japonés. Papel washi, tinta y bermellón sobre cielo abierto.
   Escena de un solo mundo: todos los colores se pintan explícitos.
   ========================================================= */
:root{
  --washi:   #fdf8ec;   /* papel */
  --washi-2: #f2e8d4;
  --ink:     #1d2b3a;   /* tinta, neutro con sesgo azul */
  --ink-2:   #45596e;
  --ink-3:   #7b8c9d;
  --vermil:  #d9432f;   /* bermellón: sellos, torii, bufanda */
  --indigo:  #2b5c8a;
  /* los cuatro de Google, para el rastro de huellas de la carga */
  --g-blue:#4285f4; --g-red:#ea4335; --g-yellow:#fbbc04; --g-green:#34a853;
  --gold:    #c8922e;
  --sky:     #7ec8ec;
  --line:    rgba(29,43,58,.16);

  --f-display:"Shippori Mincho B1", "Hiragino Mincho ProN", Georgia, serif;
  --f-body:   "Zen Kaku Gothic New", "Hiragino Sans", "Helvetica Neue", sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --col:    min(31rem, 44vw);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--sky);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--vermil); outline-offset:3px; border-radius:2px; }

/* ---------- escena ---------- */
#scene{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block; z-index:0;
  background:var(--sky);
}

/* Los pergaminos y el panel de tinta traen su propio fondo, así que ya no hace falta
   el velo que asentaba el texto sobre la escena: con los paneles alternando de lado,
   además, habría quedado siempre en el lado contrario. */

/* ---------- pantalla de carga: huellas de gato ---------- */
.boot{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:var(--washi);
}
.boot__paws{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.45rem, 1.9vw, 1.2rem);
  /* el rastro completo se borra al final de cada vuelta y vuelve a empezar */
  animation:paws-cycle 3.4s linear infinite;
}
@keyframes paws-cycle{
  0%, 74%  { opacity:1; }
  90%, 100%{ opacity:0; }
}
.paw{
  display:block; flex:0 0 auto;
  width:clamp(1.7rem, 4vw, 2.8rem);
}
/* el zigzag va en el contenedor y la aparición en el svg: así no se pisan los transform */
.paw:nth-child(odd){ transform:translateY(-15%) rotate(-9deg); }
.paw:nth-child(even){ transform:translateY(15%) rotate(9deg); }
.paw__svg{
  display:block; width:100%; height:auto;
  /* el amarillo de Google sobre papel apenas se ve (1,46:1), así que todas
     llevan un filo de tinta: se leen las cuatro sin tocar los tonos */
  stroke:rgba(31,26,20,.28); stroke-width:2.2;
  opacity:0;
  animation:paw-step 3.4s ease-out infinite;
  animation-delay:calc(var(--i) * .17s);
}
/* el rastro va rotando los cuatro colores de Google */
.paw:nth-child(4n+1) .paw__svg{ fill:var(--g-blue); }
.paw:nth-child(4n+2) .paw__svg{ fill:var(--g-red); }
.paw:nth-child(4n+3) .paw__svg{ fill:var(--g-yellow); }
.paw:nth-child(4n)   .paw__svg{ fill:var(--g-green); }
@keyframes paw-step{
  0%        { opacity:0; transform:scale(.55); }
  7%        { opacity:1; transform:scale(1.12); }
  12%, 100% { opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .boot__paws, .paw__svg{ animation:none; }
  .paw__svg{ opacity:1; }
}

/* ---------- espacio de scroll + capítulos ---------- */
#space{ position:relative; z-index:20; }
.chapters{ position:relative; display:block; }

.chapter{
  position:absolute; left:0; right:0;
  height:100vh;
  display:flex; align-items:center;
  padding:0 var(--gutter);
  pointer-events:none;
}
.chapter__box{
  margin-left:auto;
  width:var(--col);
  pointer-events:auto;
  will-change:transform,opacity;
  position:relative;
  padding:clamp(1.6rem,3vw,2.3rem) clamp(1.6rem,3vw,2.4rem);
  background:rgba(253,248,236,.94);
  border:1px solid rgba(29,43,58,.10);
  border-radius:2px;
  box-shadow:0 26px 70px rgba(24,52,86,.20), 0 2px 0 rgba(255,255,255,.6) inset;
}
/* filo de tinta a la izquierda, como el canto de un pergamino */
.chapter__box::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--vermil),var(--gold));
}

.chapter__meta{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--f-body); font-size:.62rem; letter-spacing:.24em;
  color:var(--indigo); text-transform:uppercase;
  margin:0 0 .9rem;
}
.chapter__meta i{ display:block; width:1.6rem; height:1px; background:var(--indigo); opacity:.5; }
.chapter__jp{
  font-family:var(--f-display);
  font-size:1rem; letter-spacing:.45em; color:var(--vermil);
  margin:0 0 .35rem;
}
.chapter__title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.15;
  letter-spacing:-.005em; text-wrap:balance;
  margin:0 0 .9rem; color:var(--ink);
}
.chapter__title b{ color:var(--vermil); font-weight:700; }
.chapter__body{ margin:0; max-width:36ch; color:var(--ink-2); }

.chapter__foot{
  margin-top:1.5rem; padding-top:1rem;
  border-top:1px solid var(--line);
  display:flex; gap:1.9rem;
}
.chapter__stat{ display:flex; flex-direction:column; gap:.1rem; }
.chapter__stat b{
  font-family:var(--f-display); font-size:1.5rem; font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1;
}
.chapter__stat span{ font-size:.6rem; letter-spacing:.2em; color:var(--ink-3); }

/* ---------- scroll cue ---------- */
.scrollcue{
  position:fixed; z-index:35; left:50%; bottom:clamp(1.25rem,3vw,2.25rem);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-family:var(--f-body); font-size:.58rem; letter-spacing:.3em; color:var(--ink-2);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  transition:opacity .5s ease;
}
.scrollcue i{ display:block; width:1px; height:2.5rem; background:linear-gradient(180deg,var(--ink-2),transparent); }
.scrollcue.is-hidden{ opacity:0; }

/* ---------- responsive ---------- */
@media (max-width:860px){
  :root{ --col:100%; }
  .chapter{ align-items:flex-end; padding-bottom:clamp(3rem,10vh,6rem); }
  .chapter__box{ margin:0; }
  .chapter__body{ max-width:100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* =========================================================
   VARIANTES DEL PANEL DE TEXTO
   Se eligen con ?panel=<nombre>. Sin parámetro, el de papel.
   ========================================================= */

/* ---------- tinta: panel oscuro, tipografía clara ---------- */
[data-panel="ink"] .chapter__box{
  background:rgba(16,25,38,.80);
  backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(255,255,255,.10);
  border-radius:0;
  box-shadow:0 30px 80px rgba(8,18,32,.42);
  padding:clamp(1.8rem,3.2vw,2.6rem) clamp(1.8rem,3.2vw,2.8rem);
  overflow:hidden;
}
[data-panel="ink"] .chapter__box::before{
  width:2px;
  background:var(--vermil);
}
/* el número de capítulo, como marca de agua */
[data-panel="ink"] .chapter__box::after{
  content:attr(data-n);
  position:absolute; right:.6rem; top:-.9rem;
  font-family:var(--f-display); font-weight:800;
  font-size:7.5rem; line-height:1; letter-spacing:-.04em;
  color:rgba(255,255,255,.055);
  pointer-events:none;
}
[data-panel="ink"] .chapter__meta{ color:#7fb3dd; }
[data-panel="ink"] .chapter__meta i{ background:#7fb3dd; }
[data-panel="ink"] .chapter__jp{
  position:absolute; right:1.1rem; bottom:1.2rem;
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:1.35rem; letter-spacing:.34em;
  color:rgba(255,120,96,.42); margin:0;
}
[data-panel="ink"] .chapter__title{ color:#f4efe6; }
[data-panel="ink"] .chapter__title b{ color:#ff7b5f; }
[data-panel="ink"] .chapter__body{ color:#b9c6d6; }
[data-panel="ink"] .chapter__foot{ border-top-color:rgba(255,255,255,.14); }
[data-panel="ink"] .chapter__stat b{ color:#f4efe6; }
[data-panel="ink"] .chapter__stat span{ color:#7f93a8; }

/* ---------- limpio: sin caja, el texto sobre la escena ---------- */
[data-panel="clean"] .chapter__box{
  background:none; border:none; box-shadow:none; padding:0;
}
[data-panel="clean"] .chapter__box::before{ display:none; }
[data-panel="clean"] .chapter__box::after{
  content:attr(data-n);
  position:absolute; right:0; top:-5.4rem;
  font-family:var(--f-display); font-weight:800;
  font-size:8rem; line-height:1; letter-spacing:-.05em;
  color:rgba(29,43,58,.10);
  pointer-events:none;
}
[data-panel="clean"] .chapter__meta,
[data-panel="clean"] .chapter__title,
[data-panel="clean"] .chapter__body,
[data-panel="clean"] .chapter__stat b,
[data-panel="clean"] .chapter__stat span{
  text-shadow:0 1px 0 rgba(255,255,255,.85), 0 2px 14px rgba(255,255,255,.65);
}
[data-panel="clean"] .chapter__jp{
  position:absolute; right:-.2rem; top:6.5rem;
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:1.6rem; letter-spacing:.4em;
  color:rgba(217,67,47,.55); margin:0;
  text-shadow:0 1px 10px rgba(255,255,255,.8);
}
[data-panel="clean"] .chapter__title{
  font-size:clamp(2.2rem,4.6vw,3.6rem);
}
[data-panel="clean"] .chapter__body{
  padding:.9rem 1.1rem;
  background:rgba(253,248,236,.62);
  backdrop-filter:blur(6px);
  border-left:2px solid var(--vermil);
}
[data-panel="clean"] .chapter__foot{ border-top-color:rgba(29,43,58,.22); }

@media (max-width:860px){
  [data-panel="ink"] .chapter__box::after,
  [data-panel="clean"] .chapter__box::after{ font-size:5rem; }
  [data-panel="clean"] .chapter__jp,
  [data-panel="ink"] .chapter__jp{ display:none; }
}

/* ---------- pergaminos: el texto viene dentro de la ilustración ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
[data-panel] .chapter__box--scroll{
  background:none; border:none; box-shadow:none; padding:0; backdrop-filter:none;
  /* el panel de tinta recorta lo que se sale, y con eso el shuriken sólo
     aparecía al entrar en la caja: todo el vuelo quedaba oculto */
  overflow:visible;
  /* más ancho que el panel de texto y separado del borde: pegado a la derecha
     dejaba un hueco muerto entre el gato y el pergamino */
  width:min(36rem, 48vw);
  margin-right:clamp(0rem, 6vw, 5.5rem);
}
[data-panel] .chapter__box--scroll::before,
[data-panel] .chapter__box--scroll::after{ display:none; }
.chapter__scroll{
  display:block; width:100%; height:auto;
  max-width:100%;
  margin-left:auto;
  /* el color va en JPEG y la silueta en una máscara aparte: pesa mucho menos que un PNG.
     La url de la máscara se pone en el propio elemento, no en una variable: dentro de una
     custom property se resolvería contra la hoja de estilos y no contra el documento. */
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  filter:drop-shadow(0 22px 44px rgba(20,40,70,.30));
}
@media (max-width:860px){
  .chapter__scroll{ max-width:min(22rem, 82vw); margin:0 auto; }
  [data-panel] .chapter__box--scroll{ width:100%; margin-right:0; }
}

/* ---------- el panel alterna de lado ---------- */
.chapter[data-side="left"] .chapter__box{ margin-left:0; margin-right:auto; }
.chapter[data-side="left"] .chapter__box--scroll{
  margin-right:0; margin-left:clamp(0rem, 6vw, 5.5rem);
}
.chapter[data-side="left"] .chapter__scroll{ margin-left:0; margin-right:auto; }
@media (max-width:860px){
  .chapter[data-side="left"] .chapter__box,
  .chapter[data-side="left"] .chapter__box--scroll{ margin:0; }
  .chapter[data-side="left"] .chapter__scroll{ margin:0 auto; }
}

/* ---------- el logotipo de entrada ---------- */
.logo{
  position:fixed; z-index:25;
  top:clamp(3.5rem, 9vh, 7rem); left:50%;
  width:min(46rem, 62vw);
  transform:translateX(-50%);
  pointer-events:none;
  will-change:opacity, transform;
}
.logo__img{
  display:block; width:100%; height:auto;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  filter:drop-shadow(0 14px 30px rgba(20,40,80,.35));
  /* entra de golpe, con un rebote corto: es un logo, no un texto */
  animation:logo-in .9s cubic-bezier(.16,1.2,.3,1) both;
}
@keyframes logo-in{
  0%   { opacity:0; transform:scale(.72) translateY(-14%) rotate(-3deg); }
  60%  { opacity:1; transform:scale(1.06) translateY(0) rotate(.6deg); }
  100% { opacity:1; transform:scale(1) translateY(0) rotate(0); }
}
@media (max-width:860px){
  .logo{ width:min(24rem, 86vw); top:clamp(2.5rem, 8vh, 5rem); }
}
@media (prefers-reduced-motion:reduce){
  .logo__img{ animation:none; }
}

/* ---------- destello del cierre ---------- */
.flash{
  position:fixed; inset:0; z-index:60;
  background:#fff; opacity:0;
  pointer-events:none;
}

/* =========================================================
   Shuriken que se clava en el pergamino
   El vuelo entra por el lado contrario al del cartel, que es donde
   está el gato: la cámara enfoca siempre al lado opuesto.
   El giro va en el SVG y el desplazamiento en el contenedor, así la
   estela puede quedarse quieta mientras la estrella da vueltas.
   ========================================================= */
.chapter__box--scroll{ position:relative; }

.shuriken{
  position:absolute; z-index:3; width:clamp(34px, 6vw, 68px); aspect-ratio:1;
  top:12.5%; opacity:0; pointer-events:none;
}
.shuriken__svg{
  display:block; position:relative; z-index:1; width:100%; height:100%;
  fill:#93a1ad; stroke:#20262c; stroke-width:5; stroke-linejoin:round;
  filter:drop-shadow(0 3px 4px rgba(40,30,20,.35));
}

/* estela: se queda atrás mientras vuela y se apaga al clavarse */
.shuriken__trail{
  position:absolute; z-index:0; left:50%; top:50%; width:420%; height:8px; border-radius:4px;
  opacity:0; filter:blur(2.5px);
}

/* el tajo que deja el filo: asoma por los dos lados del shuriken, así se lee
   como un corte en el papel y no como una sombra debajo */
.shuriken__cut{
  position:absolute; z-index:0; left:50%; top:50%; width:132%; height:3px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(58,40,26,.72) 22%,
                             rgba(58,40,26,.72) 78%,transparent);
  transform:translate(-50%,-50%) rotate(38deg) scaleX(0);
  transform-origin:center;
}

/* astillas de papel que saltan en el impacto */
.shards{ position:absolute; z-index:2; top:12.5%; width:clamp(34px,6vw,68px); aspect-ratio:1;
  pointer-events:none; }
.shards b{
  position:absolute; left:50%; top:50%; width:5px; height:7px; border-radius:1px;
  background:#efe4cd; box-shadow:0 0 0 1px rgba(60,42,28,.35);
  opacity:0; transform:translate(-50%,-50%);
}

/* el shuriken entra por la izquierda cuando el cartel está a la derecha, y al revés */
.chapter[data-side="right"] .shuriken,
.chapter[data-side="right"] .shards{ left:12%; }
.chapter[data-side="left"]  .shuriken,
.chapter[data-side="left"]  .shards{ right:12%; }
.chapter[data-side="right"] .shuriken{ --dx:-52vw; --spin:900deg; }
.chapter[data-side="left"]  .shuriken{ --dx: 52vw; --spin:-900deg; }
/* la cola sale hacia atrás, del lado por el que ha venido */
.chapter[data-side="right"] .shuriken__trail{
  transform:translate(-100%,-50%) rotate(-9deg); transform-origin:right center;
  background:linear-gradient(90deg,transparent,rgba(245,250,255,.85));
}
.chapter[data-side="left"] .shuriken__trail{
  transform:translate(0,-50%) rotate(9deg); transform-origin:left center;
  background:linear-gradient(90deg,rgba(245,250,255,.85),transparent);
}

/* Vuelo: casi todo el trayecto a velocidad constante y un frenazo corto al
   final. Antes iba con una curva suave de principio a fin y el ojo no llegaba
   a seguirlo. */
@keyframes shk-fly{
  0%   { opacity:0; transform:translate3d(var(--dx),-17vh,0) scale(.72);
         animation-timing-function:linear; }
  7%   { opacity:1; animation-timing-function:linear; }
  56%  { transform:translate3d(calc(var(--dx) * .13),-2.4vh,0) scale(.96);
         animation-timing-function:cubic-bezier(.22,.68,.28,1); }
  70%  { transform:translate3d(0,0,0) scale(1); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes shk-spin{
  0%   { transform:rotate(0deg); animation-timing-function:linear; }
  56%  { transform:rotate(calc(var(--spin) * .82));
         animation-timing-function:cubic-bezier(.22,.68,.28,1); }
  70%  { transform:rotate(var(--spin)); }
  78%  { transform:rotate(calc(var(--spin) + 9deg)); }
  86%  { transform:rotate(calc(var(--spin) - 5deg)); }
  93%  { transform:rotate(calc(var(--spin) + 2.5deg)); }
  100% { transform:rotate(var(--spin)); }
}
@keyframes shk-trail{
  0%, 6% { opacity:0; }
  16%    { opacity:.9; }
  56%    { opacity:.55; }
  70%,100%{ opacity:0; }
}
@keyframes shk-cut{
  0%   { transform:translate(-50%,-50%) rotate(38deg) scaleX(0); }
  100% { transform:translate(-50%,-50%) rotate(38deg) scaleX(1); }
}
/* el temblor va en la imagen, no en la caja: la caja lleva su propio
   transform escrito cada fotograma y una animación se lo pisaría */
@keyframes shk-shake{
  0%,100%{ transform:none; }
  22%    { transform:translate3d(-5px,1px,0) rotate(-.6deg); }
  48%    { transform:translate3d(4px,-1px,0) rotate(.4deg); }
  74%    { transform:translate3d(-2px,1px,0); }
}
@keyframes shk-shard{
  0%   { opacity:1; transform:translate(-50%,-50%) translate(0,0) rotate(0deg); }
  100% { opacity:0; transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--sr)); }
}

/* 1,3 s en total: el trayecto ocupa unos 900 ms y el resto es el temblor */
.is-hit .shuriken      { animation:shk-fly   1300ms linear 160ms forwards; }
.is-hit .shuriken__svg { animation:shk-spin  1300ms linear 160ms forwards; }
.is-hit .shuriken__trail{ animation:shk-trail 1300ms linear 160ms forwards; }
.is-hit .shuriken__cut { animation:shk-cut   260ms ease-out 1030ms forwards; }
.is-hit .chapter__scroll{ animation:shk-shake 300ms ease-out 1020ms; }
.is-hit .shards b      { animation:shk-shard 560ms ease-out 1040ms forwards; }
.shards b:nth-child(1){ --sx:-18px; --sy:-15px; --sr:-140deg; }
.shards b:nth-child(2){ --sx: 16px; --sy:-18px; --sr: 165deg; }
.shards b:nth-child(3){ --sx: -7px; --sy: 19px; --sr: 90deg;  }

@media (prefers-reduced-motion:reduce){
  /* sin vuelo: el shuriken ya está clavado */
  .is-hit .shuriken{ animation:none; opacity:1; }
  .is-hit .shuriken__svg{ animation:none; transform:rotate(24deg); }
  .is-hit .shuriken__trail{ display:none; }
  .is-hit .shuriken__cut{ animation:none; transform:translate(-50%,-50%) rotate(38deg) scaleX(1); }
  .is-hit .chapter__scroll, .is-hit .shards b{ animation:none; }
}