/* =========================================
   AI代替リスク診断 - カスタムスタイル
   （Tailwindで表現しきれない演出系をここに集約）
   ========================================= */

:root {
  --neon-green: #00ff9d;
  --cyber-blue: #00d4ff;
  --danger-red: #ff2d55;
  --warn-yellow: #facc15;
}

/* ---------- 背景演出：サイバーグリッド ---------- */
.cyber-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  animation: grid-drift 18s linear infinite;
  pointer-events: none;
}

@keyframes grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 36px; }
}

/* ---------- 背景演出：走査線 ---------- */
.scanline {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 255, 157, 0.05) 50%,
    transparent 100%
  );
  background-size: 100% 8px;
  pointer-events: none;
  opacity: 0.4;
}

/* ---------- ネオン発光テキスト ---------- */
.neon-text {
  text-shadow:
    0 0 8px rgba(0, 255, 157, 0.8),
    0 0 24px rgba(0, 255, 157, 0.5),
    0 0 48px rgba(0, 255, 157, 0.3);
}

/* ---------- グリッチ演出（タイトル用） ---------- */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0.75;
}

.glitch::before {
  color: var(--cyber-blue);
  animation: glitch-shift 2.8s infinite linear alternate-reverse;
  clip-path: inset(0 0 55% 0);
}

.glitch::after {
  color: var(--danger-red);
  animation: glitch-shift 3.4s infinite linear alternate;
  clip-path: inset(60% 0 0 0);
}

@keyframes glitch-shift {
  0%, 86%, 100% { transform: translate(0, 0); }
  88% { transform: translate(-3px, 1px); }
  92% { transform: translate(3px, -1px); }
  96% { transform: translate(-2px, -1px); }
}

/* ---------- ネオンボタン ---------- */
.btn-neon {
  box-shadow:
    0 0 12px rgba(0, 255, 157, 0.45),
    0 0 36px rgba(0, 255, 157, 0.2);
  animation: btn-pulse 2s ease-in-out infinite;
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(0, 255, 157, 0.45), 0 0 36px rgba(0, 255, 157, 0.2); }
  50%      { box-shadow: 0 0 20px rgba(0, 255, 157, 0.7),  0 0 56px rgba(0, 255, 157, 0.35); }
}

/* ---------- プログレスバー ---------- */
.progress-fill {
  background: linear-gradient(90deg, var(--cyber-blue), var(--neon-green));
  box-shadow: 0 0 10px rgba(0, 255, 157, 0.7);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 選択肢ボタン ---------- */
.choice-btn {
  width: 100%;
  text-align: left;
  padding: 1rem 1.1rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(0, 212, 255, 0.35);
  background: rgba(11, 17, 32, 0.85);
  color: #e5e7eb;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.choice-btn:hover,
.choice-btn:focus-visible {
  border-color: var(--neon-green);
  background: rgba(0, 255, 157, 0.08);
  box-shadow: 0 0 14px rgba(0, 255, 157, 0.25);
  outline: none;
}

.choice-btn:active {
  transform: scale(0.97);
}

.choice-btn.selected {
  border-color: var(--neon-green);
  background: rgba(0, 255, 157, 0.18);
  box-shadow: 0 0 18px rgba(0, 255, 157, 0.5);
}

.choice-btn .choice-prefix {
  color: var(--cyber-blue);
  margin-right: 0.5rem;
}

/* ---------- 質問切り替えフェード ---------- */
.fade-target {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-target.fade-out {
  opacity: 0;
  transform: translateY(-12px);
}

.fade-target.fade-in-prep {
  transition: none;
  opacity: 0;
  transform: translateY(12px);
}

/* ---------- 画面全体のフェードイン ---------- */
.screen {
  animation: screen-in 0.45s ease both;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* hidden が付いている間はアニメも無効化 */
.screen.hidden {
  display: none;
}

/* ---------- ローディングスピナー ---------- */
.spinner {
  position: relative;
  width: 110px;
  height: 110px;
}

.spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--neon-green);
  border-right-color: rgba(0, 255, 157, 0.25);
  animation: spin 1s linear infinite;
}

.spinner-ring:nth-child(2) {
  inset: 14px;
  border-top-color: var(--cyber-blue);
  border-right-color: rgba(0, 212, 255, 0.25);
  animation: spin 1.6s linear infinite reverse;
}

.spinner-core {
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 157, 0.9), rgba(0, 255, 157, 0.05) 70%);
  animation: core-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes core-pulse {
  from { transform: scale(0.8); opacity: 0.6; }
  to   { transform: scale(1.1); opacity: 1; }
}

.pulse-text {
  animation: text-pulse 1.2s ease-in-out infinite;
}

@keyframes text-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* 「...」が打鍵風に増える */
.dots::after {
  content: '';
  animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* ---------- 結果カード：ランク別カラー ---------- */
.result-card { border-color: rgba(0, 255, 157, 0.5); }

/* 隠しランクSS：白金のオーラ */
.result-card.rank-SS {
  border-color: #ffffff;
  animation: ss-aura 2s ease-in-out infinite;
}
.result-card.rank-SS .rank-letter {
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 30px rgba(255, 215, 0, 0.8),
    0 0 60px rgba(255, 215, 0, 0.5);
}

@keyframes ss-aura {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 0 0 60px rgba(255, 215, 0, 0.3); }
  50%      { box-shadow: 0 0 50px rgba(255, 255, 255, 0.7), 0 0 90px rgba(255, 215, 0, 0.5); }
}

.result-card.rank-S {
  border-color: var(--neon-green);
  box-shadow: 0 0 30px rgba(0, 255, 157, 0.35);
}
.result-card.rank-S .rank-letter { color: var(--neon-green); }

.result-card.rank-A {
  border-color: var(--cyber-blue);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.35);
}
.result-card.rank-A .rank-letter {
  color: var(--cyber-blue);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8), 0 0 24px rgba(0, 212, 255, 0.5);
}

.result-card.rank-B {
  border-color: var(--warn-yellow);
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.3);
}
.result-card.rank-B .rank-letter {
  color: var(--warn-yellow);
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.8), 0 0 24px rgba(250, 204, 21, 0.5);
}

.result-card.rank-E {
  border-color: var(--danger-red);
  box-shadow: 0 0 30px rgba(255, 45, 85, 0.4);
  animation: danger-flash 1.6s ease-in-out infinite;
}
.result-card.rank-E .rank-letter {
  color: var(--danger-red);
  text-shadow: 0 0 8px rgba(255, 45, 85, 0.8), 0 0 24px rgba(255, 45, 85, 0.5);
}

@keyframes danger-flash {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 45, 85, 0.4); }
  50%      { box-shadow: 0 0 50px rgba(255, 45, 85, 0.7); }
}

.rank-letter {
  animation: rank-stamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes rank-stamp {
  from { transform: scale(2.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ---------- 広告枠 ---------- */
.ad-frame {
  box-shadow: 0 0 24px rgba(250, 204, 21, 0.12);
}

.dummy-banner {
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.12), rgba(0, 255, 157, 0.08)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 10px, transparent 10px 20px),
    #0b1120;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.dummy-banner:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* ---------- タイピング風テキスト ---------- */
.typing-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--neon-green);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  animation:
    typing 2.2s steps(36, end) both,
    caret 0.8s step-end infinite;
}

@keyframes typing {
  from { max-width: 0; }
  to   { max-width: 100%; }
}

@keyframes caret {
  0%, 100% { border-color: transparent; }
  50%      { border-color: var(--neon-green); }
}

/* ---------- モーション軽減設定への配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}