@use "../globals/" as *;

.dc {
  color: var(--c-text);
  letter-spacing: 0.1em;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  @include mq(lg) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    column-gap: 5em;
    transform: none;
  }

  /**
   * 左右レイアウト
   * Horizontal layout
   */
  &-left {
    position: relative;
    flex-basis: 60svh;
    z-index: 0;

    @include mq(md) {
      flex-basis: 45%;
      bottom: 4vh;
    }
  }

  &-right {
    flex-basis: 40svh;

    position: relative;
    display: flex;
    align-items: flex-end;
    @include mq(md) {
      flex-basis: 55%;
    }
  }

  /**
   * スライダーレイアウト
   * Slider layout
   */
  &-slider {
    font-size: fluid-text(400px, 600px);
    width: 1.2em;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 1;
    transform: translateY(-50%);
    @include mq(lg) {
      aspect-ratio: 1;
      transform: translateY(-50%);
    }
  }

  &-svg {
    transform: translate(-1em, -47%) rotate(-12deg);
    max-width: 10em;
    max-height: 2em;
    position: absolute;
    top: 0;
    z-index: 0;
    font-size: fluid-text(24px, 65px);

    &-group {
      &.animation .dc-svg-text {
        animation: kf-draw 1.5s ease-in-out forwards,
          kf-fill-in 1.5s ease-in-out forwards;
      }
      &.animation.--end .dc-svg-text {
        animation: none; // animationを無効化（transitionがうまく効かないため）. Disable animation (because transition does not work well)
        stroke-dashoffset: 0;
        fill: var(--c-accent);
        transition: stroke var(--toggle-theme-duration) var(--toggle-theme-ease),
          fill var(--toggle-theme-duration) var(--toggle-theme-ease);
      }
    }

    &-text {
      user-select: none;
      fill: transparent; /* 初期状態を透明に設定. Set initial state to transparent */
      stroke: var(--c-accent);
      stroke-width: 0.5;
      font-family: var(--font-WindSong);
      letter-spacing: 0.02em;
      font-weight: 400;
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      font-size: 1em;
    }
  }

  &-title {
    font-size: fluid-text(24px, 56px);
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
    transition: color var(--toggle-theme-duration) var(--toggle-theme-ease);
  }

  &-meta {
    font-size: fluid-text(13px, 16px);
    font-weight: 400;
    margin-top: 1em;
    transition: color var(--toggle-theme-duration) var(--toggle-theme-ease);
  }

  &-since {
    margin-right: 1.5em;
  }
  &-directer,
  &-directer-name {
    margin-right: 0.5em;
  }

  &-desc {
    display: block;
    font-size: fluid-text(13px, 15px);
    font-weight: 400;
    line-height: 2;
    margin-top: 2em;
    overflow: hidden;
    transition: color var(--toggle-theme-duration) var(--toggle-theme-ease);

    @media (max-height: 668px) {
      max-height: 80px;
      overflow-y: scroll;
    }
  }

  &-home {
    display: inline-block;
    font-size: fluid-text(10px, 12px);
    margin-top: 1.5em;
    white-space: pre-wrap;
    color: var(--c-text) !important;
    transition: color var(--toggle-theme-duration) var(--toggle-theme-ease);

    span {
      display: inline-block;
      opacity: 0;
    }
  }
}

@keyframes kf-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes kf-fill-in {
  50% {
    fill: transparent;
  }
  to {
    fill: var(--c-accent);
  }
}
