/* ============ Character constellation ============ */
.sky-page { background: #070b1f; overflow-x: hidden; }

/* --- the scene that does the turn-around --- */
.sky-scene {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  perspective: 900px;
}
.sky-night {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 35%, #1b2c66 0%, transparent 70%),
    linear-gradient(180deg, #050816 0%, #0b1438 45%, #13235a 100%);
}
.sky-dusk {              /* the sunset that fades away as we look up */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #3b2a6b 0%, #b65a7c 38%, #f29a73 62%, #ffd2a0 100%);
}
.sky-dust { position: absolute; inset: 0; width: 100%; height: 100%; }

.sky-cloudmass, .sky-peak { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-cloudmass path { fill: #2b4a9a; opacity: .38; }
.sky-peak path { fill: #060a1c; opacity: .85; }

.sky-clouds { position: absolute; inset: 0; }
.cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 196, .9), rgba(214, 120, 150, .55) 55%, transparent);
  filter: blur(18px);
}
.c1 { width: 70vw; height: 30vh; left: -15vw; top: 55vh; }
.c2 { width: 60vw; height: 26vh; right: -18vw; top: 40vh; }
.c3 { width: 50vw; height: 22vh; left: 20vw; top: 75vh; }
.c4 { width: 40vw; height: 18vh; right: 5vw; top: 85vh; }

.sky-ground {
  position: absolute; left: -5%; right: -5%; bottom: -5%; height: 85%;
  background-size: cover; background-position: center 70%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  transform-origin: 50% 100%;
}

/* --- the turn-around (runs once, ~3.4s) --- */
.is-turning .sky-ground  { animation: look-up-ground 2.6s cubic-bezier(.55,.05,.35,1) forwards; }
.is-turning .sky-clouds  { animation: look-up-clouds 2.9s cubic-bezier(.5,0,.3,1) forwards; }
.is-turning .sky-dusk    { animation: dusk-out 2.8s ease-in-out .3s forwards; }
.is-turning .sky-cloudmass { animation: mass-in 1.8s ease-out 1.6s both; }
.is-turning .sky-peak    { animation: mass-in 1.6s ease-out 1.9s both; }
.is-turning .sky-dust    { animation: fade-in 2s ease 1.2s both; }

@keyframes look-up-ground {
  0%   { transform: translateY(0) rotateX(0deg); opacity: 1; }
  100% { transform: translateY(120%) rotateX(38deg); opacity: 0; }
}
@keyframes look-up-clouds {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  60%  { opacity: .8; }
  100% { transform: translateY(95vh) scale(1.25); opacity: 0; }
}
@keyframes dusk-out { to { opacity: 0; } }
@keyframes mass-in  { from { opacity: 0; transform: translateY(6%); } }
@keyframes fade-in  { from { opacity: 0; } }

/* final resting state (also used when the turn-around is skipped) */
.is-sky .sky-ground, .is-sky .sky-clouds, .is-sky .sky-dusk { opacity: 0; visibility: hidden; }

/* --- home page section version --- */
.sky-section {
  position: relative; z-index: 1; isolation: isolate; overflow: hidden;
  min-height: 100svh;
}
.sky-section .sky-scene {
  position: absolute; z-index: -1;
  /* melt into the page above and below */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
}
.sky-section .constellation { padding-top: clamp(4.5rem, 12vh, 8rem); }
.sky-section .constellation__title { margin: 0; }
.sky-section .sky-skip { position: absolute; }
.sky-section:not(.is-turning) .sky-skip { display: none; }

/* --- constellation --- */
.constellation {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: grid; grid-template-rows: auto auto 1fr;
  padding: calc(4.5rem + 2vh) var(--gutter) 2rem;
  max-width: 82rem; margin: 0 auto;
}
.constellation__title { margin: 0; display: flex; align-items: baseline; gap: 1rem; font-weight: 400; }
.constellation__zh { font-family: var(--brush); font-size: var(--t-xxl); line-height: 1; }
.constellation__sub { color: var(--mist); font-style: italic; font-size: var(--t-base); }
.constellation__hint { color: var(--mist); margin: .5rem 0 0; font-size: var(--t-sm); }

.constellation__title, .constellation__hint { transition: opacity 1s ease; }
.is-turning .constellation__title, .is-turning .constellation__hint,
.is-waiting .constellation__title, .is-waiting .constellation__hint { opacity: 0; }

.constellation__stage { position: relative; align-self: center; width: 100%; transform: translateY(-8vh); }
.constellation__svg { display: block; width: 100%; height: auto; overflow: visible; }

.c-link {
  stroke: rgba(170, 205, 255, .35); stroke-width: 1.4; fill: none;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.2s ease 1s, stroke .3s;
}
.is-lit .c-link { stroke-dashoffset: 0; }
.c-link.is-near { stroke: rgba(242, 200, 121, .75); }

.c-star { cursor: pointer; outline: none; }
.c-star .halo { fill: url(#starGlow); transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease); }
.c-star .core { fill: #f4fbff; }
.c-star .ring { fill: none; stroke: var(--candle); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity .3s, transform .35s var(--ease); }
.c-star .label { fill: #b9c3e6; font-size: 19px; letter-spacing: .12em; font-family: var(--serif); transition: fill .3s; }
.c-star .hit { fill: transparent; }

.c-star { opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-lit .c-star { animation: star-in .9s var(--ease) both; animation-delay: calc(var(--i) * 140ms); }
@keyframes star-in { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
.c-star .halo { animation: twinkle 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes twinkle { 50% { opacity: .65; } }

.c-star:hover .halo, .c-star:focus-visible .halo, .c-star.is-active .halo { transform: scale(1.6); }
.c-star:hover .ring, .c-star:focus-visible .ring, .c-star.is-active .ring { opacity: 1; transform: scale(1); }
.c-star:hover .label, .c-star:focus-visible .label, .c-star.is-active .label { fill: #fff3d6; }

/* hover card */
.star-card {
  position: absolute; z-index: 2; width: 17rem;
  transform: translate(-50%, calc(-100% - 28px));
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(8, 13, 36, .88);
  border: 1px solid rgba(242, 200, 121, .35);
  border-radius: 10px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.7), 0 0 30px rgba(242,200,121,.12);
  pointer-events: none;
  animation: card-in .25s var(--ease);
}
.star-card.is-below { transform: translate(-50%, 28px); }
@keyframes card-in { from { opacity: 0; margin-top: 6px; } }
.star-card__name { font-family: var(--brush); font-size: var(--t-xl); line-height: 1; margin: 0 0 .5rem; }
.star-card__meta { margin: 0; font-size: var(--t-sm); color: var(--mist); line-height: 1.7; }
.star-card__go { margin: .7rem 0 0; font-size: var(--t-sm); color: var(--candle); }

.sky-skip { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 5; }
.is-sky .sky-skip { display: none; }

@media (max-width: 720px) {
  .c-star .label { font-size: 30px; }
  .star-card { width: 13rem; }
  .constellation__stage { max-width: 30rem; justify-self: center; transform: translateY(-5vh); }
}

@media (prefers-reduced-motion: reduce) {
  .is-turning .sky-ground, .is-turning .sky-clouds, .is-turning .sky-dusk,
  .is-turning .sky-cloudmass, .is-turning .sky-peak, .is-turning .sky-dust { animation: none; }
  .is-lit .c-star, .c-star .halo { animation: none; opacity: 1; }
  .c-link { transition: none; }
}

/* ============ Character page ============ */
.char {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: center;
  padding: calc(5rem + 2vh) var(--gutter) 3rem;
  max-width: 76rem; margin: 0 auto;
}
.char__portrait {
  position: relative; margin: 0; aspect-ratio: 3 / 5; max-height: 82vh; justify-self: center; width: 100%;
  display: grid; place-items: end center;
}
.char__portrait::before {   /* the character's own star behind them */
  content: ""; position: absolute; left: 50%; top: 18%; width: 70%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(242, 200, 121, .35), rgba(120, 160, 255, .12) 55%, transparent);
  border-radius: 50%;
}
.char__portrait img { position: relative; max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.char__placeholder {
  position: relative; width: 62%; height: 88%;
  border: 1px dashed rgba(236, 232, 244, .25); border-radius: 46% 46% 12px 12px / 30% 30% 12px 12px;
  display: grid; place-items: center; color: var(--mist); font-size: var(--t-sm); text-align: center; padding: 1rem;
}
.char__tier { color: var(--candle); font-size: var(--t-sm); margin: 0 0 .5rem; }
.char__name { font-family: var(--brush); font-weight: 400; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; margin: 0; }
.char__tagline { font-size: var(--t-md); color: var(--cloud); margin: 1.25rem 0 0; font-style: italic; }
.char__bio { margin: 1.5rem 0 0; max-width: var(--measure); color: var(--mist); }
.char__bio p { margin: 0 0 1em; }
.char__facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 2rem 0 0; font-size: var(--t-sm); }
.char__facts dt { color: var(--mist); }
.char__facts dd { margin: 0; }
.char__nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

@media (max-width: 760px) {
  .char { grid-template-columns: 1fr; }
  .char__portrait { max-height: 60vh; width: 70%; }
}

/* ============ Phones ============ */
@media (max-width: 720px) {
  .constellation__svg { max-height: calc(100svh - 15rem); margin: 0 auto; width: auto; max-width: 100%; }
  .constellation__stage { display: grid; justify-items: center; }
  .sky-skip { bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + .75rem)); }

  .char { padding-top: calc(4.5rem + env(safe-area-inset-top)); gap: 1.5rem; }
  .char__portrait { width: min(62vw, calc(46svh * .6)); max-height: none; aspect-ratio: 3 / 5; }
  .char__placeholder { width: 100%; height: 100%; }
  .char__name { font-size: 4.2rem; }
  .char__nav .btn { flex: 1 1 auto; }
}