/* ================================================
   intro 섹션 전용 스타일
   ================================================ */

/* ── 손글씨 폰트 (Ownglyph wiseelist) ── */
@font-face {
  font-family: 'OngleipWFontList';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2501-1@1.1/Ownglyph_wiseelist-Rg.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

/* ── 꽃잎 캔버스 ── */
#petal-canvas {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ── 인트로 오버레이 ── */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper, #FAF7F4);   /* 깨끗한 크림 배경 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .8s ease;
}

.intro.out {
  opacity: 0;
  pointer-events: none;
}

/* ── Phase 1: 타이핑 레이어 ── */
.intro__typing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0; /* JS가 is-ready 붙이기 전까지 레이어 전체 숨김 — FOUC 원천 차단 */
  transition: opacity .55s ease, transform .55s ease;
}

/* span 생성 + 2rAF 완료 후 공개 */
.intro__typing.is-ready {
  opacity: 1;
}

/* 타이핑 완료 후 위로 사라짐 */
.intro__typing.out {
  opacity: 0;
  transform: translateY(-22px);
  pointer-events: none;
}

/* 이름 + 하트 가로 배치 */
.intro__typing-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 이름 텍스트 컨테이너 */
.intro__typing-name {
  font-family: 'OngleipWFontList', 'Nanum Myeongjo', serif; /* 손글씨 우선 */
  font-size: clamp(30px, 9vw, 46px);
  font-weight: normal;
  color: #1A1A1A;
  letter-spacing: 0.04em;
  display: inline-block;
  min-width: 0em;
  white-space: nowrap;
  /* JS가 .is-ready 클래스를 붙이기 전까지 완전 숨김
     → 스크립트 파싱 전 플래시(FOUC) 원천 차단 */
  visibility: hidden;
}
.intro__typing-name.is-ready {
  visibility: visible;
}
.intro__typing-name--right {
  min-width: 0em;
}

/* ── 잉크 번짐 개별 글자 ── */
.ink-char {
  display: inline-block;
  opacity: 0;           /* 처음엔 보이지 않음 — 자리는 차지 */
}

/* .show 추가되면 제자리에서 번지듯 등장 */
.ink-char.show {
  animation: ink-bleed 0.65s ease forwards;
}

/* 번짐 효과: 흐릿 + 살짝 확대 → 선명 수축 */
@keyframes ink-bleed {
  0%   {
    opacity: 0;
    filter: blur(10px);
    transform: scale(1.25);
  }
  55%  {
    opacity: 0.85;
    filter: blur(2px);
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

/* 하트 SVG — 처음엔 숨김, visible 시 잉크 번지듯 등장 */
.intro__typing-heart {
  width: clamp(30px, 9vw, 46px);
  opacity: 0;
  filter: blur(8px);
  transform:scale(0.6);
  transition: opacity .55s ease,
              filter   .55s ease,
              transform .5s cubic-bezier(.16, 1, .3, 1);
}
.intro__typing-heart.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateX(-3px) scale(1);
}

/* ── Phase 2: 인트로 카드 ──
   JS에서 .visible 추가 시 페이드인 (animation 제거, transition으로 제어) */
.inv {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: clamp(260px, 78vw, 320px);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .75s ease, transform .75s cubic-bezier(.16, 1, .3, 1);
}
.inv.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ── 이미지 레이어 래퍼 (position: relative 로 하트 기준점 설정) ── */
.inv__visual {
  position: relative;
  width: 100%;
  line-height: 0; /* 이미지 하단 여백 제거 */
}

/* ── 폴라로이드 배경 사진 ── */
.inv__photo {
  width: 100%;
  display: block;
}

/* ── 하트 SVG — 남녀 사이 중앙 절대 위치 ──
   top/left 값은 introimg_01.svg 의 사진 구도에 맞게 조정하세요.
   기본값: 가로 중앙(50%), 세로 사진 영역 중간(약 40%) */
.inv__heart {
  position: absolute;
  width: 3%;            /* 폴라로이드 너비 대비 하트 크기 */
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;

  /* 은은한 Fade-in/out 루프 */
  animation: heart-glow 2.6s ease-in-out infinite;
}

@keyframes heart-glow {
  0%   { opacity: 0.15; transform: translate(-50%, -50%) scale(0.95); }
  50%  { opacity: 1;    transform: translate(-50%, -50%) scale(1);    }
  100% { opacity: 0.15; transform: translate(-50%, -50%) scale(0.95); }
}

/* ── 폴라로이드 사진 클릭 영역 ── */
.inv__visual {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 2px;
  /* scale·rotate 개별 속성 사용 — animation과 충돌 없이 hover/active 가능 */
  transition: scale 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              rotate 0.32s ease;
}

/* 카드가 나타난 뒤 자동 sway 애니메이션 */
.inv.visible .inv__visual {
  animation: photo-sway 4s ease-in-out infinite;
}

@keyframes photo-sway {
  0%,100% { rotate: -0.9deg; scale: 1;      }
  50%     { rotate:  0.9deg; scale: 1.013;  }
}

/* 호버: 애니메이션 멈추고 살짝 확대 */
.inv__visual:hover,
.inv__visual:focus-visible {
  animation-play-state: paused;
  scale: 1.028;
  rotate: 0deg;
  outline: none;
}

/* 터치/클릭: 살짝 눌리는 피드백 */
.inv__visual:active {
  animation-play-state: paused;
  scale: 0.97;
  rotate: 0deg;
  transition-duration: 0.1s;
}

/* "Touch to open" — 폴라로이드 하단 흰 여백 위에 자연스럽게 */
.inv__open-text {
  position: absolute;
  bottom: 6.5%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'OngleipWFontList', 'Nanum Myeongjo', serif;
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: normal;
  letter-spacing: 0.18em;
  color: rgba(155, 135, 155, 0.50);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ── 인트로 슬라이드업 ── */
.intro {
  will-change: transform;
}
.intro.slide-up {
  transform: translateY(-100vh);
  transition: transform 0.68s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  pointer-events: none;
}
.intro.spring-back {
  transition: transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── 소형 폰 (< 360px) ── */
@media (max-width: 359px) {
  .inv { width: 88vw; }
  .inv__heart { width: 24%; }
  .intro__typing-name { font-size: clamp(24px, 8vw, 30px); }
  .intro__typing-heart { width: clamp(24px, 8vw, 30px); }
}

/* ── 일반 모바일 (360px ~ 480px) ── */
@media (max-width: 480px) {
  .inv { width: clamp(260px, 80vw, 320px); }
  .inv__heart { width: 14%; }
}

/* ── 태블릿 (768px+) ── */
@media (min-width: 768px) {
  .inv { width: clamp(300px, 40vw, 380px); }
  .intro__typing-name { font-size: clamp(38px, 6vw, 56px); }
  .intro__typing-heart { width: clamp(38px, 6vw, 56px); }
}

/* ── 가로 모드 폰 ── */
@media (max-height: 500px) and (orientation: landscape) {
  .intro__typing { align-items: flex-start; padding-top: 10vh; }
  .inv { width: clamp(200px, 30vw, 260px); }
}