/* Frise « Rennes intra-muros » — la signature graphique du site.
   ------------------------------------------------------------------
   Le motif défile de la droite vers la gauche, en continu. Deux
   exemplaires suffisent : quand le premier a parcouru exactement sa
   largeur, la piste se remet à zéro sans que rien ne bouge à l'écran.

   Le dessin est appliqué en masque plutôt qu'inséré dans la page : le
   fichier est mis en cache une fois pour tout le site, et la frise se
   teinte par `currentColor` comme n'importe quel texte. */

.frise {
  position: relative;
  overflow: hidden;
  width: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.frise-piste {
  display: flex;
  width: max-content;
  /* Allure constante, sans lien avec le scroll ni le curseur : la ville
     passe en fond, comme un décor, et rien ne vient la saccader. */
  animation: frise-defile var(--duree, 78s) linear infinite;
}
.frise-motif {
  display: block;
  height: var(--h, 104px);
  aspect-ratio: 2682 / 272;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("../assets/graphics/rennes.svg") no-repeat center / 100% 100%;
  mask: url("../assets/graphics/rennes.svg") no-repeat center / 100% 100%;
}
@keyframes frise-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Bandeau autonome, entre deux sections : la ville passe, on continue. */
.frise-bandeau {
  border-block: 1px solid var(--trait);
  padding-block: clamp(10px, 1.6vw, 18px);
  color: var(--encre);
  opacity: 0.5;
}
.frise-bandeau .frise-motif { --h: clamp(64px, 8vw, 108px); }

/* En décor de section : plus discrète, ancrée en bas. */
.frise-decor {
  position: absolute;
  inset: auto 0 0 0;
  opacity: 0.16;
  z-index: 0;
}
.frise-decor .frise-motif { --h: clamp(90px, 12vw, 160px); }
.on-sombre .frise-decor { opacity: 0.2; color: var(--os); }

.frise-orange { color: var(--orange-texte); opacity: 0.42; }
.frise-bleu   { color: var(--bleu);   opacity: 0.34; }
.frise-vert   { color: var(--vert);   opacity: 0.36; }

@media (prefers-reduced-motion: reduce) {
  .frise-piste { animation: none; }
}

/* Frise du pied de page. La hauteur vivait dans un attribut style, que la
   CSP du site (style-src 'self', sans 'unsafe-inline') bloquait : le motif
   retombait sur le repli de 104px sans que rien ne le signale. */
.frise-pied .frise-motif { --h: clamp(70px, 9vw, 130px); }

/* VISTA — la frise ne défile plus. Un mouvement permanent que personne
   n'a déclenché attire l'œil au détriment du contenu. */
.frise-piste { animation: none; }

/* ------------------------------------------------------------------
   La ville du bas de page, en profondeur (ville() dans build_pages.py).
   Trois plans de la même frise, peints du fond vers l'avant :
   - chaque plan est OPAQUE, d'un gris un peu plus clair que celui de
     derrière : le premier plan cache le second, qui cache le troisième.
     Des plans transparents se voyaient les uns à travers les autres et
     s'aplatissaient en un seul ;
   - chaque plan va à sa vitesse, en pixels par seconde — environ 30
     devant, 15 au milieu, 6 au fond. Les durées tiennent compte de la
     largeur du motif, qui grandit avec la hauteur du plan : à durées
     proches, les trois allaient presque à la même allure.
   Le fond, plus grand et un peu flou, dépasse au-dessus des autres ; le
   haut des silhouettes s'efface dans le noir. */
.ville {
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(120px, 15vw, 210px);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}
.ville .frise {
  position: absolute;
  inset: auto 0 0 0;
  /* Le fondu gauche-droite de .frise ferait voir un plan à travers
     l'autre sur les bords : c'est .ville entière qui s'efface. */
  -webkit-mask-image: none;
  mask-image: none;
}
.ville .frise-piste { animation: frise-defile var(--duree) linear infinite; }
.ville-loin   { color: #16161d; filter: blur(1px); --duree: 330s; }
.ville-milieu { color: #1e1e27; --duree: 96s; }
.ville-pres   { color: #2a2a34; --duree: 32s; }
.ville-loin .frise-motif   { --h: clamp(110px, 14vw, 200px); }
.ville-milieu .frise-motif { --h: clamp(80px, 10vw, 146px); }
.ville-pres .frise-motif   { --h: clamp(54px, 6.6vw, 98px); }
/* Les plans ne partent pas du même point : sans ce décalage, les mêmes
   bâtiments s'aligneraient d'un plan à l'autre. */
.ville-milieu .frise-piste { animation-delay: -40s; }
.ville-pres .frise-piste   { animation-delay: -11s; }
@media (prefers-reduced-motion: reduce) {
  .ville .frise-piste { animation: none; }
}