/* 캐러셀에서 스크롤이 살짝 걸리도록 — proximity 라 근처에서만 부드럽게 물린다 */
html {
  scroll-snap-type: y proximity;
}

/* AI Project — Figma: 디자인 스터디 / Frame 2147242423 (64:2887), 1920 × 3535
   헤더(90px)는 캔버스 밖 공용 컴포넌트라 캔버스는 3445.19px.
   좌표는 Figma 원본값, 캔버스 스케일은 styles.css + assets/fit.js 담당. */

.ai-page p {
  margin: 0;
}

/* ── 1. 최종 포스터 (64:2906) — 1920 × 1240.19 ──────────── */
.ai-hero {
  height: 1240.191px;
  background: #e7e7e7;
}

/* 201.6px 격자 — 세로선 x=52.63+201.6n, 가로선 y=-40+201.6n */
.ai-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0 52.63px,
      rgba(57, 57, 58, 0.1) 52.63px 53.74px,
      transparent 53.74px 201.6px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 161.6px,
      rgba(57, 57, 58, 0.1) 161.6px 162.71px,
      transparent 162.71px 201.6px
    );
}

/* 블롭 — 원본은 두 장 겹침 + blur(8.075px), Figma 노드 export 를 그대로 사용 */
.ai-hero__blob {
  position: absolute;
  left: 513.109px;
  top: 169.954px;
  width: 882.85px;
  height: 899.148px;
}

.ai-hero__dot {
  position: absolute;
  width: 18.934px;
  height: 18.934px;
}

.ai-hero__num {
  position: absolute;
  font-family: var(--font-outfit);
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  letter-spacing: -0.64px;
  color: #2f3b48;
  white-space: nowrap;
}

.ai-hero__meta {
  position: absolute;
  font-family: var(--font-sf);
  font-weight: 500;
  font-size: 20.918px;
  line-height: 1.3;
  letter-spacing: -1.0459px;
  color: #2e2e2e;
  white-space: nowrap;
}

.ai-hero__date {
  position: absolute;
  left: 55.06px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  font-size: 22.275px;
  line-height: 1.3;
  letter-spacing: -0.891px;
  color: #2f3b48;
  white-space: nowrap;
}

.ai-hero__chip {
  position: absolute;
  height: 53px;
}

/* ── 2. About Us — AI Study (64:3051) ───────────────────── */
.ai-about {
  height: 353px;
  background: #2a2a2a;
}

.ai-about__row {
  position: absolute;
  left: 122px;
  top: 124px;
  width: 1676px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-about__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 253.047px;
}

.ai-about__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 21px;
  line-height: normal;
  letter-spacing: -1.05px;
  color: #ff5f95;
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
}

.ai-about__body {
  width: 848px;
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: -0.72px;
  color: #e7e7e7;
  opacity: 0.8;
}

/* ── 3. 캐러셀 (64:3071) — 1920 × 1026 ──────────────────── */
/* 캐러셀은 첫 화면 크기(뷰포트 − 헤더)에 맞추고, 스크롤이 여기서 살짝 걸리게 한다.
   아래로 밴드·크레딧이 이어지므로 스크롤 화살표는 남긴다. */
.ai-carousel {
  height: var(--hero-height, 1026px);
  background: #e7e7e7;
  overflow: hidden;
  scroll-snap-align: start;
  /* proximity 만으로는 빠르게 내리면 그냥 지나친다. always 를 주면 이 지점을
     넘어갈 때 반드시 한 번 멈춰서 캐러셀을 보고 넘어가게 된다. */
  scroll-snap-stop: always;
  scroll-margin-top: 67.5px; /* sticky 헤더 높이 */
}

/* 콘텐츠(팀명 142 ~ 화살표 977.5)의 중심이 559.75 라 1119.5 무대를 세로 중앙에 */
.ai-carousel__stage {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(var(--stage-scale, 1));
  width: 1920px;
  height: 1119.5px;
}

.ai-carousel__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0 90px,
      rgba(187, 187, 187, 0.5) 90px 91px,
      transparent 91px 145px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 22px,
      rgba(187, 187, 187, 0.5) 22px 23px,
      transparent 23px 145px
    );
}

.ai-carousel__name {
  position: absolute;
  left: 816px;
  top: 142px;
  width: 288px;
  height: 50px;
  padding: 8px 0;
  box-sizing: border-box;
  overflow: hidden;
}

.ai-carousel__name-stack {
  display: flex;
  flex-direction: column;
  gap: 55px;
  align-items: center;
  width: 288px;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-carousel__name-stack img {
  display: block;
  flex: 0 0 auto;
}

.ai-carousel__viewport {
  position: absolute;
  left: 0;
  top: 251px;
  width: 1920px;
  height: 559px;
}

.ai-carousel__track {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 100px;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-card {
  position: relative;
  flex: 0 0 auto;
  width: 559px;
  height: 559px;
  border-radius: 281.5px;
  overflow: hidden;
  cursor: pointer;
  background: #f6f3f1;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-card.is-active {
  width: 992px;
  cursor: default;
}

/* 접힌 카드는 흰색 스크림으로 흐리게, 펼쳐진 카드에서만 걷는다
   (Team Project 캐러셀과 동일한 방식) */
.ai-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  transition: opacity 0.55s ease;
}

.ai-card.is-active::after {
  opacity: 0;
}

.ai-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 펼쳐진 카드는 포스터 원본을 타원 높이에 맞춰 통째로 보여준다.
   cover 로 두면 정사각 포스터가 1.3배 확대·상하 잘려서 어두운 사진이
   카드를 덮어 딤을 씌운 것처럼 보인다. 좌우 여백은 카드 배경(#f6f3f1). */
.ai-card.is-active img {
  object-fit: contain;
}

.ai-carousel__dots {
  position: absolute;
  left: 870.467px;
  top: 881px;
  height: 19px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ai-dot {
  width: 18.934px;
  height: 18.934px;
  padding: 0;
  border: 0;
  border-radius: 9.5px;
  background: #2f3b48;
  opacity: 0.1;
  cursor: pointer;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}

.ai-dot.is-active {
  width: 32px;
  opacity: 1;
}

.ai-carousel__scroll-cue {
  position: absolute;
  left: 942.5px;
  top: 960px; /* 셰브론 1개 — 기존 아래쪽 화살표가 있던 자리 */
  width: 35px;
  height: 17px;
  animation: scroll-cue-blink 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ai-carousel__name-stack,
  .ai-carousel__stage,
  .ai-carousel__track,
  .ai-card,
  .ai-card::after,
  .ai-dot,
  .ai-carousel__scroll-cue {
    transition: none;
    animation: none;
  }
}