/*
  Les Héritiers du Temps — CSS complémentaire.
  Tailwind v4 (CDN) gère le styling. Ce fichier ne contient que ce que Tailwind
  ne sait pas faire proprement : tokens, textures manga (trame, lignes de vitesse),
  bulles de dialogue avec pointe, keyframes partagés.
  Direction : page de manga shōnen noir et blanc (papier blanc, encre, trames),
  une couleur d'accent par camp (Inhumains violet, Humains azur).
*/
:root {
  --ink: #0e0e11;        /* encre */
  --ink-2: #1c1c22;      /* encre adoucie */
  --paper: #f7f6f2;      /* papier manga */
  --paper-2: #e9e7e0;    /* papier ombré (trame claire) */
  --grey: #8d8b86;       /* gris de trame */
  --red: #e0263a;        /* rouge de marque */
  --violet: #6c4cff;     /* Inhumains, Empreinte */
  --azure: #149ad6;      /* Humains, dômes */
  --gold: #c9a35d;       /* emblème */
  --accent: var(--red);
  --display: "Dela Gothic One", "Arial Black", Impact, sans-serif;
  --logo: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --serif: "Zen Kaku Gothic New", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  --hand: "Comic Neue", "Zen Kaku Gothic New", "Comic Sans MS", sans-serif;
  color-scheme: light;
}
:root[data-side="inhumain"] { --accent: var(--violet); }
:root[data-side="humain"] { --accent: var(--azure); }

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Grain de papier très léger */
.grain::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Trame manga (screentone) */
.tone { background-image: radial-gradient(circle at 1px 1px, rgb(14 14 17 / .16) 1px, transparent 1.3px); background-size: 6px 6px; }
.tone-dark { background-image: radial-gradient(circle at 1px 1px, rgb(247 246 242 / .12) 1px, transparent 1.3px); background-size: 6px 6px; }

/* Lignes de vitesse (focus) et lignes de mouvement horizontales */
.speedlines { background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(14 14 17 / .85) 0deg .8deg, transparent .8deg 5deg); mask-image: radial-gradient(circle at 50% 50%, transparent 28%, #000 70%); }
.motionlines { background: repeating-linear-gradient(0deg, rgb(14 14 17 / .9) 0 1px, transparent 1px 9px); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }

/* Bulle de dialogue manga avec pointe */
.bubble { position: relative; border: 2.5px solid var(--ink); background: #fff; border-radius: 50%; }
.bubble::after { content: ""; position: absolute; width: 22px; height: 22px; background: #fff; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); bottom: -9px; left: 30%; transform: rotate(45deg) skew(12deg, 12deg); }
.bubble.tail-right::after { left: auto; right: 28%; }
.bubble.tail-top::after { bottom: auto; top: -9px; transform: rotate(225deg) skew(12deg, 12deg); }
.bubble.shout { border-radius: 0; border: 0; filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)); background: transparent; }
.bubble.shout > * { background: #fff; clip-path: polygon(0 18%, 8% 0, 22% 14%, 36% 0, 50% 12%, 64% 0, 78% 14%, 92% 0, 100% 20%, 92% 36%, 100% 52%, 92% 68%, 100% 84%, 90% 100%, 76% 88%, 62% 100%, 48% 88%, 34% 100%, 20% 88%, 6% 100%, 0 82%, 8% 66%, 0 50%, 8% 34%); }
.bubble.shout::after { display: none; }

/* Anneau de progression du bouton « maintenir » */
.hold-ring { background: conic-gradient(var(--accent) calc(var(--p, 0) * 1turn), rgb(14 14 17 / .2) 0); }

/* Secousse (impacts) */
.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%,90%{transform:translate3d(-2px,1px,0)} 20%,80%{transform:translate3d(4px,-2px,0)} 30%,50%,70%{transform:translate3d(-7px,3px,0)} 40%,60%{transform:translate3d(7px,-3px,0)} }

/* Rotation lente de l'emblème */
.spin-slow { animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Barre de défilement horizontale discrète (navigation mobile) */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .spin-slow, .shake { animation: none; }
}