/* ============================================================
   textures.css — Atmospheric CSS Textures & Decorative Elements
   Vampires vs. Werewolves
   ============================================================
   Usage:
     .texture-stone     — dark stone wall background
     .texture-parchment — aged parchment / lore book
     .divider-arch      — gothic arch section divider (::before pseudo)
     .divider-blood     — blood drip divider
     .divider-thorns    — thorny vine divider
   ============================================================ */

/* ── Dark Stone Texture ──────────────────────────────────────
   SVG noise overlay on dark stone gradient.
   Apply to section backgrounds, card panels, etc.
   ─────────────────────────────────────────────────────────── */
.texture-stone {
  background-color: var(--color-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(30,28,40,0.95) 0%, rgba(18,18,26,0.98) 100%);
  background-size: 200px 200px, cover;
  background-repeat: repeat, no-repeat;
}

/* Finer grain variant for card interiors */
.texture-stone-fine {
  background-color: var(--color-surface-2);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface) 100%);
  background-size: 150px 150px, cover;
  background-repeat: repeat, no-repeat;
}

/* ── Parchment Texture ───────────────────────────────────────
   Aged parchment look for lore sections, quest descriptions,
   tooltips, and story panels.
   ─────────────────────────────────────────────────────────── */
.texture-parchment {
  background-color: #1a1208;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.6 0 0 0 0.15  0 0.5 0 0 0.10  0 0 0.3 0 0.05  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #1e1508 0%, #141008 50%, #1a1408 100%);
  background-size: 300px 300px, cover;
  background-repeat: repeat, no-repeat;
  color: #c8b89a;
  border: 1px solid rgba(180, 140, 60, 0.2);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}

/* Worn edges effect for parchment */
.texture-parchment::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 120% at 0% 0%,   rgba(0,0,0,0.3) 0%, transparent 40%),
    radial-gradient(ellipse 120% 120% at 100% 0%,  rgba(0,0,0,0.2) 0%, transparent 40%),
    radial-gradient(ellipse 120% 120% at 0% 100%,  rgba(0,0,0,0.2) 0%, transparent 40%),
    radial-gradient(ellipse 120% 120% at 100% 100%,rgba(0,0,0,0.3) 0%, transparent 40%);
  border-radius: inherit;
  z-index: 0;
}
.texture-parchment > * { position: relative; z-index: 1; }

/* ── Section Dividers ─────────────────────────────────────── */

/* Gothic arch divider — centered decorative SVG separator */
.divider-arch {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--space-xl) 0;
  color: var(--color-border);
}
.divider-arch::before,
.divider-arch::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
.divider-arch-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M20 0 C10 0 2 6 2 14 L2 22 L6 22 L6 14 C6 9 12.3 4 20 4 C27.7 4 34 9 34 14 L34 22 L38 22 L38 14 C38 6 30 0 20 0Z' fill='%232a2a3a'/%3E%3Cpath d='M20 2 C11 2 4 7.5 4 14 L4 21 L6 21 L6 14 C6 8.5 12.3 6 20 6 C27.7 6 34 8.5 34 14 L34 21 L36 21 L36 14 C36 7.5 29 2 20 2Z' fill='none' stroke='%234a4a6a' stroke-width='0.5'/%3E%3Ccircle cx='20' cy='14' r='2' fill='%238b0000' opacity='0.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Compact gothic divider with cross motif */
.divider-cross {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: var(--space-lg) 0;
  user-select: none;
}
.divider-cross::before,
.divider-cross::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,0,0,0.4), transparent);
}
.divider-cross-icon {
  font-size: 0.75rem;
  color: rgba(139, 0, 0, 0.6);
  letter-spacing: 0.3em;
}

/* Blood drip divider — decorative bottom border for hero/header sections */
.divider-blood-bottom {
  position: relative;
  overflow: visible;
}
.divider-blood-bottom::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0 Q10 0 15 4 Q20 8 25 4 Q30 0 40 0 Q50 0 55 5 Q58 9 62 5 Q66 0 80 0 Q90 0 94 3 Q98 7 102 3 Q106 0 120 0 Q130 0 136 6 Q140 10 145 6 Q150 0 165 0 Q175 0 180 4 Q185 8 190 4 Q195 0 200 0 L200 12 L0 12 Z' fill='%238b0000' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 12px;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 1;
}

/* Thorny vine divider — decorative horizontal separator */
.divider-vine {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: var(--space-xl) auto;
  max-width: 600px;
  opacity: 0.5;
}
.divider-vine::before,
.divider-vine::after {
  content: '';
  flex: 1;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8'%3E%3Cpath d='M0 4 Q10 0 20 4 Q30 8 40 4 Q50 0 60 4' fill='none' stroke='%232a2a3a' stroke-width='1'/%3E%3Cpath d='M15 4 L15 1 M30 4 L30 7 M45 4 L45 1' stroke='%232a2a3a' stroke-width='0.8'/%3E%3C/svg%3E");
  background-size: 60px 8px;
  background-repeat: repeat-x;
  background-position: center;
}
.divider-vine-center {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--color-border);
}

/* ── Background Texture Utilities ────────────────────────────
   Lightweight noise overlay for any surface.
   Usage: add class to any element to get a subtle grain effect.
   ─────────────────────────────────────────────────────────── */

/* Very subtle grain for standard cards */
.grain-sm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  background-repeat: repeat;
}

/* Medium grain for hero sections */
.grain-md {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
}

/* ── Lore Card (parchment-styled content block) ────────────── */
.lore-card {
  position: relative;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(180, 140, 60, 0.25);
}
.lore-card.texture-parchment {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
}
.lore-card .lore-title {
  font-family: var(--font-gothic);
  font-size: var(--text-lg);
  color: var(--color-gold);
  margin-bottom: var(--space-md);
  text-align: center;
  letter-spacing: 0.05em;
}

/* ── Starfield (CSS-only, no JS) ─────────────────────────────
   Layered radial gradients simulating star clusters.
   Lightweight alternative to tsParticles for inner pages.
   ─────────────────────────────────────────────────────────── */
.bg-starfield {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(1px 1px at 10% 15%,  rgba(200,180,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%,  rgba(200,200,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 8%,   rgba(180,180,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 30%,  rgba(220,200,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 55%,  rgba(200,180,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 12%,  rgba(180,200,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 70%,   rgba(200,180,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 75%,  rgba(180,180,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 80%,  rgba(200,200,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 85%,  rgba(220,180,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 90%,  rgba(180,200,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 50%,  rgba(200,180,255,0.45) 0%, transparent 100%),
    radial-gradient(2px 2px at 45% 20%,  rgba(255,240,200,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 80% 40%,  rgba(255,240,200,0.25) 0%, transparent 100%),
    radial-gradient(2px 2px at 20% 60%,  rgba(255,240,200,0.3) 0%, transparent 100%),
    radial-gradient(120px 80px at 30% 20%, rgba(60,20,80,0.15) 0%, transparent 100%),
    radial-gradient(160px 100px at 70% 60%, rgba(30,20,60,0.12) 0%, transparent 100%);
}

/* Subtle twinkling animation (respects reduced-motion) */
@keyframes star-twinkle {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1.0; }
}
@media (prefers-reduced-motion: no-preference) {
  .bg-starfield-animated {
    animation: star-twinkle 4s ease-in-out infinite;
  }
}