/* B1 → B2 → existing spring panorama. Scoped to the first family scene only. */
.family-intro {
  --fi-paper: #f5f1e8;
  --fi-ink: #574d43;
  --fi-blue: #72837f;
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--fi-paper);
  color: var(--fi-ink);
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
}
.family-intro[hidden] { display: none; }
.stage.family-intro-active .scene-nav,
.stage.family-intro-active .guide,
.stage.family-intro-active .restart { visibility: hidden; }
.fi-b1, .fi-b2 { position: absolute; inset: 0; }
.fi-b1 { z-index: 1; transition: opacity 3.6s ease, transform 3.6s ease; }
.fi-b1.leaving { opacity: 0; transform: translateY(-8px); }
.fi-paper-texture {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 14% 82%, #c7d0c219, transparent 38%), radial-gradient(ellipse at 84% 18%, #c6ad901a, transparent 35%), repeating-linear-gradient(92deg, #645c4b07 0 1px, transparent 1px 7px);
  pointer-events: none;
}
.fi-mark {
  position: absolute;
  z-index: 2;
  top: 8.4%;
  left: 6.6%;
  display: flex;
  align-items: center;
  gap: .9em;
  color: #776e61;
  font-size: clamp(10px, 1.03vw, 19px);
  letter-spacing: .27em;
}
.fi-mark-index { color: var(--fi-blue); font-size: .9em; letter-spacing: .08em; }
.fi-mark i { display: block; width: clamp(22px, 3vw, 54px); height: 1px; background: #a7a093; }
.fi-gate {
  position: absolute;
  top: 13%;
  left: 26%;
  width: 48%;
  height: 53%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 3s ease, transform 3s ease;
}
.fi-b1.playing .fi-gate { opacity: 1; transform: none; }
.fi-b1-copy { position: absolute; top: 64%; width: 100%; text-align: center; }
.fi-b1-copy p, .fi-b1-copy h2, .fi-b1-copy span {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 1.55s ease, transform 1.55s ease;
}
.fi-b1-copy p { margin: 0 0 .6em; color: var(--fi-blue); font-size: clamp(10px, 1vw, 19px); letter-spacing: .56em; text-indent: .56em; }
.fi-b1-copy h2 { margin: 0; font-size: clamp(23px, 3.3vw, 64px); font-weight: 400; line-height: 1.2; letter-spacing: .22em; text-indent: .22em; }
.fi-b1-copy span { display: block; margin-top: 1.05em; color: #766658; font-size: clamp(12px, 1.25vw, 24px); letter-spacing: .2em; }
.fi-b1.heading .fi-b1-copy p, .fi-b1.heading .fi-b1-copy h2,
.fi-b1.line .fi-b1-copy span { opacity: 1; transform: none; }
.fi-asset-note { position: absolute; left: 6.6%; bottom: 5.7%; color: #8a8175; font-size: clamp(9px, .8vw, 15px); letter-spacing: .06em; }
.fi-b2-intro {
  position: absolute;
  z-index: 2;
  top: 43%;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.fi-b2-intro.visible { opacity: 1; transform: none; }
.fi-b2-intro i { display: block; width: 50px; height: 1px; margin: 0 auto 1.5em; background: #b09877; }
.fi-b2-intro p { margin: 0 0 .9em; color: var(--fi-blue); font-size: clamp(11px, 1vw, 19px); letter-spacing: .32em; }
.fi-b2-intro h2 { margin: 0; font-size: clamp(25px, 3.25vw, 62px); font-weight: 400; letter-spacing: .2em; text-indent: .2em; }
.fi-b2 {
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  background: var(--fi-paper);
}
.fi-b2.active { visibility: visible; opacity: 1; }
.fi-building { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(-8px); transition: opacity 2.6s ease, transform 5.5s ease; }
.fi-b2.image-visible .fi-building { opacity: 1; transform: none; }
.fi-b2.image-visible .fi-building {transform:none;transition:opacity 2.6s ease}
.fi-b2.image-visible .fi-build-two,.fi-b2.image-visible .fi-build-three {opacity:0}
.family-intro[data-build="2"] .fi-b2 .fi-build-two,.family-intro[data-build="3"] .fi-b2 .fi-build-two,.family-intro[data-build="3"] .fi-b2 .fi-build-three {opacity:1}
@media(prefers-reduced-motion:reduce){.fi-b2 .fi-building{transition:none!important}}
.fi-b2-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(249,246,238,.9) 0%, rgba(249,246,238,.67) 24%, transparent 53%), linear-gradient(180deg, rgba(249,246,238,.56), transparent 27%); opacity: 0; transition: opacity 2s ease; }
.fi-b2.image-visible .fi-b2-shade { opacity: 1; }
.fi-b2-copy { position: absolute; top: 24%; left: 6.6%; max-width: 46%; opacity: 0; transform: translateY(8px); transition: opacity 1.7s ease, transform 1.7s ease; }
.fi-b2.copy-visible .fi-b2-copy { opacity: 1; transform: none; }
.fi-b2-copy p { margin: 0 0 1em; color: var(--fi-blue); font-size: clamp(11px, 1vw, 19px); letter-spacing: .3em; }
.fi-b2-copy h2 { margin: 0; font-size: clamp(26px, 3.2vw, 61px); font-weight: 400; letter-spacing: .18em; }
.fi-b2-copy span { display: block; margin-top: 1.5em; color: #77685c; font-size: clamp(12px, 1.25vw, 24px); letter-spacing: .12em; line-height: 1.6; }
.fi-paper-veil { position: absolute; z-index: 4; inset: 0; background: var(--fi-paper); opacity: 0; pointer-events: none; transition: opacity 1.45s ease; }
.family-intro.paper-on .fi-paper-veil { opacity: 1; }
.family-intro[data-phase="b3"] { background: transparent; }
.family-intro[data-phase="b3"] .fi-b1,
.family-intro[data-phase="b3"] .fi-b2,
.family-intro[data-phase="b3"] .fi-b2-intro { display: none; }
.family-intro[data-phase="b3"] .fi-paper-veil { transition-duration: 2s; }
.fi-skip, .fi-continue {
  position: absolute;
  z-index: 6;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #5f554d;
  font: inherit;
  cursor: pointer;
  letter-spacing: .14em;
}
.fi-skip { top: 7%; right: 6.3%; font-size: clamp(11px, .96vw, 18px); }
.fi-continue { right: 6.3%; bottom: 5%; font-size: clamp(13px, 1.2vw, 23px); }
.fi-continue::after { content: ""; display: block; height: 1px; margin-top: .4em; background: #b09877; }
.fi-skip span, .fi-continue span { margin-left: .65em; color: var(--fi-blue); }
.fi-skip:focus-visible, .fi-continue:focus-visible { outline: 2px solid var(--fi-blue); outline-offset: 4px; }
.family-intro[data-phase="b3"] .fi-skip, .family-intro[data-phase="b3"] .fi-continue { display: none; }

@media (max-width: 1024px), (pointer: coarse) {
  .fi-mark, .fi-b1-copy p, .fi-b2-copy p { font-size: 12px; }
  .fi-b1-copy h2 { font-size: clamp(25px, 3.4vw, 45px); }
  .fi-b1-copy span, .fi-b2-copy span { font-size: clamp(12px, 1.55vw, 19px); }
  .fi-b2-copy { top: 21%; max-width: 53%; }
  .fi-b2-copy h2 { font-size: clamp(25px, 3.4vw, 43px); }
  .fi-skip { font-size: 12px; }
  .fi-continue { font-size: 14px; }
  .fi-asset-note { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .family-intro *, .family-intro *::before, .family-intro *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}