.steliax-constellation {
  --steliax-gap: 20px;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box;
  isolation: isolate;
}

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

.steliax-constellation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--steliax-sparkles-bg), var(--steliax-constellation-bg);
  background-repeat: no-repeat;
  background-position: center 52%;
  background-size: 100% auto;
  pointer-events: none;
}

.steliax-constellation__message {
  position: absolute;
  z-index: 3;
  top: clamp(14px, 2.1vw, 34px);
  left: clamp(18px, 3.2vw, 52px);
  margin: 0;
  color: #bed4f5;
  font-family: "Zen Kurenaido", "Yu Kyokasho", cursive;
  font-size: clamp(19px, 1.9vw, 32px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .08em;
  transform: rotate(-10deg);
  transform-origin: left center;
  white-space: nowrap;
}

.steliax-constellation__stage {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--steliax-gap);
  align-items: start;
  min-height: clamp(330px, 38vw, 620px);
  padding: clamp(68px, 8vw, 130px) clamp(16px, 2.2vw, 36px) clamp(45px, 5vw, 80px);
}

.steliax-constellation__slot { min-width: 0; transition: transform .35s ease; }
.steliax-constellation__slot:nth-child(1) { transform: translateY(20%); }
.steliax-constellation__slot:nth-child(2) { transform: translateY(90%); }
.steliax-constellation__slot:nth-child(3) { transform: translateY(60%); }
.steliax-constellation__slot:nth-child(4) { transform: translateY(5%); }
.steliax-constellation__slot:nth-child(5) { transform: translateY(55%); }
.steliax-constellation__slot:nth-child(6) { transform: translateY(15%); }

.steliax-constellation__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  color: inherit;
  box-shadow: 0 8px 28px rgba(65, 105, 225, .14);
  text-decoration: none !important;
  opacity: 1;
  transition: opacity 1.1s ease-in-out, transform .8s cubic-bezier(.22, 1, .36, 1), box-shadow .8s ease !important;
  will-change: opacity, transform;
}

.steliax-constellation__card:not(.is-fading):hover,
.steliax-constellation__card:not(.is-fading):focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 14px 34px rgba(65, 105, 225, .25);
}

.steliax-constellation__card.is-fading { opacity: 0 !important; transform: scale(.96) !important; pointer-events: none; }
.steliax-constellation__media { display: block; width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; overflow: hidden; border-radius: 16px 16px 0 0; background: #f4f7ff; }
.steliax-constellation__media img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.steliax-constellation__text { display: flex; align-items: flex-start; flex: 1 1 auto; min-height: 0; padding: clamp(10px, 1.1vw, 20px); background: #fff; text-align: left; }
.steliax-constellation__title { display: -webkit-box; overflow: hidden; margin: 0; font: inherit; font-size: clamp(10px, 1vw, 16px); font-weight: 500; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

@media (max-width: 767px) {
  .steliax-constellation { --steliax-gap: 7px; }
  .steliax-constellation::before { background-position: center 58%; background-size: 125% auto; }
  .steliax-constellation__stage { min-height: 230px; padding: 58px 8px 34px; }
  .steliax-constellation__slot:nth-child(1) { transform: translateY(18%); }
  .steliax-constellation__slot:nth-child(2) { transform: translateY(82%); }
  .steliax-constellation__slot:nth-child(3) { transform: translateY(55%); }
  .steliax-constellation__slot:nth-child(4) { transform: translateY(5%); }
  .steliax-constellation__slot:nth-child(5) { transform: translateY(48%); }
  .steliax-constellation__slot:nth-child(6) { transform: translateY(13%); }
  .steliax-constellation__card { border-radius: 10px; box-shadow: 0 4px 14px rgba(65, 105, 225, .14); }
  .steliax-constellation__media { border-radius: 10px 10px 0 0; }
  .steliax-constellation__text { padding: 7px; }
  .steliax-constellation__title { font-size: clamp(8px, 2.35vw, 11px); line-height: 1.35; -webkit-line-clamp: 2; }
}