/* top.css — TOP 固有レイアウト（base.css のトークンを使用）
   ヒーローは本番（master）の 2 カラム形式を踏襲し、背景だけ「大理石＋光の演出」に差し替える。 */

/* 背景: 旧装飾(.hero-bg/.hero-grid)は使わず、大理石の地＋光に置き換える */
.hero{background:var(--marble)}
.hero .hero-bg,.hero .hero-grid{display:none}

/* Task7 で削除したレイアウト規則を復元（本番準拠） */
.hero-container{position:relative;z-index:1;width:100%}
.hero-grid-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:60vh}
.hero-left{display:flex;flex-direction:column;gap:32px}
.hero-right{display:flex;justify-content:center;align-items:center;position:relative}

/* 背景の光演出（漂うグロー＋微かな粒子）。動画が来たらこの下に重ねる */
.hero .hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero .hero-fx::before{content:"";position:absolute;inset:-10%;
  background:radial-gradient(620px 420px at 32% 38%, rgba(212,168,83,.12), transparent 70%),
             radial-gradient(520px 360px at 72% 64%, rgba(120,150,200,.10), transparent 70%);
  animation:heroGlowDrift 16s ease-in-out infinite alternate}
.hero .hero-fx::after{content:"";position:absolute;inset:-20% 0;
  background-image:
    radial-gradient(2px 2px at 12% 20%, rgba(240,214,147,.55), transparent 60%),
    radial-gradient(2px 2px at 28% 72%, rgba(255,245,210,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 38%, rgba(240,214,147,.5), transparent 60%),
    radial-gradient(2px 2px at 63% 84%, rgba(255,245,210,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 26%, rgba(240,214,147,.45), transparent 60%),
    radial-gradient(2px 2px at 88% 58%, rgba(255,245,210,.4), transparent 60%);
  background-size:100% 140%;
  animation:heroMotes 26s linear infinite;opacity:.7}
html[data-mode="morning"] .hero .hero-fx::after{opacity:.4}
@keyframes heroGlowDrift{from{transform:translate(0,0)}to{transform:translate(6%,5%)}}
@keyframes heroMotes{from{transform:translateY(8%)}to{transform:translateY(-32%)}}
@media (prefers-reduced-motion: reduce){.hero .hero-fx::before,.hero .hero-fx::after{animation:none}}

/* モバイル（本番準拠：1カラム化・右ロゴ非表示） */
@media(max-width:960px){
  .hero{padding:100px 0 60px}
  .hero-grid-layout{grid-template-columns:1fr;gap:40px}
  .hero-right{display:none}
}

/* ギルドカード／応援ガイドのボタン: ホバーで左→右に色が変わるスイープ
   （カーソル吸着＝cursor.js の .mem-cta/.support-cta と対） */
#membership .mem-cta, #support .support-cta{
  background:linear-gradient(90deg, var(--gold-light) 0 50%, var(--gold) 50% 100%);
  background-size:200% 100%;
  background-position:100% 0;
  transition:background-position .45s cubic-bezier(.5,0,.2,1), box-shadow .3s, transform .3s;
}
/* スイープはボタン自身にホバーした時だけ（カードホバーでは発火しない） */
#membership .mem-cta:hover,
#support .support-cta:hover{
  background-position:0 0;
}
@media (prefers-reduced-motion: reduce){
  #membership .mem-cta, #support .support-cta{ transition:box-shadow .3s, transform .3s; }
}