/* =========================================================
   HERO — PHOTOREAL LAYER
   AI生成のフォトリアル雲海写真をヒーロー背景に採用
   ========================================================= */

/* 実写背景レイヤー */
.hero-photo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:#0a1a30;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:1;
  will-change:transform,filter;
  animation:heroKen 32s cubic-bezier(.4,.0,.6,1) infinite alternate;
  transform-origin:50% 55%;
}

@keyframes heroKen{
  0%{transform:scale(1.08) translate3d(0,0,0);filter:brightness(1) contrast(1.02) saturate(1.05)}
  50%{transform:scale(1.14) translate3d(-1.2%,-1.5%,0);filter:brightness(1.03) contrast(1.04) saturate(1.08)}
  100%{transform:scale(1.18) translate3d(-2%,-2.2%,0);filter:brightness(1.02) contrast(1.03) saturate(1.06)}
}

/* photoモード有効時、CSS雲海と星の空はフェード */
body.mode-photo .hero{background:#02060f}
body.mode-photo .hero-sky .cloud-layer,
body.mode-photo .hero-sky .sky-stars,
body.mode-photo .hero-sky .sky-stars--2,
body.mode-photo .hero-sky .sky-stars--gem,
body.mode-photo .hero-sky .sky-warm{
  opacity:0;transition:opacity 1s ease;
}
/* photo有効時: ビネットは強化(下部を落として文字可読性UP) */
body.mode-photo .hero-vignette{background:radial-gradient(140% 100% at 50% 40%,transparent 45%,rgba(2,6,15,.7) 100%)}

/* 実写のリアリティを補強する:
   - 大気の霧レイヤー(揺らぎ)
   - 微細な光の粒子(舞う塵) */
.photo-mist{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  opacity:.7;mix-blend-mode:screen;
}
.photo-mist::before,.photo-mist::after{
  content:"";position:absolute;left:-20%;right:-20%;height:38%;
  background:
    radial-gradient(60% 60% at 30% 50%,rgba(255,220,180,.14),transparent 70%),
    radial-gradient(50% 60% at 70% 50%,rgba(255,232,190,.1),transparent 70%);
  filter:blur(30px);
  animation:mistDrift 40s ease-in-out infinite alternate;
}
.photo-mist::before{bottom:12%}
.photo-mist::after{bottom:26%;animation-duration:56s;animation-direction:alternate-reverse;opacity:.6}
@keyframes mistDrift{
  0%{transform:translateX(-4%)}
  100%{transform:translateX(4%)}
}

/* 深い暗部のグレーディング(タイトル可読性のため中央帯を暗く落とす) */
.photo-vignette-strong{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    /* 中央にタイトル用のソフトな暗帯 */
    radial-gradient(80% 45% at 50% 42%,rgba(2,6,15,.55) 0%,rgba(2,6,15,.25) 45%,transparent 75%),
    /* 上端: ヘッダー可読性 */
    linear-gradient(180deg,rgba(2,6,15,.35) 0%,rgba(2,6,15,0) 22%,rgba(2,6,15,0) 55%,rgba(2,6,15,.55) 92%,rgba(2,6,15,.72) 100%),
    /* 全体のわずかな暗化 */
    radial-gradient(150% 100% at 50% 40%,transparent 45%,rgba(2,6,15,.4) 100%);
}

/* 太陽コアの追加グロー(実写の太陽位置に合わせる) */
.photo-suncore{
  position:absolute;left:62%;top:41%;width:min(28vw,320px);height:min(28vw,320px);
  transform:translate(-50%,-50%);z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,244,200,.55) 0%,rgba(255,220,160,.24) 30%,rgba(255,180,110,.1) 55%,transparent 80%);
  filter:blur(8px);mix-blend-mode:screen;
  animation:sunBreath 6s ease-in-out infinite;
}

/* 光条(サンレイ)は残しつつ強度調整 */
body.mode-photo .sky-rays{opacity:.7}
body.mode-photo .sky-sun{display:none}

/* photoモード時のタイトル可読性強化 */
body.mode-photo .hero-title{
  text-shadow:0 4px 30px rgba(2,6,15,.75),0 2px 8px rgba(2,6,15,.6);
}
body.mode-photo .hero-lead{
  text-shadow:0 2px 20px rgba(2,6,15,.85);
}
body.mode-photo .hero-eyebrow{
  text-shadow:0 2px 12px rgba(2,6,15,.7);
}

/* Cinematicモード時: フィルムグレインを一段強めに */
body.mode-cine .hero-photo{filter:brightness(.95) contrast(1.06) saturate(1.1)}
body.mode-cine .photo-vignette-strong{
  background:
    linear-gradient(180deg,rgba(2,6,15,.4) 0%,rgba(2,6,15,0) 22%,rgba(2,6,15,0) 55%,rgba(2,6,15,.65) 92%,rgba(2,6,15,.82) 100%),
    radial-gradient(150% 100% at 50% 40%,transparent 40%,rgba(2,6,15,.5) 100%);
}

/* リロード時のカラー切替遷移(演出) */
@media (prefers-reduced-motion:reduce){
  .hero-photo,.photo-mist::before,.photo-mist::after,.photo-suncore{animation:none !important}
}