/* brand-intro.css — fivefingers 스튜디오 공용 앱 오프닝 (재사용 모듈)
   색·앱 이름은 CSS 변수 / data-속성으로 앱마다 커스터마이즈. 원본은
   agent-factory/shared/brand-intro/ 에 두고 각 앱 web/vendor/ 로 복사해 쓴다. */
:root {
  --ff-bg: #f8f2e7;
  --ff-ink: #23352d;
  --ff-c1: #ff7b6f;   /* coral  */
  --ff-c2: #f7c957;   /* yellow */
  --ff-c3: #6fc18a;   /* green  */
  --ff-c4: #65b7df;   /* blue   */
  --ff-c5: #a887d8;   /* purple */
}

#ff-intro {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4.2vmin;
  background:
    radial-gradient(120vmax 90vmax at 50% 18%, #fffaf0 0%, var(--ff-bg) 62%);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent; touch-action: none; cursor: pointer;
  animation: ff-veil-out .55s ease .05s 1 both;   /* 재생 완료 후 JS 가 갈아끼움 */
  animation-play-state: paused;
}
#ff-intro.ff-playing { animation-play-state: paused; }
#ff-intro.ff-leave { animation: ff-curtain .6s cubic-bezier(.7,0,.3,1) forwards; }

/* 손 — 다섯 손가락 + 손바닥 */
.ff-hand { position: relative; width: min(46vmin, 260px); height: min(46vmin, 260px); }
.ff-hand svg { width: 100%; height: 100%; overflow: visible; display: block; }

.ff-finger {
  transform-box: fill-box; transform-origin: 50% 100%;
  opacity: 0; transform: translateY(26px) scale(.7);
  animation: ff-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.ff-finger.f1 { animation-delay: .10s; }
.ff-finger.f2 { animation-delay: .19s; }
.ff-finger.f3 { animation-delay: .28s; }
.ff-finger.f4 { animation-delay: .37s; }
.ff-finger.f5 { animation-delay: .46s; }
.ff-palm {
  transform-box: fill-box; transform-origin: 50% 40%;
  opacity: 0; transform: scale(.86);
  animation: ff-palm-in .5s ease .5s forwards;
}
.ff-smile {
  opacity: 0; animation: ff-fade .4s ease .74s forwards;
}

/* 워드마크 */
.ff-word {
  display: flex; flex-direction: column; align-items: center; gap: 1.4vmin;
  text-align: center; color: var(--ff-ink);
  font-family: -apple-system, "Apple SD Gothic Neo", "Segoe UI", sans-serif;
}
.ff-brand {
  font-size: clamp(26px, 8vmin, 52px); font-weight: 800; letter-spacing: .01em;
  opacity: 0; transform: translateY(14px);
  animation: ff-rise .55s cubic-bezier(.2,.7,.2,1) .62s forwards;
}
.ff-brand b { color: var(--ff-c1); } .ff-brand b:nth-child(2){ color: var(--ff-c2); }
.ff-brand b:nth-child(3){ color: var(--ff-c3); } .ff-brand b:nth-child(4){ color: var(--ff-c4); }
.ff-brand b:nth-child(5){ color: var(--ff-c5); }
.ff-present {
  font-size: clamp(12px, 3.4vmin, 18px); font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: #9a8f7d;
  opacity: 0; animation: ff-fade .5s ease .92s forwards;
}
.ff-app {
  font-size: clamp(18px, 5vmin, 30px); font-weight: 800; color: var(--ff-ink);
  opacity: 0; transform: translateY(10px);
  animation: ff-rise .5s cubic-bezier(.2,.7,.2,1) 1.02s forwards;
}

.ff-skip {
  position: absolute; bottom: 4.5vmin; left: 0; right: 0; text-align: center;
  font-size: 12px; letter-spacing: .12em; color: #b3a793; text-transform: uppercase;
  opacity: 0; animation: ff-fade .6s ease 1.4s forwards; pointer-events: none;
}

@keyframes ff-pop {
  0%   { opacity: 0; transform: translateY(26px) scale(.7); }
  70%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ff-palm-in { to { opacity: 1; transform: scale(1); } }
@keyframes ff-fade { to { opacity: 1; } }
@keyframes ff-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes ff-curtain {
  to { transform: translateY(-102%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ff-finger, .ff-palm, .ff-smile, .ff-brand, .ff-present, .ff-app, .ff-skip {
    animation: ff-fade .3s ease forwards !important; opacity: 1; transform: none !important;
  }
  #ff-intro.ff-leave { animation: ff-fade-out .3s ease forwards; }
  @keyframes ff-fade-out { to { opacity: 0; } }
}