/**
 * Tibia-Inspired Textures & Patterns
 * Using CSS gradients and patterns to create atmospheric textures
 */

/* === PARCHMENT TEXTURE === */
.texture-parchment,
.box-content,
.content-area {
  background-color: var(--color-bg-light, #3d2817);
  background-image:
    /* Paper grain */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    ),
    /* Aging spots */
    radial-gradient(
      circle at 20% 30%,
      rgba(61, 40, 23, 0.4) 0%,
      transparent 3%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(61, 40, 23, 0.3) 0%,
      transparent 4%
    ),
    radial-gradient(
      circle at 40% 80%,
      rgba(61, 40, 23, 0.35) 0%,
      transparent 2%
    );
  box-shadow: var(--shadow-inset, inset 0 2px 4px rgba(0, 0, 0, 0.5));
}

/* === STONE TEXTURE === */
.texture-stone,
.stone-tablet {
  background-color: var(--color-shadow, #3a2a1f);
  background-image:
    /* Stone cracks */
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 48%,
      rgba(0, 0, 0, 0.4) 49%,
      rgba(0, 0, 0, 0.4) 51%,
      transparent 52%
    ),
    /* Stone grain */
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 3px
    ),
    /* Rough surface */
    radial-gradient(
      circle at 30% 40%,
      rgba(90, 70, 50, 0.2) 0%,
      transparent 50%
    );
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.5),
    inset 0 0 5px rgba(0, 0, 0, 0.8);
}

/* === WOOD TEXTURE === */
.texture-wood,
.wood-panel {
  background-color: #2d1f17;
  background-image:
    /* Wood grain */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(0, 0, 0, 0.1) 20px,
      rgba(0, 0, 0, 0.1) 22px,
      transparent 22px,
      transparent 40px,
      rgba(0, 0, 0, 0.15) 40px,
      rgba(0, 0, 0, 0.15) 42px
    ),
    /* Wood knots */
    radial-gradient(
      ellipse at 25% 50%,
      rgba(0, 0, 0, 0.3) 0%,
      transparent 15%
    ),
    radial-gradient(
      ellipse at 75% 30%,
      rgba(0, 0, 0, 0.2) 0%,
      transparent 10%
    );
}

/* === WEATHERED METAL TEXTURE === */
.texture-metal,
.metal-border {
  background-color: var(--color-bronze-dark, #6b5437);
  background-image:
    /* Rust patches */
    radial-gradient(
      circle at 10% 20%,
      var(--color-rust, #6b4423) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      var(--color-rust, #6b4423) 0%,
      transparent 25%
    ),
    /* Scratches */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgba(0, 0, 0, 0.1) 5px,
      rgba(0, 0, 0, 0.1) 6px
    ),
    /* Metal shine */
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.2) 100%
    );
}

/* === BURNT EDGES (for scroll effects) === */
.burnt-edge {
  position: relative;
}

.burnt-edge::before,
.burnt-edge::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
}

.burnt-edge::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(107, 68, 35, 0.8) 0%,
    rgba(61, 40, 23, 0.4) 50%,
    transparent 100%
  );
  filter: blur(2px);
}

.burnt-edge::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(107, 68, 35, 0.8) 0%,
    rgba(61, 40, 23, 0.4) 50%,
    transparent 100%
  );
  filter: blur(2px);
}

/* === TORN PAPER EDGE === */
.torn-edge {
  position: relative;
  padding: var(--space-lg, 1.5rem);
}

.torn-edge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 5px,
      var(--color-bg-dark, #1a1410) 5px,
      var(--color-bg-dark, #1a1410) 10px
    );
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

/* === MAGICAL GLOW OVERLAY === */
.magical-glow {
  position: relative;
}

.magical-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(95, 61, 196, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(74, 103, 65, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
  animation: magicPulse 4s ease-in-out infinite;
}

@keyframes magicPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* === CANDLELIGHT VIGNETTE === */
.candlelight-vignette {
  position: relative;
}

.candlelight-vignette::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(10, 8, 6, 0.6) 70%,
    rgba(10, 8, 6, 0.9) 100%
  );
  pointer-events: none;
  z-index: var(--z-particles, 5);
}

/* === FOG OVERLAY === */
.fog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      ellipse at 20% 30%,
      rgba(180, 180, 180, 0.03) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 80% 70%,
      rgba(180, 180, 180, 0.04) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(180, 180, 180, 0.02) 0%,
      transparent 60%
    );
  pointer-events: none;
  z-index: var(--z-particles, 5);
  animation: fogDrift 20s ease-in-out infinite;
}

@keyframes fogDrift {
  0%, 100% {
    transform: translateX(0) translateY(0);
    opacity: 0.5;
  }
  25% {
    transform: translateX(-2%) translateY(1%);
    opacity: 0.7;
  }
  50% {
    transform: translateX(2%) translateY(-1%);
    opacity: 0.6;
  }
  75% {
    transform: translateX(-1%) translateY(2%);
    opacity: 0.8;
  }
}

/* === DUST PARTICLES BACKGROUND === */
.dust-particles {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 234, 167, 0.3), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255, 234, 167, 0.2), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 234, 167, 0.4), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 234, 167, 0.3), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255, 234, 167, 0.2), transparent);
  background-size: 200% 200%, 150% 150%, 250% 250%, 180% 180%, 220% 220%;
  background-position: 0% 0%, 50% 50%, 100% 0%, 0% 100%, 50% 0%;
  pointer-events: none;
  z-index: var(--z-particles, 5);
  opacity: 0.6;
  animation: dustFloat 30s linear infinite;
}

@keyframes dustFloat {
  0% {
    background-position: 0% 0%, 50% 50%, 100% 0%, 0% 100%, 50% 0%;
  }
  100% {
    background-position: 100% 100%, 0% 100%, 0% 100%, 100% 0%, 0% 100%;
  }
}

/* === TORCH LIGHT SPOTS === */
.torch-light {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(255, 159, 67, 0.4) 0%,
    rgba(255, 159, 67, 0.2) 30%,
    transparent 70%
  );
  pointer-events: none;
  animation: torchFlicker 3s ease-in-out infinite;
  filter: blur(20px);
}

.torch-light.top-left {
  top: -150px;
  left: -150px;
}

.torch-light.top-right {
  top: -150px;
  right: -150px;
  animation-delay: 1s;
}

.torch-light.bottom-left {
  bottom: -150px;
  left: -150px;
  animation-delay: 2s;
}

.torch-light.bottom-right {
  bottom: -150px;
  right: -150px;
  animation-delay: 1.5s;
}

@keyframes torchFlicker {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  25% {
    opacity: 0.8;
    transform: scale(1.05);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.95);
  }
  75% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* === SEAL/STAMP DECORATION === */
.wax-seal {
  position: absolute;
  width: 60px;
  height: 60px;
  background: radial-gradient(
    circle,
    var(--color-ember, #ff6348) 0%,
    var(--color-rust, #6b4423) 60%,
    var(--color-rust, #6b4423) 100%
  );
  border-radius: 50%;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.6);
}

.wax-seal::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.2);
}

/* === RUNIC DECORATIONS === */
.runic-border {
  border: 2px solid var(--color-border-medium, #4a3828);
  position: relative;
  padding: var(--space-lg, 1.5rem);
}

.runic-border::before,
.runic-border::after {
  content: '◆';
  position: absolute;
  color: var(--color-bronze, #8b6f47);
  font-size: 1.5rem;
  text-shadow: 0 0 10px rgba(139, 111, 71, 0.5);
}

.runic-border::before {
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.runic-border::after {
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .fog-overlay,
  .dust-particles,
  .torch-light,
  .magical-glow::after {
    animation: none;
  }
}

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {
  .torch-light {
    display: none; /* Hide heavy effects on mobile */
  }

  .fog-overlay,
  .dust-particles {
    opacity: 0.3; /* Reduce opacity for performance */
  }
}