:root {
  --lime: #C4EF11;
  --sand: #F4F4F4;
  --violet: #8116E0;
  --ink: #100D0E;
  --font-mono: "CS Caleb Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: "Open Sans", system-ui, sans-serif;
}

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--sand);
  font-family: var(--font-body);
  text-align: center;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 3.5rem);
  padding: 2rem 1.5rem;
}

.reveal {
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--delay, 0s);
}

.logo {
  overflow: visible;
  animation: logo-reveal 1.1s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.logo {
  --drop-delay: 1.3s;
  --drop-duration: 1.2s;
  /* instant du choc du point (44 % de sa chute) */
  --impact: calc(var(--drop-delay) + var(--drop-duration) * 0.44 - 0.01s);
}

.piece {
  fill: var(--lime);
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.1, 0.8, 0.3, 1.3);
  animation-fill-mode: both;
}

.piece-m { animation-name: piece-m; animation-delay: var(--impact); }
.piece-v { animation-name: piece-v; animation-delay: var(--impact); }

.word {
  animation-duration: var(--drop-duration);
  animation-delay: var(--drop-delay);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

.glyph-e {
  transform-box: fill-box;
  transform-origin: center;
  animation: e-tilt 0.8s both var(--impact);
}

.glyph-e-right { animation: e-tilt-right 1.5s both var(--impact); }

.word-mael { animation-name: word-mael; }
.word-dev { animation-name: word-dev; }

.dot {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    dot-drop var(--drop-duration) linear var(--drop-delay) both,
    dot-fade 0.15s linear var(--drop-delay) both;
}

h1 { line-height: 0; }

.logo {
  display: block;
  width: min(80vw, 560px);
  height: auto;
}

.contact {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border: 2px solid var(--lime);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  letter-spacing: 0.04em;
  text-decoration: none;
  background: linear-gradient(var(--lime), var(--lime)) left / 0% 100% no-repeat;
  transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s;
}

.contact:hover,
.contact:focus-visible {
  background-size: 100% 100%;
  color: var(--ink);
}

.socials {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.socials a {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--sand);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: background-color 0.2s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.socials .linkedin { --icon: url('../icons/linkedin.svg'); }
.socials .github { --icon: url('../icons/github.svg'); }

.socials a:hover,
.socials a:focus-visible {
  background: var(--lime);
  transform: translateY(-4px);
}

a:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

footer {
  padding: 1.5rem;
  font-size: 0.8rem;
  color: rgba(244, 244, 244, 0.6);
}

.back {
  color: var(--lime);
  font-family: var(--font-mono);
  text-decoration: none;
}

.back:hover { text-decoration: underline; }

.code {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 14vw, 6rem);
  color: var(--lime);
  line-height: 1;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes logo-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-12px); }
  to { opacity: 1; clip-path: inset(-100vh -100vw -100vh -100vw); transform: none; }
}

/* "mael" et "dev" démarrent collés. Quand le point atterrit sur un coin (44 %),
   il repousse "dev" ; puis il bascule à plat (58 % -> 100 %) et les mots reprennent leur place. */
@keyframes word-mael {
  0%, 44% { transform: translateX(8px); }
  52%, 58% { transform: translateX(-1px); }
  100% { transform: none; }
}

@keyframes word-dev {
  0%, 44% { transform: translateX(-8px); }
  52%, 58% { transform: translateX(9px); }
  100% { transform: none; }
}

/* Le point surgit au-dessus du logo, déjà sur l'axe vertical du choc, tourne vite sur lui-même
   et s'écrase comme une météorite sur un coin (44 %). Il reste figé en équilibre, puis bascule
   sous son poids. Les translate du basculement suivent l'arc autour du coin. */
@keyframes dot-drop {
  0% {
    transform: translate(7px, -200px) rotate(-1042deg);
    animation-timing-function: cubic-bezier(0.6, 0, 1, 0.75);
  }
  44% {
    transform: translate(7px, -3.5px) rotate(38deg);
    animation-timing-function: linear;
  }
  58% { transform: translate(7px, -3.5px) rotate(38deg); }
  80% { transform: translate(3.38px, -2.37px) rotate(20deg); }
  92% { transform: translate(1.59px, -1.34px) rotate(10deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes dot-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Les "e" démarrent droits (la barre est inclinée de 20° dans le logo), basculent à gauche
   au choc, au-delà de leur inclinaison finale, puis reviennent vers la droite. */
@keyframes e-tilt {
  0% {
    transform: rotate(20deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  25% {
    transform: rotate(-7deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  100% { transform: rotate(0deg); }
}

/* Le "e" de droite bascule plus loin vers la droite puis revient plus lentement :
   c'est la dernière animation à se terminer. */
@keyframes e-tilt-right {
  0% {
    transform: rotate(20deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  20% {
    transform: rotate(36deg);
    animation-timing-function: cubic-bezier(0.35, 0, 0.2, 1);
  }
  100% { transform: rotate(0deg); }
}

/* Les deux morceaux partent de leur position "alignée" (couleur du texte)
   puis se décalent et passent au vert une fois le logo révélé. */
@keyframes piece-m {
  from { transform: translateX(-17.8402px); fill: var(--sand); }
  to { transform: none; fill: var(--lime); }
}

@keyframes piece-v {
  from { transform: translateX(-16.5882px); fill: var(--sand); }
  to { transform: none; fill: var(--lime); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .logo, .piece, .word, .dot, .glyph-e, .glyph-e-right { animation: none; }
  .contact, .socials a { transition: none; }
}