/* Magic Home — Completed Hero — v2025-10-14 */

/* ========== コンテナ/下地 ========== */
#tw-hero{
  position:relative; isolation:isolate; overflow:hidden; min-height:62svh;
  /* 下地: 夜空トーン + 上部に淡い光 */
  background:
    radial-gradient(120vw 80vh at 50% -10%, rgba(40,50,90,0.25) 0%, rgba(15,15,25,0) 50%),
    linear-gradient(180deg, #12101c 0%, #0c0a12 60%, #0b0a10 100%);
  background-color:#0b0a10;
  /* セクション下端フェード（Safari対応も） */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1)   0%,
    rgba(0,0,0,1)  88%,
    rgba(0,0,0,.85)92%,
    rgba(0,0,0,.55)96%,
    rgba(0,0,0,0) 100%
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1)   0%,
    rgba(0,0,0,1)  88%,
    rgba(0,0,0,.85)92%,
    rgba(0,0,0,.55)96%,
    rgba(0,0,0,0) 100%
  );
}

/* レイヤー: bg(0) < vignette(1) < fg(2) < spot(3) < canvas(4) < text(5) */
#tw-hero-bg{position:absolute;inset:-2vmax;z-index:0;}
#tw-hero-fg{position:absolute;inset:-2vmax;z-index:2;pointer-events:none;}
#tw-hero-fg{
  background: radial-gradient(ellipse at 50% 45%,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,0.35) 68%,
    rgba(0,0,0,0.58) 100%);
}

/* 星空キャンバス（サイズはJSでオーバースキャン） */
#tw-hero-canvas{
  position:absolute; left:0; top:0; z-index:4; pointer-events:none;
  mix-blend-mode:normal; background:transparent;
}

/* 白い“息”スポット（JSで明滅） */
#tw-hero-spot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:68vmin; height:68vmin; border-radius:9999px; pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.66) 0%, rgba(255,255,255,0) 62%); opacity:.70;
}

/* ========== テキスト/CTA ========== */
.tw-hero-inner,[data-hero-inner]{
  position:relative; z-index:5; padding:2rem; text-align:center;
  max-width:min(92vw, 920px); margin-inline:auto; color:#F2F4F7;
}

/* 見出し：明るいミント＋“魔法の光” */
#tw-hero .tw-hero-inner h1{
  color:#9EE6B4; letter-spacing:.02em;
  font-size: clamp(2rem, 5vw, 3rem); line-height:1.1;
  text-shadow:
    0 0 22px rgba(158,230,180,.18),
    0 4px 16px rgba(0,0,0,.78),
    0 0 18px rgba(255,255,255,.14);
  /* ほんのり光の息づき（5.5s） */
  animation: tw-mint-glow 5.5s ease-in-out infinite;
}

/* 本文は淡い灰白で統一（黒化対策） */
#tw-hero .tw-hero-inner p,
#tw-hero .tw-hero-inner h2,
#tw-hero .tw-hero-inner h3,
#tw-hero .tw-hero-inner a:not(.btn){
  color:#F2F4F7;
  text-shadow:
    0 3px 14px rgba(0,0,0,.72),
    0 0 14px rgba(255,255,255,.10);
}

/* CTAボタン（ゆるやかに鼓動） */
#tw-hero a.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:12rem; height:3rem; padding:0 1.25rem;
  border-radius:9999px; border:1px solid rgba(200,184,138,.65);
  background:rgba(20,20,24,.18); color:#F8FAFC; text-decoration:none; font-weight:700; letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  animation: tw-cta-breathe 6.5s ease-in-out infinite;
}
#tw-hero a.btn:hover{
  transform:translateY(-2px);
  background:rgba(25,25,30,.28);
  border-color:rgba(200,184,138,.85);
  box-shadow:0 10px 24px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.10);
}
#tw-hero a.btn:focus-visible{
  outline:2px solid #9EE6B4; outline-offset:3px;
}

/* ========== オーブ（目的から選ぶ） ========== */
.tw-orb-grid{
  list-style:none; padding:0; margin:1rem auto;
  display:grid; grid-template-columns:repeat(2, minmax(160px,1fr));
  gap:14px; justify-items:center;
}
.tw-orb-grid > li{ display:grid; place-items:center; }
.tw-orb-grid a, .tw-orb-grid a.tw-orb{
  display:grid; place-items:center;
  width:150px; height:150px; border-radius:9999px;
  background:#162330; border:1px solid rgba(200,184,138,.55);
  text-decoration:none; color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
.tw-orb-grid a:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.34);
  background:#1b2a3a; border-color:rgba(200,184,138,.75);
}
.tw-orb-grid a > span{
  display:block; color:#fff; font-weight:700; line-height:1.25; text-align:center;
  background:rgba(0,0,0,.38); padding:.4rem .65rem; border-radius:.6rem;
}
@media (min-width:900px){ .tw-orb-grid{ grid-template-columns:repeat(3, 1fr); gap:16px 22px; } }
@media (min-width:1200px){ .tw-orb-grid{ grid-template-columns:repeat(4, 1fr); gap:18px 24px; } }

/* ========== アニメーション ========== */
@keyframes tw-mint-glow{
  0%,100% { text-shadow: 0 0 22px rgba(158,230,180,.12), 0 4px 16px rgba(0,0,0,.78), 0 0 18px rgba(255,255,255,.12); }
  50%     { text-shadow: 0 0 26px rgba(158,230,180,.22), 0 5px 18px rgba(0,0,0,.82), 0 0 20px rgba(255,255,255,.14); }
}
@keyframes tw-cta-breathe{
  0%,100% { box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06); transform:translateY(0); }
  50%     { box-shadow:0 8px 22px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.10); }
}

/* ========== reduced-motion ========== */
@media (prefers-reduced-motion: reduce){
  #tw-hero-spot,#tw-hero-canvas,#tw-hero-bg,#tw-hero-fg,
  [data-hero-inner],.tw-hero-inner,
  #tw-hero .tw-hero-inner h1,
  #tw-hero a.btn{
    animation:none !important; transition:none !important;
  }
}


/* ↓ OSが reduce-motion でも、開発時だけ data-allow-motion="1" を付ければ動く */
@media (prefers-reduced-motion: reduce){
  :root:not([data-allow-motion="1"]) #tw-hero-spot,
  :root:not([data-allow-motion="1"]) #tw-hero-canvas,
  :root:not([data-allow-motion="1"]) #tw-hero-bg,
  :root:not([data-allow-motion="1"]) #tw-hero-fg,
  :root:not([data-allow-motion="1"]) [data-hero-inner],
  :root:not([data-allow-motion="1"]) .tw-hero-inner,
  :root:not([data-allow-motion="1"]) #tw-hero .tw-hero-inner h1,
  :root:not([data-allow-motion="1"]) #tw-hero a.btn{
    animation: none !important;
    transition: none !important;
  }
}

/* 装飾は読み上げ対象外（ヒーロー） */
#tw-hero-bg, #tw-hero-fg, #tw-hero-canvas, #tw-hero-spot {
  /* 視覚には必要だが、SR/点字には不要 */
  aria-hidden: true;
}

/* フォーカスの視認性 */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 3px solid #9EE6B4;
  outline-offset: 3px;
}

/* 高コントラスト志向（Windows/Edge等） */
@media (forced-colors: active) {
  #tw-hero-canvas, #tw-hero-spot { display:none; }        /* 装飾OFF */
  #tw-hero { border: 2px solid CanvasText; }              /* 省略時でも区切り明瞭 */
  a { text-decoration: underline; }                       /* 伝統的な識別 */
}

/* より強いコントラストを求めるユーザー */
@media (prefers-contrast: more) {
  #tw-hero .tw-hero-inner { color: #fff; }
  #tw-hero .tw-hero-inner h1 { color: #CFFAE0; text-shadow: none; }
  #tw-hero a.btn { border-color:#fff; box-shadow:none; background:rgba(255,255,255,.12); }
}

/* ユーザーのテキスト拡大に耐える（例：本文） */
body { line-height: 1.6; word-break: normal; }
#tw-hero .tw-hero-inner { max-width: 60ch; } /* 行長を適度に（弱視に優しい） */