#intro.intro-view {
  position: absolute;
  inset: 0;
  z-index: 11;
  overflow: hidden;
  contain: paint;
  background:
    linear-gradient(138deg, rgba(70,54,156,.72) 0%, rgba(32,45,108,.34) 24%, transparent 43%),
    linear-gradient(222deg, rgba(46,67,145,.68) 0%, rgba(21,37,88,.32) 25%, transparent 44%),
    linear-gradient(38deg, rgba(37,52,121,.66) 0%, rgba(25,33,81,.3) 23%, transparent 42%),
    linear-gradient(318deg, rgba(67,46,132,.56) 0%, rgba(24,39,94,.28) 24%, transparent 43%),
    #0a1338;
  opacity: 1;
  transition: opacity var(--ds-duration-panel-out) var(--ds-ease-exit);
}
.entry-splash[hidden] { display: none; }
.entry-splash.is-exiting { opacity: 0; pointer-events: none; }
/* 셰이더 레퍼런스의 그레인. SVG 난수를 soft-light로 얹는다. */
.entry-splash::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.entry-splash__content {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 24px 76px; text-align:center; color:#fff;
  font-family:"Paperlogy","Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* 아이콘 주변은 원본 외곽색과 같은 남색을 유지하고, 그 밖에서만 메쉬가 흐른다. */
.entry-splash__icon { position:relative; display:block; width:176px; height:176px; margin:-10px 0 18px;
  isolation:isolate; animation:logo-rise var(--ds-duration-intro) var(--ds-ease-intro) both; }
.entry-splash__icon::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:url("/assets/brand/intro-app-icon.png") center / contain no-repeat; }

/* 로고와 카피 사이 진행바. 스플래시 2초 홀드에 맞춰 한 번 채워진다.
   머리 끝에는 유성처럼 빛나는 점을 둔다. */
.entry-splash__progress { position:relative; width:240px; max-width:76%; height:9px; margin:0 0 26px;
  border-radius:999px; background:rgba(255,255,255,.12); }
/* 끝으로 갈수록 연보라가 흰빛으로 타들어가듯 이어진다. 별도의 점은 두지 않는다. */
.entry-splash__progress > span { position:relative; display:block; width:0; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#ffffff 0%,#ffffff 22%,#c3b2f0 62%,#b9a8f5 84%,#f2ecff 95%,#fff 100%);
  animation:splash-progress 1800ms 200ms cubic-bezier(.4,0,.2,1) both; }
/* 머리 주변으로 번지는 빛. 원의 윤곽이 보이지 않게 흐려서 띠와 붙인다. */
.entry-splash__progress > span::after { content:""; position:absolute; top:-8px; bottom:-8px; right:-14px; width:40px;
  border-radius:50%; pointer-events:none; filter:blur(4px);
  background:radial-gradient(closest-side,rgba(255,255,255,.95) 0%,rgba(201,186,250,.55) 46%,transparent 78%); }
@keyframes splash-progress { from { width:0 } to { width:100% } }

.entry-splash__content h1 { animation:splash-rise var(--ds-duration-scene) 700ms var(--ds-ease) both; }
.entry-splash__content p  { animation:splash-rise var(--ds-duration-scene) 850ms var(--ds-ease) both; }
@keyframes logo-rise { from { opacity:0; transform:translateY(10px) scale(.965); } to { opacity:1; transform:none; } }
@keyframes logo-wipe { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes logo-sheen { from { background-position:160% 50%; opacity:0; }
  22% { opacity:1; } 78% { opacity:1; } to { background-position:-60% 50%; opacity:0; } }
@keyframes splash-rise { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
.entry-splash__content h1 { margin:0; font-size:21px; line-height:1.35; font-weight:750; letter-spacing:-.035em; }
.entry-splash__content p { position:absolute; left:24px; right:24px; bottom:62px; margin:0;
  font-size:14px; line-height:1.6; letter-spacing:-.02em; color:#9d96d8; }