/* ===========================================================================
 * Direction A — アークリアクター・ヒーロー  2026-09-10
 * 会長ご指示:「ジャービス風を維持して近未来SF映画なみに」＋「元の配色に戻して」
 *
 * 前回の失敗（サイト全体をダーク化して見にくくなった）を踏まえた設計:
 *   ・触るのは .hero と .stats の中だけ。この2つは元から紺（#0A1E3C→#14324F→#1D4A6E）
 *   ・本文の明るい配色（--paper:#FAFBFC / --ink:#16202B / --card:#FFF）は 1ミリも変えない
 *   ・HTMLを一切触らない（疑似要素だけで描く）＝戻すのは <link> 1行を消すだけ
 *
 * 色は jarvis-widget.css の実測値を継承: 発光 #19C2B3 / 補助 #8FB4D6
 * ======================================================================== */

/* ── ヒーロー：背後に多重リング（アークリアクター） ─────────────────── */
.hero{position:relative;overflow:hidden}

/* 外周の目盛りリング＋内側の細かいリング。ゆっくり逆回転させて奥行きを出す */
.hero::before{
  content:"";position:absolute;right:-140px;top:50%;
  width:min(66vw,760px);height:min(66vw,760px);transform:translateY(-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,
    rgba(25,194,179,.40) 0deg 1deg, transparent 1deg 6deg);
  -webkit-mask-image:radial-gradient(circle,transparent 45%,#000 46.4%,#000 48.8%,transparent 50.2%);
  mask-image:radial-gradient(circle,transparent 45%,#000 46.4%,#000 48.8%,transparent 50.2%);
  animation:sac-reactor-spin 72s linear infinite;
}

/* コアの光と、走査する円弧 */
.hero::after{
  content:"";position:absolute;right:-140px;top:50%;
  width:min(66vw,760px);height:min(66vw,760px);transform:translateY(-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:
    conic-gradient(from 200deg, transparent 0deg, rgba(25,194,179,.85) 38deg, transparent 92deg,
                   transparent 184deg, rgba(143,180,214,.45) 222deg, transparent 268deg),
    radial-gradient(circle, rgba(25,194,179,.26) 0%, rgba(25,194,179,.07) 27%, transparent 47%);
  -webkit-mask-image:radial-gradient(circle,#000 0%,#000 47%,transparent 48%),
                     radial-gradient(circle,transparent 52%,#000 53%,#000 54.6%,transparent 55.6%);
  -webkit-mask-composite:source-over;
  mask-image:radial-gradient(circle,#000 0%,#000 47%,transparent 48%),
             radial-gradient(circle,transparent 52%,#000 53%,#000 54.6%,transparent 55.6%);
  mask-composite:add;
  animation:sac-reactor-arc 20s linear infinite;
}
@keyframes sac-reactor-spin{ to{ transform:translateY(-50%) rotate(360deg) } }
@keyframes sac-reactor-arc { to{ transform:translateY(-50%) rotate(-360deg) } }

/* 中身は必ずリングより前に */
.hero .wrap,.hero .hero-grid{position:relative;z-index:2}

/* ── ヒーロー内の要素だけを、わずかに計器化する ───────────────────── */
.hero .eyebrow{display:inline-flex;align-items:center;gap:13px}
.hero .eyebrow::before{
  content:"";width:36px;height:1px;flex:0 0 36px;
  background:linear-gradient(90deg,transparent,#19C2B3);
}
.hero h1{text-shadow:0 0 46px rgba(25,194,179,.26), 0 2px 26px rgba(0,0,0,.35)}
.hero .btn-solid{box-shadow:0 0 34px rgba(25,194,179,.30)}
.hero .btn-solid:hover{box-shadow:0 0 48px rgba(25,194,179,.46);transform:translateY(-1px)}
.hero .btn-line{border-color:rgba(25,194,179,.55)}
.hero .btn-line:hover{background:rgba(25,194,179,.14);box-shadow:0 0 26px rgba(25,194,179,.22)}
.hero-shot{
  border-color:rgba(25,194,179,.34)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 46px rgba(25,194,179,.16)!important;
}

/* ── 稼働バンド：ここも元から紺。数字を計器らしく光らせる ───────────── */
.stats .stat .n{font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(25,194,179,.30)}
.stats .stat.live .n{text-shadow:0 0 26px rgba(95,224,180,.45)}

/* ── アクセシビリティと印刷 ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none}
}
@media (max-width:820px){
  /* スマホでは回転を止め、光量を落とす（発熱と可読性のため） */
  .hero::before{opacity:.34;right:-46vw;animation:none}
  .hero::after{opacity:.5;right:-46vw;animation:none}
}
@media print{
  .hero::before,.hero::after{display:none!important}
  .hero h1{text-shadow:none!important}
}