/* ============================================================
   PAGE D'INTRODUCTION (index.html)
   Reprise fidèle d'un modèle sous licence MIT (voir
   licenses/portfolio-introduction-LICENSE.txt) : même disposition,
   mêmes animations et mêmes temps. Seule la DA change (fond noir,
   accent, fond flouté, police du site). Les animations de position
   du modèle sont rendues en transform, à l'identique.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;800&display=swap');

:root {
  --bg: #050505;
  --fg: #ededed;
  --accent: #efb5a3;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif;
}

html, body { margin: 0; }

body {
  height: 100vh;
  font-family: var(--font-body);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Les pièces du logo arrivent de loin : rien ne doit déborder de l'écran. */
.container {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ── Sous-titre (lettre par lettre) ───────────────────────── */
h2 {
  font-size: 12px;
  font-weight: 300;
  color: var(--fg);
  margin-bottom: 30px;
  opacity: .6;
  letter-spacing: 1px;
  margin-top: -30px;
}
h2.is-split .ch {
  opacity: 0;
  animation: letter_in 200ms ease-in-out forwards;
  animation-delay: calc(1300ms + var(--i) * 10ms);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Navigation ───────────────────────────────────────────── */
nav {
  position: relative;
  z-index: 0;
  text-align: center;
  margin-top: 60px;
  opacity: 0;
  animation: nav_fade .8s 2.4s forwards;
}
nav a {
  position: relative;
  margin: 5px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 300;
  color: var(--fg);
  text-decoration: none;
  text-align: center;
  opacity: .6;
}
nav a:hover,
nav a:focus-visible { opacity: 1; }

/* Deux traits obliques qui se dessinent au survol (accent) */
nav a::before,
nav a::after {
  content: "";
  position: absolute;
  right: 0;
  z-index: -1;
  display: block;
  width: 20px;
  height: 0;
  margin: auto;
  border-top: 2px solid var(--accent);
  transform: rotate(-60deg) translateY(-50%) translateX(-50%);
  transition: clip-path .31s;
}
nav a::before { top: -16px; left: 25px; clip-path: inset(0 40px 0 0); }
nav a::after { top: 36px; left: -2px; clip-path: inset(0 0 0 40px); }
nav a:hover::before,
nav a:hover::after,
nav a:focus-visible::before,
nav a:focus-visible::after { clip-path: inset(0 0 0 0); }

/* ── Logo ─────────────────────────────────────────────────── */
.logo_holder {
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
  width: 380px;
  max-width: 100%;
  margin: auto;
  text-align: center;
  animation: move_up .5s 1.9s both;
}
.logo_holder__rotate {
  position: relative;
  transform: translateY(-50%) rotate(0deg) scale(.5);
  animation: logo_rotate_move .7s .4s both;
}
.logo_holder__right,
.logo_holder__left {
  position: relative;
  fill: var(--fg);
}
.logo_holder__right {
  top: 11px;
  left: 68px;
  transform: rotate(62.1deg);
  animation: logo_right .35s both;
}
.logo_holder__left {
  left: -68px;
  transform: rotate(-118deg);
  animation: logo_left .35s both;
}
.logo_holder__text {
  position: absolute;
  top: -64px;
  left: 60px;
  opacity: 0;
  transform: scale(.5);
  animation: logo_text .4s 1.1s forwards;
}
.logo_holder__text text {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  fill: var(--fg);
}
.logo_holder__text .logo_holder__dot { fill: var(--accent); }

/* ── Images clés (temps du modèle) ────────────────────────── */
@keyframes logo_right {
  from { transform: translateX(1932px) rotate(62.1deg); }
  to { transform: rotate(62.1deg); }
}
@keyframes logo_left {
  from { transform: translateX(-1932px) rotate(-118deg); }
  to { transform: rotate(-118deg); }
}
/* Rotation (0,4 → 0,75 s) puis glissement à gauche (0,75 → 1,1 s) */
@keyframes logo_rotate_move {
  0% { transform: translateX(0) translateY(-50%) rotate(0deg) scale(.5); }
  50% { transform: translateX(0) translateY(-50%) rotate(-60deg) scale(.5); }
  100% { transform: translateX(-90px) translateY(-50%) rotate(-60deg) scale(.5); }
}
@keyframes logo_text {
  from { opacity: 0; transform: translateY(34px) scale(.5); }
  to { opacity: 1; transform: scale(.5); }
}
@keyframes nav_fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes move_up {
  from { transform: translateY(15vh); }
  to { transform: none; }
}
@keyframes letter_in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Mouvement réduit : état final directement ────────────── */
@media (prefers-reduced-motion: reduce) {
  .logo_holder,
  .logo_holder__right,
  .logo_holder__left { animation: none; }
  .logo_holder__rotate { animation: none; transform: translateX(-90px) translateY(-50%) rotate(-60deg) scale(.5); }
  .logo_holder__text { animation: none; opacity: 1; }
  nav { animation: none; opacity: 1; }
  h2.is-split .ch { animation: none; opacity: 1; }
  nav a::before,
  nav a::after { transition: none; }
}