/* 보가LAB 첫 화면 로고 동작 (2026-11-11 이름·색 바꿈: 순자랩 → 보가LAB, 주황 → 보라 #56007A·흰색).
   보라 LAB 표가 톡 튀어나와 출렁 → 둥근 충격파·빛줄기·반짝이 → '보가LAB' 이름 → 마지막에 한 번 더 꿀렁. 약 1.7초.
   장식용 레이어. 스크립트·앱 준비와 무관하게 CSS만으로 재생되고 끝나면 사라짐. (예전 순자 지붕·그릇·쌀알 로고 동작은 11-11 전 판) */
.brand-intro[hidden]{display:grid;place-items:center;align-content:center;gap:18px;position:fixed;inset:0;z-index:1000;pointer-events:none;visibility:hidden;opacity:0;overflow:hidden;
 background:radial-gradient(60% 55% at 50% 45%,#f6edfa 0%,#fff 62%,#fff 100%);animation:bi-dismiss 1692ms ease-out both}
.brand-intro .bi-stage{position:relative;width:clamp(110px,22vw,150px);aspect-ratio:1}
.brand-intro .bi-mark{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;filter:drop-shadow(0 8px 14px #56007a33);
 animation:bi-mark 560ms 40ms both,bi-mark-pop 390ms 1005ms ease-in-out forwards}
.brand-intro .bi-rays{position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
 background:repeating-conic-gradient(from 0deg,#56007a24 0 9deg,transparent 9deg 24deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);
 opacity:0;animation:bi-rays 667ms 470ms ease-out both}
.brand-intro .bi-ring{position:absolute;left:50%;top:50%;width:90%;aspect-ratio:1;border-radius:50%;border:5px solid #56007a;transform:translate(-50%,-50%) scale(.2);opacity:0;animation:bi-ring 360ms 470ms ease-out both}
.brand-intro .bi-spark{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;opacity:0;--a:0deg;--d:110px;
 background:radial-gradient(circle,#fff 0 18%,#8b3fb0 22% 46%,transparent 50%);animation:bi-spark 359ms 500ms ease-out both}
.brand-intro .bi-spark::before,.brand-intro .bi-spark::after{content:"";position:absolute;inset:-6px 5px;background:#8b3fb0;border-radius:2px}
.brand-intro .bi-spark::after{inset:5px -6px}
.brand-intro .s1{--a:-80deg;--d:120px}.brand-intro .s2{--a:-45deg;--d:100px}.brand-intro .s3{--a:-10deg;--d:130px}.brand-intro .s4{--a:25deg;--d:96px}
.brand-intro .s5{--a:60deg;--d:118px}.brand-intro .s6{--a:-120deg;--d:104px;animation-delay:530ms}.brand-intro .s7{--a:100deg;--d:90px;animation-delay:540ms}.brand-intro .s8{--a:-150deg;--d:84px;animation-delay:520ms}
.brand-intro .bi-name{margin:0;font-weight:900;font-size:clamp(26px,5vw,36px);letter-spacing:-.5px;color:#1f1f1f;opacity:0;animation:bi-name 267ms 760ms cubic-bezier(.2,.8,.2,1) both}
.brand-intro .bi-name b{color:#56007a;margin-left:2px}
@keyframes bi-dismiss{0%,87%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes bi-mark{
 0%{transform:translateY(60%) scale(.4);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
 18%{opacity:1}
 52%{transform:translateY(-10%) scale(.96,1.08);animation-timing-function:cubic-bezier(.5,0,.7,.4)}
 72%{transform:translateY(2%) scale(1.1,.88);animation-timing-function:ease-out}
 88%{transform:translateY(-1%) scale(.98,1.02)}
 100%{transform:none;opacity:1}}
@keyframes bi-mark-pop{
 0%{transform:none}
 18%{transform:translateY(3%) scale(1.1,.88)}
 36%{transform:translateY(-4%) scale(.93,1.1)}
 54%{transform:translateY(1%) scale(1.04,.96)}
 72%{transform:scale(.99,1.01)}
 100%{transform:none}}
@keyframes bi-rays{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(40deg) scale(1.08)}}
@keyframes bi-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}6%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9);border-width:1px}}
@keyframes bi-spark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1.1)}}
@keyframes bi-name{0%{opacity:0;transform:translateY(14px);letter-spacing:6px}100%{opacity:1;transform:none;letter-spacing:-.5px}}
/* 포커스가 생기면 바로 걷힘. 장식 레이어는 포커스를 받지 않음 */
body:has(:focus-visible) .brand-intro[hidden]{visibility:hidden!important;opacity:0!important}
@media(prefers-reduced-motion:reduce){.brand-intro[hidden],.brand-intro *{animation:none!important}.brand-intro[hidden]{visibility:hidden;opacity:0}}