/* =========================================================================
   Hero homepage — récitation animée FR (premier plan) + grec en filigrane
   (parallaxe horizontale lente).
   Le bloc auteur (livre Louis Pernot) est désormais en colonne droite de la
   section "Actualités du Notre Père" — voir home.css `.np-book-feature`.
   ========================================================================= */

:root {
  --np-hero-segment-duration: 4s;
  --np-hero-segments-count: 14;
}

.np-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-block: var(--space-6) var(--space-5);
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 1024px) {
  .np-hero { padding-inline: var(--gutter-desktop); }
}

/* Stage : conteneur du grec en filigrane + français */
.np-hero__stage {
  position: relative;
  width: 100%;
  height: clamp(240px, 36vh, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 0;
}

/* ---------- Couche grecque en filigrane ---------- */
.np-hero__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  overflow: visible;
}
.np-hero__bg-line {
  position: absolute;
  font-family: var(--font-greek);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(8rem, 22vw, 22rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--np-ink);
  opacity: 0;
  text-align: center;
}

/* ---------- Couche française au premier plan ---------- */
.np-hero__recit {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  text-align: center;
}
.np-hero__line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--np-ink);
  opacity: 0;
  text-align: center;
  text-wrap: balance;
  padding-inline: var(--space-5);
}
.np-hero__line.is-xl { font-size: clamp(2.6rem, 7.4vw, 6.5rem); }
.np-hero__line.is-lg { font-size: clamp(2.1rem, 5.8vw, 5rem); }
.np-hero__line.is-md { font-size: clamp(1.6rem, 4.2vw, 3.6rem); }
.np-hero__line.c-ink    { color: var(--np-ink); }
.np-hero__line.c-accent { color: var(--np-accent); font-weight: 600; }
.np-hero__line.c-soft   { color: var(--np-ink-soft); }

/* Timing partagé : 14 segments × 4 s = 56 s, infini */
.np-hero__line, .np-hero__bg-line {
  animation-duration: calc(var(--np-hero-segment-duration) * var(--np-hero-segments-count));
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* Mise en pause tant que le loader n'a pas terminé. */
  animation-play-state: paused;
}
.np-loader-done .np-hero__line,
.np-loader-done .np-hero__bg-line {
  animation-play-state: running;
}
.np-hero__line:nth-child(1),  .np-hero__bg-line:nth-child(1)  { animation-delay: calc(var(--np-hero-segment-duration) *  0); }
.np-hero__line:nth-child(2),  .np-hero__bg-line:nth-child(2)  { animation-delay: calc(var(--np-hero-segment-duration) *  1); }
.np-hero__line:nth-child(3),  .np-hero__bg-line:nth-child(3)  { animation-delay: calc(var(--np-hero-segment-duration) *  2); }
.np-hero__line:nth-child(4),  .np-hero__bg-line:nth-child(4)  { animation-delay: calc(var(--np-hero-segment-duration) *  3); }
.np-hero__line:nth-child(5),  .np-hero__bg-line:nth-child(5)  { animation-delay: calc(var(--np-hero-segment-duration) *  4); }
.np-hero__line:nth-child(6),  .np-hero__bg-line:nth-child(6)  { animation-delay: calc(var(--np-hero-segment-duration) *  5); }
.np-hero__line:nth-child(7),  .np-hero__bg-line:nth-child(7)  { animation-delay: calc(var(--np-hero-segment-duration) *  6); }
.np-hero__line:nth-child(8),  .np-hero__bg-line:nth-child(8)  { animation-delay: calc(var(--np-hero-segment-duration) *  7); }
.np-hero__line:nth-child(9),  .np-hero__bg-line:nth-child(9)  { animation-delay: calc(var(--np-hero-segment-duration) *  8); }
.np-hero__line:nth-child(10), .np-hero__bg-line:nth-child(10) { animation-delay: calc(var(--np-hero-segment-duration) *  9); }
.np-hero__line:nth-child(11), .np-hero__bg-line:nth-child(11) { animation-delay: calc(var(--np-hero-segment-duration) * 10); }
.np-hero__line:nth-child(12), .np-hero__bg-line:nth-child(12) { animation-delay: calc(var(--np-hero-segment-duration) * 11); }
.np-hero__line:nth-child(13), .np-hero__bg-line:nth-child(13) { animation-delay: calc(var(--np-hero-segment-duration) * 12); }
.np-hero__line:nth-child(14), .np-hero__bg-line:nth-child(14) { animation-delay: calc(var(--np-hero-segment-duration) * 13); }

/* Français : entrée par la droite, sortie par la gauche, mouvement discret. */
.np-hero__line { animation-name: np-hero-fr; }
@keyframes np-hero-fr {
  0%      { opacity: 0; transform: translateX(12px); }
  0.9%    { opacity: 1; transform: translateX(8px);  }
  6.25%   { opacity: 1; transform: translateX(-8px); }
  7.14%   { opacity: 0; transform: translateX(-12px); }
  100%    { opacity: 0; transform: translateX(-12px); }
}

/* Grec : opacité 0.025, défilement horizontal lent (~15 px/s) → effet parallaxe. */
.np-hero__bg-line { animation-name: np-hero-gr; }
@keyframes np-hero-gr {
  0%      { opacity: 0;     transform: translateX(30px); }
  0.9%    { opacity: 0.025; transform: translateX(20px); }
  6.25%   { opacity: 0.025; transform: translateX(-20px); }
  7.14%   { opacity: 0;     transform: translateX(-30px); }
  100%    { opacity: 0;     transform: translateX(-30px); }
}

/* Reduced-motion : segments empilés, sans animation */
@media (prefers-reduced-motion: reduce) {
  .np-hero__stage { height: auto; flex-direction: column; gap: var(--space-4); }
  .np-hero__line, .np-hero__bg-line {
    position: relative; opacity: 1; animation: none; transform: none;
  }
  .np-hero__bg-line {
    opacity: 0.025;
    font-size: clamp(1.5rem, 4vw, 3rem);
    white-space: normal;
  }
}