/* ============================================================
   HERO — judul besar, teks ketik, dan kartu ID bertali
   ============================================================ */
.hero { display: flex; align-items: center; padding-top: 110px; padding-bottom: 80px; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; }
.hero__text { position: relative; z-index: 2; }
.hero__text { max-width: 600px; }

/* animasi masuk setelah intro */
.hero__in { opacity: 0; filter: blur(14px); transform: translate3d(0, 22px, 0); }
body.is-ready .hero__in { animation: heroIn 1.1s var(--ease) forwards; animation-delay: calc(.35s + var(--d, 0) * .12s); }
@keyframes heroIn { to { opacity: 1; filter: blur(0); transform: none; } }

.hero__title {
  margin: 24px 0 26px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.1rem, 6.5vw, 6.1rem); line-height: .98; letter-spacing: -.025em;
}
.hero__title span { display: block; }
.hero__title span:first-child { color: #fff; }
.hero__title span:last-child {
  background: linear-gradient(180deg, #a3a3a3, #6b6b6b); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.typed { font: 400 15px/1.4 var(--font-mono); color: var(--fg-2); margin-bottom: 18px; min-height: 22px; }
.typed__caret { animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.hero__desc { max-width: 470px; font-size: 14.5px; line-height: 1.75; color: var(--fg-2); }
.hero .chips { margin: 28px 0 30px; }
.hints { font: 400 12px/2.1 var(--font-mono); color: var(--fg-3); }

.scroll-ind {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; font: 400 10px/1 var(--font-mono); letter-spacing: .24em; color: var(--fg-3);
  opacity: 0; transition: color .25s;
}
body.is-ready .scroll-ind { animation: heroIn 1s var(--ease) 1.6s forwards; }
.scroll-ind:hover { color: #fff; }
.scroll-ind .ico { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(90deg) translateX(4px); } }

/* ---------- Lanyard ---------- */
.lanyard { position: absolute; top: 0; bottom: 0; right: max(var(--gutter), calc((100% - 1180px) / 2)); width: min(40vw, 460px); }
.lanyard canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.id-card {
  position: absolute; left: 0; top: 0; width: clamp(138px, 14.5vw, 205px); aspect-ratio: .72;
  transform-origin: 50% 0; touch-action: none; cursor: grab; will-change: transform; z-index: 3;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.55));
}
.id-card.is-drag { cursor: grabbing; }
.id-card__clip {
  position: absolute; left: 50%; top: -4px; width: 22px; height: 26px; transform: translateX(-50%); z-index: 4;
  border-radius: 4px 4px 7px 7px; background: linear-gradient(90deg, #1b1b1b, #3a3a3a 45%, #151515); box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.id-card__clip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 8px; transform: translateX(-50%); border-radius: 0 0 5px 5px; background: #222; }
.id-card__frame {
  position: absolute; inset: 0; padding: 7.5%; border-radius: 9% / 6.5%; overflow: hidden;
  background: linear-gradient(145deg, #fbfbfb, #d8d8d8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -8px 18px rgba(0,0,0,.12);
}
.id-card__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 4% / 3%; background: #111; user-select: none; -webkit-user-drag: none; }
.id-card__shine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent calc(var(--shine, 50%) - 22%), rgba(255,255,255,.85) var(--shine, 50%), transparent calc(var(--shine, 50%) + 22%));
}

@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__text { order: 2; max-width: none; }
  .lanyard { position: relative; order: 1; top: auto; bottom: auto; right: auto; width: 100%; height: 420px; margin: -120px 0 0; overflow: hidden; }
  .scroll-ind { display: none; }
  .hero { padding-top: 120px; }
}