*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000}
body{font-family:"Orbitron","Rajdhani","Pretendard","Noto Sans KR",system-ui,sans-serif;color:var(--ink,#eafff3)}
.ra-intro{--main:#39ff88;--sub:#00f5ff;--accent:#39ff88;--ink:#eafff3;--intro-image:url("../assets/images/hale/hale_01.png");position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 20% 18%,color-mix(in srgb,var(--main) 16%,transparent),transparent 32%),radial-gradient(circle at 76% 62%,color-mix(in srgb,var(--sub) 13%,transparent),transparent 36%),radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 44%),linear-gradient(135deg,#010503 0%,#020908 48%,#000 100%);isolation:isolate}
.ra-intro:before{content:"";position:absolute;inset:-20%;z-index:0;background:linear-gradient(color-mix(in srgb,var(--main) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--main) 10%,transparent) 1px,transparent 1px);background-size:46px 46px;transform:perspective(760px) rotateX(58deg) translateY(16%);transform-origin:center bottom;animation:gridFlow 7s linear infinite;opacity:.42}
.ra-intro:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 5px);mix-blend-mode:screen;opacity:.34}
.ra-noise{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.11;background-image:repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.8) 0 1px,transparent 1px 4px);mix-blend-mode:screen;animation:noiseBlink .18s steps(2) infinite}
.ra-scan{position:absolute;inset:0;z-index:7;pointer-events:none;height:20%;transform:translateY(-130%);background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--main) 26%,transparent) 48%,rgba(255,255,255,.4) 50%,color-mix(in srgb,var(--sub) 18%,transparent) 52%,transparent 100%);filter:blur(.3px);animation:scanDrop 3.4s ease-in-out 1.1s 2}
.ra-particles{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.ra-particles i{position:absolute;width:var(--s);height:var(--s);left:var(--x);top:112%;border-radius:48% 52% 42% 58%;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.78),transparent 22%),color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 44%,transparent),inset 0 0 12px rgba(255,255,255,.12);opacity:0;animation:bubbleRise var(--d) ease-in var(--delay) infinite}
.ra-particles i:nth-child(1){--x:7%;--s:9px;--d:8s;--delay:.3s}.ra-particles i:nth-child(2){--x:16%;--s:16px;--d:10s;--delay:1.7s}.ra-particles i:nth-child(3){--x:26%;--s:6px;--d:7.5s;--delay:.9s}.ra-particles i:nth-child(4){--x:42%;--s:12px;--d:9s;--delay:2.4s}.ra-particles i:nth-child(5){--x:61%;--s:8px;--d:7s;--delay:1.1s}.ra-particles i:nth-child(6){--x:75%;--s:18px;--d:10.5s;--delay:.2s}.ra-particles i:nth-child(7){--x:88%;--s:10px;--d:8.4s;--delay:2.1s}.ra-particles i:nth-child(8){--x:94%;--s:7px;--d:7.8s;--delay:1.3s}
.ra-terminal{position:absolute;left:clamp(18px,5.4vw,84px);top:50%;z-index:10;width:min(520px,calc(100vw - 36px));padding:28px;transform:translateY(-50%);border:1px solid color-mix(in srgb,var(--main) 45%,transparent);background:linear-gradient(135deg,rgba(2,20,10,.92),rgba(0,0,0,.72)),linear-gradient(90deg,color-mix(in srgb,var(--main) 10%,transparent),transparent);box-shadow:0 0 38px color-mix(in srgb,var(--main) 26%,transparent),inset 0 0 34px color-mix(in srgb,var(--main) 6%,transparent);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));opacity:0;animation:terminalBoot .7s ease forwards,terminalOut .62s ease 4.95s forwards}
.ra-terminal:before,.ra-board:before{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.06);pointer-events:none}
.ra-kicker{margin:0 0 22px;color:var(--main);font-size:12px;letter-spacing:.18em;text-shadow:0 0 18px var(--main)}
.ra-loading{display:grid;gap:10px;margin-bottom:24px;font-size:13px;color:#bfffd8;letter-spacing:.14em}
.ra-loading i{display:block;height:8px;border:1px solid color-mix(in srgb,var(--main) 44%,transparent);background:rgba(255,255,255,.03);overflow:hidden}
.ra-loading i:before{content:"";display:block;width:100%;height:100%;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--main),#fff,var(--sub));box-shadow:0 0 24px var(--main);animation:loadFill 3.2s cubic-bezier(.2,.8,.2,1) .5s forwards}
.ra-log{display:grid;gap:9px;color:rgba(234,255,243,.72);font-size:11px;letter-spacing:.12em}
.ra-log p{margin:0;opacity:0;transform:translateX(-14px);animation:logIn .38s ease forwards}
.ra-log p:nth-child(1){animation-delay:.9s}.ra-log p:nth-child(2){animation-delay:1.45s}.ra-log p:nth-child(3){animation-delay:2s}.ra-log p:nth-child(4){animation-delay:2.55s}.ra-log p:before{content:"> ";color:var(--main)}
.ra-granted{position:absolute;inset:0;display:grid;place-items:center;margin:0;background:rgba(0,8,3,.88);color:var(--main);font-size:clamp(26px,5vw,52px);text-align:center;letter-spacing:.16em;text-shadow:0 0 12px var(--main),0 0 38px var(--main);opacity:0;pointer-events:none;animation:grantedFlash 1.7s ease 3.55s forwards}
.ra-board{position:absolute;left:50%;top:50%;z-index:14;width:min(1320px,calc(100vw - 42px));min-height:min(760px,calc(100vh - 58px));display:grid;grid-template-columns:minmax(320px,1fr) minmax(420px,1.4fr);gap:18px;padding:18px;transform:translate(-50%,-50%) scale(.92) rotateX(4deg);opacity:0;border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);background:linear-gradient(135deg,rgba(4,8,18,.94),rgba(0,12,10,.80)),radial-gradient(circle at 22% 22%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 42%);box-shadow:0 0 70px color-mix(in srgb,var(--accent) 24%,transparent),0 20px 90px rgba(0,0,0,.55),inset 0 0 42px rgba(255,255,255,.045);clip-path:polygon(0 0,calc(100% - 38px) 0,100% 38px,100% 100%,38px 100%,0 calc(100% - 38px));animation:boardReveal 1.05s cubic-bezier(.16,1,.3,1) 5.15s forwards}
.ra-board:after{content:attr(data-badge);position:absolute;right:18px;top:18px;z-index:8;padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);background:rgba(2,6,14,.76);color:var(--accent-text,#c7d8ff);font-size:10px;letter-spacing:.16em;text-shadow:0 0 14px color-mix(in srgb,var(--accent) 75%,transparent);opacity:0;transform:translateY(-8px);animation:badgeDrop .46s ease 5.74s forwards}
.ra-portrait-board{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.18)),radial-gradient(circle at center,color-mix(in srgb,var(--sub) 13%,transparent),transparent 56%);box-shadow:inset 0 0 44px rgba(255,255,255,.055),0 0 34px color-mix(in srgb,var(--sub) 13%,transparent)}
.ra-portrait-card{position:absolute;inset:clamp(12px,2.6vw,30px);display:grid;place-items:center;overflow:hidden;transform:translateY(18px);opacity:0;border:1px solid color-mix(in srgb,var(--main) 24%,transparent);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--main) 13%,transparent),transparent 52%),linear-gradient(135deg,rgba(0,0,0,.38),rgba(5,9,18,.20));box-shadow:inset 0 0 28px color-mix(in srgb,var(--main) 6%,transparent),0 0 28px color-mix(in srgb,var(--main) 8%,transparent);animation:imageCardIn .85s ease 5.45s forwards}
.ra-portrait-card:before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.055);pointer-events:none}
.ra-portrait{position:absolute;inset:0;background-image:var(--intro-image);background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--sub) 28%,transparent)) drop-shadow(0 0 40px color-mix(in srgb,var(--accent) 20%,transparent));opacity:0;clip-path:inset(48% 0 48% 0);animation:portraitOpen 1.25s ease 5.72s forwards,portraitFloat 4.8s ease-in-out 6.8s infinite}
.ra-portrait-card:after{content:"";position:absolute;left:-18%;right:-18%;top:0;height:13%;z-index:3;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--main) 26%,transparent),rgba(255,255,255,.42),color-mix(in srgb,var(--sub) 20%,transparent),transparent);filter:blur(.4px);opacity:0;animation:portraitScan 2.1s ease-in-out 6s 2}
.ra-veins{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(55deg,transparent 0 47%,color-mix(in srgb,var(--accent) 25%,transparent) 48%,transparent 50%),linear-gradient(125deg,transparent 0 49%,color-mix(in srgb,var(--sub) 19%,transparent) 50%,transparent 52%),linear-gradient(12deg,transparent 0 49%,color-mix(in srgb,var(--main) 13%,transparent) 50%,transparent 51%);background-size:160px 160px,130px 130px,190px 190px;mix-blend-mode:screen;animation:veinWake 1.1s ease 6.25s forwards,veinDrift 8s linear 6.25s infinite}
.ra-board-info{position:relative;z-index:2;display:grid;align-content:center;gap:14px;padding:52px 18px 18px}
.ra-board-info small{color:var(--main);font-size:11px;letter-spacing:.22em;text-shadow:0 0 14px var(--main);opacity:0;transform:translateX(-16px);animation:infoLine .42s ease 5.9s forwards}
.ra-board-info h2{margin:0;color:#fff;font-size:clamp(40px,5.5vw,70px);line-height:.92;letter-spacing:.04em;text-shadow:0 0 24px color-mix(in srgb,var(--accent) 66%,transparent),0 0 48px color-mix(in srgb,var(--sub) 22%,transparent);opacity:0;transform:translateX(-20px);animation:nameGlitch .9s steps(2) 6.08s forwards}
.ra-code{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ra-code p,.ra-desc,.ra-quote,.ra-stat{opacity:0;transform:translateY(12px);animation:dataRise .5s ease forwards}
.ra-code p{margin:0;padding:10px;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);background:rgba(0,0,0,.24);color:rgba(234,255,243,.70);font-size:10px;line-height:1.5;letter-spacing:.11em}
.ra-code p b{display:block;margin-bottom:3px;color:var(--accent-text,#c7d8ff);font-size:10px}.ra-code p:nth-child(1){animation-delay:6.35s}.ra-code p:nth-child(2){animation-delay:6.48s}.ra-code p:nth-child(3){animation-delay:6.61s}.ra-code p:nth-child(4){animation-delay:6.74s}
.ra-desc{margin:0;padding-left:12px;border-left:2px solid var(--accent);color:rgba(234,255,243,.78);font-size:12px;line-height:1.75;letter-spacing:.055em;animation-delay:6.9s}
.ra-stats{display:grid;gap:9px}.ra-stat{display:grid;grid-template-columns:82px 1fr 34px;gap:8px;align-items:center;color:rgba(234,255,243,.72);font-size:10px}.ra-stat:nth-child(1){animation-delay:7.12s}.ra-stat:nth-child(2){animation-delay:7.26s}.ra-stat:nth-child(3){animation-delay:7.4s}
.ra-stat i{height:6px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);background:rgba(255,255,255,.035)}.ra-stat i:before{content:"";display:block;width:var(--w);height:100%;transform:translateX(-100%);background:linear-gradient(90deg,var(--main),var(--sub),var(--accent));box-shadow:0 0 16px var(--sub);animation:statFill .8s ease forwards;animation-delay:inherit}
.ra-quote{margin:0;padding:12px 13px;border:1px solid color-mix(in srgb,var(--main) 20%,transparent);background:color-mix(in srgb,var(--main) 4%,transparent);color:rgba(218,230,255,.84);font-size:11px;line-height:1.65;letter-spacing:.06em;animation-delay:7.62s}
.ra-exit{position:absolute;inset:0;z-index:30;display:grid;place-items:center;transform:translateY(100%);background:radial-gradient(circle,color-mix(in srgb,var(--main) 16%,transparent),transparent 34%),linear-gradient(135deg,color-mix(in srgb,var(--sub) 14%,transparent),transparent 42%),#000;color:var(--main);font-size:clamp(16px,4vw,32px);letter-spacing:.18em;text-shadow:0 0 22px var(--main);animation:exitGate 1.4s cubic-bezier(.76,0,.24,1) 9.9s forwards}.ra-exit span{opacity:0;animation:exitText .55s ease 10.42s forwards}
.ra-skip{position:fixed;right:18px;bottom:16px;z-index:40;padding:10px 12px;cursor:pointer;border:1px solid color-mix(in srgb,var(--main) 34%,transparent);background:rgba(0,0,0,.55);color:var(--main);font-size:10px;letter-spacing:.16em;backdrop-filter:blur(8px)}.ra-skip:hover{background:color-mix(in srgb,var(--main) 10%,rgba(0,0,0,.55))}
@keyframes terminalBoot{0%{opacity:0;transform:translateY(-50%) translateX(-40px) scale(.97);filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}}@keyframes terminalOut{to{opacity:0;transform:translateY(-50%) translateX(-28px) scale(.985);filter:blur(7px);pointer-events:none}}@keyframes loadFill{to{transform:translateX(0)}}@keyframes logIn{to{opacity:1;transform:translateX(0)}}@keyframes grantedFlash{0%{opacity:0;transform:scale(.96)}18%{opacity:1;transform:scale(1.02)}42%{opacity:.78;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}@keyframes boardReveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.88) rotateX(8deg);filter:blur(13px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotateX(0)}}@keyframes badgeDrop{to{opacity:1;transform:translateY(0)}}@keyframes imageCardIn{to{opacity:1;transform:translateY(0)}}@keyframes portraitOpen{0%{opacity:0;clip-path:inset(50% 0 50% 0);transform:scale(1.05)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:scale(1)}}@keyframes portraitFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes portraitScan{0%{opacity:0;transform:translateY(-80%)}18%{opacity:1}100%{opacity:0;transform:translateY(720%)}}@keyframes veinWake{to{opacity:.36}}@keyframes veinDrift{from{background-position:0 0,0 0,0 0}to{background-position:160px -160px,-130px 130px,190px -190px}}@keyframes infoLine{to{opacity:1;transform:translateX(0)}}@keyframes nameGlitch{0%{opacity:0;transform:translateX(-22px);filter:blur(5px)}20%{opacity:1;transform:translateX(8px);text-shadow:3px 0 var(--sub),-3px 0 var(--accent)}35%{transform:translateX(-5px);text-shadow:-4px 0 var(--main),4px 0 var(--sub)}52%{transform:translateX(2px);filter:blur(0)}100%{opacity:1;transform:translateX(0);filter:blur(0)}}@keyframes dataRise{to{opacity:1;transform:translateY(0)}}@keyframes statFill{to{transform:translateX(0)}}@keyframes scanDrop{0%{transform:translateY(-120%);opacity:0}15%{opacity:1}100%{transform:translateY(520%);opacity:0}}@keyframes gridFlow{from{background-position:0 0,0 0}to{background-position:0 46px,46px 0}}@keyframes noiseBlink{0%{transform:translate(0,0)}100%{transform:translate(-2px,1px)}}@keyframes bubbleRise{0%{opacity:0;transform:translateY(0) translateX(0) scale(.75)}12%{opacity:.7}100%{opacity:0;transform:translateY(-125vh) translateX(42px) scale(1.35)}}@keyframes exitGate{0%{transform:translateY(100%)}72%,100%{transform:translateY(0)}}@keyframes exitText{to{opacity:1}}
@media (max-width:920px){.ra-terminal{left:14px;top:7vh;width:calc(100vw - 28px);padding:20px;transform:none;animation:terminalBootMobile .7s ease forwards,terminalOutMobile .62s ease 4.95s forwards}.ra-board{width:calc(100vw - 28px);height:calc(100vh - 28px);min-height:0;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:12px;overflow:hidden}.ra-board:after{top:12px;right:12px;font-size:9px}.ra-portrait-board{min-height:0;height:100%}.ra-portrait-card{inset:10px}.ra-board-info{align-content:end;gap:9px;padding:12px 8px 8px}.ra-board-info h2{font-size:clamp(32px,10vw,48px)}.ra-code{grid-template-columns:1fr 1fr;gap:7px}.ra-code p{padding:8px;font-size:9px}.ra-desc{font-size:10px;line-height:1.55}.ra-stats{gap:7px}.ra-stat{grid-template-columns:72px 1fr 30px;gap:6px;font-size:9px}.ra-quote{padding:9px 10px;font-size:10px}}@media (max-width:520px){.ra-terminal{top:4vh}.ra-kicker,.ra-loading,.ra-log{font-size:10px}.ra-board{width:calc(100vw - 20px);height:calc(100vh - 20px);padding:10px}.ra-portrait-card{inset:8px}.ra-code{grid-template-columns:1fr}.ra-board-info small{font-size:9px}.ra-desc,.ra-quote{display:none}}@keyframes terminalBootMobile{0%{opacity:0;transform:translateY(-24px) scale(.98);filter:blur(6px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes terminalOutMobile{to{opacity:0;transform:translateY(-18px) scale(.985);filter:blur(7px);pointer-events:none}}