:root {
  color-scheme: dark;
  --bg: #0e0e12;
  --fg: #e9e9ee;
  --muted: #a9a9b6;
  --accent: #c77b8b;
  --accent2: #7a6fae;
  --glow: #5f9ea0;
}
* { box-sizing: border-box; margin: 0; }

body {
  min-height: 100vh; display: grid; place-items: center;
  font-family: system-ui, sans-serif; background: var(--bg); color: var(--fg);
  overflow: hidden;
}

/* Fond animé : bulles floues flottantes */
.blob {
  position: fixed; border-radius: 50%; filter: blur(60px);
  opacity: 0.28; z-index: 0; animation: float 14s ease-in-out infinite;
}
.blob.a { width: 380px; height: 380px; background: var(--accent2); top: -80px; left: -60px; }
.blob.b { width: 320px; height: 320px; background: var(--accent);  bottom: -60px; right: -40px; animation-delay: -4s; }
.blob.c { width: 260px; height: 260px; background: var(--glow);    top: 40%; left: 60%; animation-delay: -8s; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -50px) scale(1.1); }
  66%      { transform: translate(-30px, 30px) scale(0.95); }
}

main { position: relative; z-index: 1; padding: 2rem; max-width: 40rem; width: 100%; display: grid; place-items: center; }

/* Carte (verre dépoli) */
.card {
  width: min(90vw, 420px); padding: 3rem 2.5rem; text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: pop 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes pop {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Titres dégradés animés */
h1, .name {
  background: linear-gradient(90deg, var(--glow), var(--accent), var(--accent2), var(--glow));
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
  letter-spacing: -0.02em;
}
h1 { font-size: 2.2rem; }
@keyframes shine { to { background-position: 300% center; } }

.subtitle { margin-top: .5rem; margin-bottom: 2rem; color: var(--muted); line-height: 1.6; }

form { display: grid; gap: 1rem; }

input {
  width: 100%; padding: 1rem 1.1rem; font-size: 1rem; color: var(--fg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; outline: none;
  transition: border-color .3s, box-shadow .3s;
}
input::placeholder { color: rgba(255, 255, 255, 0.4); }
input:focus { border-color: var(--glow); box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.18); }

button {
  width: 100%; padding: 1rem; font-size: 1.05rem; font-weight: 600; color: #fff;
  cursor: pointer; border: none; border-radius: 14px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); background-size: 200% auto;
  transition: transform .2s, box-shadow .3s, background-position .5s;
}
button:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(122, 111, 174, 0.28); }
button:active { transform: translateY(0); }

/* Écran de bienvenue */
.welcome { text-align: center; display: none; animation: pop 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
.welcome.show { display: grid; gap: .5rem; place-items: center; }
.welcome .hi { font-size: 1.3rem; color: var(--muted); }
.welcome .name { font-size: clamp(2.5rem, 9vw, 4.5rem); font-weight: 800; line-height: 1.1; word-break: break-word; }
.welcome .emoji { font-size: 3rem; margin-top: .5rem; display: inline-block; animation: wave 1.4s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 75% { transform: rotate(-12deg); } }

.back {
  margin-top: 1.5rem; width: auto; padding: .65rem 1.4rem; font-size: .9rem;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.25);
}
.back:hover { box-shadow: none; background: rgba(255, 255, 255, 0.08); transform: none; }