/* =========================================================
   HERO — 雲海の夜明け × Cinematic
   A (Refined) / B (Cinematic) の両モードに対応
   ========================================================= */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;color:#fff;
  padding:130px 24px 150px;
  background:linear-gradient(180deg,
    #02060f 0%,#050f21 18%,#081b38 34%,#0d2a4e 48%,
    #16406d 60%,#2c5a86 70%,#5b7fa0 80%,#93a3b2 92%,#c3c8cd 100%);
}
.hero-sky{position:absolute;inset:0;pointer-events:none;transition:opacity 1s ease}

/* ---------- 星 ---------- */
.sky-stars{
  position:absolute;left:0;right:0;top:0;height:52%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%,rgba(255,255,255,.9),transparent 55%),
    radial-gradient(1px 1px at 28% 8%,rgba(255,255,255,.8),transparent 55%),
    radial-gradient(1.6px 1.6px at 41% 30%,rgba(255,255,255,.75),transparent 55%),
    radial-gradient(1px 1px at 56% 12%,rgba(255,255,255,.9),transparent 55%),
    radial-gradient(1.3px 1.3px at 68% 26%,rgba(255,255,255,.7),transparent 55%),
    radial-gradient(1px 1px at 79% 7%,rgba(255,255,255,.85),transparent 55%),
    radial-gradient(1.5px 1.5px at 90% 20%,rgba(255,255,255,.75),transparent 55%),
    radial-gradient(1px 1px at 6% 45%,rgba(255,255,255,.5),transparent 55%),
    radial-gradient(1.2px 1.2px at 35% 52%,rgba(255,255,255,.45),transparent 55%),
    radial-gradient(1px 1px at 63% 47%,rgba(255,255,255,.5),transparent 55%),
    radial-gradient(1.2px 1.2px at 86% 42%,rgba(255,255,255,.45),transparent 55%),
    radial-gradient(1px 1px at 21% 36%,rgba(255,255,255,.6),transparent 55%),
    radial-gradient(1px 1px at 48% 18%,rgba(255,255,255,.65),transparent 55%),
    radial-gradient(1.1px 1.1px at 74% 34%,rgba(255,255,255,.55),transparent 55%),
    radial-gradient(1px 1px at 95% 51%,rgba(255,255,255,.4),transparent 55%);
  mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  animation:twinkle 5.5s ease-in-out infinite;
}
.sky-stars--2{
  background-image:
    radial-gradient(1px 1px at 17% 14%,rgba(255,255,255,.7),transparent 55%),
    radial-gradient(1.4px 1.4px at 33% 40%,rgba(255,255,255,.55),transparent 55%),
    radial-gradient(1px 1px at 52% 33%,rgba(255,255,255,.65),transparent 55%),
    radial-gradient(1.2px 1.2px at 61% 6%,rgba(255,255,255,.8),transparent 55%),
    radial-gradient(1px 1px at 83% 28%,rgba(255,255,255,.6),transparent 55%),
    radial-gradient(1.3px 1.3px at 9% 33%,rgba(255,255,255,.5),transparent 55%),
    radial-gradient(1px 1px at 44% 44%,rgba(255,255,255,.45),transparent 55%),
    radial-gradient(1.1px 1.1px at 70% 16%,rgba(255,255,255,.7),transparent 55%),
    radial-gradient(1px 1px at 93% 10%,rgba(255,255,255,.75),transparent 55%);
  animation:twinkle 7.5s ease-in-out infinite 1.6s;
}
/* 追加の高輝度星（宝石のよう） */
.sky-stars--gem{
  position:absolute;left:0;right:0;top:0;height:45%;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 22% 18%,rgba(255,245,220,1),transparent 60%),
    radial-gradient(2.2px 2.2px at 71% 12%,rgba(255,240,210,1),transparent 60%),
    radial-gradient(1.8px 1.8px at 45% 8%,rgba(255,255,255,1),transparent 60%),
    radial-gradient(2px 2px at 88% 30%,rgba(255,232,190,.95),transparent 60%);
  filter:blur(.3px) drop-shadow(0 0 6px rgba(255,220,170,.5));
  animation:twinkle 4.2s ease-in-out infinite .8s;
}

/* ---------- 光芒 ---------- */
.sky-rays{
  position:absolute;left:50%;width:190vmax;height:190vmax;
  transform:translateX(-50%);bottom:calc(26% - 95vmax);
  background:repeating-conic-gradient(from -8deg at 50% 50%,
    rgba(255,206,148,.075) 0deg 3.4deg,rgba(255,206,148,0) 3.4deg 11deg);
  -webkit-mask-image:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,.4) 34%,transparent 62%);
  mask-image:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,.4) 34%,transparent 62%);
  animation:raysTurn 160s linear infinite;
  opacity:.9;
}
/* Cinematic mode: rays を細く鋭く */
body.mode-cine .sky-rays{
  background:repeating-conic-gradient(from -8deg at 50% 50%,
    rgba(255,220,168,.11) 0deg 1.2deg,rgba(255,206,148,0) 1.2deg 8deg);
  opacity:1;
}

/* ---------- 太陽 ---------- */
.sky-sun{
  position:absolute;left:50%;top:74%;width:min(88vw,900px);height:min(60vw,620px);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side,rgba(255,244,222,.95) 0%,rgba(255,214,150,.65) 16%,rgba(255,172,96,.32) 38%,rgba(255,140,70,.12) 60%,transparent 78%);
  filter:blur(2px);
  animation:sunBreath 9s ease-in-out infinite;
}
/* Cinematic: 太陽をより繊細に、コアを追加 */
body.mode-cine .sky-sun{
  background:
    radial-gradient(closest-side,rgba(255,252,240,1) 0%,rgba(255,224,168,.85) 8%,rgba(255,190,120,.5) 22%,rgba(255,150,80,.2) 45%,rgba(255,120,60,.08) 65%,transparent 82%);
}
.sky-sun-core{
  position:absolute;left:50%;top:74%;width:min(20vw,180px);height:min(20vw,180px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,252,240,1) 0%,rgba(255,232,180,.7) 55%,transparent 100%);
  filter:blur(4px);
  animation:sunBreath 9s ease-in-out infinite;
  display:none;
}
body.mode-cine .sky-sun-core{display:block}

.sky-warm{
  position:absolute;left:0;right:0;bottom:0;height:64%;
  background:radial-gradient(120% 90% at 50% 100%,rgba(224,146,80,.34) 0%,rgba(190,120,80,.14) 42%,transparent 72%);
  animation:glowPulse 12s ease-in-out infinite;
}

/* ---------- 雲海レイヤー ---------- */
.cloud-layer{position:absolute;left:-6%;right:-6%;bottom:-2px;pointer-events:none}
.cloud-layer svg{display:block;width:100%}
.cloud-layer--far{bottom:9%;opacity:.6}
.cloud-layer--far svg{height:clamp(150px,17vw,280px);animation:driftC 46s ease-in-out infinite alternate}
.cloud-layer--mid{bottom:2%;opacity:.85}
.cloud-layer--mid svg{height:clamp(170px,18.5vw,300px);animation:driftB 34s ease-in-out infinite alternate}
.cloud-layer--near{bottom:-4%}
.cloud-layer--near svg{height:clamp(200px,20vw,320px);animation:driftA 26s ease-in-out infinite alternate}

.hero-vignette{position:absolute;inset:0;background:radial-gradient(140% 100% at 50% 40%,transparent 55%,rgba(2,6,15,.5) 100%);pointer-events:none;z-index:2}

/* ---------- Grain (film) ---------- */
.hero-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:grainShift 1.1s steps(3) infinite;
}
body.mode-cine .hero-grain{opacity:.5}

/* Cinematic-only overlay: scanline & flicker */
.hero-scan{
  display:none;position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
  animation:filmFlicker 6s infinite;
}
body.mode-cine .hero-scan{display:block}

/* Cinematic 微粒子 */
.hero-particles{
  display:none;position:absolute;inset:0;z-index:3;pointer-events:none;
}
body.mode-cine .hero-particles{display:block}
.hero-particles i{
  position:absolute;width:2px;height:2px;background:rgba(255,232,180,.85);border-radius:50%;
  box-shadow:0 0 8px rgba(255,220,170,.7);
  animation:floatY 6s ease-in-out infinite;
}

/* ---------- Hero inner content ---------- */
.hero-inner{position:relative;z-index:4;max-width:1040px;will-change:transform,opacity}

/* eyebrow */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:18px;margin:0 0 40px;
  font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.52em;text-indent:.52em;
  color:var(--gold-2);text-transform:uppercase;
  opacity:0;animation:fadeUp 1.1s var(--ease) .25s forwards;
}
.hero-eyebrow .rule{width:52px;height:1px;background:linear-gradient(90deg,transparent,rgba(220,178,110,.85));display:inline-block}
.hero-eyebrow .rule:last-child{background:linear-gradient(90deg,rgba(220,178,110,.85),transparent)}

/* Cinematic mode: eyebrow フィルムカウンタ風 */
body.mode-cine .hero-eyebrow{
  padding:8px 20px;border:1px solid var(--gold-line);border-radius:0;
  background:rgba(2,6,15,.35);backdrop-filter:blur(4px);
}
body.mode-cine .hero-eyebrow .rule{display:none}

/* Title */
.hero-title{
  margin:0 0 32px;font-family:var(--font-jp-serif);font-weight:600;
  font-size:clamp(38px,6.8vw,84px);line-height:1.28;letter-spacing:.04em;
  text-shadow:0 4px 60px rgba(2,6,15,.55);
}
.hero-title .line{display:block;overflow:hidden;padding:.08em 0}
.hero-title .line-inner{display:inline-block;transform:translateY(118%);animation:riseUp 1.35s var(--ease-out) forwards}
.hero-title .line:nth-child(1) .line-inner{animation-delay:.45s}
.hero-title .line:nth-child(2) .line-inner{animation-delay:.72s}
.hero-title .gd{
  background:linear-gradient(115deg,#f2d9a4 6%,#dcb26e 42%,#b9863f 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;
}
.hero-title .gd::after{
  content:"";position:absolute;left:-8%;right:-8%;top:-4%;bottom:-4%;
  background:radial-gradient(closest-side,rgba(255,232,180,.35),transparent 70%);
  z-index:-1;filter:blur(20px);
}

/* Cinematic version — 角括弧/縦罫線を添える */
body.mode-cine .hero-title{font-size:clamp(42px,7.4vw,96px);letter-spacing:.06em}

.hero-lead{
  margin:0 auto 56px;max-width:640px;
  font-size:clamp(14px,1.55vw,16px);line-height:2.35;color:rgba(255,255,255,.85);
  text-shadow:0 2px 30px rgba(2,6,15,.6);letter-spacing:.06em;
  opacity:0;animation:fadeUp 1.2s var(--ease) 1.1s forwards;
}

.hero-actions{
  display:flex;align-items:center;justify-content:center;gap:52px;flex-wrap:wrap;
  opacity:0;animation:fadeUp 1.2s var(--ease) 1.35s forwards;
}

/* Cinematic: 縦書き日本語ラベル（右下） */
.hero-vlabel{
  display:none;position:absolute;right:38px;top:50%;transform:translateY(-50%);z-index:4;
  writing-mode:vertical-rl;font-family:var(--font-jp-serif);font-size:12.5px;letter-spacing:.7em;
  color:rgba(255,255,255,.7);line-height:2;
  opacity:0;animation:fadeIn 1.4s ease 1.8s forwards;
}
.hero-vlabel::before{
  content:"";display:block;width:1px;height:80px;background:linear-gradient(180deg,transparent,var(--gold-2));margin-bottom:26px;
}
body.mode-cine .hero-vlabel{display:block}

/* Cinematic: 左下 film counter */
.hero-counter{
  display:none;position:absolute;left:38px;bottom:38px;z-index:4;
  font-family:var(--font-en);letter-spacing:.24em;color:rgba(255,255,255,.7);
  opacity:0;animation:fadeIn 1.4s ease 2.0s forwards;
}
.hero-counter .num{font-family:var(--font-en-serif);font-size:44px;line-height:1;color:var(--gold-2);letter-spacing:.02em}
.hero-counter .sub{display:block;font-size:9.5px;margin-top:8px;opacity:.7}
body.mode-cine .hero-counter{display:block}

/* Cinematic: 右上 timecode */
.hero-timecode{
  display:none;position:absolute;right:38px;top:120px;z-index:4;
  font-family:var(--font-en);font-size:10.5px;letter-spacing:.32em;color:rgba(255,255,255,.6);
  opacity:0;animation:fadeIn 1.4s ease 1.9s forwards;text-align:right;
}
.hero-timecode .tc{display:block;font-size:15px;color:var(--gold-2);letter-spacing:.2em;margin-top:6px;font-family:var(--font-en-serif)}
body.mode-cine .hero-timecode{display:block}

/* Cinematic: hero side rails */
.hero-rail{
  display:none;position:absolute;top:100px;bottom:100px;width:1px;z-index:4;
  background:linear-gradient(180deg,transparent 0%,rgba(220,178,110,.4) 15%,rgba(220,178,110,.4) 85%,transparent 100%);
}
.hero-rail.left{left:24px}
.hero-rail.right{right:24px}
body.mode-cine .hero-rail{display:block}

/* mobile hide side ornaments */
@media(max-width:820px){
  body.mode-cine .hero-vlabel,
  body.mode-cine .hero-timecode,
  body.mode-cine .hero-rail{display:none}
  body.mode-cine .hero-counter{left:22px;bottom:22px}
  body.mode-cine .hero-counter .num{font-size:32px}
}