/* 마을 디오라마와 그 안의 움직임 */

.diorama { position: relative; display: grid; place-items: center; min-height: 0; }
.diorama svg { width: 100%; height: 100%; max-height: 100%; display: block; }

/* 다음 날 생길 부품은 현재 마을 위에 빛나는 설계도처럼 비친다. */
.next-build { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .62; }
.next-build svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.next-build svg * {
  fill: rgba(255,255,255,.72) !important;
  stroke: rgba(179,67,110,.78) !important;
  stroke-width: 2.2px !important;
  stroke-dasharray: 4 3;
}
.next-build svg [fill="none"] { fill: none !important; }
.next-build .part { animation: dreamPulse 2.8s ease-in-out infinite; }
@keyframes dreamPulse { 0%, 100% { opacity: .48; } 50% { opacity: .95; } }

.dream-entry {
  position: absolute; left: 10px; top: 10px; z-index: 4;
  width: 44px; height: 44px; border: none; border-radius: 14px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--deep); background: rgba(255,255,255,.86);
  box-shadow: 0 5px 14px -7px rgba(74,46,66,.55);
}
.dream-entry svg { width: 23px; height: 23px; }
.dream-entry:active { transform: translateY(2px); }
.dream-entry:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }

.part { transform-box: fill-box; transform-origin: 50% 100%; }

/* 새로 생긴 부품은 위에서 톡 떨어진다 */
.part.is-new { animation: dropIn .9s cubic-bezier(.28, 1.5, .5, 1); }
@keyframes dropIn {
  0% { transform: translateY(-26px) scale(.5); opacity: 0; }
  55% { transform: translateY(0) scale(1.14); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

.sway    { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 3.4s ease-in-out infinite; }
.float   { transform-box: fill-box; transform-origin: 50% 100%; animation: floaty 5s ease-in-out infinite; }
.flutter { transform-box: fill-box; transform-origin: 50% 50%;  animation: flutter 2.2s ease-in-out infinite; }
.twinkle { animation: glow 2s ease-in-out infinite; }
.spray   { transform-box: fill-box; transform-origin: 50% 100%; animation: spray 1.6s ease-in-out infinite; }
.pop1    { transform-box: fill-box; transform-origin: 50% 50%;  animation: burst 2.4s ease-out infinite; }
.pop2    { transform-box: fill-box; transform-origin: 50% 50%;  animation: burst 2.4s ease-out infinite .9s; }

@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes flutter {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(6px, -7px) rotate(6deg); }
}
@keyframes glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes spray { 0%, 100% { transform: scaleY(.8); } 50% { transform: scaleY(1.15); } }
@keyframes burst {
  0% { transform: scale(.2); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  60%, 100% { transform: scale(1.35); opacity: 0; }
}

/* 불꽃놀이는 끝 상태가 투명이라 여기서 다시 보이게 한다 */
@media (prefers-reduced-motion: reduce) {
  .pop1, .pop2 { opacity: 1; }
}

/* ── 잔디 위의 세 친구 ──────────────────────
   무대가 마을 그림과 같은 비율이라 퍼센트 좌표가 잔디 위치와 맞는다.
   자리를 옮길 때 요소를 다시 만들지 않아야 이동이 부드럽다. */

.cast-layer { position: absolute; inset: 0; z-index: 3; }

.cast {
  position: absolute;
  border: none; background: none; padding: 0; cursor: pointer;
  transform: translate(-50%, -100%);
  transition: left .5s cubic-bezier(.3, 1.1, .4, 1), top .5s cubic-bezier(.3, 1.1, .4, 1),
              height .5s cubic-bezier(.3, 1.1, .4, 1), filter .35s;
}
.cast .pose { display: block; height: 100%; }
.cast svg { height: 100%; width: auto; display: block;
            filter: drop-shadow(0 6px 7px rgba(120, 80, 110, .22)); }

/* 뒤쪽 친구를 반투명하게 하면 잔디 색이 비쳐 초록으로 보인다.
   불투명하게 두고 크기와 밝기로만 거리를 준다. */
/* 고른 친구는 앞으로 나와 확실히 크게. 나머지는 뒤에서 작게. */
.cast[data-slot="front"] { left: 31%; top: 84%; height: 40%; z-index: 3; }
.cast[data-slot="left"]  { left: 66%; top: 74%; height: 18%; filter: brightness(.9) saturate(.78); z-index: 1; }
.cast[data-slot="right"] { left: 87%; top: 76%; height: 18%; filter: brightness(.9) saturate(.78); z-index: 1; }

.cast:active { filter: brightness(1.04); }
.cast:focus-visible { outline: 3px solid var(--deep); outline-offset: 4px; border-radius: 12px; }

/* 앞으로 나올 때 폴짝 뛰어 착지한다 */
.cast.is-entering .pose { animation: stepUp .62s cubic-bezier(.3, 1.35, .45, 1); }
@keyframes stepUp {
  0% { transform: translateY(-16px) scale(.86); }
  55% { transform: translateY(0) scale(1.08, .93); }
  80% { transform: translateY(-3px) scale(.98, 1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* ── 우리 마을의 꿈 ─────────────────────── */

#dream { width: 100%; min-width: 0; overflow: hidden; gap: 10px; }
.dream-body {
  flex: 1; width: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  align-items: center; gap: 9px;
}
.dream-stage {
  position: relative; width: 100%; height: min(39vh, 332px); flex: none;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 2px 0 rgba(255,255,255,.5) inset, 0 14px 30px -16px rgba(120,70,110,.55);
}
.dream-stage .diorama { width: 100%; height: 100%; }
.dream-cast-layer { position: absolute; inset: 0; pointer-events: none; }
.dream-cast { position: absolute; transform: translate(-50%, -100%); }
.dream-cast svg { height: 100%; width: auto; display: block; filter: drop-shadow(0 5px 6px rgba(120,80,110,.2)); }
.dream-cast[data-slot="front"] { left: 31%; top: 84%; height: 36%; z-index: 3; }
.dream-cast[data-slot="left"] { left: 67%; top: 75%; height: 17%; filter: brightness(.92) saturate(.82); }
.dream-cast[data-slot="right"] { left: 87%; top: 77%; height: 17%; filter: brightness(.92) saturate(.82); }
.dream-copy { text-align: center; flex: none; }
#dreamKicker { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
#dreamName { font-size: 25px; line-height: 1.2; margin-top: 1px; }
#dreamNow { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.dream-progress {
  width: min(100%, 300px); height: 7px; flex: none;
  border-radius: 999px; overflow: hidden; background: rgba(74,46,66,.1);
}
.dream-progress i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--pink-hi), var(--pink)); transition: width .4s;
}
.dream-milestones {
  width: 100%; min-width: 0; max-width: 100%; display: flex; gap: 8px; overflow-x: auto; flex: none;
  padding: 3px 1px 8px; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dream-milestones::-webkit-scrollbar { display: none; }
.dream-step {
  width: 94px; flex: 0 0 94px; scroll-snap-align: center;
  border: 2px solid transparent; border-radius: 8px; padding: 4px;
  font: inherit; font-size: 12px; font-weight: 800; color: var(--ink-soft);
  background: rgba(255,255,255,.5); cursor: pointer;
}
.dream-step .diorama { width: 82px; height: 62px; overflow: hidden; border-radius: 5px; }
.dream-step .diorama * { animation: none !important; }
.dream-step.is-selected { border-color: var(--pink); color: var(--deep); background: rgba(255,255,255,.85); }
.dream-step:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }
.dream-cta { width: 100%; min-width: 0; }
.dream-cta .btn { width: min(100%, 300px); padding: 17px 0; font-size: 18px; }

@media (max-height: 680px) {
  .dream-stage { height: min(35vh, 238px); }
  .dream-body { gap: 6px; }
  .dream-step .diorama { height: 52px; }
}