/* 입자 첫 화면(#opener) — particle-showcase/hero-v2.html 의 스타일을 옮긴 것.
   사이트 스타일과 이름이 겹치지 않게 모두 #opener 안으로 한정하고, 색은 --op-* 로 따로 둔다(사이트의 --ink 와 뜻이 다름). */
#opener{--op-bg:#050608;--op-ink:#eef1f6;--op-muted:#8d95a6;--op-accent:#92b3ed;position:relative;height:380vh;background:var(--op-bg);color:var(--op-ink);letter-spacing:-.02em}
#opener .stick{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden}
#op-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
#opener .poster{position:absolute;left:50%;top:calc(50% - 4vh);width:min(62vw,880px);height:auto;transform:translate(-50%,-50%);opacity:.14;filter:blur(1px);transition:opacity 1.2s;z-index:1;pointer-events:none}
#opener .poster.off{opacity:0}
#opener .veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 60% 45%,transparent 45%,rgba(0,0,0,.55) 100%)}
#opener .chap{position:absolute;left:clamp(20px,5vw,80px);bottom:clamp(56px,11vh,120px);max-width:min(560px,88vw);opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
#opener .chap.c0{left:50%;transform:translate(-50%,18px);text-align:center;max-width:none;width:max-content}
/* 한 장씩 넘기는 첫 화면(data-step): 떠나는 장 글자는 빨리 지워 새 글자와 겹쳐 보이지 않게 */
#opener[data-step] .chap:not(.on){transition-duration:.25s}#opener[data-step] .chap.on{transition-delay:.2s}
#opener .chap.on{opacity:1;transform:none}#opener .chap.c0.on{transform:translate(-50%,0)}
#opener .chap small{display:block;font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--op-muted)}
#opener .chap h1,#opener .chap h2{margin-top:14px;font-family:Pretendard,"Malgun Gothic",sans-serif;font-size:clamp(32px,4.6vw,64px);line-height:1.1;font-weight:800;letter-spacing:-.05em}
#opener .chap em{font-style:normal;color:var(--op-accent)}
#opener .chap p{margin-top:14px;font-size:clamp(14px,1.3vw,17px);line-height:1.6;color:#b7bdca}
#opener .rail{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);display:grid;gap:12px}
#opener .rail i{width:2px;height:22px;background:rgba(255,255,255,.18);transition:.4s}
#opener .rail i.on{background:var(--op-accent);height:34px}
#opener .hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:11px;color:var(--op-muted);letter-spacing:.3em}
#op-fps{position:fixed;right:10px;bottom:10px;z-index:50;font:12px monospace;background:rgba(0,0,0,.6);color:#0f0;padding:4px 8px;border-radius:6px;display:none}
@media (max-width:760px){
  #opener .poster{width:88vw;top:calc(50% - 16vh)}
  #opener .chap,#opener .chap.c0{left:20px;right:20px;top:60%;bottom:auto;width:auto;max-width:none;text-align:center;transform:translateY(18px)}
  #opener .chap.on,#opener .chap.c0.on{transform:none}
  #opener .chap.c0 h1 em{display:block}
  #opener .rail{display:none}
}