/* 집 등장 → 문 열림 → 0.50–0.92s 문 안으로 확대 → 로고와 유리빛 → 2.1s 홈페이지. */
.brand-intro {
  --bi-gold: #c3a76a;
  --bi-cream: #f3ead6;
  --bi-ink: #292a26;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  isolation: isolate;
  color: var(--bi-gold);
  font-family: var(--f-d, "Malgun Gothic", sans-serif);
  background: var(--bi-ink);
  clip-path: inset(0);
  animation: bi-unveil 450ms cubic-bezier(.76, 0, .24, 1) 1.65s both;
}
.bi-night, .bi-light { position: absolute; inset: 0; pointer-events: none; }
.bi-night { background: radial-gradient(ellipse at 50% 44%, #faf6ec 0, #f3ead6 65%, #ede0c5 100%); }
.bi-light {
  background: radial-gradient(ellipse at 50% 42%, #fcfaf4 0, var(--bi-cream) 72%, #ede0c5 100%);
  opacity: 0;
  animation: bi-light-spread 200ms ease 860ms both;
}
.bi-light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 38%, #ffffff08 43%, #ffffff60 49%, #ffffff85 50%, #ffffff20 56%, transparent 62%) 100% 50% / 260% 100% no-repeat;
  animation: bi-glass-sweep 600ms cubic-bezier(.4, 0, .2, 1) 1040ms both;
}
.bi-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.bi-house {
  color: #171c18;
  width: clamp(140px, 24vw, 210px);
  aspect-ratio: 1;
  transform-origin: 50% 66.667%;
  animation: bi-house 1020ms linear both;
}
.bi-house svg { width: 100%; height: 100%; overflow: visible; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.bi-doorway { fill: #fcfaf4; animation: bi-room-light 300ms ease 200ms both; }
.bi-door {
  transform-box: fill-box;
  transform-origin: left center;
  animation: bi-open-door 300ms cubic-bezier(.4, 0, .2, 1) 200ms both;
}
.bi-wordmark {
  position: absolute;
  width: min(640px, 76vw);
  animation: bi-wordmark 260ms cubic-bezier(.16, 1, .3, 1) 980ms both;
}
.bi-wordmark .brand-lockup { width: 100%; }
/* 선택한 실제 로고의 투명 영역을 따라 유리빛을 입힌다. */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .bi-wordmark .brand-lockup::after {
    content: "";
    position: absolute;
    pointer-events: none;
    left: -8.949%;
    top: -15.957%;
    width: 113.367%;
    aspect-ratio: 2027 / 776;
    -webkit-mask: url("/static/brand-open-house-gold.png") center / contain no-repeat;
    mask: url("/static/brand-open-house-gold.png") center / contain no-repeat;
    background: linear-gradient(110deg, transparent 38%, #cbbd9d60 44%, #e9dfc9cc 48%, #fffaf0ef 50%, #d3c29bcc 52%, #c1b18d60 56%, transparent 62%) 100% 50% / 260% 100% no-repeat;
    animation: bi-glass-sweep 600ms cubic-bezier(.4, 0, .2, 1) 1040ms both;
  }
}
.brand-intro-skip {
  position: absolute;
  right: max(26px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  padding: 10px 4px 10px 16px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bi-ink);
  font: 600 13px var(--f-d, sans-serif);
  cursor: pointer;
  animation: bi-control-color 180ms ease 820ms both;
}
.brand-intro-skip span { margin-left: 12px; }
.brand-intro-skip:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
body.yb-intro-active { overflow: hidden; }
.yb-intro-active #app { pointer-events: none; animation: bi-home-arrive 450ms cubic-bezier(.2, .7, .3, 1) 1.65s both; }
.yb-intro-active .float-btns { visibility: hidden; }
.mode-replay .replay-icon { font-size: 19px; line-height: 1; }

@keyframes bi-house {
  0% { opacity: 0; transform: translateY(10px) scale(.86); animation-timing-function: ease-out; }
  25%, 49% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.65, 0, .32, 1); }
  90% { opacity: 1; transform: translateY(-16.667%) scale(var(--bi-door-zoom, 30)); }
  100% { opacity: 0; transform: translateY(-16.667%) scale(var(--bi-door-zoom, 30)); }
}
@keyframes bi-room-light { to { fill: #fcfaf4; } }
@keyframes bi-open-door { from { transform: perspective(300px) rotateY(0); } to { transform: perspective(300px) rotateY(-110deg); } }
@keyframes bi-light-spread { to { opacity: 1; } }
@keyframes bi-wordmark { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bi-glass-sweep { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@keyframes bi-control-color { to { color: var(--bi-ink); } }
@keyframes bi-unveil { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes bi-home-arrive { from { transform: translateY(18px); } to { transform: none; } }
@media (max-width: 600px) { .brand-intro-skip { right: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .brand-intro, .mode-replay { display: none !important; }
  .yb-intro-active #app { animation: none; }
}
@media print { .brand-intro { display: none !important; } }