/* 開場獨立於內容動態；固定在最上層，結束後完整移除。 */
.yf-intro {
  --yf-intro-ready: 1;
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  background: #faf9f6;
  pointer-events: none;
}
.yf-intro[hidden] { display: none; }
.yf-intro svg { width: clamp(132px, 15vw, 192px); height: auto; max-height: 70vh; overflow: visible; }
.yf-intro.is-playing { animation: yf-intro-exit 300ms ease-in 1650ms both; }
.yf-intro .yf-intro-type { display: none; }
.yf-intro-wide svg { width: min(76vw, 720px); }
.yf-intro-wide.is-playing { animation: yf-intro-exit 360ms ease-in 2000ms both; }
.yf-intro-wide.is-playing .yf-intro-mark {
  transform-origin: 182px 66px;
  animation: yf-intro-compose 650ms cubic-bezier(.22, .68, .25, 1) 1050ms both;
}
.yf-intro-wide.is-playing .yf-intro-type {
  display: inline;
  animation: yf-intro-type 450ms ease 1400ms both;
}
.yf-intro .yf-intro-building {
  fill-opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.yf-intro.is-playing .yf-intro-building {
  animation: yf-intro-draw 700ms cubic-bezier(.33, 0, .2, 1) var(--draw-delay, 100ms) both,
    yf-intro-fill 350ms ease 850ms both;
}
.yf-intro.is-playing .yf-intro-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: yf-intro-star 350ms cubic-bezier(.2, .7, .3, 1) 1100ms both;
}
@keyframes yf-intro-draw { to { stroke-dashoffset: 0; } }
.yf-intro-wide.is-playing .yf-intro-building {
  animation: yf-intro-draw 850ms cubic-bezier(.33, 0, .2, 1) var(--draw-delay, 100ms) both,
    yf-intro-fill 450ms ease 950ms both;
}
.yf-intro-wide.is-playing .yf-intro-star {
  animation: yf-intro-star 500ms cubic-bezier(.2, .7, .3, 1) 1150ms both;
}
@keyframes yf-intro-type { from { opacity: 0; } to { opacity: 1; } }
@keyframes yf-intro-compose {
  from { transform: translateX(170px) scale(1.6); }
  to { transform: translateX(0) scale(1); }
}
@keyframes yf-intro-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes yf-intro-star {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes yf-intro-exit { to { opacity: 0; visibility: hidden; } }