/* =============================================================
   pages.css — ヒーロー演出（夜空・星・月・花火・ドット絵・マーキー）
   すべてCSSアニメーション（ライブラリ不使用・prefers-reduced-motionで自動停止）
   ============================================================= */

/* ---- ヒーロー：夜空 ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, #1c2450 0%, transparent 60%),
    linear-gradient(180deg, var(--color-night) 0%, var(--color-night-deep) 100%);
  color: var(--color-on-night);
  padding: var(--space-xl) var(--space-md) 0;
}

.hero__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero__en {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-spark);
  margin-bottom: var(--space-md);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* タイトルの行を1行ずつ下からふわっと出す */
.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: hero-line-up 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__line:nth-child(2) > span { animation-delay: 0.18s; }

.hero__lead {
  margin-top: var(--space-md);
  max-width: 560px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  opacity: 0;
  animation: hero-fade 1.2s ease 0.7s forwards;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  opacity: 0;
  animation: hero-fade 1.2s ease 1s forwards;
}

/* 夜空の上のボタンは白抜きに */
.hero .btn--primary {
  background-color: var(--color-on-night);
  color: var(--color-night);
}

.hero .btn--primary:hover {
  background-color: var(--color-spark);
  color: var(--color-night);
  box-shadow: 0 8px 24px rgba(245, 185, 74, 0.35);
}

.hero .btn--ghost {
  border-color: rgba(244, 243, 236, 0.5);
  color: var(--color-on-night);
}

.hero .btn--ghost:hover {
  border-color: var(--color-spark);
  color: var(--color-spark);
}

@keyframes hero-line-up {
  to { transform: translateY(0); }
}

@keyframes hero-fade {
  to { opacity: 1; }
}

/* ---- 夜空の住人：星 ---- */
.hero__sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* 飾りはクリックを邪魔しない */
}

.star {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-on-night);
  box-shadow: 0 0 8px rgba(244, 243, 236, 0.8); /* 小さくても「光っている」と分かる にじみ */
  animation: star-twinkle 3.2s ease-in-out infinite;
}

.star--lg {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 16px rgba(244, 243, 236, 1);
}

/* 十字にきらめく大きな星（::before/::afterで光の筋）＝「星」と認識される主役 */
.star--cross::before,
.star--cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: linear-gradient(90deg, transparent, rgba(244, 243, 236, 0.95), transparent);
  transform: translate(-50%, -50%);
}

.star--cross::before { width: 46px; height: 2px; }
.star--cross::after  { width: 2px;  height: 46px; }

/* 金色にきらめく星（色のアクセント） */
.star--gold {
  background-color: var(--color-spark);
  box-shadow: 0 0 14px rgba(245, 185, 74, 0.9);
}

.star--gold.star--cross::before,
.star--gold.star--cross::after {
  background: linear-gradient(90deg, transparent, rgba(245, 185, 74, 0.95), transparent);
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* ---- 月（ゆっくり浮かぶ三日月） ---- */
.moon {
  position: absolute;
  top: 10%;
  right: 7%;
  width: clamp(96px, 13vw, 160px);
  height: clamp(96px, 13vw, 160px);
  border-radius: 50%;
  /* 円を金色に塗り、夜空色の円を重ねて三日月にする */
  background-color: var(--color-spark);
  box-shadow: 0 0 60px rgba(245, 185, 74, 0.35);
  overflow: hidden;
  animation: moon-float 9s ease-in-out infinite;
}

.moon::after {
  content: "";
  position: absolute;
  top: -12%;
  left: -22%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-night);
}

@keyframes moon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ---- 花火（時々ぱっと大きく弾ける虹色の粒） ---- */
.fw {
  position: absolute;
  width: 6px;
  height: 6px;
}

.fw span {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;          /* 各粒の色は下の nth-child で虹色に指定 */
  box-shadow: 0 0 14px currentColor;       /* 粒ごとの色でにじませて華やかに */
  opacity: 0;
  animation: fw-burst 5.5s ease-out infinite;
  animation-delay: inherit; /* 親のstyle属性のdelayを12粒すべてに引き継ぐ */
}

/* 12方向に大きく飛ぶ粒（30度きざみ・半径約140px）＋虹色 */
.fw span:nth-child(1)  { --fx:    0px; --fy: -140px; color: #ff5f6d; }
.fw span:nth-child(2)  { --fx:   70px; --fy: -121px; color: #ff9a4a; }
.fw span:nth-child(3)  { --fx:  121px; --fy:  -70px; color: #f5b94a; }
.fw span:nth-child(4)  { --fx:  140px; --fy:    0px; color: #ffe66d; }
.fw span:nth-child(5)  { --fx:  121px; --fy:   70px; color: #a8e05f; }
.fw span:nth-child(6)  { --fx:   70px; --fy:  121px; color: #5fd3a5; }
.fw span:nth-child(7)  { --fx:    0px; --fy:  140px; color: #5fc9e0; }
.fw span:nth-child(8)  { --fx:  -70px; --fy:  121px; color: #7ea8ff; }
.fw span:nth-child(9)  { --fx: -121px; --fy:   70px; color: #9a8cff; }
.fw span:nth-child(10) { --fx: -140px; --fy:    0px; color: #c77dff; }
.fw span:nth-child(11) { --fx: -121px; --fy:  -70px; color: #ff7ec8; }
.fw span:nth-child(12) { --fx:  -70px; --fy: -121px; color: #ff6f91; }

@keyframes fw-burst {
  0%, 70% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  72%     { opacity: 1; }
  86%     { transform: translate(var(--fx), var(--fy)) scale(1.2); opacity: 0.95; }
  96%, 100% { transform: translate(calc(var(--fx) * 1.1), calc(var(--fy) * 1.1 + 12px)) scale(0.2); opacity: 0; } /* 最後は少し落下しながら消える */
}

/* ---- ドット絵の住人（少しだけ・ゆっくり漂うインベーダー風） ---- */
.pixel-guest {
  position: absolute;
  bottom: 24%;
  left: -110px;
  opacity: 0.35;
  animation: pixel-drift 55s linear infinite;
}

.pixel-guest svg {
  display: block;
  shape-rendering: crispEdges; /* ドットのカドをくっきり */
}

@keyframes pixel-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 220px)); }
}

/* ---- スクロール誘導（マウスの形の小さなヒント） ---- */
.hero__scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-xl) + 2.2rem);
  transform: translateX(-50%);
  z-index: 2;
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(244, 243, 236, 0.5);
  border-radius: 999px;
}

.hero__scroll-hint::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 4px;
  background-color: var(--color-on-night);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: scroll-dot 1.6s ease-in-out infinite;
}

@keyframes scroll-dot {
  0%, 100% { top: 6px; opacity: 1; }
  60%      { top: 16px; opacity: 0; }
}

/* ---- ヒーロー下端：流れる文字（マーキー） ---- */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgba(244, 243, 236, 0.18);
  margin-top: auto; /* ヒーローの一番下に敷く */
  padding: var(--space-sm) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  animation: marquee-flow 36s linear infinite;
}

.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 言葉（奇数）：金の輪郭文字と、虹グラデ塗り文字を交互に */
.marquee__track span:nth-child(4n + 1) {
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 185, 74, 0.8);
}

.marquee__track span:nth-child(4n + 3) {
  background: linear-gradient(90deg, #f5b94a, #ff8fb2, #7ea8ff);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ✦（偶数）：金と青白を交互に */
.marquee__track span:nth-child(4n + 2) { color: var(--color-spark); }
.marquee__track span:nth-child(4n)     { color: var(--color-spark-2); }

@keyframes marquee-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 中身を2セット並べて半分動かす＝無限ループ */
}

/* 動きが苦手な方の設定：飾りの動きを止め、タイトルは最初から表示 */
@media (prefers-reduced-motion: reduce) {
  .hero__line > span { transform: none; animation: none; }
  .hero__lead,
  .hero__actions { opacity: 1; animation: none; }
  .fw span { animation: none; opacity: 0; }
  .pixel-guest { animation: none; left: 8%; }
  .marquee__track { animation: none; }
  .hero__scroll-hint::after { animation: none; }
}