/* ============================================================
   INTRO — layar pembuka hitam: 3 ikon → "Welcome to my Portfolio Website"
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 1000; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
}
.intro.is-leaving { opacity: 0; filter: blur(24px); transform: scale(1.06); pointer-events: none; }
.intro.is-gone { display: none; }

.intro__icons { display: flex; gap: 14px; }
.intro__ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #fff;
  opacity: 0; transform: scale(.3) translateY(14px); filter: blur(8px);
}
.intro.is-run .intro__ico { animation: icoIn .9s var(--spring) forwards; }
.intro.is-run .intro__ico:nth-child(1) { animation-delay: .15s; }
.intro.is-run .intro__ico:nth-child(2) { animation-delay: .32s; }
.intro.is-run .intro__ico:nth-child(3) { animation-delay: .49s; }
@keyframes icoIn { to { opacity: 1; transform: none; filter: blur(0); } }

.intro__title {
  font-family: var(--font-display); font-weight: 800; text-align: center;
  font-size: clamp(1.7rem, 4.4vw, 2.7rem); line-height: 1.12; letter-spacing: -.01em;
  opacity: 0; filter: blur(16px); transform: translateY(16px);
}
.intro.is-run .intro__title { animation: txtIn 1.1s var(--ease) .95s forwards; }
.intro__url {
  font: 400 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--fg-2);
  padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  opacity: 0; transform: translateY(10px);
}
.intro.is-run .intro__url { animation: txtIn .9s var(--ease) 1.5s forwards; }
@keyframes txtIn { to { opacity: 1; filter: blur(0); transform: none; } }

.intro__skip { position: absolute; bottom: 34px; font: 400 10px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); opacity: 0; animation: txtIn 1s 2s forwards; }
.intro__skip:hover { color: var(--fg); }