:root {
  --crimson: #8B0000;
  --deep-crimson: #5C0000;
  --gold: #FFD700;
  --dark-gold: #B8960F;
  --parchment: #FFF8DC;
  --dark-parchment: #F5E6B8;
  --near-black: #0D0A07;
  --dark-bg: #1a1410;
  --card-bg: #1E1A14;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--near-black);
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  color: var(--parchment);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background atmosphere */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(139,0,0,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(139,0,0,0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Title gradient animation */
@keyframes titleGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.title-gradient {
  background: linear-gradient(
    270deg,
    #FFD700, #FF6B00, #8B0000, #FF6B00, #FFD700
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleGradient 4s ease infinite;
}

/* Flame flicker */
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  25% { transform: scale(1.1) rotate(2deg); opacity: 0.8; }
  50% { transform: scale(0.95) rotate(-1deg); opacity: 1; }
  75% { transform: scale(1.05) rotate(1deg); opacity: 0.9; }
}

.flame {
  display: inline-block;
  animation: flameFlicker 0.5s ease-in-out infinite;
}

.flame-delay {
  animation-delay: 0.15s;
}

/* Glowing input */
@keyframes inputGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(255,215,0,0.3), 0 0 30px rgba(139,0,0,0.2); border-color: var(--gold); }
  50% { box-shadow: 0 0 20px rgba(139,0,0,0.4), 0 0 40px rgba(139,0,0,0.3); border-color: var(--crimson); }
}

.input-glow {
  animation: inputGlow 3s ease-in-out infinite;
}

/* Button styling */
.analyze-btn {
  background: radial-gradient(circle at 30% 30%, #B22222, #5C0000);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.analyze-btn::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}

.analyze-btn:hover::before {
  opacity: 1;
}

.analyze-btn:hover {
  box-shadow: 0 0 30px rgba(255,215,0,0.4), 0 0 60px rgba(139,0,0,0.3);
  transform: scale(1.02);
}

.analyze-btn:active {
  transform: scale(0.98);
}

/* Screen shake */
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-3px, -2px) rotate(-0.5deg); }
  20% { transform: translate(3px, 1px) rotate(0.5deg); }
  30% { transform: translate(-2px, 3px) rotate(-0.3deg); }
  40% { transform: translate(2px, -1px) rotate(0.3deg); }
  50% { transform: translate(-1px, 2px) rotate(-0.2deg); }
  60% { transform: translate(3px, -2px) rotate(0.4deg); }
  70% { transform: translate(-3px, 1px) rotate(-0.4deg); }
  80% { transform: translate(1px, -3px) rotate(0.2deg); }
  90% { transform: translate(-2px, 2px) rotate(-0.3deg); }
}

.shake {
  animation: screenShake 0.5s ease-in-out;
}

.shake-violent {
  animation: screenShake 0.3s ease-in-out infinite;
}

/* Progress bar scroll unfurl */
@keyframes unfurl {
  0% { width: 0%; }
  100% { width: 100%; }
}

.progress-fill {
  background: linear-gradient(90deg, var(--dark-gold), var(--gold), var(--dark-gold));
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s ease-in-out;
}

/* Floating particles */
@keyframes floatUp {
  0% { 
    transform: translateY(0) translateX(0) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-120vh) translateX(var(--drift, 20px)) scale(0.3); 
    opacity: 0; 
  }
}

.particle {
  position: fixed;
  bottom: -50px;
  animation: floatUp var(--duration, 4s) ease-out forwards;
  pointer-events: none;
  z-index: 100;
  font-size: var(--size, 24px);
}

/* Golden rays */
@keyframes goldenRays {
  0% { transform: rotate(0deg); opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { transform: rotate(360deg); opacity: 0.3; }
}

.golden-rays {
  position: fixed;
  top: 50%; left: 50%;
  width: 200vw; height: 200vh;
  transform-origin: center;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,215,0,0.1) 10deg, transparent 20deg,
    transparent 30deg, rgba(255,215,0,0.08) 40deg, transparent 50deg,
    transparent 60deg, rgba(255,215,0,0.12) 70deg, transparent 80deg,
    transparent 90deg, rgba(255,215,0,0.06) 100deg, transparent 110deg,
    transparent 120deg, rgba(255,215,0,0.1) 130deg, transparent 140deg,
    transparent 150deg, rgba(255,215,0,0.08) 160deg, transparent 170deg,
    transparent 180deg, rgba(255,215,0,0.1) 190deg, transparent 200deg,
    transparent 210deg, rgba(255,215,0,0.06) 220deg, transparent 230deg,
    transparent 240deg, rgba(255,215,0,0.12) 250deg, transparent 260deg,
    transparent 270deg, rgba(255,215,0,0.08) 280deg, transparent 290deg,
    transparent 300deg, rgba(255,215,0,0.1) 310deg, transparent 320deg,
    transparent 330deg, rgba(255,215,0,0.06) 340deg, transparent 360deg
  );
  animation: goldenRays 20s linear infinite;
  pointer-events: none;
  z-index: 0;
  margin-left: -100vw;
  margin-top: -100vh;
}

/* Hellfire background */
@keyframes hellfire {
  0%, 100% { background-position: 0% 100%; }
  50% { background-position: 100% 100%; }
}

.hellfire-bg {
  background: 
    radial-gradient(ellipse at 50% 120%, rgba(255,69,0,0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 100%, rgba(139,0,0,0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 100%, rgba(178,34,34,0.4) 0%, transparent 40%);
  animation: hellfire 3s ease-in-out infinite;
}

/* Blessed background */
.blessed-bg {
  background: 
    radial-gradient(ellipse at 50% -20%, rgba(255,215,0,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(255,248,220,0.05) 0%, transparent 50%);
}

/* Red flicker */
@keyframes redFlicker {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.3; }
}

.red-flicker {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(139,0,0,0.2);
  animation: redFlicker 0.3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Pulsing text effects */
@keyframes pulseGold {
  0%, 100% { text-shadow: 0 0 20px rgba(255,215,0,0.5), 0 0 40px rgba(255,215,0,0.3); }
  50% { text-shadow: 0 0 40px rgba(255,215,0,0.8), 0 0 80px rgba(255,215,0,0.5), 0 0 120px rgba(255,215,0,0.3); }
}

@keyframes pulseRed {
  0%, 100% { text-shadow: 0 0 20px rgba(255,0,0,0.5), 0 0 40px rgba(139,0,0,0.3); }
  50% { text-shadow: 0 0 40px rgba(255,0,0,0.8), 0 0 80px rgba(139,0,0,0.5), 0 0 120px rgba(255,69,0,0.3); }
}

.pulse-gold { animation: pulseGold 2s ease-in-out infinite; }
.pulse-red { animation: pulseRed 1s ease-in-out infinite; }

/* Score meter */
@keyframes fillMeter {
  0% { width: 0%; }
}

.meter-fill {
  animation: fillMeter 1.5s ease-out;
}

/* Ornate border */
.ornate-border {
  border: 3px double var(--gold);
  box-shadow: 
    inset 0 0 0 1px rgba(139,0,0,0.3),
    0 0 15px rgba(139,0,0,0.2);
  position: relative;
}

.ornate-border::before {
  content: '✦';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 16px;
  background: var(--card-bg);
  padding: 0 8px;
}

/* Fade in */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Banner drop */
@keyframes bannerDrop {
  0% { transform: translateY(-100%); opacity: 0; }
  60% { transform: translateY(10px); }
  100% { transform: translateY(0); opacity: 1; }
}

.banner-drop {
  animation: bannerDrop 0.8s ease-out;
}

/* Heart rate animation */
@keyframes heartRate {
  0% { d: path("M 0 50 L 20 50 L 25 50 L 30 50 L 35 50 L 40 50 L 60 50 L 80 50 L 100 50"); }
  100% { d: path("M 0 50 L 20 50 L 25 30 L 30 70 L 35 20 L 40 80 L 45 50 L 60 50 L 80 50 L 100 50"); }
}

/* Confetti */
@keyframes confettiFall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: fixed;
  top: -10px;
  width: 10px;
  height: 10px;
  animation: confettiFall var(--fall-duration, 3s) ease-in forwards;
  animation-delay: var(--fall-delay, 0s);
  pointer-events: none;
  z-index: 200;
}

/* Letter by letter reveal for Maksim meltdown */
@keyframes letterReveal {
  0% { opacity: 0; transform: scale(2); color: #FF0000; }
  50% { opacity: 1; transform: scale(1.5); color: #FF4500; }
  100% { opacity: 1; transform: scale(1); color: var(--crimson); }
}

.letter-reveal {
  display: inline-block;
  animation: letterReveal 0.4s ease-out forwards;
  opacity: 0;
}

/* Status indicator blink */
@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-blink {
  animation: statusBlink 2s ease-in-out infinite;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--near-black); }
::-webkit-scrollbar-thumb { background: var(--crimson); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #B22222; }

/* Parchment card */
.parchment-card {
  background: linear-gradient(135deg, #2A231A 0%, #1E1A14 50%, #2A231A 100%);
  border: 2px solid rgba(184,150,15,0.3);
  box-shadow: 
    0 0 30px rgba(0,0,0,0.5),
    inset 0 0 60px rgba(0,0,0,0.3);
}

/* Panic button */
@keyframes panicPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,0,0,0.5); }
  50% { box-shadow: 0 0 30px rgba(255,0,0,0.8), 0 0 60px rgba(255,0,0,0.4); }
}

.panic-btn {
  animation: panicPulse 0.5s ease-in-out infinite;
  background: linear-gradient(135deg, #FF0000, #8B0000);
  border: 2px solid #FF4444;
}

/* Calming overlay */
@keyframes calmBreath {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.02); opacity: 1; }
}

.calm-overlay {
  animation: calmBreath 4s ease-in-out infinite;
}

/* Prophetic warning */
@keyframes slideInWarning {
  0% { transform: translateX(-100%); opacity: 0; }
  10% { transform: translateX(0); opacity: 1; }
  90% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.prophetic-warning {
  animation: slideInWarning 8s ease-in-out forwards;
}

/* Analysis bg shift */
@keyframes bgToOminous {
  0% { background-color: var(--near-black); }
  50% { background-color: #1a0505; }
  100% { background-color: var(--near-black); }
}

.bg-ominous {
  animation: bgToOminous 6s ease-in-out;
}

/* Spinner for analysis */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}

/* Copy feedback */
@keyframes copyFlash {
  0% { background-color: rgba(255,215,0,0.3); }
  100% { background-color: transparent; }
}

.copy-flash {
  animation: copyFlash 0.5s ease-out;
}