.scene-wrap { position: relative; height: 420vh; pointer-events: none; } 

  .preface-panel {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-intro-overlay, 300); 
    overflow: hidden;
    margin-top: calc(-1 * var(--stage-h));
    transform: translateY(0);
    will-change: transform;
  }

  #fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
  }

  .intro-svg-effects-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
    opacity: 1;
    visibility: hidden;
    mix-blend-mode: screen;
  }

  .intro-twinkle-star {
    position: absolute;
    left: var(--tw-star-left, auto);
    top: var(--tw-star-top, auto);
    right: var(--tw-star-right, auto);
    bottom: var(--tw-star-bottom, auto);
    z-index: var(--tw-star-z, 1);
    mix-blend-mode: screen;
  }

  .tw-star-twinkle {
    --tw-star-size: 72px;
    --tw-star-min-opacity: 0.34;
    --tw-star-max-opacity: 0.94;
    --tw-star-duration: 3200ms;
    --tw-star-delay: 0ms;
    --tw-star-blend-mode: screen;
    --tw-star-gate-opacity: 1;
    display: block;
    width: var(--tw-star-size);
    height: var(--tw-star-size);
    pointer-events: none;
    user-select: none;
    opacity: calc(var(--tw-star-min-opacity) * var(--tw-star-gate-opacity));
    object-fit: contain;
    mix-blend-mode: var(--tw-star-blend-mode);
    animation: twStarOpacityTwinkle var(--tw-star-duration) ease-in-out var(--tw-star-delay) infinite both;
    will-change: opacity;
  }

  @keyframes twStarOpacityTwinkle {
    0%,
    100% {
      opacity: calc(var(--tw-star-min-opacity) * var(--tw-star-gate-opacity));
    }

    50% {
      opacity: calc(var(--tw-star-max-opacity) * var(--tw-star-gate-opacity));
    }
  }

  .intro-svg-effects-layer .intro-shooting-star {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    mix-blend-mode: screen;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__viewport {
    position: relative;
    aspect-ratio: 315 / 297;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    max-width: 315px;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__svg mask {
    mask-type: alpha;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__source {
    mix-blend-mode: screen;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--meteor-mask-width, 16);
    stroke-dasharray: var(--meteor-mask-dash, 220);
    stroke-dashoffset: var(--meteor-mask-dash, 220);
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--a {
    --meteor-delay: 0ms;
    --meteor-duration: 1400ms;
    --meteor-mask-width: 24;
    --meteor-mask-dash: 207;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--b {
    --meteor-delay: 180ms;
    --meteor-duration: 1180ms;
    --meteor-mask-width: 16;
    --meteor-mask-dash: 110;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--c {
    --meteor-delay: 320ms;
    --meteor-duration: 1500ms;
    --meteor-mask-width: 24;
    --meteor-mask-dash: 207;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--d {
    --meteor-delay: 520ms;
    --meteor-duration: 1180ms;
    --meteor-mask-width: 16;
    --meteor-mask-dash: 110;
  }

  .intro-svg-effects-layer .tw-overlay-shooting-star__mask-line--e {
    --meteor-delay: 680ms;
    --meteor-duration: 1560ms;
    --meteor-mask-width: 24;
    --meteor-mask-dash: 207;
  }

  .intro-svg-effects-layer .intro-shooting-star.is-active {
    visibility: visible;
    opacity: 1;
  }

  .intro-svg-effects-layer .intro-shooting-star.is-active .tw-overlay-shooting-star__mask-line {
    animation: introShootingStarMaskReveal var(--meteor-duration) cubic-bezier(0.19, 0.01, 0.2, 1) var(--meteor-delay) 1 both;
  }

  @keyframes introShootingStarMaskReveal {
    0% {
      stroke-dashoffset: var(--meteor-mask-dash, 220);
    }

    100% {
      stroke-dashoffset: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tw-star-twinkle {
      animation: none;
      opacity: 0.72;
    }

    .intro-svg-effects-layer .intro-shooting-star.is-active .tw-overlay-shooting-star__mask-line {
      animation: none;
      stroke-dashoffset: 0;
    }
  }

  .preface-text {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(20px, 4.2vw, 38px);
    padding: 0 2rem;
    text-align: center;
    pointer-events: none;
  }

  .preface-zh,
  .preface-en {
    display: block;
    opacity: 0;
    transform: translateY(16px);
    transition: none;
    will-change: opacity, transform, filter;
  }

  .preface-zh {
    width: min(744px, calc(100vw - 48px));
  }

  .preface-en {
    width: min(464px, calc(100vw - 80px));
    height: auto;
  }

  .preface-copy-img {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (max-width: 767px) {
    .preface-text {
      gap: clamp(16px, 7vw, 28px);
      padding: 0 20px;
    }

    .preface-zh {
      width: min(526px, calc(100vw - 40px));
    }

    .preface-en {
      width: min(360px, calc(100vw - 64px));
    }
  }