/* 선언 구간 — 화면을 시원하게 채우는 초대형 한글 한 문장 (직접 설계)
   처음엔 흐릿한 글자로 보이다가, 스크롤하면 단어가 하나씩 별빛과 함께 켜진다.
   색은 변수(--acc1, --acc2)를 쓰므로 팔레트(D1) 확정 시 한 번에 바뀐다. */
#decl { position: relative; background: #000; color: #fff; height: 240vh; }
#decl::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .65;
  background:
    radial-gradient(1.2px 1.2px at 8% 14%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 82% 11%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 28% 38%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 91% 44%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 14% 71%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 66% 63%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 86%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 42% 92%, rgba(255,255,255,.5), transparent 60%); }
.decl-pin { position: sticky; top: 0; z-index: 2; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.decl-wrap { width: 100%; text-align: center; }
.decl-label { display: block; padding-bottom: 34px; font-family: var(--e-font); font-size: 15px; font-weight: 600; letter-spacing: .18em; color: var(--acc2); }
.decl-text { font-size: clamp(46px, 8.2vw, 150px); font-weight: 800; line-height: 1.14; letter-spacing: -.035em; word-break: keep-all; }
.decl-text .w { position: relative; display: inline-block; color: rgba(255,255,255,.14); transition: color .55s, text-shadow .55s; }
.decl-text .w.on { color: #fff; text-shadow: 0 0 38px rgba(31,163,235,.28); }
.decl-text .w.em.on { background: linear-gradient(90deg, var(--acc1), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.decl-sub { padding-top: 44px; font-size: clamp(16px, 1.4vw, 24px); color: rgba(255,255,255,.7); opacity: 0; transform: translateY(18px); transition: opacity .9s, transform .9s; }
#decl.done .decl-sub { opacity: 1; transform: none; }
.decl-text .w .spark.big { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
@media (prefers-reduced-motion: reduce) {
  .decl-text .w { color: #fff; -webkit-text-stroke-color: transparent; }
  .decl-text .w.em { background: linear-gradient(90deg, var(--acc1), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .decl-sub { opacity: 1; transform: none; }
}