@charset "utf-8";

/* 공통 팔레트와 고정 구도 */

:root {
  color-scheme: dark;
  --winter-deep-night: #080B17;
  --winter-midnight: #10182E;
  --winter-violet: #6F6F9E;
  --winter-ice: #A9C7D8;
  --winter-silver: #C5CAD3;
  --winter-white: #F2F5F8;
  --winter-pearl: #DDE7F0;
  --winter-timing-y: 71%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--winter-deep-night);
}

body {
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.winter-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 72% at 8% 18%, rgb(169 199 216 / 3.5%), transparent 73%),
    radial-gradient(ellipse 82% 94% at 91% 83%, var(--winter-midnight) 0%, rgb(16 24 46 / 42%) 48%, transparent 78%),
    var(--winter-deep-night);
}

.light-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.light-point {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--winter-pearl);
  box-shadow: 0 0 4px 1px var(--point-glow), 0 0 11px 2px var(--point-haze);
  will-change: transform;
}

.light-point-one {
  top: var(--point-y, 34%);
  left: var(--point-x, 24%);
  --point-glow: rgb(169 199 216 / 48%);
  --point-haze: rgb(169 199 216 / 13%);
  animation: drift-one 71s ease-in-out -11s infinite alternate, point-arrival 1.6s ease-out both;
}

.light-point-two {
  top: var(--point-y, 21%);
  left: var(--point-x, 56%);
  --point-glow: rgb(197 202 211 / 45%);
  --point-haze: rgb(197 202 211 / 12%);
  animation: drift-two 79s ease-in-out -39s infinite alternate, point-arrival 1.8s ease-out both;
}

.light-point-three {
  top: var(--point-y, 47%);
  left: var(--point-x, 76%);
  --point-glow: rgb(111 111 158 / 48%);
  --point-haze: rgb(111 111 158 / 13%);
  animation: drift-three 89s ease-in-out -67s infinite alternate, point-arrival 2s ease-out both;
}

h1 {
  position: absolute;
  top: var(--winter-timing-y);
  left: 50%;
  margin: 0;
  color: var(--winter-pearl);
  font-size: clamp(20px, 1.5vw, 25px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .18em;
  white-space: nowrap;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* 중앙 글자와 빛 반사 */

.winter-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  height: 23vh;
  height: 23svh;
  max-height: 220px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 5px rgb(169 199 216 / 12%));
}

/* 도시 공개 요소 */

.winter-cities {
  position: absolute;
  top: calc(var(--winter-timing-y) + 52px);
  left: 50%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 18px;
  width: 260px;
  max-width: calc(100% - 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--winter-silver);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .15em;
  text-align: center;
  transform: translateX(-50%);
}

.winter-cities li {
  --arrival-shift: -10px;
  white-space: nowrap;
  animation: city-balance 1.8s cubic-bezier(.2, .65, .3, 1) 2s both;
}

.winter-cities li:nth-child(even) {
  --arrival-shift: 10px;
}

.winter-cities li:nth-child(n + 3) {
  animation-delay: 3.1s;
}

/* 움직임은 기존 요소의 위치나 크기를 바꾸지 않습니다. */

@keyframes point-arrival {
  from { opacity: .55; }
  to { opacity: 1; }
}

@keyframes drift-one {
  0% { transform: translate3d(-11px, 7px, 0); }
  33% { transform: translate3d(17px, -10px, 0); }
  71% { transform: translate3d(27px, 13px, 0); }
  100% { transform: translate3d(4px, 24px, 0); }
}

@keyframes drift-two {
  0% { transform: translate3d(9px, -14px, 0); }
  39% { transform: translate3d(-23px, 1px, 0); }
  76% { transform: translate3d(-11px, 21px, 0); }
  100% { transform: translate3d(16px, 11px, 0); }
}

@keyframes drift-three {
  0% { transform: translate3d(18px, 3px, 0); }
  29% { transform: translate3d(-6px, 17px, 0); }
  68% { transform: translate3d(-24px, -9px, 0); }
  100% { transform: translate3d(-1px, -23px, 0); }
}

@keyframes city-balance {
  0% {
    opacity: 0;
    color: var(--winter-ice);
    transform: translateX(var(--arrival-shift));
  }
  60% {
    opacity: .85;
    color: var(--winter-pearl);
  }
  100% {
    opacity: 1;
    color: var(--winter-silver);
    transform: translateX(0);
  }
}

/* 모든 단계에 공통으로 적용하는 반응형 및 모션 감소 규칙 */

@media (max-width: 700px) {
  :root { --winter-timing-y: 69%; }
  .winter-scene {
    background:
      radial-gradient(ellipse 90% 54% at 9% 13%, rgb(169 199 216 / 3%), transparent 74%),
      radial-gradient(ellipse 125% 80% at 100% 84%, var(--winter-midnight) 0%, rgb(16 24 46 / 38%) 48%, transparent 78%),
      var(--winter-deep-night);
  }

  .light-point-one { top: var(--point-y, 32%); left: var(--point-x, 26%); }
  .light-point-two { top: var(--point-y, 19%); left: var(--point-x, 65%); }
  .light-point-three { top: var(--point-y, 49%); left: var(--point-x, 70%); }

  h1 {
    left: 50%;
    font-size: clamp(19px, 5vw, 22px);
    letter-spacing: .18em;
  }

  .winter-cities {
    top: calc(var(--winter-timing-y) + 44px);
    width: 238px;
    column-gap: 22px;
    row-gap: 16px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .light-point {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .winter-cities li {
    animation: none;
    opacity: 1;
    color: var(--winter-silver);
    transform: none;
  }
}

@media (max-height: 500px) {
  .winter-cities { top: calc(var(--winter-timing-y) + 28px); row-gap: 10px; font-size: 12px; }
}