/* ============================================
   Top Page
   ============================================ */

/* --- MV (Main Visual) --- */
.mv {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: var(--color-bg);
  display: flex;
  overflow: hidden;

  .contents {
    position: relative;
    margin: var(--padding-x);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;

    .middle {
      width: 100%;
      min-width: 0;
      margin-top: -53rem;

      .tagline {
        font-family: var(--font-en);
        font-size: 13rem;
        line-height: 1.5;
        white-space: nowrap;
        margin-bottom: 33rem;
        opacity: 0;
        transition: opacity 0.3s;
      }

      .text-fit {
        max-width: 100%;
      }

      /* tagline は隣の text-fit（DANC ロゴ）のフィット完了に同期してフェードイン。
         先に tagline だけ見えるのを防ぐ。tagline は DOM 上 text-fit より前なので
         兄弟結合子では選べず :has() を使う。 */
      &:has(.text-fit.is-placed) .tagline {
        opacity: 1;
      }
    }

    .bottom {
      position: absolute;
      bottom: 0;

      .university {
        font-family: var(--font-en);
        white-space: nowrap;
        color: #7D7D7D;
        font-size: 13rem;
        line-height: 1.5;
        margin-bottom: 30rem;
      }

      .catchcopy {
        font-family: var(--font-en);
        font-size: 36rem;
        line-height: normal;
      }
    }

    .slide-text {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}

/* --- MV Sticker (Featured Event) --- */
.mv-sticker {
  --mv-sticker-translate: translate(-50%, -50%);
  position: absolute;
  left: 75%;
  top: 75%;
  transform: var(--mv-sticker-translate);
  z-index: 2;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s;

  /* clampFvSticker が位置確定後に付与。FV イントロ演出（fv-intro.js）は現在無効化中のため
     reveal はこの is-placed が担う。再有効化（818721c3 の revert）時はスタンプ側の reveal と要調整。 */
  &.is-placed {
    opacity: 1;
  }

  &:hover {
    opacity: 0.7;
  }

  .sticker--large {
    width: auto;
    transform: none;
  }

  /* FV intro: 出現前は完全に縮小・回転して非表示。is-sticker-intro-active で keyframes を発火 */
  &.is-sticker-intro-pre {
    opacity: 0;
    transform: var(--mv-sticker-translate) scale(0) rotate(-12deg);
  }

  &.is-sticker-intro-active {
    animation: sticker-stamp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

@keyframes sticker-stamp {
  0% {
    opacity: 0;
    transform: var(--mv-sticker-translate) scale(0) rotate(-12deg);
  }
  60% {
    opacity: 1;
    transform: var(--mv-sticker-translate) scale(1.08) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: var(--mv-sticker-translate) scale(1) rotate(0deg);
  }
}

/* --- FV intro: プリペイント可視ゲート ---
   JS が wrap / 文字分解する前にプレーンテキストが見えてしまうのを防ぐ。
   fv-intro.js が初期化を終えた段階で is-fv-intro-loading を外す。 */
.is-fv-intro-loading {
  .header-logo,
  .header-nav-list a,
  .header-lang-current,
  .mv .tagline,
  .mv .university,
  .mv .catchcopy,
  .mv .text-fit,
  .mv .slide-text,
  .mv-sticker {
    opacity: 0;
  }
}


/* --- About --- */
.about-section {
  padding: 200rem var(--padding-x) 0;

  .about-text {
    font-size: 18rem;
    line-height: 2;
    letter-spacing: 1.08rem;
  }
}

html[lang="en"] .about-section .about-text {
  letter-spacing: 0;
  line-height: 1.8;
}

/* --- Section Spacing (Top Page) --- */
.events-section {
  padding-top: 170rem;

  .events-section-header {
    margin-bottom: 50rem;
  }
}

.news-section {
  padding-top: 190rem;

  > .section-heading {
    padding-left: var(--padding-x);
    margin-bottom: 38rem;
  }

  > .view-more-wrap {
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
  }
}

.activity-section {
  padding: 100rem var(--padding-x) 157rem;

  > .section-heading {
    margin-bottom: 38rem;
  }
}

/* ============================================
   Responsive - SP
   ============================================ */
@media (max-width: 700px) {
  .mv-sticker {
    --mv-sticker-translate: translateZ(0);
    left: var(--padding-x);
    top: calc(50% + 50rem); /* TODO 重なることがありそう… */
    transform: var(--mv-sticker-translate);
  }

  .mv {
    height: var(--initial-vh, 100vh);

    .contents {
      .middle {
        margin-top: 0;

        .tagline {
          font-size: 10rem;
          line-height: 1.4;
          margin-bottom: 20rem;
        }
      }

      .bottom {
        .university {
          font-size: 10rem;
          line-height: 1.4;
          margin-bottom: 20rem;
          color: #000;
        }

        .catchcopy {
          font-size: 22rem;
        }
      }

      .slide-text {
        bottom: 8rem;
      }
    }
  }

  .about-section {
    padding-top: 97rem;

    .about-text {
      font-size: 14rem;
      line-height: 2.15;
    }
  }

  .events-section {
    padding-top: 121rem;

    .events-section-header {
      margin-bottom: 0;
    }
  }

  .news-section {
    padding-top: 80rem;

    > .section-heading {
      padding: 0 var(--padding-x) 23rem;
      border-bottom: 1px solid #d9d9d9;
      margin-bottom: 0;
    }
  }

  .activity-section {
    padding: 80rem var(--padding-x) 80rem;

    > .section-heading {
      padding-bottom: 24rem;
      margin-bottom: var(--padding-x);
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: calc(-1 * var(--padding-x));
        right: calc(-1 * var(--padding-x));
        height: 1px;
        background: #d9d9d9;
      }
    }
  }
}