/* ── La bande rythmo ──────────────────────────────────────
   Copie de agfa-rythmo-frontend/src/components/projectDetail/RythmoBandSingle.vue
   (règles .rythmo-band / .rythmo-block / .scene-change-bar / .rythmo-tick), avec
   les valeurs par défaut de stores/projectSettings.ts résolues à la main :
   bandHeight 50 px · fontSize 1.5rem · Lexend 400 · fond #202937 ·
   sceneChangeColor #8455F6 · 80 px par seconde. Les couleurs passent par les
   tokens --band-* de base.css : en clair, ce sont les repères de la bande
   claire (themeBande.ts), pas ceux de l'interface.
   Deux écarts assumés, l'app n'en ayant pas besoin : un viewport qui rogne
   (dans l'app c'est la page qui clippe) et un défilement en boucle CSS au lieu
   du translateX piloté par le temps de la vidéo. ──────────── */
@font-face{
  font-family:'Lexend';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('lexend-400.woff2') format('woff2');
}

.band-viewport{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px}

.rythmo-band{
  width:100%;
  background:var(--band-bg);
  border-radius:8px;
  min-height:50px;
  display:flex;
  align-items:center;
  box-shadow:var(--band-shadow);
  border:1px solid var(--band-sep);
}
.rythmo-track-container{position:relative;height:50px;width:100%}
.rythmo-content{
  position:absolute;left:0;top:0;height:50px;display:flex;width:max-content;
  animation:rythmo-scroll 24s linear infinite;
}
/* 1920 px = 24 s à 80 px/s ; la seconde moitié est clonée par site.js */
.rythmo-half{position:relative;flex:none;width:1920px;height:50px}
@keyframes rythmo-scroll{to{transform:translateX(-1920px)}}

.rythmo-block{
  position:absolute;top:0;height:100%;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;margin:0;font-weight:400;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  border:1px solid rgba(59,130,246,.3);
  z-index:4;
}
.distort-text{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;margin:0;opacity:.9;white-space:pre;overflow:visible;
  font-family:'Lexend',var(--sans);font-size:1.5rem;font-weight:400;color:#fff;
  -webkit-font-smoothing:antialiased;
  /* Le texte n'est jamais coupé : il est étiré ou comprimé pour occuper la
     durée de la réplique — c'est le lignage. Le facteur est posé par site.js,
     comme computeDistortStyle() le fait dans RythmoBandSingle.vue. */
  transform-origin:center center;
  backface-visibility:hidden;
}
.character-tag{
  position:absolute;top:2px;right:101%;
  font-size:.7rem;font-weight:bold;padding:2px 6px;border-radius:4px;
  z-index:20;line-height:1;white-space:nowrap;opacity:.9;width:max-content;
}
.scene-change-bar{
  position:absolute;bottom:-5%;width:2px;height:110%;
  background:var(--band-scene);opacity:.7;border-radius:2px;z-index:3;
  box-shadow:0 0 8px var(--band-scene);
}
.rythmo-ticks{position:absolute;left:0;bottom:0;width:100%;height:2rem;z-index:1;pointer-events:none}
.rythmo-tick{position:absolute;bottom:0;width:2px;height:45%;background:var(--band-tick);opacity:.45;border-radius:2px}
.rythmo-tick.tick-second{width:3px;height:80%;background:var(--band-second);opacity:.85}

.deck__legend{display:flex;flex-wrap:wrap;gap:18px;padding:14px 6px 2px;
  font-size:.63rem;color:var(--faint);letter-spacing:.04em}
.deck__legend span{display:flex;align-items:center;gap:.5em}
.key{width:12px;height:2px;border-radius:2px;display:block}
.key--cut{background:var(--band-scene);box-shadow:0 0 8px var(--band-scene)}
.key--who{background:#0e7490;height:9px;width:9px;border-radius:2px}
.key--tick{background:var(--band-second);width:3px;height:9px;opacity:.85}


/* La tête de lecture : au CENTRE de la bande, pas au bord.
   Copie de .rythmo-cursor (RythmoBandSingle.vue) — dans l'application, tout est
   posé à `temps × 80 px + largeur_visible / 2`, si bien que l'instant courant
   tombe au milieu de la zone visible, sous ce trait. */
.rythmo-cursor{
  position:absolute;
  top:-5%;
  left:50%;
  width:4px;
  height:110%;
  background:linear-gradient(to bottom,var(--band-cursor-a),var(--band-cursor-b));
  border-radius:2px;
  box-shadow:var(--band-cursor-shadow);
  z-index:8;
  transform:translateX(-50%);
}
.key--head{background:var(--band-cursor-a);box-shadow:var(--band-glow);width:3px;height:11px}

/* Débuts de dialogue : copie de .speech-hint (RythmoBandSingle.vue). Un cran
   turquoise en haut de la bande là où une voix commence, une borne plus courte
   là où elle finit. C'est le repère que les timecodes viennent aimanter. */
.speech-hint{
  position:absolute;top:0;height:11px;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--band-hint-rgb),.95),rgba(var(--band-hint-rgb),0)) top left / 2px 11px no-repeat,
    linear-gradient(180deg,rgba(var(--band-hint-rgb),.75),rgba(var(--band-hint-rgb),0)) top right / 2px 5px no-repeat,
    linear-gradient(90deg,rgba(var(--band-hint-rgb),.35),rgba(var(--band-hint-rgb),.08)) top left / 100% 1px no-repeat;
}