.indexbg.home-dynamic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #101820;
}

.indexbg.home-dynamic::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1.5%;
  background: url("pc/img/homepage-logo-clean.png?v=20260820-6") no-repeat center top;
  background-size: cover;
  transform-origin: 51% 48%;
  animation: home-camera-breathe 12s ease-in-out infinite alternate;
  will-change: transform, filter;
}

.indexbg.home-dynamic::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 31% 45%, rgba(255, 111, 20, .21), transparent 24%),
    radial-gradient(circle at 48% 74%, rgba(255, 153, 41, .12), transparent 20%),
    linear-gradient(105deg, transparent 42%, rgba(113, 139, 159, .055) 62%, transparent 78%);
  mix-blend-mode: screen;
  animation: home-fire-breathe 3.8s ease-in-out infinite alternate;
}

.home-atmosphere,
.home-embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-atmosphere {
  z-index: 1;
  overflow: hidden;
  opacity: .7;
  background:
    radial-gradient(ellipse at 30% 74%, rgba(62, 72, 78, .34), transparent 42%),
    radial-gradient(ellipse at 76% 15%, rgba(105, 126, 143, .13), transparent 38%);
}

.home-atmosphere::before,
.home-atmosphere::after {
  content: "";
  position: absolute;
  width: 58%;
  height: 35%;
  border-radius: 50%;
  filter: blur(.42rem);
  opacity: .2;
  background: rgba(121, 136, 143, .5);
  will-change: transform, opacity;
}

.home-atmosphere::before {
  left: -18%;
  top: 31%;
  animation: home-smoke-left 17s ease-in-out infinite alternate;
}

.home-atmosphere::after {
  right: -22%;
  top: 3%;
  animation: home-smoke-right 21s ease-in-out infinite alternate;
}

.home-embers {
  z-index: 2;
}

.home-dynamic .video-bg {
  display: none !important;
}

.home-dynamic .logo,
.home-dynamic .tupobtn {
  z-index: 3;
}

/* 讓首頁「立即突破」整個紅色按鈕（含左右箭頭與邊框）都可點擊。 */
.home-dynamic .tupobtn {
  width: 6.1rem;
  height: 1.55rem;
  top: 8.58rem;
  left: 50%;
  margin-left: -3.05rem;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

@keyframes home-camera-breathe {
  0% { transform: scale(1.01) translate3d(-.08%, 0, 0); filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.035) brightness(1.018); }
  100% { transform: scale(1.026) translate3d(.12%, -.16%, 0); filter: saturate(1.02) brightness(1.008); }
}

@keyframes home-fire-breathe {
  0% { opacity: .52; filter: brightness(.92); }
  45% { opacity: .82; filter: brightness(1.12); }
  100% { opacity: .6; filter: brightness(1.01); }
}

@keyframes home-smoke-left {
  0% { transform: translate3d(-6%, 7%, 0) scale(.92); opacity: .1; }
  100% { transform: translate3d(28%, -9%, 0) scale(1.16); opacity: .24; }
}

@keyframes home-smoke-right {
  0% { transform: translate3d(8%, -2%, 0) scale(1); opacity: .08; }
  100% { transform: translate3d(-25%, 13%, 0) scale(1.2); opacity: .19; }
}

@media (prefers-reduced-motion: reduce) {
  .indexbg.home-dynamic::before,
  .indexbg.home-dynamic::after,
  .home-atmosphere::before,
  .home-atmosphere::after {
    animation: none !important;
  }

  .home-embers { display: none; }
}