オーロラ光背景

<!-- Sakura：オーロラ夜空をMV背景にしたライブ告知 -->
<section class="sa-stage">
  <!-- ★主役：揺れる光の帯＋星空のオーロラ背景 -->
  <div class="sa-sky" aria-hidden="true">
    <span class="sa-band sa-band--1"></span>
    <span class="sa-band sa-band--2"></span>
    <span class="sa-band sa-band--3"></span>
    <div class="sa-stars" id="saStars"></div>
  </div>

  <div class="sa-inner">
    <span class="sa-eyebrow">Sakura 2nd LIVE TOUR</span>
    <h1 class="sa-title">星降る夜の<br>桜物語</h1>
    <p class="sa-date">2026.07.18 SAT ・ 開演 18:00</p>
    <p class="sa-place">さくらアリーナ ・ 全席指定</p>
    <button class="sa-btn" type="button" id="saBtn">先行抽選に申し込む</button>
  </div>
</section>

/* Sakura：桜ピンクのオーロラが揺れる夜空のライブ告知 */
* { box-sizing: border-box; margin: 0; padding: 0; }

.sa-stage {
  position: relative;
  min-height: 400px;
  height: 400px;
  overflow: hidden;
  /* 夜空の下地 */
  background: linear-gradient(180deg, #1a1026 0%, #241433 55%, #2e1838 100%);
  color: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif;
}

/* ★主役：オーロラの光の帯（ぼかしてゆっくり揺らす） */
.sa-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sa-band {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 220px;
  filter: blur(46px);
  opacity: 0.7;
  mix-blend-mode: screen;
  border-radius: 50%;
}
.sa-band--1 {
  top: -40px;
  background: linear-gradient(90deg, transparent, #ff8fc4, #ffd1e0, transparent);
  animation: saWave1 11s ease-in-out infinite;
}
.sa-band--2 {
  top: 40px;
  background: linear-gradient(90deg, transparent, #c08bff, #ff9ed4, transparent);
  animation: saWave2 14s ease-in-out infinite;
}
.sa-band--3 {
  top: 110px;
  height: 180px;
  background: linear-gradient(90deg, transparent, #ffb3d9, #b39cff, transparent);
  animation: saWave1 17s ease-in-out infinite reverse;
}
@keyframes saWave1 {
  0%, 100% { transform: translateX(-6%) skewY(-3deg) scaleY(1); }
  50%      { transform: translateX(8%) skewY(3deg) scaleY(1.18); }
}
@keyframes saWave2 {
  0%, 100% { transform: translateX(7%) skewY(2deg) scaleY(1.1); }
  50%      { transform: translateX(-7%) skewY(-2deg) scaleY(0.92); }
}

/* 星（JSで点を生成） */
.sa-stars { position: absolute; inset: 0; }
.sa-star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: saTwinkle 3s ease-in-out infinite;
}
@keyframes saTwinkle {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

.sa-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}
.sa-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #ffc6df;
}
.sa-title {
  margin-top: 12px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: 0.04em;
  text-shadow: 0 0 30px rgba(255,143,196,0.6), 0 4px 20px rgba(0,0,0,0.5);
}
.sa-date { margin-top: 16px; font-size: 14px; font-weight: 700; color: #fff; }
.sa-place { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.8); }
.sa-btn {
  margin-top: 20px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #4a1230;
  background: linear-gradient(135deg, #ffd1e0, #ff9ec6);
  border: none;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,143,196,0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sa-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,143,196,0.7); }
.sa-btn:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .sa-band, .sa-star { animation: none; }
  .sa-btn { transition: none; }
}

// 夜空に星をランダム配置し、ライブ申込みCTAに反応を付ける
(() => {
  const stars = document.getElementById("saStars");
  if (stars) {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const count = 46;
    const frag = document.createDocumentFragment();
    // 星をランダムな位置・明滅タイミングで生成
    for (let i = 0; i < count; i++) {
      const s = document.createElement("span");
      s.className = "sa-star";
      s.style.left = (Math.random() * 100).toFixed(2) + "%";
      s.style.top = (Math.random() * 70).toFixed(2) + "%"; // 上空に寄せる
      const size = (Math.random() * 1.6 + 1).toFixed(1);
      s.style.width = size + "px";
      s.style.height = size + "px";
      if (reduce) {
        s.style.animation = "none";
        s.style.opacity = "0.7";
      } else {
        s.style.animationDelay = (-Math.random() * 3).toFixed(2) + "s";
      }
      frag.appendChild(s);
    }
    stars.appendChild(frag);
  }

  // 先行抽選ボタンのフィードバック
  const btn = document.getElementById("saBtn");
  if (btn) {
    btn.addEventListener("click", () => {
      const label = btn.textContent;
      btn.textContent = "受付しました ♪";
      btn.disabled = true;
      setTimeout(() => { btn.textContent = label; btn.disabled = false; }, 1600);
    });
  }
})();

<!-- オーロラ光背景: ぼかした光のリボンを重ねて夜空のオーロラを表現 -->
<div class="aurora-stage">
  <div class="aurora-sky">
    <span class="aurora-band band-1"></span>
    <span class="aurora-band band-2"></span>
    <span class="aurora-band band-3"></span>
  </div>
  <div class="aurora-stars"></div>
  <div class="aurora-content">
    <h1 class="aurora-title">Aurora</h1>
    <p class="aurora-sub">ぼかした光の帯をゆっくり揺らし、夜空のオーロラを再現。SaaSのヒーローに映えます。</p>
  </div>
</div>

/* 暗い夜空に、ぼかした光の帯を重ねて揺らす */
* { box-sizing: border-box; margin: 0; padding: 0; }

.aurora-stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
  background: linear-gradient(180deg, #050a1f 0%, #0a1230 60%, #0d1840 100%);
}

.aurora-sky {
  position: absolute;
  inset: -25%;
  filter: blur(48px) saturate(150%);
}

/* 光の帯: 細長いグラデを傾けて配置し、波打たせる */
.aurora-band {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 180px;
  border-radius: 50%;
  opacity: 0.7;
  mix-blend-mode: screen;
  transform-origin: center;
}

.band-1 {
  top: 18%;
  background: linear-gradient(90deg, transparent, #00ffa3 30%, #00b3ff 70%, transparent);
  animation: aurora-wave1 11s ease-in-out infinite;
}

.band-2 {
  top: 34%;
  background: linear-gradient(90deg, transparent, #7b5cff 25%, #00ffc8 75%, transparent);
  animation: aurora-wave2 14s ease-in-out infinite;
}

.band-3 {
  top: 8%;
  background: linear-gradient(90deg, transparent, #ff6ec4 30%, #845ec2 70%, transparent);
  opacity: 0.5;
  animation: aurora-wave3 18s ease-in-out infinite;
}

@keyframes aurora-wave1 {
  0%, 100% { transform: rotate(-6deg) translateX(-4%) scaleY(1); }
  50%      { transform: rotate(4deg) translateX(6%) scaleY(1.3); }
}
@keyframes aurora-wave2 {
  0%, 100% { transform: rotate(5deg) translateX(5%) scaleY(1.1); }
  50%      { transform: rotate(-5deg) translateX(-6%) scaleY(0.85); }
}
@keyframes aurora-wave3 {
  0%, 100% { transform: rotate(-3deg) translateX(3%) scaleY(0.9); }
  50%      { transform: rotate(6deg) translateX(-5%) scaleY(1.25); }
}

/* 星空: 小さな点を radial-gradient で散らす */
.aurora-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #cfe6ff, transparent),
    radial-gradient(1px 1px at 85% 60%, #fff, transparent),
    radial-gradient(1px 1px at 55% 45%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 80%, #fff, transparent);
  opacity: 0.8;
}

.aurora-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #eaf3ff;
  padding: 0 24px;
  max-width: 500px;
}

.aurora-title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 0 0 30px rgba(0, 255, 200, 0.45);
}

.aurora-sub {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(234, 243, 255, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .aurora-band { animation: none; }
}