/* =========================================================
   메인 히어로 — 무한 루프 모션 인트로
   "도시의 성장 + 다국적 공동체" 장면. 모든 모션은 주기적으로
   설계되어 처음=끝, 이음새 없이 자동재생·무한 루프.
   ========================================================= */

.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-scene, .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-svg { display: block; }

/* 따뜻한 새벽빛 글로우 (배경 위 은은한 맥동) */
.scene-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 78% 22%, rgba(220,178,106,.30), transparent 60%),
    radial-gradient(50% 40% at 20% 30%, rgba(34,169,224,.14), transparent 65%);
  animation: heroGlow 14s ease-in-out infinite;
}
/* 떠오르는 해 */
.scene-sun {
  position: absolute; top: 12%; right: 14%;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,196,.95), rgba(240,190,110,.55) 42%, transparent 68%);
  filter: blur(2px);
  animation: sunPulse 12s ease-in-out infinite;
}

/* 실사 배경: 도시공동체본부 포럼 활동 사진 7장 크로스페이드 + 켄번스(줌 인/아웃·패닝) 무한 루프 */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center 38%;
  transform-origin: center; will-change: opacity, transform;
  backface-visibility: hidden;
  animation: heroSlide 32s linear infinite, heroKB1 32s ease-in-out infinite;
}
/* 짝수 슬라이드는 줌 아웃(포커스 아웃)으로 교차 → 이미지마다 다이나믹하게 */
.hero-slide:nth-child(even) { animation-name: heroSlide, heroKB2; }
/* 총 주기 32초 = 장면당 4초(크로스페이드 포함), 슬라이드마다 위상 지연 */
.hero-slide--1 { background-image: url('/img/hero/hero-1.jpg'); animation-delay: 0s; }
.hero-slide--2 { background-image: url('/img/hero/hero-2.jpg'); animation-delay: -4s; }
.hero-slide--3 { background-image: url('/img/hero/hero-3.jpg'); animation-delay: -8s; }
.hero-slide--4 { background-image: url('/img/hero/hero-4.jpg'); animation-delay: -12s; }
.hero-slide--5 { background-image: url('/img/hero/hero-5.jpg'); animation-delay: -16s; }
.hero-slide--6 { background-image: url('/img/hero/hero-6.jpg'); animation-delay: -20s; }
.hero-slide--7 { background-image: url('/img/hero/hero-7.jpg'); animation-delay: -24s; }
.hero-slide--8 { background-image: url('/img/hero/hero-8.jpg'); animation-delay: -28s; }

/* 텍스트 가독성용 스크림 */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,26,19,.88) 0%, rgba(8,26,19,.58) 30%, rgba(8,26,19,.14) 58%, rgba(8,26,19,0) 82%),
    linear-gradient(180deg, rgba(8,26,19,.55) 0%, rgba(8,26,19,0) 22%, rgba(8,26,19,0) 60%, rgba(8,26,19,.45) 100%);
}

/* 크로스페이드(단일 키프레임 + 위상지연): ON 구간(≈1/8)이 0/100 경계를 걸쳐 이음새 없이 반복 */
@keyframes heroSlide {
  0%    { opacity: 1; }
  9.5%  { opacity: 1; }
  12.5% { opacity: 0; }
  97%   { opacity: 0; }
  100%  { opacity: 1; }
}
/* 켄번스 A: 노출 구간 동안 줌 인 + 대각 패닝 (비노출 구간에서 리셋) */
@keyframes heroKB1 {
  0%    { transform: scale(1.09) translate(-0.6%, -0.4%); }
  12.5% { transform: scale(1.15) translate(-1.6%, -1.1%); }
  97%   { transform: scale(1.04) translate( 1.6%,  1.0%); }
  100%  { transform: scale(1.09) translate(-0.6%, -0.4%); }
}
/* 켄번스 B: 줌 아웃(포커스 아웃) + 반대 방향 패닝 */
@keyframes heroKB2 {
  0%    { transform: scale(1.09) translate( 0.6%,  0.4%); }
  12.5% { transform: scale(1.04) translate( 1.6%,  1.0%); }
  97%   { transform: scale(1.15) translate(-1.6%, -1.1%); }
  100%  { transform: scale(1.09) translate( 0.6%,  0.4%); }
}

/* ---- 이미지와 동기화되는 히어로 텍스트 ---- */
.hero-inner { max-width: none; }
.hero-stage { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 64px); }
.hero-rotator { position: relative; display: grid; align-items: center; justify-items: start; flex: 1 1 auto; min-width: 0; }
.hero-rotator > .hero-copy { grid-area: 1 / 1; }
.hero-copy { opacity: 0; will-change: opacity, transform; }
.hero-copy .hero-title { margin-bottom: 22px; word-break: keep-all; }
.hero-copy .hero-lede { margin-bottom: 0; word-break: keep-all; }
.hero-phrase { font-size: clamp(1.35rem, 3.2vw, 2.2rem); font-weight: 700; line-height: 1.36; color: #fff; letter-spacing: -0.01em; word-break: keep-all; text-shadow: 0 2px 18px rgba(6,20,14,.55); max-width: 15em; }
.hero-keywords { position: relative; display: grid; align-items: center; justify-items: end; flex: 0 0 auto; text-align: right; }
.hero-keywords > .hero-keyword { grid-area: 1 / 1; }
.hero-keyword {
  opacity: 0; font-size: clamp(1.7rem, 4.6vw, 3.8rem); font-weight: 800; letter-spacing: .04em;
  color: #6ecf74; line-height: 1; white-space: nowrap; will-change: opacity, transform;
  text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.55);
}
.hero-copy--1, .hero-keyword--1 { animation: heroText1 32s linear infinite; }
.hero-copy--2, .hero-keyword--2 { animation: heroText2 32s linear infinite; }
.hero-copy--3, .hero-keyword--3 { animation: heroText3 32s linear infinite; }

/* 텍스트 페이드(이미지 크로스페이드와 동일 타이밍) + 살짝 떠오름 */
@keyframes heroText1 {
  0% { opacity: 1; transform: translateY(0); } 27% { opacity: 1; transform: translateY(0); }
  35% { opacity: 0; transform: translateY(-10px); } 92% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroText2 {
  0% { opacity: 0; transform: translateY(14px); } 27% { opacity: 0; transform: translateY(14px); }
  35% { opacity: 1; transform: translateY(0); } 60% { opacity: 1; transform: translateY(0); }
  68% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(14px); }
}
@keyframes heroText3 {
  0% { opacity: 0; transform: translateY(14px); } 60% { opacity: 0; transform: translateY(14px); }
  68% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ---- 도시: 성장의 빛 스윕 ---- */
.scene-svg .sweep { mix-blend-mode: screen; animation: sweepUp 9s ease-in-out infinite; }

/* ---- 근경 건물: 미세한 성장 호흡 ---- */
.scene-svg .bld { transform-box: fill-box; transform-origin: 50% 100%; animation: buildingBreathe 8s ease-in-out infinite; }
.scene-svg .bld:nth-of-type(2n) { animation-delay: -2.6s; }
.scene-svg .bld:nth-of-type(3n) { animation-delay: -4.9s; }
.scene-svg .bld:nth-of-type(4n) { animation-delay: -1.3s; }

/* ---- 창문 반짝임 ---- */
.scene-svg .win { animation: twinkle 5s ease-in-out infinite; }
.scene-svg .win.w2 { animation-duration: 6.5s; animation-delay: -1.2s; }
.scene-svg .win.w3 { animation-duration: 4.2s; animation-delay: -2.7s; }
.scene-svg .win.w4 { animation-duration: 7.1s; animation-delay: -3.4s; }
.scene-svg .win.w5 { animation-duration: 5.6s; animation-delay: -0.6s; }

/* ---- 사람들: 상하 흔들림(bob) ---- */
.scene-svg .fig { transform-box: fill-box; transform-origin: 50% 100%; animation: bob 4.4s ease-in-out infinite; }
/* 팔 흔들기(격려) */
.scene-svg .arm--wave { transform-box: fill-box; transform-origin: 50% 10%; animation: wave 3.6s ease-in-out infinite; }
.scene-svg .arm--wave2 { transform-box: fill-box; transform-origin: 50% 10%; animation: wave2 4.2s ease-in-out infinite; }

/* ---- 연결의 하트(격려·보듬음) ---- */
.scene-svg .heart { transform-box: fill-box; transform-origin: 50% 60%; animation: heartPulse 3.8s ease-in-out infinite; }
.scene-svg .link { animation: linkPulse 4.6s ease-in-out infinite; }

/* ---- 빛 입자 · CI 잎 (양끝 opacity 0 → 이음새 없는 상승) ---- */
.scene-svg .mote { animation: floatUp 9s ease-in-out infinite; }
.scene-svg .petal { transform-box: fill-box; transform-origin: 50% 50%; animation: petalFloat 12s ease-in-out infinite; }

/* ===== Keyframes (0%==100% 로 seamless) ===== */
@keyframes heroGlow { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes sunPulse { 0%,100% { transform: translateY(6px) scale(1); opacity: .9; } 50% { transform: translateY(-6px) scale(1.05); opacity: 1; } }
@keyframes sweepUp {
  0% { transform: translateY(60px); opacity: 0; }
  20% { opacity: .55; }
  80% { opacity: .55; }
  100% { transform: translateY(-220px); opacity: 0; }
}
@keyframes buildingBreathe { 0%,100% { transform: scaleY(.985); } 50% { transform: scaleY(1); } }
@keyframes twinkle { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes wave { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(-34deg); } }
@keyframes wave2 { 0%,100% { transform: rotate(-6deg); } 45% { transform: rotate(30deg); } }
@keyframes heartPulse { 0%,100% { transform: scale(.5); opacity: 0; } 45% { transform: scale(1.05); opacity: 1; } 70% { transform: scale(1); opacity: .85; } }
@keyframes linkPulse { 0%,100% { opacity: .15; } 50% { opacity: .6; } }
@keyframes floatUp {
  0% { transform: translateY(10px); opacity: 0; }
  15% { opacity: .9; }
  85% { opacity: .9; }
  100% { transform: translateY(-170px); opacity: 0; }
}
@keyframes petalFloat {
  0% { transform: translateY(20px) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(-200px) rotate(160deg); opacity: 0; }
}

/* ---- 실사 인물 레이어 (public/img/hero/person-N.png 투명 PNG) ---- */
.people-photos {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80%;
  display: flex; align-items: flex-end; justify-content: center;
  gap: min(1.5vw, 22px); padding: 0 2.5vw; z-index: 1; pointer-events: none;
}
.pp { position: relative; flex: 0 0 auto; height: 86%; animation: bob 4.6s ease-in-out infinite; will-change: transform; }
.pp img {
  display: block; width: auto; height: 100%; max-width: none; opacity: 0;
  transition: opacity .7s ease; filter: drop-shadow(0 16px 18px rgba(6,20,14,.42));
}
.pp img.loaded { opacity: 1; }
.pp--tall { height: 98%; }
.pp--mid { height: 87%; }
.pp--short { height: 78%; }
.pp--child { height: 60%; }
.pp:nth-child(1) { animation-delay: -.2s; }
.pp:nth-child(2) { animation-delay: -1.5s; }
.pp:nth-child(3) { animation-delay: -2.9s; }
.pp:nth-child(4) { animation-delay: -.9s; }
.pp:nth-child(5) { animation-delay: -3.4s; }
.pp:nth-child(6) { animation-delay: -2.1s; }
.pp:nth-child(7) { animation-delay: -1.1s; }
.pp:nth-child(8) { animation-delay: -3.9s; }
.pp:nth-child(9) { animation-delay: -.6s; }

/* 실사 사진이 하나라도 로드되면 벡터 아바타·연결선 숨김 */
.hero.has-photos .scene-svg .people,
.hero.has-photos .scene-svg .heart,
.hero.has-photos .scene-svg .link { display: none; }

@media (max-width: 700px) {
  .people-photos { height: 62%; gap: 0; }
  .pp { height: 82%; }
  .pp--tall { height: 92%; }
  .pp--child { height: 56%; }
  .hero-slide--1 { background-image: url('/img/hero/hero-1-sm.jpg'); }
  .hero-slide--2 { background-image: url('/img/hero/hero-2-sm.jpg'); }
  .hero-slide--3 { background-image: url('/img/hero/hero-3-sm.jpg'); }
  .hero-slide--4 { background-image: url('/img/hero/hero-4-sm.jpg'); }
  .hero-slide--5 { background-image: url('/img/hero/hero-5-sm.jpg'); }
  .hero-slide--6 { background-image: url('/img/hero/hero-6-sm.jpg'); }
  .hero-slide--7 { background-image: url('/img/hero/hero-7-sm.jpg'); }
  .hero-slide--8 { background-image: url('/img/hero/hero-8-sm.jpg'); }
  .hero-stage { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-keywords { justify-items: start; text-align: left; }
  .hero-keyword { white-space: normal; }
}

/* 모션 최소화 선호 시: 정적인 한 장면으로 고정 */
@media (prefers-reduced-motion: reduce) {
  .hero-bg *, .scene-glow, .scene-sun { animation: none !important; }
  .hero-slide { opacity: 0; transform: none; }
  .hero-slide--1 { opacity: 1; }
  .hero-copy, .hero-keyword { animation: none !important; opacity: 0; transform: none; }
  .hero-copy--1, .hero-keyword--1 { opacity: 1; }
}