// reset css
@use "./vendors/css-reset.css";
@use "./bounce";
@use "globals" as *;

body {
  /* 変数定義 */
  /* Variable definitions */
  --c-text: #363c42;
  --c-accent: #8e8e8e87;
  --c-loader-start: #e5e7e8;
  --c-loader-end: #bfd5e7;
  --blur: 0px;
  --container-opacity: 0;
  --loader-opacity: 1;

  /**
   * 海面のレベル（50svh）で調度海面に設置
   * Set at sea level (50svh)
   * 
   * 50svhで調度海面に接地する形でメッシュが表示されます。
   * The mesh is displayed in such a way that it touches the sea surface exactly at 50svh.
   */
  --ocean-level: 50svh;

  // 海面からどの位物体を浮かせるか。（0pxで海面に接地します。）
  --float-level: 110px;

  @include mq(sm) {
    --float-level: 75px;
  }

  @include mq(md) {
    --float-level: 90px;
  }

  @include mq(lg) {
    --float-level: 0px;
  }

  --font-Main: "Noto Sans JP", sans-serif;
  --font-WindSong: "WindSong";

  --content-max-width: 1200px;
  --toggle-theme-ease: cubic-bezier(0.55, 0.09, 0.75, 0.26);
  --toggle-theme-duration: 0.4s;

  font-family: var(--font-Main, sans-serif);

  background: linear-gradient(
    128deg,
    var(--c-loader-start) 0%,
    var(--c-loader-end) 100%
  );
}

body.night {
  --c-text: #e4e4e4;
  --c-accent: #ffffff2e;
  --c-loader-start: rgb(91, 119, 150);
  --c-loader-end: rgb(155, 177, 199);
}

#global-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
  opacity: var(--container-opacity);
  filter: blur(var(--blur));

  overflow: hidden;
}

#canvas {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.page-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.loader {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    128deg,
    var(--c-loader-start) 0%,
    var(--c-loader-end) 100%
  );
  filter: blur(var(--blur));
  opacity: var(--loader-opacity);

  &-inner {
    position: absolute;
    bottom: 1.5em;
    right: 1em;
    // transform: translate(-50%, 0);
  }

  &-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    width: 90%;
    max-width: 600px;
    letter-spacing: 1.1em;
    font-size: fluid-text(12px, 16px);
    line-height: 2.4;
  }
}
