/* 인트로 (진입 화면)
   시안 7컷 시퀀스: 지학사 → 지학사 교과서 → 슬로건 → 페이드아웃 → 학교급 카드
   기준 1920 × 980. 좁은 화면에서는 글자와 카드가 같이 줄어든다. */
.intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(
    122deg,
    #fafeff 0%,
    #e5f5ff 32%,
    #ffebf7 64%,
    #f0f0ff 100%
  );
}

/* 별 배경 */
.intro::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 2530px;
  height: 2794px;
  margin: -1397px 0 0 -1265px;
  background: url("../img/bg-stars.png") no-repeat center top / 2530px 2794px;
  pointer-events: none;
}

.intro-logo {
  position: absolute;
  left: 50%;
  top: 20px;
  z-index: 3;
  width: 110px;
  height: auto;
  transform: translateX(-50%);
}

/* 중앙 문구 — 시안 Giants 88 / 1920 기준 4.583vw */
.intro-title {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 5vw;
  font-family: var(--font-giants);
  font-weight: 400;
  font-size: clamp(30px, 4.583vw, 88px);
  line-height: 1.24;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(
    117deg,
    #ffa6d7 0%,
    #ff7de3 17.8%,
    #a557ff 45.5%,
    #f97dc1 80.1%,
    #ffa6d7 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 상태마다 움직이는 대상이 달라 전환을 따로 둔다 */
  transition:
    opacity 0.24s ease-in,
    transform 0.24s ease-in;
}

/* 첫 문구는 스크립트가 크기·위치를 매 프레임 직접 넣으므로 전환을 끈다 */
.intro-title.is-instant {
  transition: none;
}

/* 첫 문구는 화면 가운데에 크게 떠오른다 */
.intro-title.is-big {
  font-size: clamp(46px, 7.4vw, 142px);
}

/* 제자리에서 줄어드는 구간. 미는 값은 스크립트가 매 프레임 다시 잡는다 */
.intro-title.is-shrinking {
  transition: font-size 0.46s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 두 줄로 접히는 좁은 화면에서는 한 번에 툭 올라온다 */
.intro-title.is-quick {
  animation: intro-quick 0.34s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes intro-quick {
  from {
    opacity: 0;
    transform: translateY(0.18em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 다음 문구로 넘어갈 때는 왼쪽으로 빠르게 빠진다 */
.intro-title.is-out {
  opacity: 0;
  transform: translateX(-0.4em);
}

/* 중심에서 터지는 광선 */
.intro-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 55.05vw;
  aspect-ratio: 1057 / 595;
  transform: translate(-50%, -50%) scale(0.03);
  opacity: 0;
  pointer-events: none;
}

.intro-rays img {
  width: 100%;
  height: 100%;
}

/* 중앙에서 시작해 화면 밖까지 한 번에 이어지는 하나의 모션.
   크기는 0% 와 100% 에만 두어 구간이 나뉘지 않게 하고(키프레임을 중간에 두면
   이징이 구간마다 걸려 끊겨 보인다), 등속으로 밀어 멈추는 느낌을 없앤다. */
.intro.is-burst .intro-rays {
  animation: intro-rays 3.6s linear forwards;
}

@keyframes intro-rays {
  0% {
    transform: translate(-50%, -50%) scale(0.02);
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  72% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(4.2);
    opacity: 0;
  }
}

/* 학교급 카드 — 시안 426 × 500, 라운드 24 */
.intro-cards {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  gap: 3.229vw;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.intro.is-cards .intro-cards {
  visibility: visible;
}

.intro-card {
  position: relative;
  display: block;
  width: 22.19vw;
  max-width: 426px;
  aspect-ratio: 426 / 500;
  border-radius: 1.25vw;
  box-shadow: 0 18px 44px rgba(30, 34, 40, 0.14);
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1),
    box-shadow 0.25s ease;
}

/* 양옆 카드는 바깥에서 들어온다 */
.intro-cards li:first-child .intro-card {
  transform: translateX(-60px) translateY(40px);
}

.intro-cards li:last-child .intro-card {
  transform: translateX(60px) translateY(40px);
  transition-delay: 0.16s;
}

.intro-cards li:nth-child(2) .intro-card {
  transition-delay: 0.08s;
}

/* 시안: 가운데 카드가 12px 위로 올라와 있다 */
.intro-cards li:first-child,
.intro-cards li:last-child {
  margin-top: 12px;
}

/* 시안 댓글: 양옆 카드는 사선으로 살짝 기운다 */
.intro.is-cards .intro-cards li .intro-card {
  opacity: 1;
  transform: none;
}

.intro.is-cards .intro-cards li:first-child .intro-card {
  transform: rotate(-3.2deg);
}

.intro.is-cards .intro-cards li:last-child .intro-card {
  transform: rotate(3.2deg);
}

/* 마우스를 올리면 기울기를 유지한 채 살짝 떠오른다 */
.intro.is-cards .intro-cards li:first-child .intro-card:hover {
  transform: rotate(-3.2deg) translateY(-6px);
}

.intro.is-cards .intro-cards li:nth-child(2) .intro-card:hover {
  transform: translateY(-6px);
}

.intro.is-cards .intro-cards li:last-child .intro-card:hover {
  transform: rotate(3.2deg) translateY(-6px);
}

.intro-card-elem {
  background-color: #ffdb1f;
}

.intro-card-mid {
  background-color: #4fefaf;
}

.intro-card-high {
  background-color: #c39bff;
}

.intro-card:hover {
  box-shadow: 0 24px 60px rgba(30, 34, 40, 0.22);
}

.intro-card-eyebrow,
.intro-card-name {
  position: absolute;
  left: 11.27%;
  color: var(--c-ink);
}

.intro-card-eyebrow {
  top: 9.6%;
  font-family: var(--font-paperlogy);
  font-weight: 500;
  font-size: 1.042vw;
  line-height: 1.25;
  white-space: nowrap;
}

.intro-card-name {
  top: 15.8%;
  font-family: var(--font-giants);
  font-weight: 400;
  font-size: 2.5vw;
  line-height: 1.25;
  white-space: nowrap;
}

/* 마스코트는 기본적으로 카드 안에 들어가 있다가 호버하면 밖으로 나온다.
   카드가 잘라내므로 나오는 만큼만 보인다. */
.intro-card {
  overflow: hidden;
}

.intro-card img {
  position: absolute;
  left: 21.2%;
  top: 19.7%;
  width: 115.6%;
  max-width: none;
  height: auto;
  transform: translate(-6%, 14%) scale(0.88);
  transform-origin: 50% 100%;
  transition: transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.intro-card-mid img {
  left: 16.4%;
  top: 30.8%;
  width: 96.7%;
}

.intro-card-high img {
  left: 14.5%;
  top: 24.5%;
  width: 109.7%;
}

.intro-card:hover,
.intro-card:focus-visible {
  overflow: visible;
}

.intro-card:hover img,
.intro-card:focus-visible img {
  transform: none;
}

.intro-skip {
  position: absolute;
  right: 2.5vw;
  bottom: 2.5vw;
  z-index: 4;
  padding: 10px 20px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-paperlogy);
  font-weight: 500;
  font-size: 15px;
  color: var(--c-ink-soft);
  transition:
    background-color 0.2s,
    color 0.2s;
}

.intro-skip:hover {
  background-color: #fff;
  color: var(--c-ink);
}

.intro.is-cards .intro-skip {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1279px) {
  .intro-cards {
    gap: 2vw;
  }

  .intro-card-eyebrow {
    font-size: 13px;
  }

  .intro-card-name {
    font-size: 28px;
  }
}

/* 좁은 화면에서는 카드를 세로로 쌓는다 */
@media (max-width: 767px) {
  .intro-title {
    white-space: normal;
    font-size: clamp(28px, 8.2vw, 44px);
  }

  .intro-cards {
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 0 24px;
  }

  .intro-card {
    width: 100%;
    max-width: none;
    aspect-ratio: 342 / 168;
    border-radius: 18px;
  }

  .intro-cards li:first-child .intro-card,
  .intro-cards li:last-child .intro-card {
    transform: translateY(24px);
  }

  .intro-card-eyebrow {
    top: 18%;
    left: 7%;
    font-size: 12px;
  }

  .intro-card-name {
    top: 38%;
    left: 7%;
    font-size: 26px;
  }

  .intro-card img {
    left: auto;
    right: -4%;
    top: -14%;
    width: 46%;
  }

  .intro-card-mid img,
  .intro-card-high img {
    left: auto;
    right: -4%;
    top: -10%;
    width: 44%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-title,
  .intro-rays,
  .intro-card {
    transition-duration: 0.01ms;
  }

  .intro-card,
  .intro-card img {
    overflow: visible;
    transform: none;
    transition: none;
  }
}