/* 獨立測試頁：首頁 Hero → Intro 的「幻影鴿王 Logo」捲動轉場。 */
.home-magic-transition-page {
  --brand-night: #101224;
  --hero-visual-opacity: 1;
  --hero-character-opacity: 1;
  --hero-visual-filter: brightness(1) blur(0px);
  --hero-title-opacity: 1;
  --hero-cue-opacity: 1;
  --logo-opacity: 0;
  --logo-stroke: #528eff;
  --logo-fill-opacity: 0;
  --morph-start-opacity: 1;
  --morph-end-opacity: 0;
  --morph-reference-opacity: 1;
  --reference-logo-opacity: 0;
  --mobile-outline-opacity: 1;
  --logo-left: 0px;
  --logo-top: 0px;
  --logo-width: 0px;
  --logo-height: 0px;
  --logo-translate-x: 0px;
  --logo-translate-y: 0px;
  --logo-scale: 1;
  --intro-opacity: 0;
  --intro-media-scale: 1.045;
  --intro-full-reveal: 0;
  --intro-copy-opacity: 0;
  --intro-copy-y: 14px;
  --mask-width: 0px;
  --mask-height: 0px;
  --mask-x: 0px;
  --mask-y: 0px;
  overflow-x: hidden;
  background: var(--brand-night);
}

.home-magic-transition-page header {
  z-index: 20;
}

.magic-scroll-scene {
  position: relative;
  height: 400vh;
  min-height: 2000px;
  background: var(--brand-night);
}

.magic-scroll-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--brand-night);
}

.magic-scroll-hero,
.magic-scroll-intro {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100vh !important;
  min-height: 100vh;
  margin: 0;
}

.magic-scroll-hero {
  z-index: 1;
  background: var(--brand-night);
}

.magic-hero-depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* 正式首頁的影片原本是負 z-index；測試頁有 isolation，必須拉回內容層才會看見森林。 */
.magic-scroll-hero .hero_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.magic-scroll-hero .hero_bg .full_screen_video {
  z-index: 0;
}

.magic-scroll-hero .hero_bg::before {
  z-index: 1;
}

.magic-scroll-hero .hero_bg::after {
  z-index: 2;
}

.magic-scroll-hero .character_wrap {
  z-index: 2;
}

.magic-scroll-hero .hero_bg {
  opacity: var(--hero-visual-opacity) !important;
  filter: var(--hero-visual-filter);
  will-change: opacity, filter;
}

/* 人物在開始捲動時先退場，背景仍沿用原本較慢的消失節奏。 */
.magic-scroll-hero .hero-character-reveal {
  opacity: var(--hero-character-opacity) !important;
  filter: var(--hero-visual-filter);
  will-change: opacity, filter;
}

.magic-scroll-hero .hero-headline-stage {
  opacity: var(--hero-title-opacity);
  will-change: opacity;
}

.magic-scroll-hero .hero-scroll-cue {
  position: absolute;
  z-index: 6;
  bottom: 4rem;
  left: 50%;
  opacity: var(--hero-cue-opacity);
  pointer-events: none;
  transform: translate3d(-50%, 0, 0);
  animation: magic-scroll-cue 2s ease-in-out infinite;
  will-change: opacity, transform;
}

@keyframes magic-scroll-cue {
  0%, 100% { transform: translate3d(-50%, 0, 0); }
  50% { transform: translate3d(-50%, -.75rem, 0); }
}

/* 轉場 Logo 從正式 Hero 標題的實際矩形出發，再移到畫面中央。 */
.magic-logo-stage {
  position: absolute;
  z-index: 5;
  left: var(--logo-left);
  top: var(--logo-top);
  width: var(--logo-width);
  height: var(--logo-height);
  opacity: var(--logo-opacity);
  pointer-events: none;
  transform: translate3d(var(--logo-translate-x), var(--logo-translate-y), 0) scale(var(--logo-scale));
  transform-origin: 0 0;
  will-change: transform, opacity;
}

.magic-morph-svg,
.magic-desktop-logo-solid,
.magic-mobile-logo,
.magic-mobile-logo-solid {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.magic-morph-svg {
  z-index: 1;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

#MagicMorphStart {
  opacity: var(--morph-start-opacity);
}

#MagicMorphEnd {
  opacity: var(--morph-end-opacity);
}

/* 若瀏覽器因本機 file:// 限制無法讀取 object 內部路徑，仍保留白字階段。 */
.magic-desktop-logo-solid {
  z-index: 0;
  opacity: var(--reference-logo-opacity);
  will-change: opacity;
}

.home-magic-transition-page.magic-morph-ready #MagicMorphStart,
.home-magic-transition-page.magic-morph-ready #MagicMorphEnd {
  opacity: var(--morph-reference-opacity);
}

#MagicMorphStart,
#MagicMorphEnd {
  will-change: opacity;
}

.magic-mobile-logo {
  opacity: var(--mobile-outline-opacity);
}

.magic-mobile-logo-solid {
  opacity: var(--logo-fill-opacity);
}

.magic-scroll-intro {
  z-index: 3;
  padding: 0 !important;
  overflow: hidden;
  opacity: var(--intro-opacity);
  background:
    radial-gradient(circle at 50% 44%, rgba(38, 72, 132, .22), transparent 46%),
    var(--brand-night);
  -webkit-mask-image:
    url("../img/magic-transition-logo-desktop-mask.svg"),
    linear-gradient(
      rgba(0, 0, 0, var(--intro-full-reveal)),
      rgba(0, 0, 0, var(--intro-full-reveal))
    );
  mask-image:
    url("../img/magic-transition-logo-desktop-mask.svg"),
    linear-gradient(
      rgba(0, 0, 0, var(--intro-full-reveal)),
      rgba(0, 0, 0, var(--intro-full-reveal))
    );
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: var(--mask-width) var(--mask-height), 100% 100%;
  mask-size: var(--mask-width) var(--mask-height), 100% 100%;
  -webkit-mask-position: var(--mask-x) var(--mask-y), 0 0;
  mask-position: var(--mask-x) var(--mask-y), 0 0;
  -webkit-mask-mode: alpha, alpha;
  mask-mode: alpha, alpha;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  will-change: opacity, -webkit-mask-size, mask-size, -webkit-mask-position, mask-position;
}

.home-magic-transition-page.magic-intro-full .magic-scroll-intro,
.home-magic-transition-page.no-logo-mask .magic-scroll-intro {
  -webkit-mask-image: none;
  mask-image: none;
}

.magic-scroll-intro::before {
  z-index: 1;
  background-color: rgba(16, 18, 36, .5);
}

.magic-scroll-intro .full_screen_video {
  z-index: 0;
  background-color: var(--brand-night);
  transform: scale(var(--intro-media-scale));
  transform-origin: 50% 50%;
  will-change: transform;
}

.magic-scroll-intro .container {
  position: relative;
  z-index: 2;
  height: 100%;
  opacity: var(--intro-copy-opacity);
  transform: translate3d(0, var(--intro-copy-y), 0);
  will-change: opacity, transform;
}

.magic-scroll-intro .row {
  height: 100%;
}

.magic-scroll-intro .container [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.no-logo-mask .magic-logo-stage {
  display: none;
}

@media (max-width: 767.98px) {
  .magic-scroll-scene {
    height: 250vh;
    min-height: 0;
  }

  .magic-scroll-hero .hero-scroll-cue {
    bottom: 2rem;
  }

  .magic-scroll-intro {
    -webkit-mask-image:
      url("../img/magic-transition-logo-mobile-mask.svg"),
      linear-gradient(
        rgba(0, 0, 0, var(--intro-full-reveal)),
        rgba(0, 0, 0, var(--intro-full-reveal))
      );
    mask-image:
      url("../img/magic-transition-logo-mobile-mask.svg"),
      linear-gradient(
        rgba(0, 0, 0, var(--intro-full-reveal)),
        rgba(0, 0, 0, var(--intro-full-reveal))
      );
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .magic-scroll-hero .hero-scroll-cue {
    bottom: .6rem;
    transform: translate3d(-50%, 0, 0) scale(.68);
  }
}

@media (prefers-reduced-motion: reduce) {
  .magic-scroll-scene {
    height: auto;
    min-height: 0;
  }

  .magic-scroll-stage {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .magic-scroll-hero,
  .magic-scroll-intro {
    position: relative !important;
    inset: auto;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .magic-scroll-intro .container {
    opacity: 1;
    transform: none;
  }

  .magic-logo-stage {
    display: none;
  }

  .magic-scroll-hero .hero_bg,
  .magic-scroll-hero .hero-character-reveal,
  .magic-scroll-intro .full_screen_video {
    opacity: 1 !important;
    transform: none;
    filter: none;
  }
}