/* ================================
   ENTRÉE – premier écran
   ================================ */

.entry {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: var(--space-xl);
  text-align: center;
}

.js .entry {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  transition:
    opacity var(--transition-reveal) var(--ease-in-out),
    filter var(--transition-reveal) var(--ease-in-out),
    visibility 0s linear var(--transition-reveal);
}

[data-state='space'] .entry {
  opacity: 0;
  filter: blur(10px);
  visibility: hidden;
  pointer-events: none;
}

.entry-dot {
  width: 5px;
  height: 5px;
  margin-bottom: clamp(var(--space-xl), 8svh, var(--space-2xl));
  border-radius: 50%;
  background-color: var(--color-primary);
  animation: breathe 5s ease-in-out infinite 2.4s;
  opacity: 0.3;
}

.entry-name {
  display: grid;
  gap: 0.45em;
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  translate: calc(var(--pointer-x, 0) * -18px) calc(var(--pointer-y, 0) * -12px);
}

@media (prefers-reduced-motion: reduce) {
  .entry-name {
    translate: none;
  }
}

/* Évite un flash du texte brut avant le découpage en lettres */
.js:not(.no-intro) .entry-name:not(.split) {
  opacity: 0;
}

.entry-line {
  display: block;
  /* compense l'interlettrage final pour un centrage optique */
  padding-inline-start: var(--tracking-display);
  animation: rise 1.8s var(--ease-out) both 0.2s;
}

.entry-line + .entry-line {
  animation-delay: 0.55s;
}

.js .entry-line {
  animation: none;
}

.entry-letter {
  display: inline-block;
  animation: letter-in 1.6s var(--ease-out) both;
  animation-delay: calc(0.3s + var(--c, 0) * 90ms);
  transition:
    translate 1.2s var(--ease-out),
    color 1.2s var(--ease-out);
}

.entry-letter:hover {
  translate: 0 -0.12em;
  color: var(--color-secondary);
  transition-duration: 0.4s;
}

@keyframes letter-in {
  from {
    opacity: 0;
    transform: translateY(0.6em) scaleY(1.3);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.entry-rule {
  width: 4.5rem;
  height: 1px;
  margin-top: clamp(var(--space-xl), 6svh, var(--space-2xl));
  background-color: var(--color-primary);
  opacity: 0.6;
  transform-origin: center;
  animation: draw 1.6s var(--ease-in-out) both 1.5s;
}

@keyframes draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.entry-enter {
  display: inline-flex;
  gap: 0.6em;
  margin-top: clamp(var(--space-lg), 5svh, var(--space-2xl));
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-light);
  animation: fade var(--transition-reveal) ease both 2.3s;
  transition:
    color var(--transition-slow) var(--ease-out),
    gap var(--transition-slow) var(--ease-out);
}

.entry-enter:hover,
.entry-enter:focus-visible {
  color: var(--color-secondary);
  gap: 1.4em;
}