/* Gruntilda-inspired theme overrides */
/* Palette & tokens */
:root {
  --bg-0: #0b0a10;
  /* near-black */
  --bg-1: #141220;
  /* deep purple-black */
  --bg-2: #1b1630;
  /* dungeon purple */
  --ink-0: #e6e6f0;
  /* light text */
  --ink-1: #bfbcd9;
  /* muted text */
  --accent: #6cf700;
  /* toxic green */
  --accent-2: #7d35ff;
  /* witchy purple */
  --accent-3: #00ff9a;
  /* spectral mint */
  --border: #3cff00;
  /* neon edge */
  --shadow: rgba(0, 0, 0, 0.6);
}

html,
body {
  background: radial-gradient(1200px 600px at 70% -10%, rgba(108, 247, 0, 0.12), transparent 60%),
    radial-gradient(900px 500px at 10% -5%, rgba(125, 53, 255, 0.14), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-0));
  color: var(--ink-0);
}

body {
  position: relative;
}

/* Typography */
body,
.post-description {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--ink-0);
}

.sidebar h1,
.brand-title,
.nav-item h1 {
  font-family: "Creepster", system-ui, sans-serif;
  letter-spacing: 0.5px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(108, 247, 0, 0.35), 0 2px 0 #092400;
}

.post-title {
  font-family: "Creepster", system-ui, sans-serif;
  letter-spacing: 0.5px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(108, 247, 0, 0.35), 0 2px 0 #092400;
}

.sidebar .post-title {
  font-size: 2.4em;
}

/* Links & buttons */
a,
.post a,
.nav-item a.btn {
  color: var(--accent);
}

a:hover,
a:focus {
  color: var(--accent-3);
  text-decoration: none;
}

.nav-item a.btn {
  border: 2px solid var(--border);
  color: #0b1600;
  background: linear-gradient(180deg, rgba(108, 247, 0, 0.9), rgba(60, 255, 0, 0.9));
  box-shadow: 0 0 0 0 rgba(108, 247, 0, 0.6), 0 6px 18px -6px rgba(108, 247, 0, 0.45);
  transition: transform .15s ease, box-shadow .3s ease, filter .2s ease;
}

.nav-item a.btn:hover,
.nav-item a.btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 12px 2px rgba(108, 247, 0, 0.45), 0 14px 22px -10px rgba(108, 247, 0, 0.5);
  filter: saturate(1.15);
}

/* Sidebar */
.sidebar {
  background: transparent;
  border-right: none;
  z-index: 1; /* above fog */
}

.header {
  margin: 3em auto;
}

/* Content area */
.content {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2) 120%);
  position: relative;
  z-index: 1;
  /* above fog */
}

/* Subtitle utility (used for small tagline under title) */
.subtitle {
  margin: 0;
  font-style: italic;
  color: var(--ink-1);
}

/* Posts as stone slabs with neon rune edges */
.post {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.0));
  border-radius: 14px;
  padding: 1em;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(60, 255, 0, 0.18);
}

.post::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  border: 2px solid transparent;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  /* creates an inner neon frame */
  background: linear-gradient(45deg, rgba(60, 255, 0, 0.9), rgba(125, 53, 255, 0.9)) border-box;
  opacity: 0.18;
}

.post:hover::before {
  opacity: 0.35;
}

.post-header {
  transform: none;
}

.post-title {
  color: var(--accent);
  margin-bottom: 0.1em;
}

.post-meta {
  color: var(--ink-1);
}

.post-description {
  color: var(--ink-0);
}

/* Tilt accents on headings */
.tilt {
  transform: rotate(-2deg) skew(-1deg);
}

/* Fog layers */
.fog {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* behind layout */
  opacity: 0.25;
}

.fog-1 {
  background: radial-gradient(60% 25% at 50% -5%, rgba(124, 255, 0, 0.08), transparent 70%),
    radial-gradient(40% 20% at 10% 10%, rgba(125, 53, 255, 0.08), transparent 70%);
  animation: drift1 24s linear infinite;
}

.fog-2 {
  background: radial-gradient(50% 25% at 80% 0%, rgba(108, 247, 0, 0.06), transparent 70%),
    radial-gradient(40% 20% at 20% 5%, rgba(0, 255, 154, 0.06), transparent 70%);
  mix-blend-mode: screen;
  animation: drift2 36s linear infinite;
}

/* Extra fog depth */
.fog-3 {
  background: radial-gradient(60% 30% at 50% 105%, rgba(125, 53, 255, 0.06), transparent 70%),
    radial-gradient(50% 25% at 90% 80%, rgba(108, 247, 0, 0.05), transparent 75%);
  mix-blend-mode: screen;
  animation: drift3 48s linear infinite;
}

@keyframes drift1 {
  from {
    transform: translateX(-2%);
  }

  to {
    transform: translateX(2%);
  }
}

@keyframes drift2 {
  from {
    transform: translateX(2%);
  }

  to {
    transform: translateX(-2%);
  }
}

@keyframes drift3 {
  from {
    transform: translateY(1%);
  }

  to {
    transform: translateY(-1%);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fog {
    animation: none !important;
  }
  .grain,
  .lightning.flash,
  .post::before,
  .post-title .post-link:hover,
  .post-title .post-link:focus,
  .cursor-glow {
    animation: none !important;
  }
}

/* Lightning overlay */
.lightning {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* above content for dramatic flash */
  background: radial-gradient(120% 80% at 50% 10%, rgba(255,255,255,0.0), rgba(255,255,255,0.0)),
              radial-gradient(80% 40% at 20% 0%, rgba(164, 255, 238, 0.0), rgba(164, 255, 238, 0.0));
  opacity: 0;
}

.lightning.flash {
  animation: lightningFlash 0.9s ease-out;
}

@keyframes lightningFlash {
  0% { opacity: 0; }
  5% { opacity: 1; }
  10% { opacity: 0.2; }
  15% { opacity: 0.9; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

/* Viewport cobwebs in outer corners */
.cobwebs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* below content (1), above fog (-1) */
}
.cobwebs .web {
  position: absolute;
  width: 240px;
  height: 240px;
  opacity: 0.12;
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.15) 0 2deg, transparent 2deg 8deg),
    repeating-radial-gradient(circle, rgba(255,255,255,0.12) 0 10px, transparent 10px 20px);
}
.cobwebs .web.tl { top: 0; left: 0; mask: radial-gradient(200px 200px at 0 0, #000 45%, transparent 46%); }
.cobwebs .web.tr { top: 0; right: 0; mask: radial-gradient(200px 200px at 100% 0, #000 45%, transparent 46%); }
.cobwebs .web.bl { bottom: 0; left: 0; mask: radial-gradient(200px 200px at 0 100%, #000 45%, transparent 46%); }
.cobwebs .web.br { bottom: 0; right: 0; mask: radial-gradient(200px 200px at 100% 100%, #000 45%, transparent 46%); }

/* Film grain overlay (subtle) */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* above fog (-1), below content (1) */
  opacity: 0.06;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 2px);
  background-size: 200px 200px, 180px 180px;
  animation: grainShift 2.2s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1%, 1%); }
  40%  { transform: translate(1%, -0.5%); }
  60%  { transform: translate(0.5%, 0.5%); }
  80%  { transform: translate(-0.5%, -1%); }
  100% { transform: translate(0, 0); }
}

/* Neon rune pulse on post frames */
.post::before {
  animation: neonPulse 4.5s ease-in-out infinite;
}

@keyframes neonPulse {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.32; }
}

/* Pause pulse and brighten on hover for clarity */
.post:hover::before {
  animation-play-state: paused;
  opacity: 0.35;
}

/* Portal hover effect on posts */
.post {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.post:hover {
  transform: perspective(800px) translateZ(6px) scale(1.01);
  box-shadow: 0 12px 26px -18px rgba(0,0,0,0.6), 0 0 24px -12px rgba(124,255,0,0.25);
}
.post:hover {
  background: radial-gradient(160px 80px at 20% 10%, rgba(124,255,0,0.06), transparent 60%),
              radial-gradient(140px 70px at 80% 20%, rgba(125,53,255,0.05), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
}

/* Spooky title flicker on hover/focus */
.post-title .post-link:hover,
.post-title .post-link:focus {
  text-shadow:
    0 0 8px rgba(108,247,0,0.35),
    0 0 18px rgba(125,53,255,0.25);
  animation: titleFlicker 0.9s ease-in-out infinite;
}

/* Remove border around header title link and override nav hover border */
.sidebar .post-title .post-link {
  border: 0 !important;
  padding: 0;
}
.sidebar .post-title .post-link:hover,
.sidebar .post-title .post-link:focus {
  border: 0 !important;
}

@keyframes titleFlicker {
  0% { filter: brightness(1); transform: skewX(0deg); }
  30% { filter: brightness(1.1); }
  40% { filter: brightness(0.9); }
  50% { filter: brightness(1.2); transform: skewX(-1deg); }
  60% { filter: brightness(0.85); }
  75% { filter: brightness(1.15); transform: skewX(1deg); }
  100% { filter: brightness(1); transform: skewX(0deg); }
}

/* Remove bat doodad on post title links */
.post a.post-link {
  position: relative;
}

/* Disable decorative pseudo-element that showed a bat to the left */
.post a.post-link::after {
  content: none !important;
}

/* Footer and small elements */
.footer a {
  color: var(--ink-1);
}

.content-subhead {
  color: var(--ink-1);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Responsive fixes */
@media (min-width: 48em) {
  .header {
    margin: 35% 2em 0;
  }

  .sidebar {
    box-shadow: none;
  }
}