.section1 .sectionBg {
  width: 150%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}

html.home-page,
body.home-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.home-page {
  position: fixed;
  inset: 0;
}

body.home-page main,
body.home-page .section1 {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overscroll-behavior: none;
}

.section1 {
  touch-action: none;
}

.section1 .sectionBg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(255, 79, 0, 0.7) 0%, rgba(255, 79, 0, 0) 60%);
  z-index: 1;
}

.section1 .sectionBg video {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

.section1 .sectionContent {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 50px;
}

.sectionText {
  width: 100%;
  font-family: var(--Jura);
}

.heroLogo {
  width: 40%;
  height: auto;
  fill: var(--White);
}

.heroTitle {
  margin-left: 12%;
  margin-top: -10px;
  max-width: 980px;
  color: var(--White);
  display: grid;
  font-family: var(--Jura);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.18;
  text-transform: lowercase;
  position: relative;
}

.heroTitle__text {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.heroTitle__text--current {
  opacity: 1;
  pointer-events: auto;
}

.heroTitle__text--next,
.heroTitle__text--support {
  position: fixed;
  right: 100px;
  bottom: 50px;
  width: min(760px, calc(100vw - 100px));
  display: block;
  max-width: none;
  font-family: var(--Sans);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
}

.heroTitle__lineBig {
  font-size: 2.5rem;
  font-weight: 600;
}

.heroTitle__text--support {
  grid-area: 1 / 1;
}

.heroTitle__line {
  display: block;
}

.heroTitle__text .word {
  white-space: nowrap;
  transform-style: preserve-3d;
}

.heroTitle__text--next .word,
.heroTitle__text--support .word {
  text-align: right;
}

.heroTitle__text .char {
  display: inline-block;
  vertical-align: top;
  transform-style: preserve-3d;
}

.heroTitle__text:not(.heroTitle__text--next) .word>.char:last-child {
  margin-right: .3em;
}

.heroTitle__text--next .whitespace {
  display: none;
}

/* ── .heroLogo 3D scene ──────────────────────────────────────── */

/* 動畫共用設定 */
.heroLogo {
  transform-style: preserve-3d;
  transform-origin: center top;
  will-change: transform, opacity;
  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s ease;
}

/* ─ Before isReady：初始隱藏狀態 ─────────────────────────────── */
main:not(.isReady) .heroLogo {
  opacity: 0;
  transform:
    perspective(300px) rotateX(-90deg)
    /* X 軸旋轉 */
    rotateY(0deg)
    /* Y 軸旋轉 */
    rotateZ(0deg)
    /* Z 軸旋轉 */
    translateX(0px)
    /* 水平位移 */
    translateY(100%)
    /* 垂直位移 */
    translateZ(0px)
    /* 前後景深位移 */
    scale(1);
  /* 縮放 */
}

/* ─ After isReady：動畫終態 ──────────────────────────────────── */
main.isReady .heroLogo {
  opacity: 1;
  transform:
    perspective(300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) scale(1);
}


/* ////RWD//// */
@media screen and (max-width:1660px) {}

@media screen and (max-width:1440px) {}

@media screen and (max-width:1366px) {}

@media screen and (max-width:1280px) {}

@media screen and (max-width:1024px) {}

@media (orientation:landscape) and (max-height:767px) {}

@media (orientation:portrait) and (max-height:1376px) {
  .section1 .sectionBg {
    width: 250%;
    bottom: 0;
    left: -60%;
  }
}

@media (orientation:portrait) and (max-height:1024px) {}

@media screen and (max-width:480px) {

  body.home-page,
  body.home-page main,
  body.home-page .section1 {
    height: 100svh;
    min-height: 100svh;
  }

  .section1 .sectionContent {
    padding:
      max(30px, env(safe-area-inset-top)) max(30px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(30px, env(safe-area-inset-left));
  }

  .section1 .sectionBg {
    width: 400%;
    bottom: 0;
    left: -150%;
  }

  .heroLogo {
    width: 70%;
  }

  .heroTitle {
    margin-left: 15%;
    font-size: 1.5rem;
    position: static;
  }

  .heroTitle__text--next,
  .heroTitle__text--support {
    position: absolute;
    right: max(80px, calc(env(safe-area-inset-right) + 80px));
    bottom: max(30px, calc(env(safe-area-inset-bottom) + 20px));
    width: calc(100% - max(120px, calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 120px)));
    font-size: 1.2rem;
    text-align: center;
  }

  .heroTitle__lineBig {
    font-size: 1.6rem;
  }
}

/*Iphone XR 414*896 */
@media (orientation: portrait) and (max-height:896px) {}

/*Iphone 12Pro 390*844 */
@media (orientation: portrait) and (max-height:844px) {}

@media (orientation: portrait) and (max-width:393px) {

  .heroTitle__text--next,
  .heroTitle__text--support {
    font-size: 1rem;
  }

  .heroTitle {
    font-size: 1.3rem;
  }
}

/*Iphone 10 375*812 */
@media (orientation: portrait) and (max-height:812px) {}

@media (orientation: portrait) and (max-width:375px) {
  .heroTitle {
    font-size: 1.2rem;
  }
  .heroTitle__lineBig {
    font-size: 1.3rem;
  }
}

/*Iphone 8Plus 414*736 */
@media (orientation: portrait) and (max-height:736px) {}

/*Iphone 8 375*667 */
@media (orientation: portrait) and (max-height:667px) {
  .section1 .sectionBg {
    bottom: -10%;
  }
}

@media screen and (max-width:360px) {}

@media screen and (max-width:320px) {}