/* First-visit intro: bracket logo assembles, wordmark types in, a scan line passes, then the page is wiped upward. */
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-on body { visibility: hidden; }
#intro { position: fixed; inset: 0; z-index: 99999; background: #000; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; clip-path: inset(0 0 0 0); cursor: pointer; }
#intro.out { animation: inOut .8s cubic-bezier(.76, 0, .24, 1) forwards; pointer-events: none; }
@keyframes inOut { to { clip-path: inset(0 0 100% 0); } }

#intro .in-ghost { position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%); font-size: min(34vw, 520px); line-height: 1; font-weight: 800; letter-spacing: -.06em; color: #0d0d0d; white-space: nowrap; animation: inFade 1.4s .2s both; }
#intro .in-c { position: relative; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
#intro .in-logo { width: clamp(64px, 10vw, 118px); height: auto; overflow: visible; }
#intro .in-logo path, #intro .in-logo circle { transform-box: fill-box; transform-origin: center; }
#intro .in-bl { animation: inL .9s .1s cubic-bezier(.2, .8, .2, 1) both; }
#intro .in-br { animation: inR .9s .1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes inL { from { transform: translateX(70%); opacity: 0; } }
@keyframes inR { from { transform: translateX(-70%); opacity: 0; } }
#intro .in-dot { animation: inDot .6s .55s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes inDot { from { transform: scale(0); } }
#intro .in-ring { fill: none; stroke: #9AF0B4; stroke-width: 3; opacity: 0; animation: inRing 1s .6s ease-out both; }
@keyframes inRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(5); } }

#intro .in-wm { position: relative; font-size: clamp(56px, 9vw, 112px); font-weight: 300; letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
#intro .in-wm span { display: inline-block; animation: inT .8s calc(.95s + var(--i) * .07s) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes inT { from { opacity: 0; transform: translateY(40%); filter: blur(8px); } }
#intro .in-scan { position: absolute; top: 6%; bottom: 8%; left: 0; width: 2px; background: #9AF0B4; opacity: 0; animation: inScan 1s 1.75s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes inScan { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

#intro .in-tag { margin: clamp(18px, 3vw, 32px) 0 0; font-size: clamp(18px, 2.2vw, 28px); font-weight: 300; color: #a8a8a8; letter-spacing: -.02em; animation: inFade .9s 2.1s both; }
#intro .in-tag b { color: #9AF0B4; font-weight: 300; }
@keyframes inFade { from { opacity: 0; transform: translateY(10px); } }

#intro .in-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #9AF0B4; transform-origin: left; animation: inProg 3.2s linear both; }
@keyframes inProg { from { transform: scaleX(0); } }
#intro .in-skip { position: absolute; right: clamp(18px, 4vw, 40px); bottom: clamp(18px, 3vw, 32px); background: none; border: 0; padding: 8px 4px; font: inherit; font-size: 15px; font-weight: 400; color: #6b6b6b; cursor: pointer; animation: inFade .6s 1s both; }
#intro .in-skip:hover { color: #fff; }
#intro .in-skip:focus-visible { outline: 2px solid #9AF0B4; outline-offset: 4px; }
@media (max-width: 520px) { #intro .in-c { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { #intro { display: none; } html.intro-on body { visibility: visible; } }