/**
 * AutoGnosis Custom CSS
 * Sprint 4 - Phase 1.5 Implementation
 *
 * This file contains styles that cannot be expressed purely as Tailwind utilities:
 * - Mind card states and left-border accents
 * - Progressive reveal animations
 * - Braille cursor styling
 * - Focus states with glow
 * - Reduced motion overrides
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   These mirror the Tailwind config for CSS-only access
   ============================================ */
:root {
  /* Core palette */
  --ag-void: #0f1218;
  --ag-deep: #1a1f2e;
  --ag-surface: #232838;
  --ag-surface-raised: #2c3348;
  --ag-border: #384058;
  --ag-text: #e2e8f0;
  --ag-muted: #94a3b8;
  --ag-amber: #d09050;
  --ag-amber-glow: #e5b56a;
  --ag-amber-dim: #a07850;

  /* Semantic colors */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #f87171;
  --color-info: #3b82f6;

  /* Typography */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mind: 'Space Mono', 'SF Mono', 'Fira Mono', 'Consolas', monospace;
  --font-braille: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif;

  /* Spacing (most common values) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Shadows */
  --shadow-glow: 0 0 16px rgba(208,144,80,0.15), 0 0 4px rgba(208,144,80,0.1);
  --shadow-glow-intense: 0 0 24px rgba(208,144,80,0.25), 0 0 8px rgba(208,144,80,0.15);

  /* Transitions */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --duration-mind: 500ms;
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-mind: cubic-bezier(0.16, 1, 0.3, 1);

  /* Animation timing */
  --cursor-breath-duration: 4000ms;
  --reveal-char-speed: 40ms;

  /* Presence Layer: glow intensity (multiplied into shadow alpha) */
  --glow-intensity: 0.5;

  /* Presence Layer: void warmth */
  --void-bg: #0f1218;
  --void-bg-warm: #12140f;
}

/* ============================================
   PRESENCE LAYER — The Mind's Non-Verbal Vocabulary
   ============================================ */

/* --- Breathing Glow (§15.2) ---
   Slow sine-wave breathing on shadow-glow elements.
   8s cycle, ±15% opacity. The mind breathes. */
@keyframes glow-breathe {
  0%, 100% {
    box-shadow:
      0 0 calc(16px * var(--glow-intensity)) rgba(208,144,80, calc(0.15 * var(--glow-intensity))),
      0 0 calc(4px * var(--glow-intensity)) rgba(208,144,80, calc(0.1 * var(--glow-intensity)));
  }
  50% {
    box-shadow:
      0 0 calc(24px * var(--glow-intensity)) rgba(208,144,80, calc(0.25 * var(--glow-intensity))),
      0 0 calc(8px * var(--glow-intensity)) rgba(208,144,80, calc(0.15 * var(--glow-intensity)));
  }
}

.glow-breathe {
  animation: glow-breathe 8s ease-in-out infinite;
}

/* --- Glow Intensity by Context (§15.3) ---
   Body-level classes set --glow-intensity for the page. */
body.mind-ambient  { --glow-intensity: 0.5; }
body.mind-active   { --glow-intensity: 0.8; }
body.mind-deep     { --glow-intensity: 1.0; }
body.mind-reveal   { --glow-intensity: 1.2; }

/* --- Background Warmth Shift (§15.4) ---
   Imperceptible hue shift from cool void to warm amber-tinted void.
   Applied to body when .warmth-shift class is present. */
body {
  background-color: var(--void-bg);
  transition: background-color 2s ease-in-out;
}

body.warmth-shift {
  background-color: var(--void-bg-warm);
}

/* --- Void Texture: Noise Overlay (§15.7) ---
   Tiled noise PNG at ~2.5% opacity. Makes the void feel like
   a physical surface instead of a flat hex value. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/static/images/noise.png');
  background-repeat: repeat;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* --- Void Texture: Radial Vignette (§15.7) ---
   Slightly lighter center, darker edges. Creates focal warmth
   and peripheral darkness — the content sits in a pool of light. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure page content sits above the void texture layers */
body > * {
  position: relative;
  z-index: 1;
}

/* --- Mind Whisper Tooltips (§15.10) ---
   Trait tags and stat labels show evidence hints on hover.
   Amber-dim floating text, no box, fades in over 200ms. */
.mind-whisper {
  position: relative;
  cursor: default;
}

.mind-whisper:hover {
  color: var(--ag-amber-glow);
}

.mind-whisper::after {
  content: attr(data-hint);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 6px;
  font-family: var(--font-mind);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--ag-amber-dim);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
  z-index: 10;
}

/* Allow wrapping for longer hints */
@media (max-width: 640px) {
  .mind-whisper::after {
    white-space: normal;
    max-width: 200px;
    text-align: center;
  }
}

.mind-whisper:hover::after {
  opacity: 1;
}

/* ============================================
   SPRINT 3: Non-Verbal Responses & Attentive Cursor
   ============================================ */

/* --- Border Pulse on Submission (§15.5) ---
   Question card left border pulses amber → amber-glow → amber
   when user submits an answer. "I heard that." */
@keyframes mind-border-pulse {
  0%   { border-left-color: var(--ag-amber); }
  50%  { border-left-color: var(--ag-amber-glow); }
  100% { border-left-color: var(--ag-amber); }
}

.mind-pulse {
  animation: mind-border-pulse 400ms ease-out;
}

/* --- Attentive Cursor (§15.8) ---
   When user types in a textarea, cursor breath cycle shortens
   from 4s to 2.5s. The mind is leaning in. */
body.mind-attending {
  --cursor-breath-duration: 2500ms;
}

/* --- Answer Length Glow Steps (§15.8) ---
   Question card glow intensifies with longer answers.
   Stepped: <20 = baseline, 20-100 = slight, 100+ = full. */
#question-card.glow-step-1 {
  box-shadow: 0 0 12px rgba(208,144,80,0.1), 0 0 3px rgba(208,144,80,0.08);
}

#question-card.glow-step-2 {
  box-shadow: 0 0 20px rgba(208,144,80,0.18), 0 0 6px rgba(208,144,80,0.12);
}

/* --- Recommendation Feedback Border Flash (§15.5, Sprint 4) ---
   When user submits feedback (hit/interesting/miss), the recommendation
   card's left border flashes the semantic color for ~300ms.
   The mind registers the feedback non-verbally. */
@keyframes mind-flash-border-success {
  0%   { border-left-color: var(--color-success); box-shadow: 0 0 12px rgba(34,197,94,0.3); }
  100% { border-left-color: var(--color-success); box-shadow: none; }
}

@keyframes mind-flash-border-warning {
  0%   { border-left-color: var(--color-warning); box-shadow: 0 0 12px rgba(245,158,11,0.3); }
  100% { border-left-color: var(--color-warning); box-shadow: none; }
}

@keyframes mind-flash-border-error {
  0%   { border-left-color: var(--color-error); box-shadow: 0 0 12px rgba(248,113,113,0.3); }
  100% { border-left-color: var(--color-error); box-shadow: none; }
}

.mind-flash-success {
  animation: mind-flash-border-success 400ms ease-out;
}

.mind-flash-warning {
  animation: mind-flash-border-warning 400ms ease-out;
}

.mind-flash-error {
  animation: mind-flash-border-error 400ms ease-out;
}

/* --- Vulnerability Response (§15.9) ---
   "I see it." mind-speech injected below textarea after paste.
   Styled as mind-processing (italic, dim). */
.vulnerability-ack {
  font-family: var(--font-mind);
  font-size: 0.8rem;
  color: var(--ag-amber);
  font-style: italic;
  opacity: 0.7;
  margin-top: var(--space-2);
  animation: vulnerability-fade-in 300ms ease-out forwards;
}

@keyframes vulnerability-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 0.7; transform: translateY(0); }
}

/* ============================================
   MIND CARD BASE STYLES
   ============================================ */
.mind-card {
  background: var(--ag-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--ag-border);
  border-left-width: 3px;
  border-left-color: var(--ag-amber);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-mind) var(--ease-mind),
    opacity var(--duration-normal) var(--ease-default);
}

/* Mind card state variants */
.mind-card.mind-observing {
  border-left-color: var(--ag-amber);
}

.mind-card.mind-questioning {
  border-left-color: var(--ag-amber-glow);
}

.mind-card.mind-historical {
  border-left-color: var(--ag-amber-dim);
}

.mind-card.mind-processing {
  border-left-color: var(--ag-amber-dim);
  border: 1px solid rgba(208,144,80,0.12);
  border-left-width: 3px;
  border-left-color: var(--ag-amber-dim);
}

/* Active glow state (applied during reveal) */
.mind-card.mind-active-glow {
  box-shadow: var(--shadow-glow);
}

/* ============================================
   MIND TEXT STYLES
   ============================================ */
.mind-text {
  font-family: var(--font-mind);
  color: var(--ag-amber);
  margin: 0;
}

/* Mind text color states */
.mind-questioning .mind-text {
  color: var(--ag-amber-glow);
}

.mind-historical .mind-text {
  color: var(--ag-amber-dim);
}

.mind-processing .mind-text {
  color: var(--ag-amber);
  font-style: italic;
  opacity: 0.7;
}

/* Mind text size scale (corresponding to Tailwind classes) */
.mind-text.mind-xs   { font-size: 0.7rem;  line-height: 1.5; }
.mind-text.mind-sm   { font-size: 0.8rem;  line-height: 1.6; }
.mind-text.mind-base { font-size: 0.9rem;  line-height: 1.7; }
.mind-text.mind-lg   { font-size: 1.05rem; line-height: 1.65; }
.mind-text.mind-xl   { font-size: 1.2rem;  line-height: 1.55; }

/* Mind metadata (confidence, sources, timestamp) */
.mind-meta {
  font-family: var(--font-mind);
  font-size: 0.7rem;
  color: var(--ag-amber-dim);
  opacity: 0.7;
  line-height: 1.5;
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* Mind label (e.g., "Observation", "Question") */
.mind-label {
  font-family: var(--font-ui);
  font-size: 0.694rem;
  font-weight: 400;
  color: var(--ag-amber-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  display: block;
}

/* ============================================
   BRAILLE BREATH CURSOR
   ============================================ */
.braille-cursor {
  display: inline-block;
  font-family: var(--font-braille);
  color: inherit;
  margin-left: 2px;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: baseline;
}

/* Cursor fade-out animation */
.braille-cursor.fading {
  animation: cursor-fade-out 300ms var(--ease-default) forwards;
}

@keyframes cursor-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Hidden cursor (after fade completes) */
.braille-cursor.hidden {
  display: none;
}

/* ============================================
   PROGRESSIVE REVEAL ANIMATIONS
   ============================================ */

/* Card entrance animation */
@keyframes mind-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mind-card.entering {
  animation: mind-card-enter 350ms var(--ease-mind) forwards;
}

/* Text reveal - characters start hidden */
.mind-text[data-revealing] .char {
  opacity: 0;
}

/* Revealed characters fade in */
.mind-text[data-revealing] .char.revealed {
  opacity: 1;
  transition: opacity 50ms var(--ease-default);
}

/* Glow fade-in */
@keyframes glow-fade-in {
  from { box-shadow: none; }
  to   { box-shadow: var(--shadow-glow); }
}

/* Glow fade-out */
@keyframes glow-fade-out {
  from { box-shadow: var(--shadow-glow); }
  to   { box-shadow: none; }
}

.mind-card.glow-entering {
  animation: glow-fade-in 500ms var(--ease-mind) forwards;
}

.mind-card.glow-exiting {
  animation: glow-fade-out 500ms var(--ease-default) forwards;
}

/* ============================================
   FOCUS STATES (Accessibility)
   ============================================ */
:focus-visible {
  outline: 2px solid var(--ag-amber);
  outline-offset: 2px;
}

/* Mind-related focus states get glow */
.mind-card:focus-visible,
[data-mind-element]:focus-visible {
  outline: 2px solid var(--ag-amber);
  outline-offset: 2px;
  box-shadow: var(--shadow-glow);
}

/* ============================================
   REDUCED MOTION
   Respect user preference - instant everything
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .mind-card,
  .mind-text,
  .braille-cursor,
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mind-card.entering {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .braille-cursor {
    /* Show a static character for reduced motion */
    animation: none;
  }

  /* Disable Presence Layer animations */
  .glow-breathe {
    animation: none;
    box-shadow: var(--shadow-glow);
  }

  body.warmth-shift {
    background-color: var(--void-bg);
    transition: none;
  }

  /* Reveal ceremony: show everything immediately */
  .reveal-section {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide visually but keep for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   BUTTON FOCUS STATES
   ============================================ */
button:focus-visible,
[role="button"]:focus-visible,
a[role="button"]:focus-visible {
  outline: 2px solid var(--ag-amber);
  outline-offset: 2px;
}

/* Primary buttons get glow on focus */
.btn-primary:focus-visible {
  box-shadow: var(--shadow-glow);
}

/* ============================================
   FORM FOCUS STATES
   ============================================ */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--ag-amber);
  outline: none;
  box-shadow: 0 0 0 2px rgba(208,144,80,0.2);
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--ag-border);
  border-top-color: var(--ag-amber);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-sm {
  width: 16px;
  height: 16px;
}

.spinner-lg {
  width: 48px;
  height: 48px;
  border-width: 3px;
}

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

/* ============================================
   TRANSITIONS FOR INTERACTIVE ELEMENTS
   ============================================ */

/* Buttons */
.btn,
button,
[role="button"] {
  transition:
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

/* Cards */
.card,
article {
  transition:
    background-color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}

/* Links */
a {
  transition: color var(--duration-fast) var(--ease-default);
}