/* =============================================
   SOCRATES — Premium Visual System
   ============================================= */

/* ------------------------------------------------------
   Typography v2 — Newsreader (display serif) + Inter Tight (UI sans).
   Both variable, both OFL, both via Google Fonts. No paid licences.
   The Adult Program (open.html) keeps its parchment identity
   (EB Garamond + Crimson Pro) and is unaffected by this block.
   ------------------------------------------------------ */

html { font-optical-sizing: auto; }

body {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display serif headings (Newsreader): slightly negative tracking and a
   touch tighter leading. Newsreader's letterforms have more breathing
   room than Cormorant did, so we close the gaps gently at large sizes. */
h1.font-serif,
h2.font-serif {
  letter-spacing: -0.012em;
  line-height: 1.08;
}

h3.font-serif {
  letter-spacing: -0.005em;
  line-height: 1.18;
}

/* Body serif paragraphs read at a comfortable text optical size. */
p.font-serif,
blockquote.font-serif {
  letter-spacing: 0;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
}

/* Tabular numbers wherever digits need vertical alignment (stats, scores). */
.counter,
.font-mono,
[class*="tabular-nums"] {
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'kern' 1;
}

/* All-caps eyebrows — the existing tracking-[0.2em]/[0.3em] classes carry
   most of the work. Add small-caps for cleaner cap rendering on Inter Tight. */
[class*="uppercase"] {
  font-feature-settings: 'kern' 1, 'liga' 1, 'cpsp' 1;
}


/* Animated gradient background */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(196, 163, 90, 0.1); }
  50% { box-shadow: 0 0 40px rgba(196, 163, 90, 0.25); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes typing-dots {
  0%, 20% { opacity: 0.2; }
  50% { opacity: 1; }
  80%, 100% { opacity: 0.2; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(196, 163, 90, 0.2); }
  50% { border-color: rgba(196, 163, 90, 0.5); }
}

@keyframes celebrate {
  0% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(0.95); }
  45% { transform: scale(1.05); }
  60% { transform: scale(1); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes revealBar {
  from { width: 0%; }
}

@keyframes numberCount {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

/* Base animations */
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.7s ease-out forwards; }
.animate-slide-right { animation: slideInRight 0.5s ease-out forwards; }
.animate-slide-left { animation: slideInLeft 0.5s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.4s ease-out forwards; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-celebrate { animation: celebrate 0.6s ease-out; }
.animate-border-glow { animation: borderGlow 2s ease-in-out infinite; }

/* Typing indicator */
.typing-dot { animation: typing-dots 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Shimmer loading effect */
.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(196, 163, 90, 0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Particle canvas */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Glass morphism cards */
.glass {
  background: rgba(26, 26, 46, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(212, 208, 198, 0.08);
}

.glass-hover:hover {
  background: rgba(26, 26, 46, 0.75);
  border-color: rgba(196, 163, 90, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 60px rgba(196, 163, 90, 0.05);
}

/* Stimulus cards */
.stimulus-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.stimulus-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 80px rgba(196, 163, 90, 0.06);
}

.stimulus-card:active {
  transform: translateY(-1px);
}

/* Chat scrollbar */
.chat-scroll::-webkit-scrollbar { width: 3px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; }
.chat-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* Score bar animation */
.score-bar {
  transition: width 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.score-bar-reveal {
  animation: revealBar 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Score number animation */
.score-number {
  animation: numberCount 0.6s ease-out forwards;
}

/* Input focus glow */
.input-glow:focus {
  box-shadow: 0 0 0 2px rgba(196, 163, 90, 0.25), 0 0 30px rgba(196, 163, 90, 0.05);
}

/* Message entrance - different for user vs socrates */
.message-user { animation: slideInRight 0.4s ease-out forwards; }
.message-socrates { animation: slideInLeft 0.5s ease-out forwards; }
.message-system { animation: fadeIn 0.6s ease-out forwards; }

/* Premium hover transitions */
.stimulus-card .font-serif { transition: color 0.2s ease; }
.stimulus-card:hover .font-serif { color: #C4A35A; }

/* Smooth view transitions */
.view { animation: fadeIn 0.3s ease-out; }

/* Better focus states */
textarea:focus { background: rgba(232, 230, 223, 0.04); }

/* Analysis score card entrance refinement */
.glass { transition: border-color 0.3s ease, background 0.3s ease; }

/* Typewriter effect */
.typewriter-char {
  opacity: 0;
  display: inline;
  animation: fadeIn 0.03s ease forwards;
}

/* Session complete overlay */
.session-complete-overlay {
  animation: fadeIn 0.8s ease-out forwards;
}

/* Radar chart container */
.radar-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/* Streak badge */
.streak-badge {
  position: relative;
  overflow: hidden;
}

.streak-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

/* Navigation active indicator */
.nav-active {
  position: relative;
}

.nav-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #C4A35A;
  border-radius: 1px;
}

/* View transitions */
.view { position: relative; }

/* Ambient glow orbs */
.ambient-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  animation: glowPulse 8s ease-in-out infinite;
}

/* Tooltip */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tooltip-content {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: all 0.2s ease;
}

/* Exchange dot pulse */
.dot-active {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

/* Confetti particle */
.confetti {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
}

/* =====================================================================
   LANDING REDESIGN — tokens, text tiers, a11y, motion safety (2026)
   ===================================================================== */
:root {
  /* Spacing scale (8pt base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  /* Section rhythm (replaces ad-hoc py-12/24/32) */
  --section-y: clamp(5rem, 10vw, 8rem);
  --section-y-tight: clamp(3rem, 6vw, 4.5rem);
  /* Container measures */
  --measure-prose: 680px;
  --container: 1120px;
  --container-wide: 1280px;
  /* Motion */
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Screen-reader-only content (visually hidden, still announced) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip-to-content link: hidden until focused, then pinned top-left */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 400;
  background: #C4A35A; color: #0F0F1A; font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: 8px;
  transition: top 150ms ease;
}
.skip-link:focus { top: 12px; outline: 2px solid #0F0F1A; outline-offset: 2px; }

/* View containers get focus programmatically on SPA nav — don't show a box */
.view-container:focus { outline: none; }

/* Semantic text tiers — all AA-compliant on deep-900 (#0F0F1A).
   Rule: no text below .text-muted. Replaces scattered /30–/50 opacities. */
.text-primary   { color: #F5F4F0; }                    /* marble-100  ~13:1 */
.text-body      { color: #D4D0C6; }                    /* marble-300  ~12:1 */
.text-secondary { color: rgba(212, 208, 198, 0.82); }  /* ~7:1 */
.text-muted     { color: rgba(212, 208, 198, 0.64); }  /* ~4.8:1 (AA floor) */

/* Layout helpers */
.section        { padding-block: var(--section-y); }
.section-tight  { padding-block: var(--section-y-tight); }
.measure        { max-width: var(--measure-prose); margin-inline: auto; }

/* Headings/prose refinement */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Focus visibility on every interactive element (fixes keyboard a11y) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(196, 163, 90, 0.85);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Persistent floating CTA — brand-neutral, appears after the hero */
.floating-cta {
  position: fixed;
  right: clamp(16px, 4vw, 40px);
  bottom: clamp(16px, 4vw, 40px);
  z-index: 100;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  background: #C4A35A; color: #0F0F1A;
  font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(196,163,90,.3);
  opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background var(--dur-fast) ease;
}
.floating-cta.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.floating-cta:hover { background: #A8893E; transform: translateY(-2px) scale(1); }

/* Reduced motion — collapse decorative motion; never ship hidden content */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .ambient-orb, #particle-canvas, .animate-float,
  .animate-pulse-glow, .gradient-text-animate { animation: none !important; }
  .floating-cta { transition: none; }
}