/* =========================================
   HOME
========================================= */

body {
  min-height: 100vh;
  overflow-x: hidden;
}


.home {
  position: relative;

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

  background: transparent;
}



/* =========================================
   HERO
========================================= */

.home-hero {
  position: fixed;

  inset: 0;

  z-index: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #aaa;
}



/* =========================================
   NORMAL IMAGE
========================================= */

.home-hero-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center center;
}



@media (min-aspect-ratio: 2 / 1) {

  .home-hero-image {
    width: 100vw;
    height: 75vw;

    max-width: none;
    max-height: none;

    object-fit: cover;
    object-position: center top;
  }

}



/* =========================================
   VIDEO
========================================= */

.home-hero-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center center;
}



/* =========================================
   360 PANORAMA
========================================= */

.home-panorama {
  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

  width: 100% !important;
  height: 100% !important;

  overflow: hidden;

  cursor: grab;

  will-change: opacity;
}


.home-panorama:active {
  cursor: grabbing;
}


.home-panorama.pnlm-container {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;
}


.home-panorama .pnlm-render-container {
  z-index: 1;
}


.home-panorama .pnlm-ui {
  z-index: 2;
}


.home-panorama canvas {
  max-width: none !important;
  max-height: none !important;
}



/*
  INTRO 중에는
  360 화면이 3초 동안 나타남.
*/

.home-intro-running .home-panorama {
  transition:
    opacity 3000ms linear !important;
}



/* =========================================
   TV STATIC
========================================= */

.tv-static-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  image-rendering: auto;
}



/* =========================================
   HERO NOISE OVERLAY
========================================= */

.hero-noise-overlay {
  position: absolute;

  inset: 0;

  z-index: 3;

  width: 100%;
  height: 100%;

  pointer-events: none;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"
    );

  background-repeat: repeat;
  background-size: 180px 180px;

  mix-blend-mode: normal;
}



/* =========================================
   HOME NEWS
========================================= */

.home-news {
  position: fixed;

  top: 64px;
  left: 22px;

  z-index: 9999 !important;

  width:
    min(
      820px,
      calc(100vw - 44px)
    );

  pointer-events: none;
}


.news-section {
  margin: 0 0 38px 0;
  padding: 0;
}


.news-section:last-child {
  margin-bottom: 0;
}



/* =========================================
   NEWS HEADING
========================================= */

.news-heading {
  width: fit-content;

  margin: 0 0 10px 0;
  padding: 1px 4px;

  font-size: 19px;
  font-weight: 400;
  line-height: 1.08;

  color: #111;

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );
}



/* =========================================
   NEWS ITEM
========================================= */

.news-item {
  display: grid;

  grid-template-columns:
    92px minmax(0, 1fr);

  column-gap: 20px;

  align-items: start;

  width: fit-content;

  max-width: 100%;

  margin: 0 0 9px 0;

  color: #111;

  text-decoration: none;
}


.news-link {
  pointer-events: auto;
}


.news-link:hover {
  text-decoration: none;
}



/* =========================================
   NEWS DATE
========================================= */

.news-date {
  width: fit-content;

  padding: 1px 4px;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.08;

  white-space: nowrap;

  color: #111;

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );
}



/* =========================================
   NEWS CONTENT
========================================= */

.news-content {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 3px;

  min-width: 0;
}


.news-line {
  display: block;

  width: fit-content;

  max-width: 100%;

  padding: 1px 4px;

  font-size: 18px;
  font-weight: 400;
  line-height: 1.08;

  color: #111;

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );
}



/* =========================================
   REDACTED
========================================= */

.redacted {
  display: block;

  height: 16px;

  padding: 0;

  overflow: hidden;

  background: #000;
}



/* =========================================
   FIRST FRAME PROTECTION
========================================= */

.home-intro-pending .home-news {
  visibility: hidden !important;
  opacity: 0 !important;
}



/* =========================================
   NEWS PREPARATION
========================================= */

.home-news.intro-news-preparing {
  visibility: hidden !important;
  opacity: 0 !important;
}


.home-intro-running .home-news {
  visibility: visible;
  opacity: 1;

  z-index: 10010 !important;
}



/* =========================================
   INDIVIDUAL TEXT PROTECTION
========================================= */

.intro-text-hidden {
  visibility: hidden !important;
}


.home-intro-running .news-heading,
.home-intro-running .news-date,
.home-intro-running .news-line {
  min-height: 1em;
}


.intro-redacted-hidden {
  visibility: hidden !important;
}



/* =========================================
   TYPING CARET
========================================= */

.intro-typing::after {
  content: "";

  display: inline-block;

  width: 1px;
  height: 0.9em;

  margin-left: 2px;

  vertical-align: -0.05em;

  background: currentColor;

  animation:
    introCaretBlink
    650ms
    steps(1)
    infinite;
}


@keyframes introCaretBlink {

  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }

}



/* =========================================
   STATIC CONNECTION SCREEN
========================================= */

.home-intro-static {
  position: fixed;

  inset: 0;

  z-index: 9998;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #777;

  opacity: 1;

  pointer-events: none;

  will-change: opacity;

  transition:
    opacity 3000ms linear;
}


.home-intro-static-out {
  opacity: 0;
}


.home-intro-static .tv-static-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
}



/* =========================================
   HEADER ABOVE STATIC
========================================= */

.home-intro-pending #siteHeader,
.home-intro-running #siteHeader {
  position: relative;

  z-index: 10030 !important;
}



/* =========================================
   REMOTE HAND
========================================= */

.remote-hand {
  position: fixed;

  z-index: 10020;

  line-height: 1;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;

  /*
    처음부터 아주 옅게 보임.
  */

  opacity: 0.32;

  font-size: 46px;

  /*
    손을 흰색에 가깝게.
  */

  filter:
    grayscale(1)
    brightness(0)
    invert(1);

  text-shadow: none;

  /*
    손목 근처를 회전축으로.
  */

  transform-origin:
    50% 92%;

  will-change:
    transform,
    opacity;
}



/* =========================================
   VERY SLOW HAND MOTION
========================================= */

/*
  빠르게 흔드는 인사가 아니라
  거의 멈춰 있는 것처럼
  아주 천천히 기울어짐.
*/

.remote-hand.is-moving {
  animation:
    homeHandSlowMotion
    8s
    ease-in-out
    infinite;
}


@keyframes homeHandSlowMotion {

  0% {
    transform:
      rotate(-2deg);
  }


  25% {
    transform:
      rotate(4deg);
  }


  50% {
    transform:
      rotate(-3deg);
  }


  75% {
    transform:
      rotate(3deg);
  }


  100% {
    transform:
      rotate(-2deg);
  }

}



/* =========================================
   HAND FADE DURING CROSSFADE
========================================= */

.remote-hand.hand-transition-out {
  opacity: 0;

  transition:
    opacity 3000ms linear;
}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

  .home-news {
    top: 82px;
    left: 16px;

    width:
      calc(
        100vw - 32px
      );
  }


  .news-section {
    margin-bottom: 30px;
  }


  .news-heading {
    margin-bottom: 8px;

    font-size: 17px;
  }


  .news-item {
    grid-template-columns:
      80px minmax(0, 1fr);

    column-gap: 12px;

    margin-bottom: 8px;
  }


  .news-date {
    font-size: 14px;
  }


  .news-line {
    font-size: 16px;
  }


  .redacted {
    height: 14px;
  }


  .remote-hand {
    font-size: 38px;
  }

}