* { box-sizing: border-box; }
html, body { margin: 0; background: #000; }

.creepy-title { font-family: 'Nosifer', cursive; text-shadow: 0 0 18px rgba(153,27,27,0.6), 0 0 40px rgba(120,0,0,0.4); line-height: 1.1; }
.fell { font-family: 'IM Fell English', serif; }

/* endless void background */
.void {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(40,0,0,0.35) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(ellipse at 50% 50%, #050000 0%, #000 70%);
}
/* drifting fog */
.void::before {
  content: '';
  position: absolute; inset: -50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(60,60,70,0.05), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(50,20,20,0.06), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(40,40,50,0.05), transparent 40%);
  animation: fog 30s linear infinite alternate;
  pointer-events: none; z-index: 1;
}
/* vignette + grain */
.void::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.5;
  animation: grain 0.4s steps(3) infinite, vignettePulse 6s ease-in-out infinite;
  pointer-events: none; z-index: 2;
}
@keyframes fog { from { transform: translate(0,0); } to { transform: translate(4%, -3%); } }
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-4px,3px)} 66%{transform:translate(3px,-2px)} 100%{transform:translate(0,0)} }
@keyframes vignettePulse { 0%,100%{opacity:0.45} 50%{opacity:0.6} }

.flame-glow {
  position: fixed; top: 20%; left: 50%; width: 500px; height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(120,20,10,0.14), transparent 65%);
  animation: flame 3.5s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes flame { 0%,100%{opacity:0.5; transform:translateX(-50%) scale(1)} 30%{opacity:0.8} 55%{opacity:0.35} 75%{opacity:0.7; transform:translateX(-50%) scale(1.05)} }

.flicker { animation: flicker 5s infinite; }
@keyframes flicker {
  0%,19%,21%,23%,80%,100% { opacity: 1; }
  20% { opacity: 0.25; }
  22% { opacity: 0.6; }
  81% { opacity: 0.3; }
  82% { opacity: 0.9; }
}

.ritual-card {
  background: linear-gradient(160deg, rgba(15,8,8,0.85), rgba(5,0,0,0.9));
  border: 1px solid rgba(80,20,20,0.4);
  box-shadow: 0 0 60px rgba(80,0,0,0.25), inset 0 0 40px rgba(40,0,0,0.4);
  backdrop-filter: blur(2px);
}

.focus-glow:focus { box-shadow: 0 0 14px rgba(153,27,27,0.5); background: rgba(20,0,0,0.6); }
.err { color: #b91c1c; font-family: 'IM Fell English', serif; font-style: italic; font-size: 0.85rem; margin-top: 0.4rem; animation: shudder 0.4s; }
@keyframes shudder { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

.attend-opt:hover { border-color: rgba(153,27,27,0.7); color: #f87171; }

.stepper {
  width: 42px; height: 42px; border: 1px solid rgba(80,20,20,0.5);
  background: rgba(20,0,0,0.5); color: #b91c1c; font-size: 1.3rem; line-height: 1;
  transition: all 0.2s;
}
.stepper:hover { border-color: #7f1d1d; color: #f87171; box-shadow: 0 0 12px rgba(153,27,27,0.5); }

.seal-btn {
  background: linear-gradient(180deg, #4a0505, #1a0000);
  border: 1px solid #7f1d1d;
  color: #fca5a5;
  font-family: 'IM Fell English', serif;
  animation: heartbeat 1.6s ease-in-out infinite;
  transition: all 0.3s;
}
.seal-btn:hover {
  color: #fff;
  box-shadow: 0 0 30px rgba(180,20,20,0.7), inset 0 0 20px rgba(120,0,0,0.6);
  animation: none;
}
@keyframes heartbeat {
  0%,100%{box-shadow:0 0 10px rgba(120,20,20,0.3)}
  15%{box-shadow:0 0 25px rgba(180,20,20,0.6)}
  30%{box-shadow:0 0 10px rgba(120,20,20,0.3)}
  45%{box-shadow:0 0 22px rgba(160,20,20,0.5)}
}

.whisper {
  position: fixed; z-index: 5; pointer-events: none;
  font-family: 'IM Fell English', serif; font-style: italic;
  color: rgba(180,150,150,0.35); font-size: 1.1rem;
  text-shadow: 0 0 12px rgba(100,0,0,0.5);
  animation: whisperFade 3.2s ease-in-out forwards;
}
@keyframes whisperFade { 0%{opacity:0; filter:blur(6px)} 25%{opacity:0.5; filter:blur(0)} 75%{opacity:0.4} 100%{opacity:0; filter:blur(6px)} }

.reveal-text { font-family: 'IM Fell English', serif; text-shadow: 0 0 20px rgba(120,0,0,0.5); }
.blink-cursor { animation: blink 0.9s step-end infinite; color: #7f1d1d; }
@keyframes blink { 50%{opacity:0} }

.sigil { filter: drop-shadow(0 0 8px rgba(153,27,27,0.6)); }
.sigil-spin { animation: spin 14s linear infinite; }
.sigil-glow { animation: sigilPulse 3s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sigilPulse { 0%,100%{filter:drop-shadow(0 0 6px rgba(153,27,27,0.4)); transform:scale(1)} 50%{filter:drop-shadow(0 0 22px rgba(200,20,20,0.8)); transform:scale(1.06)} }

.fade-up { animation: fadeUp 2s ease-out; }
@keyframes fadeUp { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }

#cursor-flame {
  position: fixed; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,120,60,0.8), rgba(150,20,0,0.3) 60%, transparent);
  pointer-events: none; z-index: 9999; transform: translate(-50%,-50%);
  mix-blend-mode: screen; transition: left 0.08s ease, top 0.08s ease;
  filter: blur(1px);
}

::selection { background: #7f1d1d; color: #fff; }
input::placeholder, textarea::placeholder { color: rgba(120,60,60,0.5); font-style: italic; }