/*
 * VYRON RP — couche « motion design ».
 * Chargée après vyron.css. Tout est préfixé par .motion, une classe que
 * motion.js pose sur <html> seulement si le visiteur n'a pas réduit les
 * animations : sans elle (ou sans ce fichier), le site reste celui d'origine.
 * Les noms d'animation commencent par « m- » pour ne pas croiser ceux de vyron.css.
 */

/* ==========================================================================
   Grain de pellicule sur tout le site
   ========================================================================== */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 1090;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: m-grain .8s steps(1) infinite;
}
@keyframes m-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 3%); }
  40%  { transform: translate(4%, -5%); }
  60%  { transform: translate(-2%, 7%); }
  80%  { transform: translate(6%, 1%); }
}

/* ==========================================================================
   Projecteur : la grille du fond s'allume autour de la souris
   ========================================================================== */
.projecteur {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(240px circle at var(--cx, -999px) var(--cy, -999px), rgba(var(--accent-rgb), .09), transparent 70%),
    linear-gradient(rgba(var(--accent-rgb), .26) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(var(--accent-rgb), .26) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask: radial-gradient(260px circle at var(--cx, -999px) var(--cy, -999px), #000, transparent 72%);
  mask: radial-gradient(260px circle at var(--cx, -999px) var(--cy, -999px), #000, transparent 72%);
  opacity: 0;
  transition: opacity .5s;
}
.projecteur.actif { opacity: 1; }

/* ==========================================================================
   Onde au clic
   ========================================================================== */
.onde-clic {
  position: fixed;
  top: 0; left: 0;
  z-index: 1290;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-clair);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .8), inset 0 0 8px rgba(var(--accent-rgb), .6);
  pointer-events: none;
  animation: m-onde .65s var(--ease) forwards;
}
.onde-clic + .onde-clic { animation-duration: .9s; }
@keyframes m-onde { to { transform: scale(6.5); opacity: 0; border-width: .3px; } }

/* ==========================================================================
   Entrée du héros (à la première visite et à chaque retour sur l'accueil)
   ========================================================================== */
@keyframes m-monte { from { opacity: 0; transform: translateY(28px); filter: blur(10px); } }
@keyframes m-monte-net { from { opacity: 0; transform: translateY(24px); } }
@keyframes m-revele {
  0%   { clip-path: inset(-30% 100% -30% -30%); }
  90%  { clip-path: inset(-30% 0 -30% -30%); }
  100% { clip-path: inset(-30% -30% -30% -30%); }
}
@keyframes m-balai {
  0%   { left: 0; opacity: 1; }
  90%  { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes m-embleme {
  0%   { opacity: 0; scale: .5; rotate: -35deg; filter: blur(14px) brightness(2.4); }
  55%  { opacity: 1; filter: blur(0) brightness(1.7); }
  100% { opacity: 1; scale: 1; rotate: 0deg; filter: none; }
}
@keyframes m-coin { from { opacity: 0; scale: 0; } }

.motion .hero.intro .surtitre      { animation: m-monte .8s var(--ease) .05s both; }
.motion .hero.intro .hero-titre    { position: relative; }
.motion .hero.intro .hero-titre::after {
  content: "";
  position: absolute;
  top: -6%; bottom: -6%;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 12px 2px var(--accent-clair), 0 0 40px 8px rgba(var(--accent-rgb), .8);
  animation: m-balai 1.05s cubic-bezier(.77, 0, .18, 1) .15s both;
  pointer-events: none;
}
.motion .hero.intro .hero-titre-l1 { animation: m-revele 1.05s cubic-bezier(.77, 0, .18, 1) .15s both; }
.motion .hero.intro .hero-titre-l2 { animation: m-revele .9s cubic-bezier(.77, 0, .18, 1) .5s both; }
.motion .hero.intro .hero-slogan   { animation: m-monte .8s var(--ease) .6s both; }
.motion .hero.intro .compte-titre  { animation: m-monte .7s var(--ease) .72s both; }
.motion .hero.intro .case          { animation: m-monte-net .7s var(--ease) both; }
.motion .hero.intro .case:nth-child(1) { animation-delay: .8s; }
.motion .hero.intro .case:nth-child(2) { animation-delay: .87s; }
.motion .hero.intro .case:nth-child(3) { animation-delay: .94s; }
.motion .hero.intro .case:nth-child(4) { animation-delay: 1.01s; }
.motion .hero.intro .chargement    { animation: m-monte .7s var(--ease) 1.08s both; }
.motion .hero.intro .hero-actions .btn { animation: m-monte-net .7s var(--ease) 1.15s both; }
.motion .hero.intro .hero-actions .btn + .btn { animation-delay: 1.23s; }
.motion .hero.intro .embleme       { animation: m-embleme 1.5s var(--ease) .2s both; }
.motion .hero.intro .hud-coin      { animation: m-coin .7s var(--ease) .1s both; }
.motion .hero.intro .hud-texte     { animation: m-monte .7s var(--ease) .4s both; }
.motion .hero.intro .hero-pied     { animation: m-monte .9s var(--ease) 1.3s both; }

/* ==========================================================================
   Sortie du héros au défilement : la ville avance, le texte s'éloigne
   (--sortie va de 0 à 1, posé par motion.js)
   ========================================================================== */
.motion .hero-fond {
  transform: scale(calc(1 + var(--sortie, 0) * .14));
  transform-origin: 50% 100%;
}
.motion .hero-grille {
  transform: translate3d(0, calc(var(--sortie, 0) * -110px), 0);
  opacity: calc(1 - var(--sortie, 0) * 1.15);
}
.motion .hud { opacity: calc(1 - var(--sortie, 0) * 1.6); }

/* ==========================================================================
   Bandeau défilant : accélère, s'inverse et penche avec le défilement
   ========================================================================== */
.motion .defilant span,
.motion .defilant i { transform: skewX(var(--penche, 0deg)); }

/* ==========================================================================
   Titres de section : le titre s'écrit derrière un volet, le trait se tend
   ========================================================================== */
.motion .bloc-tete.a-reveler h2 {
  clip-path: inset(-15% 100% -15% 0);
  transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1) calc(var(--d, 0s) + .12s);
}
.motion .bloc-tete.a-reveler.vu h2 { clip-path: inset(-15% -5% -15% 0); }
.motion .bloc-tete.a-reveler .etiquette::before {
  width: 0;
  transition: width .9s var(--ease) calc(var(--d, 0s) + .25s);
}
.motion .bloc-tete.a-reveler.vu .etiquette::before { width: 34px; }

/* ==========================================================================
   Images : dévoilées par un volet au moment où elles entrent à l'écran
   ========================================================================== */
.motion .camp.a-reveler .camp-fond {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1) calc(var(--d, 0s) + .2s), transform 1.2s var(--ease), opacity .6s, filter .6s;
}
.motion .camp.a-reveler.vu .camp-fond { clip-path: inset(0); }

.motion .nouv.a-reveler .nouv-media img {
  clip-path: inset(0 100% 0 0);
  scale: 1.18;
  transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1) .25s, scale 1.8s var(--ease) .25s, transform 1.2s var(--ease);
}
.motion .nouv.a-reveler.vu .nouv-media img { clip-path: inset(0); scale: 1; }

/* ==========================================================================
   Cartes : un rayon de lumière fait le tour de la bordure au survol
   ========================================================================== */
@property --m-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.motion .pilier:hover,
.motion .nouv:hover {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(15, 26, 48, .94), rgba(8, 13, 25, .96)) padding-box,
    conic-gradient(from var(--m-angle), rgba(var(--accent-rgb), .35) 0 50%, rgba(var(--accent-rgb), .8) 64%, #fff 72%, var(--accent-clair) 77%, rgba(var(--accent-rgb), .35) 92%) border-box;
  animation: m-rayon 2.6s linear infinite;
}
@keyframes m-rayon { to { --m-angle: 360deg; } }

/* ==========================================================================
   Menu : petit glitch RVB au survol
   ========================================================================== */
.motion .menu a:hover { animation: m-glitch .4s steps(1) 1; }
@keyframes m-glitch {
  0%  { text-shadow: -2px 0 rgba(255, 47, 91, .85), 2px 0 rgba(39, 211, 255, .85); }
  33% { text-shadow: 2px 0 rgba(255, 47, 91, .85), -2px 0 rgba(39, 211, 255, .85); }
  66% { text-shadow: -1px 0 rgba(255, 47, 91, .6), 1px 0 rgba(39, 211, 255, .6); }
  100% { text-shadow: none; }
}

/* ==========================================================================
   Index des sections de l'accueil (à droite, grand écran)
   ========================================================================== */
.indexe {
  position: fixed;
  right: clamp(10px, 1.4vw, 22px);
  top: 50%;
  translate: 0 -50%;
  z-index: 900;
  display: grid;
  gap: 2px;
  transition: opacity .4s, visibility .4s;
}
.indexe a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 5px 0;
  text-decoration: none;
  font: 600 .6rem var(--f-hud);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pale);
}
.indexe-lib {
  padding: .35em .7em;
  background: rgba(4, 6, 12, .85);
  border: 1px solid var(--trait);
  white-space: nowrap;
  opacity: 0;
  translate: 10px 0;
  transition: opacity .3s, translate .3s var(--ease);
  pointer-events: none;
}
.indexe-num { font-variant-numeric: tabular-nums; transition: color .3s; }
.indexe-trait {
  width: 14px; height: 2px;
  background: currentColor;
  transition: width .4s var(--ease), background-color .3s, box-shadow .3s;
}
.indexe a:hover, .indexe a:focus-visible { color: var(--texte); }
.indexe a:hover .indexe-lib, .indexe a:focus-visible .indexe-lib { opacity: 1; translate: 0 0; }
.indexe a.actif { color: var(--accent-clair); }
.indexe a.actif .indexe-trait { width: 34px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
body:not([data-vue="accueil"]) .indexe, .menu-ouvert .indexe, .indexe.sur-hero { opacity: 0; visibility: hidden; }
@media (max-width: 1200px), (hover: none) {
  .indexe { display: none; }
}