/* ==========================================================================
   HAYDAR — Inscriptions flottantes v3 (fond fort + ton-sur-ton)
   Visible par défaut en CSS pur (pas de dépendance stricte au JS).
   Le JS ajoute seulement une classe "is-active" qui intensifie l'opacité
   quand la section est dans le viewport — mais rien n'est invisible sans lui.
   ========================================================================== */

.haydar-inscriptions-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  contain: layout style;
  transform: translate3d(0, var(--haydar-parallax, 0px), 0);
}

.haydar-floating-inscription {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  line-height: 1;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0) scale(var(--haydar-scale-min, 0.9));
  opacity: var(--haydar-op-base, 0.16);
  animation-name: haydar-drift;
  animation-duration: var(--haydar-dur, 46s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--haydar-delay, 0s);
  transition: opacity 2.2s ease;
}

/* Quand la section est activement dans le viewport, l'intensité monte légèrement */
.haydar-inscriptions-layer.is-active .haydar-floating-inscription {
  opacity: var(--haydar-op, 0.26);
}

/* Niveau 1 & 2 — mots arabes et français */

.haydar-ar {
  font-family: 'Aref Ruqaa', 'Amiri', 'Traditional Arabic', serif;
  color: var(--haydar-tone, #17130F);
  font-weight: 500;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 -1px 0 rgba(23, 19, 15, 0.25);
  letter-spacing: 0.01em;
}

.haydar-fr {
  font-family: 'Cinzel', serif;
  color: var(--haydar-tone, #6E5138);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* Niveau 3 — fragments de lettres (texture architecturale, pas du texte à lire) */

.haydar-fragment {
  font-family: 'Aref Ruqaa', 'Amiri', 'Traditional Arabic', serif;
  color: var(--haydar-tone, #17130F);
  font-weight: 400;
  filter: blur(0.15px);
}

/* Symboles Tifinagh — rares, mêmes règles d'opacité/mouvement que les fragments */

.haydar-tifinagh {
  font-family: 'Noto Sans Tifinagh', serif;
  color: var(--haydar-tone, #6E5138);
  font-weight: 400;
}

/* Niveau 4 — "wash" : très grands glyphes en filigrane, présence de fond,
   parfois coupés par le bord de la section (effet mur qui continue au-delà). */

.haydar-wash {
  font-family: 'Aref Ruqaa', 'Amiri', 'Traditional Arabic', serif;
  color: var(--haydar-tone, #DDCBA1);
  font-weight: 400;
  text-shadow: none;
  filter: blur(0.3px);
}

/* Niveau 5 — "monument" : grand symbole solitaire (étoile marocaine à 8
   branches, ou symbole amazigh entouré d'un motif zellige) qui traverse
   l'écran en diagonale, du coin bas-droit vers le coin haut-gauche. */

.haydar-monument {
  display: block;
}

.haydar-monument-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--haydar-tone, #B49A6C);
}

.haydar-monument-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Noto Sans Tifinagh', serif;
  font-size: 32%;
  color: var(--haydar-tone, #B49A6C);
  line-height: 1;
}

.haydar-monument {
  animation-name: haydar-diagonal;
}

/* Niveau 6 — "vague" : mots à timing identique (phase verrouillée en JS),
   halo très doux pour que le moment de convergence se distingue un peu. */
.haydar-wave {
  text-shadow: 0 0 14px rgba(180, 154, 108, 0.22);
}

/* ==========================================================================
   Mouvement — dérive horizontale lente (droite → gauche → retour),
   inspirée des glyphes flottants de menus cinématiques.
   Un seul cycle continu, sans à-coup, jamais de saut brusque.
   ========================================================================== */

@keyframes haydar-drift {
  0% {
    transform: translate3d(calc(-1 * var(--haydar-range, 46px)), 0, 0) scale(var(--haydar-scale-min, 0.9));
    opacity: var(--haydar-op-edge, 0.05);
  }
  15% {
    opacity: var(--haydar-op-base, 0.16);
  }
  50% {
    transform: translate3d(var(--haydar-range, 46px), calc(-1 * var(--haydar-ay, 10px)), 0) scale(var(--haydar-scale-peak, 1.08));
    opacity: var(--haydar-op-peak, 0.3);
  }
  85% {
    opacity: var(--haydar-op-base, 0.16);
  }
  100% {
    transform: translate3d(calc(-1 * var(--haydar-range, 46px)), 0, 0) scale(var(--haydar-scale-min, 0.9));
    opacity: var(--haydar-op-edge, 0.05);
  }
}

@keyframes haydar-diagonal {
  0% {
    transform: translate3d(var(--haydar-dx-start, 45vw), var(--haydar-dy-start, 38vh), 0) scale(var(--haydar-scale-min, 0.9));
    opacity: 0;
  }
  12% {
    opacity: var(--haydar-op-base, 0.1);
  }
  50% {
    transform: translate3d(0, 0, 0) scale(var(--haydar-scale-peak, 1.1));
    opacity: var(--haydar-op-peak, 0.16);
  }
  88% {
    opacity: var(--haydar-op-base, 0.1);
  }
  100% {
    transform: translate3d(var(--haydar-dx-end, -45vw), var(--haydar-dy-end, -38vh), 0) scale(var(--haydar-scale-min, 0.9));
    opacity: 0;
  }
}

/* ==========================================================================
   Responsive — la texture reste présente partout, seulement plus légère.
   La densité et la taille des éléments sont déjà réduites côté JS pour
   mobile/tablette (moins d'éléments injectés), donc peu de règles ici.
   ========================================================================== */

@media (max-width: 640px) {
  .haydar-ar {
    font-size: 0.85em;
  }
  .haydar-fr {
    font-size: 0.85em;
    letter-spacing: 0.16em;
  }
}

/* Mouvement réduit — respect total de la préférence système */
@media (prefers-reduced-motion: reduce) {
  .haydar-floating-inscription {
    animation: none !important;
    opacity: var(--haydar-op-base, 0.16) !important;
    transition: opacity 1.2s ease;
  }
}