:root {
  --bg-1: #dff1ff;
  --bg-2: #f3e8ff;
  --bg-3: #ffe9f3;
  --ink: #3a3360;
  --ink-soft: #6d6796;
  --card: rgba(255, 255, 255, 0.55);
  --card-hover: rgba(255, 255, 255, 0.8);
  --card-border: rgba(255, 255, 255, 0.9);
  --accent: #8ec5ff;
  --accent-2: #c7a6ff;
  --glow: rgba(142, 197, 255, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-1: #1b1a3a;
    --bg-2: #2a1f4a;
    --bg-3: #13284a;
    --ink: #f2efff;
    --ink-soft: #b9b3e0;
    --card: rgba(255, 255, 255, 0.08);
    --card-hover: rgba(255, 255, 255, 0.16);
    --card-border: rgba(255, 255, 255, 0.18);
    --glow: rgba(142, 197, 255, 0.35);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: "Quicksand", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3));
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.blob {
  position: fixed; border-radius: 50%; filter: blur(70px); opacity: .55; z-index: 0;
  animation: drift 18s ease-in-out infinite alternate;
}
.blob.a { width: 340px; height: 340px; background: #a7d4ff; top: -80px; left: -90px; }
.blob.b { width: 300px; height: 300px; background: #e0c3ff; bottom: -60px; right: -70px; animation-delay: -6s; }
.blob.c { width: 220px; height: 220px; background: #ffc6e0; top: 40%; left: 60%; animation-delay: -12s; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.12); } }

#sky { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.fly { position: absolute; top: 0; left: 0; perspective: 500px; will-change: transform; }
.bf {
  position: relative; width: var(--s); height: var(--s);
  transform-style: preserve-3d;
  transform: rotateX(40deg);
  filter: drop-shadow(0 6px 6px rgba(40, 30, 90, .18));
}
.bf > svg { position: absolute; top: 0; height: 100%; width: 50%; overflow: visible; }
.bf .w-l { left: 0;   transform-origin: right center; animation: flapL var(--flap) ease-in-out infinite alternate; }
.bf .w-r { left: 50%; transform-origin: left center;  animation: flapR var(--flap) ease-in-out infinite alternate; }
.bf .body { left: 0; width: 100%; transform: translateZ(1px); }
@keyframes flapL { from { transform: rotateY(8deg); }  to { transform: rotateY(78deg); } }
@keyframes flapR { from { transform: rotateY(-8deg); } to { transform: rotateY(-78deg); } }
.glide .w-l { animation: glideL 1.4s ease-in-out infinite alternate; }
.glide .w-r { animation: glideR 1.4s ease-in-out infinite alternate; }
@keyframes glideL { from { transform: rotateY(20deg); }  to { transform: rotateY(35deg); } }
@keyframes glideR { from { transform: rotateY(-20deg); } to { transform: rotateY(-35deg); } }

main {
  position: relative; z-index: 2;
  max-width: 480px; margin: 0 auto;
  padding: 64px 16px 40px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.avatar-wrap { position: relative; width: 120px; height: 120px; margin-bottom: 18px; }
.avatar-wrap::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), #ffb8d9, var(--accent));
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.avatar {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  border: 4px solid var(--bg-1); object-fit: cover;
  background: linear-gradient(135deg, #e9f4ff, #f4eaff);
  display: grid; place-items: center; font-size: 54px;
}
.avatar-badge {
  position: absolute; right: -6px; bottom: 2px; font-size: 30px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
}

h1 {
  font-family: "Fredoka", sans-serif; font-weight: 600;
  font-size: 2rem; letter-spacing: .02em;
  background: linear-gradient(90deg, #6aa8ff, #a77bff, #ff8cc6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bio { margin-top: 6px; color: var(--ink-soft); font-weight: 500; }

.links { width: 100%; margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.link {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 20px;
  background: var(--card); border: 1.5px solid var(--card-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--ink); text-decoration: none;
  font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 1.08rem;
  box-shadow: 0 6px 24px rgba(90, 80, 160, .10);
  transition:
    transform .5s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .5s ease, background .3s, border-color .3s, filter .3s;
  animation: rise .6s ease both;
  overflow: hidden;
  isolation: isolate;
}
.link:nth-child(1) { animation-delay: .15s; }
.link:nth-child(2) { animation-delay: .25s; }
.link:nth-child(3) { animation-delay: .35s; }
.link:nth-child(4) { animation-delay: .45s; }
.link:nth-child(5) { animation-delay: .55s; }
@keyframes rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

.link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(142,197,255,.35), rgba(199,166,255,.3), rgba(255,184,217,.35));
  opacity: 0; transition: opacity .35s;
}

.link:hover, .link:focus-visible {
  transform: translateY(-9px) scale(1.035);
  background: var(--card-hover);
  border-color: var(--accent);
  box-shadow:
    0 22px 32px -14px rgba(90, 80, 160, .45),
    0 0 0 4px rgba(142, 197, 255, .25);
  outline: none;
}
.link:hover::before, .link:focus-visible::before { opacity: 1; }
.link:active { transform: translateY(-3px) scale(1.01); transition-duration: .15s; }

.links:hover .link:not(:hover) { filter: opacity(.6) saturate(.8); transform: scale(.98); }

.link .emoji { font-size: 1.5rem; width: 34px; flex-shrink: 0; }
.link .label { flex: 1; text-align: left; }
.link .sub { display: block; font-family: "Quicksand", sans-serif; font-size: .8rem; color: var(--ink-soft); font-weight: 500; }
.link .arrow { opacity: .45; transition: transform .35s, opacity .25s; }
.link:hover .arrow { transform: translateX(5px); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .link { opacity: 1; translate: none; }
  #sky { display: none; }
}