/* Theme-specific overrides and effects */
html[data-theme="arachne"] .facecard-eye-mark {
  opacity: 1;
}

@keyframes arachneGrainShift {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 2px -3px, -3px 2px, 1px -2px;
  }
}

html[data-theme="arachne"] .header-name-block,
html[data-theme="arachne"] .shell-content {
  position: relative;
}

html[data-theme="arachne"] .header-name-block::after,
html[data-theme="arachne"] .shell-content::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.34;
  mix-blend-mode: hard-light;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(227, 12, 20, 0.38) 0 0.95px, transparent 1.2px),
    radial-gradient(circle at 75% 62%, rgba(255, 255, 255, 0.18) 0 0.8px, transparent 1.1px),
    radial-gradient(circle at 45% 85%, rgba(227, 12, 20, 0.34) 0 0.95px, transparent 1.2px);
  background-size: 5px 5px, 6px 6px, 5px 5px;
  animation: arachneGrainShift 5.5s steps(10, end) infinite;
}

html[data-theme="arachne"] .header-name-block::before,
html[data-theme="arachne"] .shell-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image:
    linear-gradient(
      0deg,
      rgba(227, 12, 20, 0.18) 0%,
      rgba(227, 12, 20, 0.02) 25%,
      rgba(255, 255, 255, 0.08) 45%,
      rgba(227, 12, 20, 0.03) 65%,
      rgba(227, 12, 20, 0.16) 100%
    );
}

html[data-theme="arachne"] .site-title,
html[data-theme="arachne"] .site-label,
html[data-theme="arachne"] .section-title,
html[data-theme="arachne"] .post-card h3,
html[data-theme="arachne"] .journal-entry-card-title,
html[data-theme="arachne"] .journal-entry-title,
html[data-theme="arachne"] .journal-modal-title,
html[data-theme="arachne"] .journal-entry-back,
html[data-theme="arachne"] .site-nav button,
html[data-theme="arachne"] .tab-button {
  text-shadow:
    0.85px 0 rgba(227, 12, 20, 0.88),
    -0.85px 0 rgba(10, 0, 0, 0.98),
    0.2px 0.15px 1.4px rgba(227, 12, 20, 0.78);
}

html[data-theme="arachne"] .box-section p,
html[data-theme="arachne"] .meta-line,
html[data-theme="arachne"] .post-date,
html[data-theme="arachne"] .journal-entry-card-date,
html[data-theme="arachne"] .journal-entry-date,
html[data-theme="arachne"] .journal-modal-date,
html[data-theme="arachne"] .post-card a {
  text-shadow:
    0.55px 0 rgba(227, 12, 20, 0.62),
    -0.55px 0 rgba(10, 0, 0, 0.94),
    0 0 0.8px rgba(227, 12, 20, 0.36);
}