/* =========================================================================
   VISUAL EFFECTS
   HOME moonlight + inner-page galaxy / starlight
   ========================================================================= */

/* =========================================================================
   13. HOME · MOONLIGHT ONLY
   -------------------------------------------------------------------------
   배경 이미지의 달 위치를 기준으로 은은한 후광만 얹습니다.
   HOME에는 상시 별가루를 추가하지 않습니다.
   ========================================================================= */

.page-home .section-hero {
  --hero-moon-x: 66.5%;
  --hero-moon-y: 26%;
}

/* 배경 이미지 속 달 뒤 후광 */
.page-home .hero-background::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--hero-moon-x);
  top: var(--hero-moon-y);
  width: clamp(320px, 34vw, 560px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.96);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 251, 238, 0.34) 0%,
      rgba(255, 237, 199, 0.22) 15%,
      rgba(197, 180, 243, 0.19) 34%,
      rgba(166, 187, 247, 0.105) 52%,
      rgba(166, 187, 247, 0) 75%
    );
  filter: blur(3px);
  mix-blend-mode: screen;
  animation: hero-moon-breathe 6.8s ease-in-out infinite alternate;
}


@keyframes hero-moon-breathe {
  from {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.94);
  }

  to {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.045);
  }
}



/* 태블릿에서는 배경 크롭에 맞춰 달 효과도 조금 이동 */
@media (max-width: 860px) {
  .page-home .section-hero {
    --hero-moon-x: 68%;
    --hero-moon-y: 25%;
  }

  .page-home .hero-background::before {
    width: clamp(230px, 42vw, 390px);
    opacity: 0.62;
  }
}

/* 모바일은 화면이 좁으므로 입자 수는 JS에서 줄이고 후광도 작게 */
@media (max-width: 640px) {
  .page-home .section-hero {
    --hero-moon-x: 69%;
    --hero-moon-y: 24%;
  }

  .page-home .hero-background::before {
    width: clamp(205px, 62vw, 310px);
    opacity: 0.52;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-background::before {
    animation: none !important;
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* =========================================================================
   14. INNER PAGES · MOONLIGHT + MILKY WAY STAR GLOW
   -------------------------------------------------------------------------
   PROFILE / TIMELINE / LIKES / LINKS 공통.
   HOME은 배경 달빛만 유지.
   ambient는 각 section 내부에 들어가므로 배경 위, 콘텐츠 아래에서 보입니다.
   ========================================================================= */

/* 기존 정적 별은 뒤쪽 깊이감만 남김 */
.page-profile .section-profile::after,
.page-timeline .section-timeline::after,
.page-likes .section-likes::after,
.page-links .section-links::after {
  opacity: 0.09;
}

/* section 안에 실제 효과 레이어를 올릴 수 있도록 stacking context 고정 */
.page-profile .section-profile,
.page-timeline .section-timeline,
.page-likes .section-likes,
.page-links .section-links {
  position: relative;
  isolation: isolate;
}

/* 실제 콘텐츠는 ambient보다 위 */
.page-profile .profile-inner,
.page-timeline .timeline-inner,
.page-likes .likes-inner,
.page-links .links-inner {
  position: relative;
  z-index: 3;
}

/* 달빛 + 은하수 + 별 전체 레이어 */
.js-page-ambient {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------
   MOONLIGHT
   오른쪽 위의 달빛이 안쪽으로 퍼지는 느낌.
   원형 후광 + 사선으로 내려오는 빛을 한 요소의 pseudo로 구성.
   --------------------------------------------------------- */
.js-page-ambient-moonlight {
  position: absolute;
  z-index: 0;

  /*
    달 본체는 각 inner의 ::before에 있음.
    실제 보이는 초승달 중심은:
    inner 오른쪽에서 약 91px 안쪽 / inner 위에서 약 50px 아래.
    아래 left/top은 그 중심을 그대로 계산합니다.
  */
  left:
    calc(
      50% +
      min(
        calc(100% - (var(--pad-x) * 2)),
        var(--ambient-inner-max)
      ) / 2
      - 91px
    );

  top: calc(clamp(30px, 4.2vh, 56px) + 50px);

  width: clamp(330px, 30vw, 470px);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0.88;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 252, 239, 0.28) 0%,
      rgba(255, 236, 196, 0.17) 13%,
      rgba(211, 197, 255, 0.14) 28%,
      rgba(171, 192, 255, 0.065) 44%,
      rgba(142, 121, 220, 0.026) 58%,
      rgba(142, 121, 220, 0) 71%
    );

  filter: blur(6px);
  mix-blend-mode: screen;
  animation: inner-moon-breathe 8.6s ease-in-out infinite alternate;
}

/* 각 페이지 inner 폭 — 달 본체와 glow 중심을 자동으로 맞추는 기준 */
.page-profile {
  --ambient-inner-max: 1140px;
}

.page-timeline {
  --ambient-inner-max: 900px;
}

.page-likes {
  --ambient-inner-max: 1120px;
}

.page-links {
  --ambient-inner-max: 1000px;
}

.js-page-ambient-moonlight::after {
  content: "";
  position: absolute;
  top: 48%;
  right: 34%;
  width: 122%;
  height: 74%;
  transform: rotate(24deg);
  transform-origin: 100% 0%;

  background:
    linear-gradient(
      118deg,
      rgba(255, 244, 217, 0.10) 0%,
      rgba(211, 197, 255, 0.065) 24%,
      rgba(166, 187, 247, 0.032) 46%,
      rgba(166, 187, 247, 0) 74%
    );

  filter: blur(20px);
  opacity: 0.58;
}

/* 페이지별 달빛 위치 — 실제 우상단 초승달 중심에 맞춤
   moon 본체: inner 우측 끝에서 약 91px 안쪽 / 상단 약 50px 지점
   glow 중심도 같은 지점을 바라보게 계산합니다. */








/* ---------------------------------------------------------
   MILKY WAY
   사선 은하수 안개. 별들이 이 띠 주변으로 더 조밀하게 생성됩니다.
   --------------------------------------------------------- */
.js-page-ambient-galaxy {
  position: absolute;
  z-index: 1;
  left: -12%;
  top: 8%;
  width: 124%;
  height: 72%;
  transform: rotate(-13deg);
  transform-origin: center;
  opacity: 0.78;
  background:
    radial-gradient(
      ellipse at 51% 50%,
      rgba(212, 200, 255, 0.095) 0%,
      rgba(178, 158, 239, 0.070) 18%,
      rgba(166, 187, 247, 0.045) 32%,
      rgba(243, 207, 154, 0.025) 45%,
      rgba(128, 102, 198, 0.014) 58%,
      transparent 73%
    );
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: inner-galaxy-breathe 12s ease-in-out infinite alternate;
}

/* 은하수 중심에 조금 더 밝은 가는 결 */
.js-page-ambient-galaxy::after {
  content: "";
  position: absolute;
  left: 11%;
  right: 7%;
  top: 43%;
  height: 18%;
  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(197, 180, 243, 0.035) 16%,
      rgba(231, 222, 255, 0.10) 43%,
      rgba(255, 236, 204, 0.065) 61%,
      rgba(166, 187, 247, 0.035) 78%,
      transparent 100%
    );
  filter: blur(16px);
}

/* ---------------------------------------------------------
   STARS
   element = 위치/드리프트
   ::before = 별 자체 + 간헐 twinkle
   두 애니메이션 transform 충돌 방지.
   --------------------------------------------------------- */
.js-page-ambient-star {
  position: absolute;
  z-index: 2;
  left: var(--ambient-x);
  top: var(--ambient-y);
  width: var(--ambient-size);
  height: var(--ambient-size);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  animation:
    inner-star-drift
    var(--ambient-drift-duration)
    ease-in-out
    var(--ambient-drift-delay)
    infinite
    alternate;
}

.js-page-ambient-star::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ambient-color);
  opacity: var(--ambient-base-opacity);
  box-shadow:
    0 0 5px var(--ambient-color),
    0 0 11px color-mix(in srgb, var(--ambient-color) 56%, transparent),
    0 0 20px color-mix(in srgb, var(--ambient-color) 24%, transparent);
  animation:
    inner-star-twinkle
    var(--ambient-twinkle-duration)
    linear
    var(--ambient-twinkle-delay)
    infinite;
}

/* 간헐적으로 더 밝아지는 별 */
.js-page-ambient-star.is-bright::before {
  box-shadow:
    0 0 7px var(--ambient-color),
    0 0 15px color-mix(in srgb, var(--ambient-color) 72%, transparent),
    0 0 28px color-mix(in srgb, var(--ambient-color) 34%, transparent);
}

/* 일부는 작은 ✦ */
.js-page-ambient-star.is-cross {
  width: calc(var(--ambient-size) * 2.5);
  height: calc(var(--ambient-size) * 2.5);
}

.js-page-ambient-star.is-cross::before {
  content: "✦";
  inset: auto;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 0;
  background: none;
  color: var(--ambient-color);
  font-size: calc(var(--ambient-size) * 2.6);
  line-height: 1;
  text-shadow:
    0 0 7px var(--ambient-color),
    0 0 17px color-mix(in srgb, var(--ambient-color) 58%, transparent);
  box-shadow: none;
}

/* 대부분의 시간은 잔잔하고, 짧게 두 번 정도 빛나는 패턴 */
@keyframes inner-star-twinkle {
  0%,
  34%,
  100% {
    opacity: var(--ambient-base-opacity);
    filter: brightness(0.9);
  }

  38% {
    opacity: calc(var(--ambient-base-opacity) * 1.35);
  }

  40% {
    opacity: var(--ambient-peak-opacity);
    filter: brightness(1.32);
  }

  42.5% {
    opacity: var(--ambient-base-opacity);
    filter: brightness(0.92);
  }

  74% {
    opacity: var(--ambient-base-opacity);
  }

  76.2% {
    opacity: calc(var(--ambient-peak-opacity) * 0.72);
    filter: brightness(1.18);
  }

  78% {
    opacity: var(--ambient-base-opacity);
    filter: brightness(0.92);
  }
}

@keyframes inner-star-drift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform:
      translate3d(
        var(--ambient-drift-x),
        var(--ambient-drift-y),
        0
      );
  }
}

@keyframes inner-moon-breathe {
  from {
    opacity: 0.72;
    transform: scale(0.975);
  }

  to {
    opacity: 0.94;
    transform: scale(1.035);
  }
}

@keyframes inner-galaxy-breathe {
  from {
    opacity: 0.58;
    transform: rotate(-13deg) scale(0.985);
  }

  to {
    opacity: 0.84;
    transform: rotate(-13deg) scale(1.025);
  }
}

@media (max-width: 760px) {
  .js-page-ambient-moonlight {
    left: auto;
    top: 74px !important;
    right: -16vw !important;
    width: 86vw;
    translate: 0 -50%;
    opacity: 0.78;
  }

  .js-page-ambient-galaxy {
    left: -28%;
    top: 10%;
    width: 150%;
    height: 64%;
    opacity: 0.63;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-page-ambient-moonlight,
  .js-page-ambient-galaxy,
  .js-page-ambient-star,
  .js-page-ambient-star::before {
    animation: none !important;
  }

  .js-page-ambient-moonlight {
    opacity: 0.82;
  }

  .js-page-ambient-galaxy {
    opacity: 0.62;
  }

  .js-page-ambient-star::before {
    opacity: 0.28;
  }
}