@use "sass:math";
@use "../globals/" as *;
// fonts
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=WindSong&display=swap");

html {
  font-size: math.div($root-font-size, 16px) * 100%;
}

// スクリーンリーダー用スタイル
// アクセシビリティのための要素を画面から非表示にする際に使用します。
// Styles for screen readers
// Used to visually hide elements for accessibility purposes.
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menu {
  position: absolute;
  left: 60%;
  // 海面分を考慮して要素を配置
  // Positioning the element considering the ocean level
  bottom: calc(var(--ocean-level) + var(--float-level));
  font-size: fluid-text(20px, 40px);
  transform: translateX(-50%);

  display: flex;
  align-items: center;

  @media (max-height: 668px) {
    left: 50%;
  }
  @include mq(lg) {
    // 海面分を考慮して要素を配置
    // Positioning the element considering the ocean level
    bottom: calc(var(--ocean-level) + 1em);
  }

  &-box {
    width: 1.6em;
    height: 1.6em;
  }

  &-triangle {
    width: 1.5em;
    height: 1.5em;

    &.left {
      margin-right: 0.2em;
    }
    &.right {
      margin-left: 0.2em;
    }
  }
}

.header {
  position: fixed;
  font-size: 1em;
  top: 1em;
  left: 1em;
  letter-spacing: 0.2em;
  z-index: 1;
}

.credit {
  display: none;
  --c-credit: #ffffff;
  color: var(--c-credit);
  position: fixed;
  font-size: fluid-text(12px, 14px);
  bottom: 0;
  right: 0;
  opacity: 0.6;
  z-index: 100;
  margin: 1.5em;
  max-width: 26em;
  letter-spacing: 0.07em;

  a {
    color: var(--c-credit) !important;
  }

  @include mq(lg) {
    display: block;
  }
}

.content {
  width: 90%;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.ocean {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 512px;
  height: 512px;
  pointer-events: none;
}

.before-page {
  position: fixed;
  z-index: 100;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: fluid-text(15px, 22px);

  &-title {
    font-size: 1em;
    margin-bottom: 1.3em;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5em;
    padding-left: 0.5em;
  }

  &-loader {
    @extend %bar-loader;
  }
}

%bar-loader {
  margin: 0 auto;

  --c-bar-1: rgba(255, 255, 255, 100%);
  --c-bar-2: rgba(255, 255, 255, 0%);

  position: relative;
  --w-bar: 4em;
  --h-bar: 2px;
  --d-gradient: 30deg;
  width: var(--w-bar);
  height: var(--h-bar);
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 200%;
    height: 100%;
    background-image: linear-gradient(
      var(--d-gradient),
      var(--c-bar-1) 0%,
      var(--c-bar-2) 20%,
      var(--c-bar-2) 30%,
      var(--c-bar-1) 50%,
      var(--c-bar-2) 70%,
      var(--c-bar-2) 80%,
      var(--c-bar-1) 100%
    );

    animation: kf-loadbar linear 0.7s infinite;

    @keyframes kf-loadbar {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(50%);
      }
    }
  }
}
