/* ==========================================================================
   인트로 화면 — 가로형 로고(Horizontal-logo_color.svg) 애니메이션 후 메인 화면 노출
   - 마크업: index.html <body> 바로 아래 .aw-intro
   - 동작:   assets/js/intro.js (종료 시점 제어)
   - 순서:   ① 화면 가운데에서 심볼 완성 (기둥 → 나무결 3줄 → 잎 2장)
             ② 로고 전체가 제자리로 이동하며 AONE WOOD 글자가 하나씩 올라옴
             ③ 태그라인(NATURAL FLOORS. BETTER SPACES) 표시
             ④ 로고가 사라지며 화면이 위로 걷힘
   ========================================================================== */

/* 인트로가 떠 있는 동안 스크롤 잠금 */
html.is-intro {
  overflow: hidden;
}

.aw-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-bg, #fcfaf7);
  /* JS 가 동작하지 않을 때를 대비한 자동 숨김 (6초 후) */
  animation: aw-intro-fallback 0.6s ease 6s forwards;
}

.aw-intro__logo {
  width: clamp(280px, 36vw, 460px);
  height: auto;
  overflow: visible;
  /* ① 심볼이 화면 가운데 오도록 오른쪽으로 밀어 둔 상태에서 시작 → ② 제자리로 이동 */
  transform: translateX(35.8%);
  animation: aw-intro-slide 0.95s cubic-bezier(0.65, 0, 0.35, 1) 1.05s forwards;
}

/* 각 조각은 자기 영역 기준으로 변형 */
.aw-intro__logo path {
  transform-box: fill-box;
  opacity: 0;
}

/* ① 심볼 ------------------------------------------------------------------ */
.aw-intro__pillar {
  transform-origin: 50% 100%;
  animation: aw-intro-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.aw-intro__wood {
  transform-origin: 50% 100%;
  animation: aw-intro-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.aw-intro__wood--1 { animation-delay: 0.22s; }
.aw-intro__wood--2 { animation-delay: 0.34s; }
.aw-intro__wood--3 { animation-delay: 0.46s; }

.aw-intro__leaf {
  transform-origin: 0% 100%;
  animation: aw-intro-leaf 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.aw-intro__leaf--1 { animation-delay: 0.7s; }
.aw-intro__leaf--2 { animation-delay: 0.8s; }

/* ② AONE WOOD — 글자 영역(clipPath) 아래에서 하나씩 올라옴 (--i: 왼쪽부터 0~7) */
.aw-intro__char {
  transform: translateY(115%);
  animation: aw-intro-char 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(1.25s + var(--i, 0) * 0.06s);
}

/* ③ 태그라인 — 왼쪽부터 은은하게 (--i: 0~25) */
.aw-intro__tag {
  transform: translateY(40%);
  animation: aw-intro-tag 0.5s ease-out forwards;
  animation-delay: calc(1.95s + var(--i, 0) * 0.018s);
}

@keyframes aw-intro-grow {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes aw-intro-leaf {
  from { opacity: 0; transform: scale(0.2) rotate(-18deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes aw-intro-slide {
  to { transform: translateX(0); }
}

@keyframes aw-intro-char {
  from { opacity: 1; transform: translateY(115%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes aw-intro-tag {
  to { opacity: 1; transform: translateY(0); }
}

/* ④ 종료 — 로고가 살짝 작아지며 사라지고, 화면이 위로 걷힘 (intro.js 가 .is-leaving 추가) */
.aw-intro.is-leaving {
  animation: aw-intro-leave 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards;
}
.aw-intro.is-leaving .aw-intro__logo {
  transform: translateX(0);
  animation: none;
  transition: transform 0.5s ease, opacity 0.4s ease;
  scale: 0.92;
  opacity: 0;
}

@keyframes aw-intro-leave {
  to { transform: translateY(-100%); }
}

@keyframes aw-intro-fallback {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* 인트로가 떠 있는 동안 메인 비주얼 등장 효과 대기 → 인트로가 걷히면 재생 */
html.is-intro .fidelity .public-home-hero__slide.swiper-slide-active .public-home-hero__copy {
  animation-play-state: paused;
}
html.is-intro .fidelity .public-home-hero__slide.swiper-slide-active .public-home-hero__media img {
  transform: scale(1.1);
}

/* 동작 줄이기 설정 사용자: 완성된 로고를 바로 보여주고 짧게 페이드 */
@media (prefers-reduced-motion: reduce) {
  .aw-intro__logo,
  .aw-intro__logo path {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .aw-intro.is-leaving {
    animation: aw-intro-fallback 0.4s ease forwards;
  }
}

/* 세션 1회 옵션(data-intro-once="session")에서 이미 본 경우: 처음부터 숨김 */
html.intro-seen .aw-intro[data-intro-once="session"] {
  display: none;
}