/* ---------------------------------------------------------------------------
   elone.eu — écran de chargement
   Les lettres de « Elone » tombent une à une au centre, puis retombent
   une à une hors de l'écran pour libérer la page.
--------------------------------------------------------------------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background-color: var(--bg);
  overflow: hidden;
  /* le conteneur est animé par JS, on prépare la couche */
  will-change: opacity, transform;
}

.loader[hidden] {
  display: none;
}

/* Halo coloré derrière le mot */
.loader__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 60rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(
      circle at 50% 50%,
      color-mix(in oklab, var(--primary-500) 26%, transparent) 0%,
      transparent 62%
    ),
    radial-gradient(
      circle at 65% 62%,
      color-mix(in oklab, var(--accent-blue) 14%, transparent) 0%,
      transparent 55%
    );
  filter: blur(20px);
  opacity: 0;
}

/* Voile de grain / grille très discret */
.loader__grid {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0.35;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
}

.loader__word {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.01em;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(4.5rem, 19vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  user-select: none;
}

.loader__letter {
  display: block;
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  background-image: linear-gradient(
    170deg,
    #ffe9ec 0%,
    var(--primary-300) 42%,
    var(--primary-500) 78%,
    var(--primary-600) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /* la lueur ne peut pas passer par text-shadow avec background-clip:text */
  filter: drop-shadow(0 10px 30px color-mix(in oklab, var(--primary-500) 40%, transparent));
}

/* La ligne d'impact au sol, sous le mot */
.loader__floor {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: calc(50% - 0.55em);
  width: min(78vw, 34rem);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in oklab, var(--primary-300) 85%, transparent) 20%,
    #fff 50%,
    color-mix(in oklab, var(--primary-300) 85%, transparent) 80%,
    transparent
  );
  opacity: 0;
  will-change: opacity, transform;
}

/* Fallback sans JS : on montre la page, pas un écran noir */
.no-js .loader {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    display: none;
  }
}