/* =========================================================
   HERO — Premium Layer
   雲海の夜明けに映画的な質感を追加
   ========================================================= */

/* ---------- レンズフレア（太陽から放射する光の斑点） ---------- */
.hero-flare{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;opacity:.85;
}
.hero-flare .f{position:absolute;border-radius:50%;filter:blur(6px)}
.hero-flare .f1{left:50%;top:74%;width:120px;height:120px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,244,220,.9),rgba(255,220,180,.3) 55%,transparent 100%);
  animation:sunBreath 6s ease-in-out infinite}
.hero-flare .f2{left:42%;top:60%;width:70px;height:70px;
  background:radial-gradient(closest-side,rgba(255,214,150,.55),transparent 70%);
  animation:floatY 8s ease-in-out infinite}
.hero-flare .f3{left:60%;top:82%;width:56px;height:56px;
  background:radial-gradient(closest-side,rgba(255,200,140,.5),transparent 70%);
  animation:floatY 10s ease-in-out infinite reverse}
.hero-flare .f4{left:36%;top:36%;width:44px;height:44px;
  background:radial-gradient(closest-side,rgba(255,232,190,.35),transparent 70%);
  animation:floatY 7s ease-in-out infinite}
.hero-flare .f5{left:70%;top:44%;width:36px;height:36px;
  background:radial-gradient(closest-side,rgba(255,220,170,.35),transparent 70%);
  animation:floatY 9s ease-in-out infinite reverse}

/* ---------- 星のきらめき（大 - 数個） ---------- */
.hero-stars-lg{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}
.hero-stars-lg i{
  position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;
  box-shadow:
    0 0 4px rgba(255,255,255,.9),
    0 0 12px rgba(255,232,180,.5),
    0 0 22px rgba(255,220,160,.25);
  animation:starPulse 4s ease-in-out infinite;
}
.hero-stars-lg i::before,
.hero-stars-lg i::after{
  content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,rgba(255,232,180,.7),transparent);
  transform-origin:center;pointer-events:none;
}
.hero-stars-lg i::before{width:22px;height:1px;transform:translate(-50%,-50%)}
.hero-stars-lg i::after{width:1px;height:22px;transform:translate(-50%,-50%)}

@keyframes starPulse{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.2)}
}

/* ---------- 流星（時折スーッと流れる） ---------- */
.hero-meteor{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}
.hero-meteor i{
  position:absolute;width:180px;height:1.2px;
  background:linear-gradient(90deg,transparent,rgba(255,232,180,.9),rgba(255,220,160,.6),transparent);
  filter:drop-shadow(0 0 4px rgba(255,232,180,.7));
  transform-origin:right center;transform:rotate(-18deg) translateX(-10vw);
  opacity:0;animation:meteorFall 14s ease-in infinite;
}
@keyframes meteorFall{
  0%{opacity:0;transform:translate(-10vw,-2vh) rotate(-18deg) scaleX(.3)}
  5%{opacity:1}
  20%{opacity:1;transform:translate(50vw,26vh) rotate(-18deg) scaleX(1)}
  22%{opacity:0}
  100%{opacity:0;transform:translate(50vw,26vh) rotate(-18deg) scaleX(1)}
}

/* ---------- ゴールドリム(雲海上端の光) ---------- */
.hero-goldrim{
  position:absolute;left:0;right:0;bottom:24%;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent 0%,rgba(255,220,170,.25) 20%,rgba(255,232,190,.7) 50%,rgba(255,220,170,.25) 80%,transparent 100%);
  filter:blur(1.5px);pointer-events:none;opacity:.85;
  animation:glowPulse 6s ease-in-out infinite;
}
.hero-goldrim::after{
  content:"";position:absolute;left:0;right:0;top:-14px;height:60px;
  background:linear-gradient(180deg,transparent,rgba(255,220,170,.14) 40%,transparent);
  filter:blur(6px);
}

/* ---------- カーソル追従グロー（Heroだけ） ---------- */
.hero-cursor{
  position:absolute;pointer-events:none;z-index:3;
  width:600px;height:600px;left:50%;top:60%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,232,190,.15),rgba(255,214,150,.05) 45%,transparent 75%);
  filter:blur(20px);opacity:0;transition:opacity .6s ease;mix-blend-mode:screen;
  will-change:transform,opacity;
}
.hero:hover .hero-cursor{opacity:1}

/* ---------- タイトル背後の焦点グロー ---------- */
.hero-title-glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:min(72vw,780px);height:min(48vw,420px);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,232,190,.22) 0%,rgba(255,214,150,.1) 40%,transparent 72%);
  filter:blur(10px);
  animation:glowPulse 8s ease-in-out infinite;
}

/* ---------- Cinematic mode 専用強化 ---------- */
body.mode-cine .hero-goldrim{opacity:1;height:1px}
body.mode-cine .hero-title-glow{opacity:.75}
body.mode-cine .hero-flare{opacity:1}

/* ---------- タイトルの金シマー(Cinematicのみ) ---------- */
body.mode-cine .hero-title .gd{
  background:linear-gradient(115deg,#f4dfb4 0%,#f2d9a4 30%,#e6bf7a 50%,#dcb26e 70%,#b9863f 100%);
  background-size:200% 100%;
  background-position:0% 0%;
  -webkit-background-clip:text;background-clip:text;
  animation:goldShimmer 6s ease-in-out infinite 2s;
}
@keyframes goldShimmer{
  0%,100%{background-position:0% 0%}
  50%{background-position:100% 0%}
}

/* ---------- 二重リング(センターピン強調)Cinematic ---------- */
.hero-pin{
  display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:52vmin;height:52vmin;pointer-events:none;
}
.hero-pin .ring{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(220,178,110,.28);
  animation:pinPulse 5s ease-in-out infinite;
}
.hero-pin .ring.r2{inset:14%;border-color:rgba(220,178,110,.18);animation-delay:1.5s}
.hero-pin .ring.r3{inset:32%;border-color:rgba(220,178,110,.35);animation-delay:3s}
.hero-pin .dot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:6px;height:6px;border-radius:50%;background:var(--gold-2);
  box-shadow:0 0 10px rgba(220,178,110,.9),0 0 24px rgba(220,178,110,.5);
}
@keyframes pinPulse{
  0%,100%{transform:scale(1);opacity:.4}
  50%{transform:scale(1.06);opacity:.9}
}
body.mode-cine .hero-pin{display:block}

/* ---------- 上部フィルムマスク（レターボックス）Cinematic ---------- */
.hero-letterbox{
  display:none;position:absolute;left:0;right:0;z-index:5;pointer-events:none;
  height:56px;background:linear-gradient(180deg,rgba(2,6,15,.9) 0%,rgba(2,6,15,0) 100%);
}
.hero-letterbox.top{top:0}
.hero-letterbox.bot{bottom:0;transform:scaleY(-1)}
body.mode-cine .hero-letterbox{display:block}

/* ---------- 下部シームレスに繋がるフェード ---------- */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(6,15,29,.35) 60%,var(--navy-deep) 100%);
  opacity:0;
}
body.mode-cine .hero::after{opacity:1}

/* ---------- ヒーロー全体にわずかなカラーグレーディング ---------- */
.hero-color{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(140% 90% at 50% 100%,rgba(255,190,120,.16) 0%,transparent 55%),
             radial-gradient(120% 100% at 50% 0%,rgba(80,140,220,.14) 0%,transparent 55%);
  mix-blend-mode:soft-light;
}

@media (max-width:820px){
  .hero-flare .f{transform:scale(.7);}
  .hero-pin{width:70vmin;height:70vmin}
}

@media (prefers-reduced-motion:reduce){
  .hero-flare .f,.hero-stars-lg i,.hero-meteor i,.hero-goldrim,
  .hero-title-glow,.hero-pin .ring,body.mode-cine .hero-title .gd{
    animation:none !important
  }
}