@charset "UTF-8";

/* =========================================================
   mokṣaḥ - カウンセリングページ専用テーマ
   暗闇から滲む朱・橙・マゼンタの発光
   ---------------------------------------------------------
   style.css の後に読み込むこと。counseling.html のみで使用。

   ■ 設計の考えかた
     鮮明さは「明るさ」ではなく「彩度」で出しています。
     顔料は高彩度・低明度のものを選び、全体に黒を被せるスクリムは
     使いません（彩度が濁るため）。暗部は周辺減光で黒く沈ませます。

     .aurora __band ×3 … オーロラの襞。screen合成で重なる
     .aurora __veil     … 陰り・周辺減光

   ■ 検証済みの値です
     Chrome で実際に描画した画素（1600×1000 × アニメーション3フェーズ、
     計30万画素）を測定しています。最も明るい点 #8F3D0E において
     本文 6.51:1 / 補助 5.59:1 / 小文字 5.09:1 / アクセント 5.58:1。
     襞のアルファをこれ以上上げると、最明部で文字が読めなくなります。
   ========================================================= */

/* ---------- トークンの上書き ---------- */
:root {
  --base:      #050202;  /* ほぼ黒 */
  --magenta:   #B8064A;  /* マゼンタ */
  --vermilion: #AE2A02;  /* 朱 */
  --amber:     #BC5600;  /* 橙 */
  --crimson:   #920A06;  /* 深紅 */
  --glow:      #FFD9B8;  /* 明部・アクセント */

  --bg:          transparent;
  --bg-tint:     rgba(5, 2, 2, .3);
  --bg-deep:     rgba(4, 2, 2, .48);
  --ink:         #F8EFE8;
  --ink-soft:    #F3E7E0;
  --ink-mute:    #EBDCD4;
  --accent:      var(--glow);
  --accent-dark: #F0B686;
  --accent-deep: #070303;
  --line:        rgba(255, 217, 184, .2);
}

html { background: var(--base); }
body { background: transparent; }
::selection { background: var(--magenta); color: #fff; }

/* =========================================================
   背景：オーロラ
   ---------------------------------------------------------
   .aurora（固定・stacking context）の中で、3枚の襞（band）を
   screen 合成で重ねています。各 band の背景は3層構成です。

     1. 左右の減衰   … 端を黒で潰す（screenでは黒＝無効＝消える）
     2. 光条（rays）  … 縦縞。オーロラの筋の正体
     3. 色の縦断面   … 上は溶け、下端が最も明るい

   blur() で全体をぼかし、光条を筋として残しつつ輪郭を消しています。
   ========================================================= */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--base);
}

.aurora__band {
  position: absolute;
  left: -30%;
  width: 160%;
  mix-blend-mode: screen;
  will-change: transform;
}

/* --- 襞 1 --- */
.aurora__band--1 {
  top: -12%;
  height: 74vh;
  filter: blur(11px);
  background:
    /* 襞の切れ目。3つの塊に割ってカーテンに見せる */
    linear-gradient(90deg,
      #000 0%,
      rgba(0,0,0,0)   14%,
      rgba(0,0,0,.88) 22%,
      rgba(0,0,0,0)   36%,
      rgba(0,0,0,.72) 61%,
      rgba(0,0,0,0)   74%,
      #000 100%),
    /* 光条（細）。回転を打ち消す角度で画面上ほぼ垂直に */
    repeating-linear-gradient(72deg,
      rgba(0,0,0,.72) 0px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 19px,
      rgba(0,0,0,.72) 29px),
    /* 光条（粗）。周期は29と41＝整数比を避けて等間隔に見せない */
    repeating-linear-gradient(67deg,
      rgba(0,0,0,.42) 0px,
      rgba(0,0,0,0) 15px,
      rgba(0,0,0,0) 26px,
      rgba(0,0,0,.42) 41px),
    /* 色の縦断面。下端が最も明るく、そこで断ち切る */
    linear-gradient(180deg,
      rgba(184,  6, 74, 0)       0%,
      rgba(184,  6, 74, .44) 45%,
      rgba(206, 12, 88, .81) 88%,
      rgba(206, 12, 88, 0)       97%);
  animation: auroraDrift1 54s ease-in-out infinite;
}

/* --- 襞 2 --- */
.aurora__band--2 {
  top: 16%;
  height: 68vh;
  filter: blur(12px);
  background:
    /* 襞の切れ目。3つの塊に割ってカーテンに見せる */
    linear-gradient(90deg,
      #000 0%,
      rgba(0,0,0,0)   14%,
      rgba(0,0,0,.88) 35%,
      rgba(0,0,0,0)   49%,
      rgba(0,0,0,.72) 72%,
      rgba(0,0,0,0)   85%,
      #000 100%),
    /* 光条（細）。回転を打ち消す角度で画面上ほぼ垂直に */
    repeating-linear-gradient(101deg,
      rgba(0,0,0,.72) 0px,
      rgba(0,0,0,0) 8px,
      rgba(0,0,0,0) 15px,
      rgba(0,0,0,.72) 23px),
    /* 光条（粗）。周期は23と37＝整数比を避けて等間隔に見せない */
    repeating-linear-gradient(96deg,
      rgba(0,0,0,.42) 0px,
      rgba(0,0,0,0) 13px,
      rgba(0,0,0,0) 24px,
      rgba(0,0,0,.42) 37px),
    /* 色の縦断面。下端が最も明るく、そこで断ち切る */
    linear-gradient(180deg,
      rgba(174, 42,  2, 0)       0%,
      rgba(174, 42,  2, .47) 45%,
      rgba(188, 86,  0, .84) 88%,
      rgba(188, 86,  0, 0)       97%);
  animation: auroraDrift2 71s ease-in-out infinite;
}

/* --- 襞 3 --- */
.aurora__band--3 {
  top: 42%;
  height: 72vh;
  filter: blur(14px);
  background:
    /* 襞の切れ目。3つの塊に割ってカーテンに見せる */
    linear-gradient(90deg,
      #000 0%,
      rgba(0,0,0,0)   14%,
      rgba(0,0,0,.88) 15%,
      rgba(0,0,0,0)   29%,
      rgba(0,0,0,.72) 55%,
      rgba(0,0,0,0)   68%,
      #000 100%),
    /* 光条（細）。回転を打ち消す角度で画面上ほぼ垂直に */
    repeating-linear-gradient(82deg,
      rgba(0,0,0,.72) 0px,
      rgba(0,0,0,0) 12px,
      rgba(0,0,0,0) 22px,
      rgba(0,0,0,.72) 34px),
    /* 光条（粗）。周期は34と47＝整数比を避けて等間隔に見せない */
    repeating-linear-gradient(77deg,
      rgba(0,0,0,.42) 0px,
      rgba(0,0,0,0) 17px,
      rgba(0,0,0,0) 30px,
      rgba(0,0,0,.42) 47px),
    /* 色の縦断面。下端が最も明るく、そこで断ち切る */
    linear-gradient(180deg,
      rgba(146, 10,  6, 0)       0%,
      rgba(146, 10,  6, .50) 45%,
      rgba(168, 16, 10, .79) 88%,
      rgba(168, 16, 10, 0)       97%);
  animation: auroraDrift3 88s ease-in-out infinite;
}


/* --- 煙。feTurbulence の乱流をたなびかせる --- */
.aurora-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.aurora__smoke {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  will-change: transform;
}
/* 遮る煙。通常合成で暗く食い込ませる（screenにすると彩度が濁る） */
.aurora__smoke--near {
  filter: url(#smokeNear);
  opacity: .72;
  animation: smokeDrift1 96s ease-in-out infinite;
}
/* 散らす煙。ごく淡く発光側に */
.aurora__smoke--far {
  filter: url(#smokeFar);
  mix-blend-mode: screen;
  opacity: .18;
  animation: smokeDrift2 137s ease-in-out infinite;
}

@keyframes smokeDrift1 {
  0%,100% { transform: translate3d(-2%, 1%, 0) scale(1.02); }
  50%     { transform: translate3d( 3%, -2%, 0) scale(1.09); }
}
@keyframes smokeDrift2 {
  0%,100% { transform: translate3d( 2%, -1%, 0) scale(1.06); }
  50%     { transform: translate3d(-3%, 2%, 0) scale(1.0); }
}

/* --- 陰り・周辺減光（襞の上に重ねる） --- */
.aurora__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(132% 104% at 50% 40%, rgba(5,2,2,0) 32%, rgba(5, 2, 2, .84) 100%),
    linear-gradient(104deg,
      rgba(3,1,1,.55) 0%, rgba(3,1,1,0) 30%,
      rgba(3,1,1,0) 70%, rgba(3,1,1,.55) 100%),
    linear-gradient(0deg, rgba(3,1,1,.62) 0%, rgba(3,1,1,0) 28%);
}

/* --- 揺らぎ。位置と縦の伸縮だけを動かす（transformのみ＝GPU） --- */
@keyframes auroraDrift1 {
  0%,100% { transform: translate3d(-3%, 0, 0) rotate(-18deg) scaleY(1); }
  50%     { transform: translate3d( 3%, 3%, 0) rotate(-14deg) scaleY(1.14); }
}
@keyframes auroraDrift2 {
  0%,100% { transform: translate3d( 2%, 1%, 0) rotate(11deg) scaleY(1.06); }
  50%     { transform: translate3d(-4%, -2%, 0) rotate(7deg) scaleY(.92); }
}
@keyframes auroraDrift3 {
  0%,100% { transform: translate3d(-2%, 2%, 0) rotate(-8deg) scaleY(.96); }
  50%     { transform: translate3d( 4%, -1%, 0) rotate(-12deg) scaleY(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora__band,
  .aurora__smoke { animation: none; }
}

/* ---------- ページ上部 ---------- */
.page-hero__bg {
  background-color: transparent;
  background-image: var(--img, none);
}
.page-hero__bg::after {
  /* 写真を入れたので、ヘッダー帯と下辺だけを沈める。
     下辺を濃く落とすのは、続くオーロラとの境目に横線を出さないため */
  background: linear-gradient(180deg,
    rgba(5,2,2,.82) 0%,
    rgba(5,2,2,.42) 20%,
    rgba(5,2,2,.24) 55%,
    rgba(5,2,2,.86) 100%);
}
.page-hero__title { color: var(--ink); }

/* ---------- セクションの段差 ---------- */
.section--tint { background: rgba(5, 2, 2, .3); }
.section--deep { background: rgba(4, 2, 2, .48); }

/* ---------- ヘッダー ---------- */
.site-header.is-scrolled {
  background: rgba(5, 2, 2, .9);
  box-shadow: 0 1px 0 var(--line);
}
@media (max-width: 900px) {
  .nav { background: rgba(5, 2, 2, .98); }
}

/* ---------- 写真プレースホルダ（同じ発光を小さく） ---------- */
.media {
  /* オーロラ側が明るいため、写真はより強く持ち上げる */
  filter: brightness(1.9);
  background-color: #150807;
  background-image: var(--img,
    radial-gradient(20% 18% at 60% 30%, rgba(214, 120,  60, .5) 0%, rgba(214,120,60,0) 58%),
    radial-gradient(52% 46% at 50% 80%, rgba(140,  20,  16, .9) 0%, rgba(140,20,16,0)  66%),
    radial-gradient(56% 48% at 82% 28%, rgba(190,  94,  10, .9) 0%, rgba(190,94,10,0)  64%),
    radial-gradient(46% 40% at 34% 36%, rgba(190,  18,  78, .95) 0%, rgba(190,18,78,0) 62%));
}
.media::after {
  background: linear-gradient(180deg, rgba(255,207,160,.05), rgba(3,1,1,.18));
}

/* ---------- カード類（光の上でも読めるよう薄い闇を敷く） ---------- */
.plan,
.voice {
  background: rgba(10, 4, 4, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255, 217, 184, .18);
}
.plan--featured {
  background: rgba(255, 217, 184, .1);
  border-color: rgba(255, 217, 184, .5);
  box-shadow: 0 24px 60px -28px rgba(184,  6, 74, .63);
}
.plan__tag { background: var(--glow); color: var(--base); }
.plan__price { border-bottom-color: var(--line); }

/* ---------- 罫線まわり ---------- */
.step,
.step:last-child,
.faq-item,
.faq-item:first-child,
.table th,
.table td { border-color: rgba(255, 217, 184, .16); }

/* ---------- ボタン ---------- */
.btn {
  background: var(--glow);
  border-color: var(--glow);
  color: var(--base);
}
.btn:hover {
  background: transparent;
  border-color: var(--glow);
  color: var(--glow);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(248, 239, 232, .34);
}
.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--base);
}

/* ---------- CTA（光がいちばん近づく場所） ---------- */
.cta {
  background:
    radial-gradient(76% 128% at 50% 0%, rgba(190, 24, 76, .42) 0%, rgba(190,24,76,0) 66%),
    rgba(4, 2, 2, .5);
  border-top: 1px solid rgba(255, 217, 184, .16);
}
.cta .section-label { color: var(--glow); }
.cta__title { color: var(--ink); }
.cta__text  { color: var(--ink-soft); }
.cta .btn {
  background: var(--glow);
  border-color: var(--glow);
  color: var(--base);
}
.cta .btn:hover {
  background: transparent;
  color: var(--glow);
  border-color: var(--glow);
}
.cta .btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(248, 239, 232, .42);
}
.cta .btn--ghost:hover { background: var(--ink); color: var(--base); }

/* ---------- フッター ---------- */
.site-footer {
  background: rgba(4, 2, 2, .62);
  border-top: 1px solid rgba(255, 217, 184, .16);
}