@font-face{font-family:"Tmoney RoundWind";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff") format("woff");font-display:swap;font-style:normal;font-weight:800}
@font-face{font-family:"Ownglyph Sea Breeze";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2510-1@1.0/Ownglyph_the_sea_breeze-Rg.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:400}
.intro{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#C8C2ED;opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s linear .28s}
.intro.out{opacity:0;visibility:hidden}
.intro__inner{position:relative;width:min(100%,390px);height:100%;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;transform:translateY(2.5vh)}
.intro__inner::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 29%,#fff 0 3px,transparent 4px),radial-gradient(circle at 80% 48%,#fff 0 3px,transparent 4px),radial-gradient(circle at 22% 54%,#fff 0 3px,transparent 4px),radial-gradient(circle at 73% 18%,#fff 0 3px,transparent 4px);filter:drop-shadow(0 0 5px rgba(255,255,255,.9));opacity:0;animation:intro-dust .66s .48s ease-out forwards;animation-play-state:paused}
.intro__title{margin:0;color:#5B4885;font-family:"Tmoney RoundWind",sans-serif;font-size:clamp(54px,16vw,70px);font-weight:800;line-height:1;letter-spacing:-.06em;opacity:0;animation:intro-rise .42s .12s ease-out forwards;animation-play-state:paused}
.intro__copy{position:relative;z-index:2;margin:32px 0 0;color:#FFFFFF;font-family:"Ownglyph Sea Breeze",cursive;font-size:clamp(31px,9vw,38px);font-weight:400;line-height:1.12;letter-spacing:-.025em;text-align:center;-webkit-text-stroke:.28px #C8C2ED;opacity:0;animation:intro-copy .42s .35s ease-out forwards;animation-play-state:paused}
.intro__art{display:block;width:min(82vw,320px);height:auto;margin-top:32px;background:#C8C2ED;opacity:0;animation:intro-art .48s .18s ease-out forwards;animation-play-state:paused}
.intro__spark{--delay:0s;--size:34px;position:absolute;width:var(--size);height:calc(var(--size) * 1.35);opacity:0;transform:scale(.12);animation:intro-glint .92s var(--delay) cubic-bezier(.16,.8,.3,1) forwards;animation-play-state:paused;filter:drop-shadow(0 0 5px rgba(255,255,255,.8))}
.intro__spark::before{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(50% 0,56% 42%,100% 50%,56% 57%,50% 100%,44% 57%,0 50%,44% 42%)}
.intro__spark::after{content:"";position:absolute;inset:7%;background:rgba(255,255,255,.7);clip-path:polygon(50% 0,57% 42%,100% 50%,57% 58%,50% 100%,43% 58%,0 50%,43% 42%);filter:blur(3px)}
.intro__spark.s1{left:15%;top:20%;--size:42px;--delay:.36s}.intro__spark.s2{right:16%;top:23%;--size:25px;--delay:.58s}.intro__spark.s3{left:10%;top:44%;--size:28px;--delay:.82s}.intro__spark.s4{right:9%;top:60%;--size:38px;--delay:1.02s}.intro__spark.s5{left:15%;top:65%;--size:20px;--delay:1.22s}
.intro__dust{--delay:0s;position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.98);box-shadow:0 0 6px rgba(255,255,255,.9);opacity:0;animation:intro-dust .66s var(--delay) ease-out forwards}
.intro__dust.d1{left:15%;top:29%;--delay:.48s}.intro__dust.d2{right:20%;top:48%;--delay:.72s}.intro__dust.d3{left:22%;top:54%;--delay:1.1s}.intro__dust.d4{right:27%;top:18%;--delay:.92s}
.intro.ready .intro__title,.intro.ready .intro__copy,.intro.ready .intro__art,.intro.ready .intro__spark,.intro.ready .intro__inner::before{animation-play-state:running}
@keyframes intro-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes intro-copy{from{opacity:0;transform:translate(6px,8px) rotate(-7deg)}to{opacity:1;transform:translateX(6px) rotate(-7deg)}}
@keyframes intro-art{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes intro-glint{0%{opacity:0;transform:scale(.1)}38%{opacity:1;transform:scale(1.06)}58%{opacity:.82;transform:scale(.72)}100%{opacity:0;transform:scale(.08)}}
@keyframes intro-dust{0%{opacity:0;transform:scale(.2)}45%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-8px) scale(.15)}}
@media(max-height:650px){.intro__title{font-size:50px}.intro__copy{margin-top:24px;font-size:28px}.intro__art{width:min(68vw,270px);margin-top:24px}}
@media(prefers-reduced-motion:reduce){.intro__title,.intro__copy,.intro__art{animation:none;opacity:1}.intro__copy{transform:translateX(6px) rotate(-7deg)}.intro__spark,.intro__inner::before{display:none}.intro{transition-duration:.12s}}