/* ═══════════════════════════════════════════
   RPG数秘 — No.33 賢者
   ハイブリッドパレット：オーロラ透明 × プリズム × 神秘の虚空
   ─ 光の三原色が循環する「透明感ある神秘」 ─
═══════════════════════════════════════════ */

:root {
  /* ─── コアカラー ─────────────────────────── */
  --accent:       #2a6070;
  --accent-2:     #163844;
  --deep:         #060c10;
  --mid:          #101e26;
  --primary:      #38c8c0;
  --primary-dark: #1e9890;

  /* ─── オーロラ・ベース ───────────────────── */
  --gold:        #80f0e0;
  --gold-2:      #d0fcf8;
  --cream:       #eefcfa;
  --paper:       #f6fffe;
  --ink:         #081418;
  --muted:       #3a8090;
  --line-gold:   rgba(128, 240, 224, 0.50);
  --shadow:      0 16px 36px rgba(6, 12, 16, 0.30);
  --shadow-red:  0 16px 36px rgba(30, 152, 144, 0.28);
  --body-bg:     #f4fffe;

  /* ─── Hero セクション（オーロラグラデーション）── */
  --hero-bg:
    radial-gradient(circle at 10% 15%, rgba(100, 255, 200, 0.22), transparent 30%),
    radial-gradient(circle at 85% 10%, rgba(160, 100, 255, 0.20), transparent 28%),
    radial-gradient(circle at 50% 80%, rgba(0, 200, 255, 0.18), transparent 36%),
    linear-gradient(160deg, #060c10 0%, #0a1a20 45%, #081018 100%);
  --hero-moon-bg:        radial-gradient(circle at 35% 35%, #f0fffc, #80f0e0 55%, rgba(100, 230, 220, 0.30) 100%);
  --hero-moon-glow:      rgba(128, 240, 224, 0.95);
  --hero-mountain-bg:    linear-gradient(180deg, rgba(6, 12, 16, 0.04), rgba(2, 6, 8, 0.92));
  --hero-num-color:      rgba(80, 220, 200, 0.16);
  --hero-star-dot-color: rgba(160, 255, 240, 0.80);
  --hero-h1-glow:        rgba(128, 240, 224, 0.50);
  --keyword-border:      rgba(128, 240, 224, 0.48);

  /* ─── ロゴ ──────────────────────────────── */
  --logo-border: rgba(128, 240, 224, 0.88);
  --logo-bg:     linear-gradient(180deg, rgba(20, 56, 66, 0.95), rgba(6, 18, 22, 0.98));
  --logo-inset:  rgba(160, 255, 244, 0.22);

  /* ─── セクション ────────────────────────── */
  --lavender-end:      #e0faf8;
  --dark-section-glow: rgba(128, 240, 224, 0.14);
  --dark-section-bg:   linear-gradient(180deg, #163844 0%, #2a6070 100%);

  /* ─── types-frame ───────────────────────── */
  --frame-border: rgba(128, 240, 224, 0.90);
  --frame-bg:     linear-gradient(180deg, rgba(14, 30, 38, 0.92), rgba(4, 10, 14, 0.98));

  /* ─── バッジ ────────────────────────────── */
  --badge-border:         rgba(128, 240, 224, 0.90);
  --badge-text:           #d0fcf8;
  --badge-bg:             linear-gradient(180deg, #1e8880, #0e3c3a);
  --badge-diamond-bg:     #186860;
  --badge-diamond-border: rgba(128, 240, 224, 0.65);

  /* ─── リボンタイトル ────────────────────── */
  --ribbon-border:         rgba(42, 96, 112, 0.5);
  --ribbon-bg:             linear-gradient(180deg, rgba(238, 252, 250, 0.9), rgba(200, 248, 244, 0.9));
  --ribbon-shadow:         rgba(42, 96, 112, 0.1);
  --ribbon-diamond-border: rgba(42, 96, 112, 0.4);

  /* ─── カード・タイムライン ──────────────── */
  --point-border:        rgba(128, 240, 224, 0.44);
  --timeline-glow:       rgba(128, 240, 224, 0.70);
  --timeline-dot-shadow: 0 0 14px rgba(128, 240, 224, 0.95), 0 0 5px rgba(160, 255, 240, 0.60);
  --timeline-note-bg:    rgba(128, 240, 224, 0.1);

  /* ─── 相性カード ────────────────────────── */
  --compat-bg:
    radial-gradient(circle at 20% 20%, rgba(100, 220, 200, 0.15), transparent 32%),
    linear-gradient(135deg, #0e2830, #060c10);
  --compat-hover-shadow: rgba(6, 12, 16, 0.44);

  /* ─── ボタン ────────────────────────────── */
  --btn-primary-bg:       linear-gradient(180deg, #40d8c8 0%, #1e9890 100%);
  --btn-primary-border:   #80f0e0;
  --btn-secondary-bg:     linear-gradient(180deg, #28a89a 0%, #126860 100%);
  --btn-secondary-border: rgba(160, 248, 240, 0.9);

  /* ─── CTA ───────────────────────────────── */
  --cta-divider-bg: rgba(42, 96, 112, 0.2);

  /* ─── 相性チェックカード ────────────────── */
  --check-card-bg:           linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(224, 252, 250, 0.98));
  --check-card-border:       rgba(80, 200, 190, 0.65);
  --check-card-shadow:       rgba(42, 96, 112, 0.1);
  --check-card-hover-shadow: rgba(42, 96, 112, 0.18);
  --check-card-hover-border: #80f0e0;

  /* ─── レアカード ────────────────────────── */
  --check-rare-border:   rgba(120, 240, 228, 0.90);
  --check-rare-glow:     rgba(180, 255, 248, 0.44);
  --check-rare-bg-end:   #eafffe;
  --check-rare-badge-bg: linear-gradient(135deg, #1e9890, #0a4844);

  /* ─── 有料レポート ──────────────────────── */
  --paid-card-border:  rgba(128, 240, 224, 0.38);
  --paid-li-border:    rgba(128, 240, 224, 0.65);
  --paid-price-border: rgba(128, 240, 224, 0.32);
  --paid-star-2:       rgba(128, 240, 224, 0.44);
  --paid-star-3:       rgba(160, 200, 255, 0.36);

  /* ─── アニメーション ────────────────────── */
  --shooting-star-color: rgba(160, 255, 244, 0.75);
  --pulse-glow-1: rgba(128, 240, 224, 0.38);
  --pulse-glow-2: rgba(200, 255, 248, 0.92);
}

/* ─── ウォーターマーク数字（No.33固有） ─── */
.hero-bg::before {
  content: "33 33 33";
}

/* ─── オーロラシフト：Heroの背景が静かに揺らぐ ─── */
@keyframes auroraShift {
  0%   { filter: hue-rotate(0deg)   brightness(1); }
  33%  { filter: hue-rotate(45deg)  brightness(1.06); }
  66%  { filter: hue-rotate(-35deg) brightness(1.04); }
  100% { filter: hue-rotate(0deg)   brightness(1); }
}

.hero-section .hero-bg {
  animation: auroraShift 14s ease-in-out infinite;
}

/* ══════════════════════════════════════
   魔法陣リング — オーロラ三重環
══════════════════════════════════════ */
.hero-visual {
  position: relative;
  isolation: isolate;
}

.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* 外環：オーロラ色シフト＋時計回り */
.hero-visual::before {
  width: 350px;
  height: 350px;
  margin: -175px 0 0 -175px;
  border: 1.5px solid rgba(128, 240, 224, 0.60);
  box-shadow:
    0 0 22px rgba(128, 240, 224, 0.28),
    0 0 44px rgba(160, 180, 255, 0.14),
    inset 0 0 18px rgba(128, 240, 224, 0.10);
  animation: aurora-ring-cw 20s linear infinite, aurora-hue 10s ease-in-out infinite;
}

/* 内環：逆回転＋位相ずれのオーロラ */
.hero-visual::after {
  width: 245px;
  height: 245px;
  margin: -122px 0 0 -122px;
  border: 1px dashed rgba(128, 240, 224, 0.45);
  animation: aurora-ring-ccw 13s linear infinite, aurora-hue 10s ease-in-out 3.3s infinite;
}

.character-img {
  position: relative;
  z-index: 1;
}

@keyframes aurora-ring-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes aurora-ring-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes aurora-hue {
  0%   { filter: hue-rotate(0deg)   brightness(1); }
  25%  { filter: hue-rotate(60deg)  brightness(1.12); }
  50%  { filter: hue-rotate(140deg) brightness(1.05); }
  75%  { filter: hue-rotate(220deg) brightness(1.10); }
  100% { filter: hue-rotate(360deg) brightness(1); }
}

/* ══════════════════════════════════════
   タイトルオーラパルス — 虹色の循環グロウ
══════════════════════════════════════ */
@keyframes aurora-title-hue {
  0%   {
    text-shadow:
      0 0 14px rgba(128, 240, 224, 0.70),
      0 0 32px rgba(100, 220, 255, 0.35);
    filter: hue-rotate(0deg);
  }
  33%  {
    text-shadow:
      0 0 22px rgba(180, 160, 255, 0.80),
      0 0 52px rgba(140, 120, 255, 0.40);
    filter: hue-rotate(120deg);
  }
  66%  {
    text-shadow:
      0 0 20px rgba(255, 180, 200, 0.75),
      0 0 46px rgba(255, 140, 180, 0.38);
    filter: hue-rotate(240deg);
  }
  100% {
    text-shadow:
      0 0 14px rgba(128, 240, 224, 0.70),
      0 0 32px rgba(100, 220, 255, 0.35);
    filter: hue-rotate(360deg);
  }
}

.hero-section .hero-no,
.hero-section h1 {
  animation: aurora-title-hue 6s ease-in-out infinite;
}