/* =========================================================
   기본 설정
========================================================= */

:root {
  --intro-background: #ffffff;

  --galaxy-category-background: #e2e2e2;
  --galaxy-category-text: #000000;

  --galaxy-category-duration: 2200ms;

  --galaxy-category-easing:
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;

  margin: 0;

  background-color:
    var(--intro-background);
}

body.intro-body {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 100vh;

  overflow: hidden;
}

@supports (height: 100dvh) {
  body.intro-body {
    height: 100dvh;
    min-height: 100dvh;
  }
}

/* =========================================================
   전체 화면 애니메이션 영역
========================================================= */

.intro-page {
  position: fixed;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  background-color:
    var(--intro-background);

  overflow: hidden;
}

.morph-stage {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

.morph-scene {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
  isolation: isolate;
}

/* =========================================================
   Three.js 캔버스
========================================================= */

.intro-webgl-canvas {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  border: 0;
  outline: none;

  background-color: transparent;

  pointer-events: none;
  touch-action: none;
}

/* =========================================================
   사용하지 않는 이전 요소 제거
========================================================= */

.intro-header,
.intro-logo,
.morph-link,
.morph-enter,
.intro-menu,
.intro-menu-link,
.intro-menu-number,
.intro-menu-title,
.intro-skip,
.morph-object,
.mosaic-layer,
.mosaic-tile,
.resolution-tile,
.smooth-circle,
.underwater-particle-canvas,
.sphere-axes,
.sphere-shell,
.flat-disc,
.sphere-axis,
.sphere-equator {
  display: none !important;
}

.morph-scene::before,
.morph-scene::after,
.morph-object::before,
.morph-object::after {
  content: none !important;

  display: none !important;
}

/* =========================================================
   은하수 카테고리 전체 영역
========================================================= */

.galaxy-categories {
  position: absolute;

  inset: 0;
  z-index: 20;

  overflow: hidden;

  pointer-events: none;
}

/* =========================================================
   개별 카테고리
========================================================= */

.galaxy-category {
  position: absolute;

  left: 50%;
  top: 50%;
  z-index: 21;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 76px;
  height: 28px;

  padding:
    0
    13px;

  color:
    var(--galaxy-category-text);

  background-color: transparent;

  font-family:
    "Pretendard",
    sans-serif;

  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;

  text-decoration: none;
  white-space: nowrap;

  opacity: 0;

  transform:
    translate3d(
      -50%,
      -50%,
      0
    );

  transform-origin:
    center center;

  /*
    부모 요소는 위치 이동만 담당합니다.

    기존처럼 같은 요소에 transform과
    clip-path 애니메이션을 동시에 적용하지 않아
    회색 박스 깜빡임을 줄입니다.
  */
  will-change:
    transform,
    opacity;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  pointer-events: none;

  transition:
    opacity 160ms linear,
    color 180ms ease;

  -webkit-tap-highlight-color:
    transparent;
}

/* =========================================================
   회색 박스 배경
========================================================= */

.galaxy-category::before {
  content: "";

  position: absolute;

  inset: 0;
  z-index: -1;

  background-color:
    var(
      --galaxy-category-background
    );

  /*
    clip-path 대신 scaleX를 사용합니다.
    GPU 처리 안정성이 더 높고 깜빡임이 적습니다.
  */
  transform:
    translateZ(0)
    scaleX(0);

  transform-origin:
    center center;

  will-change: transform;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition:
    transform
    var(
      --galaxy-category-duration
    )
    var(
      --galaxy-category-easing
    ),
    background-color
    180ms
    ease;
}

/* =========================================================
   카테고리 글자
========================================================= */

.galaxy-category span {
  position: relative;
  z-index: 1;

  display: block;

  font: inherit;
  line-height: inherit;

  opacity: 0;

  transform:
    translate3d(
      0,
      2px,
      0
    );

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition:
    opacity 220ms ease,
    transform 300ms ease;
}

/* =========================================================
   카테고리 표시 상태
========================================================= */

.galaxy-category.is-box-visible,
.galaxy-category.is-visible {
  opacity: 1;

  pointer-events: auto;
}

.galaxy-category.is-box-visible::before,
.galaxy-category.is-visible::before {
  transform:
    translateZ(0)
    scaleX(1);
}

.galaxy-category.is-box-visible span,
.galaxy-category.is-visible span {
  opacity: 1;

  transform:
    translate3d(
      0,
      0,
      0
    );

  transition-delay: 420ms;
}

/* =========================================================
   마우스 오버
========================================================= */

@media (hover: hover) {
  .galaxy-category:hover {
    color: #ffffff;
  }

  .galaxy-category:hover::before {
    background-color: #000000;
  }
}

.galaxy-category:focus-visible {
  color: #ffffff;

  outline:
    1px
    solid
    #000000;

  outline-offset: 3px;
}

.galaxy-category:focus-visible::before {
  background-color: #000000;
}

/* =========================================================
   PC 인트로 상단 그리드
   INDEX의 횡단 위치에 맞춤
========================================================= */

.intro-body .site-header {
  padding: 26px 44px;
}

/* =========================================================
   모바일
========================================================= */

@media (max-width: 767px) {
  :root {
    --galaxy-category-duration:
      1800ms;
  }

  .intro-body .site-header {
    padding:
      calc(
        env(safe-area-inset-top, 0px) +
        20px
      )
      22px
      0;
  }

  .galaxy-category {
    min-width: 58px;
    height: 23px;

    padding:
      0
      9px;

    font-size: 9px;
  }
}

/* =========================================================
   움직임 최소화 설정
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .galaxy-category,
  .galaxy-category::before,
  .galaxy-category span {
    transition-duration:
      1ms !important;

    transition-delay:
      0ms !important;
  }
}