/* ============================================================================
 * MOTION — loader rideau + surligneur H1 + micro-animations
 * Easing premium, tout en cubic-bezier doux. Respecte prefers-reduced-motion.
 * ========================================================================= */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* sortie douce, premium */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ----------------------------------------------------------------------------
 * LOADER — rideau ink qui se lève en deux panneaux
 * ------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.loader__panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--ink);
  transition: transform 900ms var(--ease-in-out);
  will-change: transform;
}
.loader__panel--top {
  top: 0;
}
.loader__panel--bottom {
  bottom: 0;
}
.loader__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: opacity 350ms ease;
}

/* Nom en mono qui se révèle (clip de gauche à droite) */
.loader__word {
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.6rem + 0.8vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
}
.loader__word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: loaderType 900ms var(--ease-out) 120ms forwards;
}
@keyframes loaderType {
  to {
    width: 100%;
  }
}

/* Filet rouge qui se trace sous le nom */
.loader__rule {
  width: 0;
  height: 2px;
  background: var(--accent);
  animation: loaderRule 760ms var(--ease-out) 360ms forwards;
}
@keyframes loaderRule {
  to {
    width: clamp(180px, 28vw, 320px);
  }
}

/* État "fini" : les panneaux s'écartent (rideau se lève), le centre s'efface */
.loader.is-done .loader__panel--top {
  transform: translateY(-100%);
}
.loader.is-done .loader__panel--bottom {
  transform: translateY(100%);
}
.loader.is-done .loader__center {
  opacity: 0;
}
.loader.is-hidden {
  display: none;
}

/* ----------------------------------------------------------------------------
 * SURLIGNEUR H1 — trait rouge épais qui se trace derrière les mots forts
 * ------------------------------------------------------------------------- */
.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.mark::before {
  content: '';
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  bottom: 0.08em;
  height: 0.42em;
  background: var(--accent);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 1px;
}
/* mot avec accent : texte rouge, le trait reste en surbrillance derrière */
.mark--accent {
  color: var(--accent);
}
.mark--accent::before {
  background: rgba(11, 92, 171, 0.18);
}

/* Déclenchement après l'apparition du titre (classe posée en JS) */
.is-marked .mark::before {
  animation: markIn 620ms var(--ease-out) forwards;
}
/* Calés ~340ms après chaque ligne pour que le trait claque sur le mot posé */
.is-marked .mark:nth-of-type(1)::before {
  animation-delay: 1460ms;
}
.is-marked .mark:nth-of-type(2)::before {
  animation-delay: 1620ms;
}
.is-marked .mark:nth-of-type(3)::before {
  animation-delay: 1780ms;
}
@keyframes markIn {
  to {
    transform: scaleX(1);
  }
}

/* ----------------------------------------------------------------------------
 * SCROLL REVEAL — éléments qui montent en fondu à l'entrée dans le viewport
 * ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 640ms var(--ease-out),
    transform 640ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------------------
 * GRAIN film — texture très subtile sur toute la page (côté cinéma premium)
 * ------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: no-preference) {
  .grain {
    animation: grainShift 0.7s steps(3) infinite;
  }
  @keyframes grainShift {
    0% {
      transform: translate(0, 0);
    }
    33% {
      transform: translate(-3%, 2%);
    }
    66% {
      transform: translate(2%, -3%);
    }
    100% {
      transform: translate(0, 0);
    }
  }
}

/* ----------------------------------------------------------------------------
 * SCANLINE — une fine ligne lumineuse balaie le hero une fois au chargement
 * ------------------------------------------------------------------------- */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 48%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.08) 52%,
    transparent 100%
  );
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before {
    animation: scan 1300ms var(--ease-out) 1000ms 1;
  }
  @keyframes scan {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      transform: translateY(100%);
      opacity: 0;
    }
  }
}

/* ----------------------------------------------------------------------------
 * CURSEUR CUSTOM — point rouge qui suit la souris, grossit sur les liens
 * (desktop + hover uniquement, piloté en JS)
 * ------------------------------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 9500;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width 200ms var(--ease-out),
    height 200ms var(--ease-out),
    background-color 200ms ease,
    opacity 200ms ease;
  mix-blend-mode: normal;
  opacity: 0;
  will-change: transform;
}
.cursor.is-active {
  opacity: 1;
}
.cursor.is-hover {
  width: 44px;
  height: 44px;
  background: rgba(11, 92, 171, 0.18);
  border: 1px solid var(--accent);
}
@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ----------------------------------------------------------------------------
 * Accessibilité : on coupe tout pour les utilisateurs sensibles au mouvement
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader__panel,
  .loader__center,
  .loader__word::after,
  .loader__rule {
    animation: none !important;
    transition: none !important;
  }
  .loader {
    display: none !important;
  }
  .mark::before {
    transform: scaleX(1) !important;
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .grain,
  .hero::before,
  .cursor {
    animation: none !important;
    display: none !important;
  }
}