/* theMoim 브랜드 인트로 모션 — 승인 시안(brand-intro-motion-2026-10-30) 삽입본.
   시안의 어두운 배경 변형을 기본으로 적용했고, 확인용 컨트롤은 제거했다.
   스킵 사양(클릭·탭·Enter·Space 시 최종 록업으로 이동)은 시안 그대로 유지한다.
   v0.1.3 개정: 다섯 점 구호 서사로 재구성했다. 둘레의 점 네 개가 소통·관리·역사·보호
   순서로 하나씩 서며 각 축의 이름이 캡션으로 드러나고, 선이 이어져 M이 완성된 뒤
   가운데 점이 완성되며 결론(더 많이 모이는 모임)이 드러난다. 전체 길이는 7초.
   v0.1.6: 최종 록업의 점 다섯 개가 어떤 브라우저에서도 금색으로 수렴하도록 마크업
   fill과 기본 fill을 금색으로 고정했고, 캡션은 굵은 서체와 어두운 외곽선으로 가독성을
   높였으며, 캡션이 각 점의 이동과 함께 뜨도록 타이밍을 맞췄다.
   v0.1.11 개정: 결론 캡션(더 많이 모이는 모임)의 시간 구도를 바꿨다. 전체 길이(7초)는
   그대로 두고, 결론 캡션이 네 축 캡션이 단계적으로 뜨는 동안 26% 지점부터 희미하게
   나타나 투명도가 서서히 올라, 네 캡션이 다 드러난 74% 지점에 완전히 선명해지고
   94%까지 유지되다가 워드마크 록업이 완성되는 마지막 구간에 정리된다.
   v0.1.14 개정: 인트로 무대를 감싸는 금색 외곽 박스(포커스 외곽선)를 제거했다. */
.brand-intro{width:100%;max-width:880px;margin:0 auto}
.brand-intro svg{display:block;width:100%;height:auto}
.brand-intro:focus{outline:none}
.brand-intro:focus-visible{outline:none}
.brand-intro .wm-main{fill:#E8C872}
.brand-intro .wm-dash{fill:#FBFBFA}
.brand-intro .wm-sub{fill:#FBFBFA}
.brand-intro .f1{fill:#A3B795}
.brand-intro .f2{fill:#D9BC8E}
.brand-intro .f3{fill:#8FAECC}
.brand-intro .f4{fill:#CCA09B}
.brand-intro .f5{fill:#ABA0C4}
.brand-intro .f6{fill:#BCBBA6}
.brand-intro .boundary{stroke:#5F7D70}

.brand-intro .scene-grow{transform-box:view-box;transform-origin:800px 280px;animation:bi-grow 7s linear both}
@keyframes bi-grow{
  0%,8%{transform:translateX(0px) scale(1)}
  50%{transform:translateX(0px) scale(1.3)}
  70%,88%{transform:translateX(0px) scale(1);animation-timing-function:ease-in-out}
  100%{transform:translateX(-400px) scale(1)}
}
.brand-intro .boundary{
  fill:none;stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;
  animation:bi-ring 7s linear both;
}
@keyframes bi-ring{
  0%{stroke-dashoffset:100;opacity:0}
  2%{opacity:.5}
  7%{stroke-dashoffset:0;opacity:.5}
  84%{opacity:.5}
  88%{opacity:.68}
  95%,100%{stroke-dashoffset:0;opacity:0}
}
.brand-intro .hero{transform-box:fill-box;transform-origin:center;opacity:0;fill:#E8C872}
.brand-intro .h1{animation:bi-h1 7s ease-in-out both}
.brand-intro .h2{animation:bi-h2 7s ease-in-out both}
.brand-intro .h3{animation:bi-h3 7s ease-in-out both}
.brand-intro .h4{animation:bi-h4 7s ease-in-out both}
.brand-intro .h5{animation:bi-h5 7s ease-in-out both}
/* 가운데 점: M이 완성된 뒤 마지막에 완성된다 */
@keyframes bi-h1{
  0%,70%{opacity:0;transform:translate(0px,0px) scale(1);fill:#8FAECC}
  78%{opacity:1;transform:translate(0px,-3px) scale(1.5);fill:#8FAECC}
  88%,100%{opacity:1;transform:translate(0px,-6.25px) scale(2.216);fill:#E8C872}
}
/* 소통 (왼쪽 위) */
@keyframes bi-h2{
  0%,9%{opacity:0;transform:translate(0px,0px) scale(1);fill:#D9AC7E}
  15%{opacity:1}
  30%,80%{opacity:1;transform:translate(-38.9px,-36.9px) scale(2.216);fill:#D9AC7E}
  88%,100%{opacity:1;transform:translate(-38.9px,-36.9px) scale(2.216);fill:#E8C872}
}
/* 관리 (오른쪽 위) */
@keyframes bi-h3{
  0%,22%{opacity:0;transform:translate(0px,0px) scale(1);fill:#A3B795}
  28%{opacity:1}
  43%,80%{opacity:1;transform:translate(34.9px,-32.9px) scale(2.216);fill:#A3B795}
  88%,100%{opacity:1;transform:translate(34.9px,-32.9px) scale(2.216);fill:#E8C872}
}
/* 보호 (왼쪽 아래) */
@keyframes bi-h4{
  0%,48%{opacity:0;transform:translate(0px,0px) scale(1);fill:#CCA09B}
  54%{opacity:1}
  69%,80%{opacity:1;transform:translate(-34.9px,30.9px) scale(2.216);fill:#CCA09B}
  88%,100%{opacity:1;transform:translate(-34.9px,30.9px) scale(2.216);fill:#E8C872}
}
/* 역사 (오른쪽 아래) */
@keyframes bi-h5{
  0%,35%{opacity:0;transform:translate(0px,0px) scale(1);fill:#ABA0C4}
  41%{opacity:1}
  56%,80%{opacity:1;transform:translate(30.9px,26.9px) scale(2.216);fill:#ABA0C4}
  88%,100%{opacity:1;transform:translate(30.9px,26.9px) scale(2.216);fill:#E8C872}
}
.brand-intro .filler{opacity:0}
.brand-intro .f1{animation:bi-f1 7s linear both}
.brand-intro .f2{animation:bi-f2 7s linear both}
.brand-intro .f3{animation:bi-f3 7s linear both}
.brand-intro .f4{animation:bi-f4 7s linear both}
.brand-intro .f5{animation:bi-f5 7s linear both}
.brand-intro .f6{animation:bi-f6 7s linear both}
@keyframes bi-f1{0%,18%{opacity:0;transform:translate(0px,0px)}24%{opacity:.8}44%{opacity:.8;transform:translate(5px,3px)}58%,100%{opacity:0;transform:translate(14px,8px)}}
@keyframes bi-f2{0%,22%{opacity:0;transform:translate(0px,0px)}28%{opacity:.8}46%{opacity:.8;transform:translate(-5px,3px)}60%,100%{opacity:0;transform:translate(-14px,8px)}}
@keyframes bi-f3{0%,26%{opacity:0;transform:translate(0px,0px)}32%{opacity:.8}48%{opacity:.8;transform:translate(4px,-4px)}61%,100%{opacity:0;transform:translate(10px,-10px)}}
@keyframes bi-f4{0%,30%{opacity:0;transform:translate(0px,0px)}36%{opacity:.8}50%{opacity:.8;transform:translate(-4px,-3px)}62%,100%{opacity:0;transform:translate(-12px,-8px)}}
@keyframes bi-f5{0%,34%{opacity:0;transform:translate(0px,0px)}40%{opacity:.8}52%{opacity:.8;transform:translate(3px,4px)}63%,100%{opacity:0;transform:translate(6px,10px)}}
@keyframes bi-f6{0%,38%{opacity:0;transform:translate(0px,0px)}44%{opacity:.8}54%{opacity:.8;transform:translate(5px,-2px)}64%,100%{opacity:0;transform:translate(14px,-4px)}}
.brand-intro .squircle-wrap{opacity:0;transform-box:fill-box;transform-origin:center;animation:bi-sq 7s ease-in-out both}
@keyframes bi-sq{0%,72%{opacity:0;transform:scale(.94)}88%,100%{opacity:1;transform:scale(1)}}
.brand-intro .wline{stroke-dasharray:100;stroke-dashoffset:100;animation:bi-line 7s ease-in-out both}
@keyframes bi-line{
  0%,66%{stroke-dashoffset:100;stroke:#7FB69E}
  80%{stroke-dashoffset:0;stroke:#7FB69E}
  88%,100%{stroke-dashoffset:0;stroke:#E8C872}
}
/* 축 이름 캡션: 점이 설 때 작게 떴다가 M이 완성되며 정리된다 */
.brand-intro .cap{
  font-family:'Pretendard Variable', Pretendard, Inter, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Helvetica Neue', sans-serif;
  font-size:33px;font-weight:800;letter-spacing:.5px;fill:#E8C872;stroke:#0A2019;stroke-width:4px;paint-order:stroke;stroke-linejoin:round;opacity:0;transform-box:fill-box;
}
.brand-intro .cap1{animation:bi-cap1 7s ease-in-out both}
.brand-intro .cap2{animation:bi-cap2 7s ease-in-out both}
.brand-intro .cap3{animation:bi-cap3 7s ease-in-out both}
.brand-intro .cap4{animation:bi-cap4 7s ease-in-out both}
.brand-intro .cap5{font-size:46px;font-weight:800;letter-spacing:0;animation:bi-cap5 7s ease-in-out both}
@keyframes bi-cap1{0%,15%{opacity:0;transform:translateY(8px)}22%,76%{opacity:1;transform:translateY(0px)}83%,100%{opacity:0;transform:translateY(0px)}}
@keyframes bi-cap2{0%,28%{opacity:0;transform:translateY(8px)}35%,76%{opacity:1;transform:translateY(0px)}83%,100%{opacity:0;transform:translateY(0px)}}
@keyframes bi-cap3{0%,41%{opacity:0;transform:translateY(8px)}48%,76%{opacity:1;transform:translateY(0px)}83%,100%{opacity:0;transform:translateY(0px)}}
@keyframes bi-cap4{0%,54%{opacity:0;transform:translateY(8px)}61%,76%{opacity:1;transform:translateY(0px)}83%,100%{opacity:0;transform:translateY(0px)}}
@keyframes bi-cap5{0%,26%{opacity:0;transform:translateY(10px)}38%{opacity:.22;transform:translateY(7px)}52%{opacity:.48;transform:translateY(4px)}64%{opacity:.78;transform:translateY(2px)}74%,94%{opacity:1;transform:translateY(0px)}100%{opacity:0;transform:translateY(0px)}}
/* 가운데 점 완성 순간의 링 */
.brand-intro .cring{fill:none;stroke:#E8C872;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:bi-cring 7s linear both}
@keyframes bi-cring{
  0%,83%{opacity:0;transform:scale(.6)}
  90%{opacity:.7}
  97%,100%{opacity:0;transform:scale(1.8)}
}
.brand-intro .wordmark{opacity:0;animation:bi-wm 7s ease-in-out both}
@keyframes bi-wm{0%,89%{opacity:0;transform:translateX(28px)}100%{opacity:1;transform:translateX(0px)}}

/* 스킵·종료 상태: 최종 록업 씬 */
.brand-intro.done svg *{animation:none !important}
.brand-intro.done .scene-grow{transform:translateX(-400px)}
.brand-intro.done .wordmark{transform:translateX(0px);opacity:1}
.brand-intro.done .boundary{opacity:0}
.brand-intro.done .filler{opacity:0}
.brand-intro.done .cap{opacity:0}
.brand-intro.done .cring{opacity:0}
.brand-intro.done .hero{opacity:1;fill:#E8C872}
.brand-intro.done .h1{transform:translate(0px,-6.25px) scale(2.216)}
.brand-intro.done .h2{transform:translate(-38.9px,-36.9px) scale(2.216)}
.brand-intro.done .h3{transform:translate(34.9px,-32.9px) scale(2.216)}
.brand-intro.done .h4{transform:translate(-34.9px,30.9px) scale(2.216)}
.brand-intro.done .h5{transform:translate(30.9px,26.9px) scale(2.216)}
.brand-intro.done .squircle-wrap{opacity:1;transform:none}
.brand-intro.done .wline{stroke-dashoffset:0;stroke:#E8C872}

/* 모션 최소화 환경에서는 최종 록업 상태로 바로 표시 */
@media (prefers-reduced-motion: reduce){
  .brand-intro svg *{animation:none !important}
  .brand-intro .scene-grow{transform:translateX(-400px)}
  .brand-intro .boundary,.brand-intro .filler{opacity:0}
  .brand-intro .cap{opacity:0}
  .brand-intro .cring{opacity:0}
  .brand-intro .hero{opacity:1;fill:#E8C872}
  .brand-intro .h1{transform:translate(0px,-6.25px) scale(2.216)}
  .brand-intro .h2{transform:translate(-38.9px,-36.9px) scale(2.216)}
  .brand-intro .h3{transform:translate(34.9px,-32.9px) scale(2.216)}
  .brand-intro .h4{transform:translate(-34.9px,30.9px) scale(2.216)}
  .brand-intro .h5{transform:translate(30.9px,26.9px) scale(2.216)}
  .brand-intro .squircle-wrap{opacity:1;transform:none}
  .brand-intro .wline{stroke-dashoffset:0;stroke:#E8C872}
  .brand-intro .wordmark{opacity:1}
}