/* rk-sequence : section épinglée et couches de parallaxe (module commun, 30/10/2026).
   Couleurs : uniquement celles des sites, reçues par --rk-seq-couleur (la couleur du site). */
.rk-seq { position: relative; }
.rk-seq-scene {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; display: grid; place-items: end start;
  background: #050505;
}
.rk-seq--active { height: var(--rk-seq-hauteur, 200vh); }
/* min-height à 0 : sinon les 100svh de repos l'emportent sur toute hauteur réduite (mode jour, en-tête du site). */
.rk-seq--active .rk-seq-scene { position: sticky; top: 0; height: 100svh; min-height: 0; }

.rk-seq-fond {
  position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 30% 60%, color-mix(in srgb, var(--rk-seq-couleur, #A78BFA) 14%, transparent), transparent 70%);
}
.rk-seq-repli, .rk-seq-canevas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover;
}
.rk-seq-canevas { opacity: 0; transition: opacity .4s ease; }
.rk-seq--prete .rk-seq-canevas { opacity: 1; }
.rk-seq--prete .rk-seq-repli { visibility: hidden; }

/* Voile : garantit la lecture du texte posé sur l'image (contraste mesuré sur l'image la plus claire). */
.rk-seq-voile {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(5,5,5,.88) 0%, rgba(5,5,5,.55) 32%, rgba(5,5,5,0) 62%);
}
/* La scène est de nuit dans les deux modes : le texte y garde l'encre de nuit du site. */
.rk-seq-texte { color: var(--rk-seq-encre, #F2EEE6); }
.rk-seq-texte { position: relative; z-index: 3; padding: 0 clamp(16px, 5vw, 64px) clamp(32px, 9vh, 96px); max-width: 1100px; }

/* Mots qui se révèlent : le texte complet reste lu d'un seul tenant (.rk-seq-lu). */
.rk-seq-lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.rk-seq-mots > span {
  display: inline-block;
  opacity: clamp(0, calc((var(--rk-seq-mots, 1) * (var(--n, 12) + 1.5) - var(--i)) / 1.5), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--rk-seq-mots, 1) * (var(--n, 12) + 1.5) - var(--i)) / 1.5), 1)) * .4em));
}

/* Mention de la scène (« Rendu 3D · carte à venir ») : petite, lisible dans les deux modes, en haut à droite. */
.rk-seq-mention {
  position: absolute; z-index: 3; top: clamp(64px, 10vh, 96px); right: clamp(16px, 5vw, 64px); margin: 0;
  font-size: 12px; letter-spacing: .08em; color: var(--rk-seq-encre, #F2EEE6); opacity: .78;
  padding: 4px 10px; border-radius: 999px; background: rgba(5,5,5,.55);
}

/* Mouvement réduit, ou Save-Data : aucune animation, image fixe, section non épinglée. */
.rk-seq--immobile .rk-seq-canevas { display: none; }
.rk-seq--immobile .rk-seq-repli { visibility: visible; }
.rk-seq--immobile.rk-seq--active { height: auto; }
.rk-seq--immobile.rk-seq--active .rk-seq-scene { position: relative; }
.rk-seq--immobile .rk-seq-mots > span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rk-seq--active { height: auto; }
  .rk-seq--active .rk-seq-scene { position: relative; }
  .rk-seq-mots > span { opacity: 1; transform: none; }
}

/* Mode jour : la scène reste de nuit, posée comme une vitrine dans la page claire. */
:root[data-theme="light"] .rk-seq-scene {
  margin: 0 clamp(8px, 2vw, 24px); border-radius: 18px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rk-seq-couleur, #A78BFA) 45%, transparent);
}
:root[data-theme="light"] .rk-seq--active .rk-seq-scene { top: 8px; height: calc(100svh - 16px); }