:root {
  --ink: #0b0d10;
  --steel: #1c222b;
  --steel-deep: #12161c;
  --paper: #f2f0eb;
  --amber: #ffb300;
  --slate: #5a6472;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: "IBM Plex Mono", monospace;
  overflow: hidden;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Scene du titre ---------- */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
  perspective-origin: 50% 45%;
}

.rig {
  transform-style: preserve-3d;
  will-change: transform;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  transform-style: preserve-3d;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  text-transform: none;
  line-height: 0.92;
  user-select: none;
}

.word {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  letter-spacing: 0.01em;
}

.word-name {
  font-size: clamp(1.8rem, 7.5vw, 7rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.word-name s {
  text-decoration-thickness: 0.1em;
  margin-right: 0.3em;
}

.word-name .face s {
  color: var(--slate);
  text-decoration-color: var(--amber);
}

/* Couches empilees en Z : l'extrusion */

.layer {
  display: block;
  color: var(--steel-deep);
}

.layer:nth-child(n + 5) {
  color: var(--steel);
}

.layer:not(.face) {
  position: absolute;
  inset: 0;
}

.word .layer:nth-child(1) { transform: translateZ(-42px); }
.word .layer:nth-child(2) { transform: translateZ(-36px); }
.word .layer:nth-child(3) { transform: translateZ(-30px); }
.word .layer:nth-child(4) { transform: translateZ(-24px); }
.word .layer:nth-child(5) { transform: translateZ(-18px); }
.word .layer:nth-child(6) { transform: translateZ(-12px); }
.word .layer:nth-child(7) { transform: translateZ(-6px); }
.word .layer:nth-child(8) { transform: translateZ(0); }

.layer.face {
  position: relative;
  color: var(--paper);
}

/* ---------- Assemblage au chargement ---------- */

.word {
  opacity: 0;
  animation: assemble 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes assemble {
  from {
    opacity: 0;
    transform: translateZ(-600px) rotateX(28deg);
  }
  to {
    opacity: 1;
    transform: translateZ(0) rotateX(0);
  }
}

/* ---------- Flottement au repos ---------- */

.rig {
  animation: drift 9s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: rotateX(2deg) rotateY(-3deg); }
  to   { transform: rotateX(-2deg) rotateY(3deg); }
}

.rig.tracking {
  animation: none;
}

/* ---------- Accessibilite ---------- */

@media (prefers-reduced-motion: reduce) {
  .word,
  .rig {
    animation: none;
    opacity: 1;
  }
}