#brand-intro{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:#10150e;color:#f5f8f1;overflow:hidden;font-family:'Pretendard Variable',sans-serif;isolation:isolate}#brand-intro::backdrop{background:#10150e}#brand-intro[open]{display:grid;place-items:center}
.motion-label{position:absolute;left:5%;top:34px;z-index:2;display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:.12em;color:#aab99c}.motion-label img{width:132px;height:auto}.motion-actions{position:absolute;right:5%;top:25px;z-index:3;display:flex;gap:24px}.motion-actions button{color:#e2eadb;background:none;border-bottom:1px solid #707e67;padding:12px 0;font-size:14px;font-weight:500;min-height:44px}.motion-actions button[aria-pressed=true]{color:#d0f48b;border-color:#d0f48b}
.motion-stage{position:relative;z-index:1;width:90%;height:42vw;max-height:440px;display:grid;place-items:center;perspective:1000px}.motion-word{position:absolute;margin:0;opacity:0;white-space:nowrap;font-size:clamp(60px,15vw,220px);line-height:1.12;letter-spacing:-.06em;will-change:transform,opacity}.motion-space{font-weight:220}.motion-design{font-weight:820;color:#d0f48b}.motion-brand{width:min(82vw,1160px);font-size:0}.motion-brand img{display:block;width:100%;height:auto}
.motion-rule{position:absolute;left:0;right:0;height:1px;background:#8fa778;transform:scaleX(0);transform-origin:left}.motion-rule.top{top:0}.motion-rule.bottom{bottom:0;transform-origin:right}.motion-foot{position:absolute;bottom:40px;left:5%;right:5%;z-index:2;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.13em;color:#a8b79f}.motion-foot strong{color:#ecf2e6;font-weight:500;letter-spacing:.02em}
.motion-glow{position:absolute;width:55vw;height:55vw;max-width:680px;max-height:680px;border-radius:50%;background:radial-gradient(circle,#a5e83c28,transparent 66%);opacity:0;pointer-events:none}.motion-grid{position:absolute;inset:0;background-image:linear-gradient(#7fa76a12 1px,transparent 1px),linear-gradient(90deg,#7fa76a12 1px,transparent 1px);background-size:100px 100px;opacity:0;pointer-events:none}.motion-streak{position:absolute;left:-30%;top:0;width:20%;height:100%;background:linear-gradient(100deg,transparent,#d5f7bb18,transparent);transform:skewX(-24deg);opacity:0;pointer-events:none}
.motion-count{position:absolute;opacity:0;font-size:clamp(140px,24vw,330px);font-weight:800;line-height:1;letter-spacing:-.07em;font-variant-numeric:tabular-nums;color:#d0f48b}
.is-playing .motion-space{animation:space-reveal .9s cubic-bezier(.16,.8,.2,1) both}.is-playing .motion-design{animation:design-reveal .9s .8s cubic-bezier(.16,.8,.2,1) both}.is-playing .motion-brand{animation:brand-reveal 2.4s 1.6s cubic-bezier(.16,.8,.2,1) both}.is-playing .motion-count{animation:countdown-hit 1s 4s cubic-bezier(.16,.8,.2,1) both}.is-playing .count-two{animation-delay:5s}.is-playing .count-one{animation-delay:6s}.is-playing .motion-rule{animation:rule-reveal 7s ease-out both}.is-playing .motion-glow{animation:beat-glow .5s 14 ease-out}.is-playing .motion-grid{animation:grid-reveal 7s ease-out both}.is-playing .motion-streak{animation:light-sweep 2s .5s 2 ease-in-out}
#brand-intro.leaving{animation:intro-exit .55s cubic-bezier(.6,0,.3,1) forwards;pointer-events:none}
@keyframes space-reveal{0%{opacity:0;transform:translateX(-18vw) scale(.85);letter-spacing:.1em}24%,76%{opacity:1;transform:translateX(0) scale(1);letter-spacing:-.06em}100%{opacity:0;transform:translateX(15vw) scale(1.12)}}
@keyframes design-reveal{0%{opacity:0;transform:translateY(90px) rotateX(-35deg) skewX(-10deg) scale(.8)}24%,76%{opacity:1;transform:translateY(0) rotateX(0) skewX(0) scale(1)}100%{opacity:0;transform:translateY(-70px) scale(1.1)}}
@keyframes brand-reveal{0%{opacity:0;transform:scale(1.25);clip-path:inset(0 100% 0 0)}24%{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0)}35%{transform:scale(1.025)}48%,83%{opacity:1;transform:scale(1);clip-path:inset(0 0 0 0)}100%{opacity:0;transform:scale(.94) translateY(-25px);clip-path:inset(0 0 0 0)}}
@keyframes countdown-hit{0%{opacity:0;transform:scale(1.35) translateY(15px)}12%,75%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.85) translateY(-35px)}}
@keyframes rule-reveal{0%{transform:scaleX(0)}18%{transform:scaleX(1)}45%{transform:scaleX(.6)}65%,100%{transform:scaleX(1)}}@keyframes beat-glow{0%{opacity:.65;transform:scale(1.1)}100%{opacity:.18;transform:scale(.92)}}@keyframes grid-reveal{0%{opacity:0;transform:perspective(650px) rotateX(25deg) scale(1.4) translateY(40px)}30%{opacity:1}100%{opacity:.45;transform:perspective(650px) rotateX(0) scale(1.05) translateY(0)}}@keyframes light-sweep{0%{opacity:0;left:-30%}20%,70%{opacity:1}100%{opacity:0;left:115%}}@keyframes intro-exit{to{transform:translateY(-100%);opacity:0}}
@media(max-width:600px){.motion-stage{height:230px}.motion-word{font-size:22vw}.motion-brand{width:88vw;font-size:0}.motion-label{top:30px;font-size:12px;gap:12px;letter-spacing:.06em}.motion-label img{width:116px}.motion-actions{top:66px;left:5%;right:5%;justify-content:space-between}.motion-foot{bottom:30px;flex-direction:column;line-height:1.6;gap:5px;letter-spacing:.05em}.motion-glow{width:100vw;height:100vw}.motion-grid{background-size:60px 60px}}
@media(prefers-reduced-motion:reduce){#brand-intro{display:none!important}#brand-intro *{animation:none!important}}