@charset "utf-8";
@import url(font.css);
:root {
    --engFont : "Pretendard";
    --koFont : "Pretendard";
    --mainColor : #EF6800;
    --lightgray : #a6a8ab;
    --number : #d0d2d3;
}

.visual {
    width: 78%;
    height: 100%;
    z-index: 99;
}
.visual .img-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}
.visual .img-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.text {
    font-size: 8vw;
    font-weight: 900;
    position: relative;
    text-transform: full-width;
    display: flex;
}

.text .space {
  width: 0.3rem;
}

.text .letter {
  position: relative;
  display: flex;
}

.text .letter .source {
    font-family: 'pretendard';
    font-weight: 900;
    color: gray;
    -webkit-text-stroke: 0.01em rgba(0, 0, 0, 0.3);
    display: flex;
}

.text .letter .overlay,
.text .letter .shadow {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  user-select: none;
}

.text .letter .overlay {
  background-image: linear-gradient(90deg, white 50%, #f1f3ec); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: rotateY(-30deg) skew(0, -10deg);
  transform-origin: left;
  animation: overlay 3s  ease-out var(--delay) forwards;
}

.text .letter .shadow {
  filter: blur(5px);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
  animation: shadow 3s var(--delay) forwards;
}

@keyframes shadow {
  0%{
    transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em);
    opacity: 1;
  }
  10% {
    transform: skew(0, 0) translateY(0) translateX(0);
    opacity: 0;
  }
  100% {
    transform: skew(0, 0) translateY(0.1em) translateX(0.05em);
    filter: blur(2px);
    opacity: 1;
  }
}

@keyframes overlay {
  0% {
    transform: rotateY(-30deg) skew(0, -10deg);
  }
  10% {
    transform: rotateY(0deg) skew(0, 0);
  }
  100% {
    transform: rotateY(0deg) skew(0, 0)}
}

/* 모바일 비쥬얼 글씨 */
.mb-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.mb-text .text-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.mb-text p {
  text-transform: uppercase;
  font-size: 20vw;
  font-family: var(--engFont);
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke: 0.03em rgba(255, 255, 255, 1);
  text-shadow: 2px 2px 5px rgba(0,0,0,.3);
}

/* =========반응형========== */
@media (max-width:1240px) {}
@media (max-width:890px) {
  .visual {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    overflow-y: hidden;
  }
  .visual .img-wrap video {
    object-position: 70% center;
  }
  .app {
    display: none;
  }
  .mb-text {
    display: block;
  }
}