/**
 * Marked Extended Spoiler - Theme Styles
 * Full visual theme layer with CSS variable customization.
 */

:root {
  --spoiler-animation-duration: 0.4s;
  --spoiler-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --spoiler-border-radius: 8px;
  --spoiler-content-blur: 16px;
  --spoiler-content-grayscale: 0.4;
  --spoiler-content-scale: 0.99;
  --spoiler-overlay-blur: 4px;
  --spoiler-title-size: 1.1em;
  --spoiler-title-letter-spacing: 0.05em;
  --spoiler-hint-size: 0.85em;
  --spoiler-particle-opacity: 0.6;
  --spoiler-focus-color: #4a9eff;

  --spoiler-surface-bg: rgba(0, 0, 0, 0.02);
  --spoiler-overlay-bg: rgba(255, 255, 255, 0.95);
  --spoiler-overlay-color: #333;
  --spoiler-overlay-noise-opacity: 0.5;
}

body.dark {
  --spoiler-surface-bg: rgba(0, 0, 0, 0.2);
  --spoiler-overlay-bg: rgba(30, 30, 30, 0.95);
  --spoiler-overlay-color: #e0e0e0;
  --spoiler-overlay-noise-opacity: 0.3;
}

.marked-extended-spoiler {
  border-radius: var(--spoiler-border-radius, 8px);
  transition:
    transform var(--spoiler-animation-duration, 0.4s) var(--spoiler-transition-timing, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--spoiler-animation-duration, 0.4s) var(--spoiler-transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
  background: var(--spoiler-surface-bg, rgba(0, 0, 0, 0.02));
}

.marked-extended-spoiler:hover,
.marked-extended-spoiler:focus {
  transform: translateY(-1px);
}

.marked-extended-spoiler-content {
  opacity: 1;
  filter: blur(var(--spoiler-content-blur, 16px)) grayscale(var(--spoiler-content-grayscale, 0.4));
  transform: scale(var(--spoiler-content-scale, 0.99));
  transition:
    opacity var(--spoiler-animation-duration, 0.4s) var(--spoiler-transition-timing, cubic-bezier(0.4, 0, 0.2, 1)),
    filter var(--spoiler-animation-duration, 0.4s) var(--spoiler-transition-timing, cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--spoiler-animation-duration, 0.4s) var(--spoiler-transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
}

.marked-extended-spoiler-content img {
  border-radius: 4px;
}

.marked-extended-spoiler-overlay {
  font-weight: 600;
  background: var(--spoiler-overlay-bg, rgba(255, 255, 255, 0.95));
  color: var(--spoiler-overlay-color, #333);
  transition: opacity var(--spoiler-animation-duration, 0.4s) var(--spoiler-transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
  backdrop-filter: blur(var(--spoiler-overlay-blur, 4px));
  -webkit-backdrop-filter: blur(var(--spoiler-overlay-blur, 4px));
}

.marked-extended-spoiler:hover > .marked-extended-spoiler-overlay,
.marked-extended-spoiler:focus > .marked-extended-spoiler-overlay,
.marked-extended-spoiler[aria-expanded="true"] > .marked-extended-spoiler-overlay,
.marked-extended-spoiler:hover > .marked-extended-spoiler-particles,
.marked-extended-spoiler:focus > .marked-extended-spoiler-particles,
.marked-extended-spoiler[aria-expanded="true"] > .marked-extended-spoiler-particles {
  transition: opacity var(--spoiler-animation-duration, 0.4s) var(--spoiler-transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
}

.marked-extended-spoiler-overlay::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  opacity: var(--spoiler-overlay-noise-opacity, 0.5);
  mix-blend-mode: overlay;
}

.marked-extended-spoiler-overlay-content {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.spoiler-title {
  font-size: var(--spoiler-title-size, 1.1em);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--spoiler-title-letter-spacing, 0.05em);
}

.marked-extended-spoiler-reveal-hint {
  font-size: var(--spoiler-hint-size, 0.85em);
  opacity: 0.9;
  font-weight: 500;
}

.marked-extended-spoiler-reveal-hint svg {
  opacity: 0.8;
  animation: spoiler-pulse-icon 2s ease-in-out infinite;
}

@keyframes spoiler-pulse-icon {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.marked-extended-spoiler-particles {
  transition: opacity var(--spoiler-animation-duration, 0.4s) var(--spoiler-transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
}

.marked-extended-spoiler-particles .particle {
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: var(--spoiler-particle-opacity, 0.6);
}

.marked-extended-spoiler.spoiler-theme-default .marked-extended-spoiler-overlay {
  background: linear-gradient(145deg, rgba(30, 30, 30, 0.95), rgba(15, 15, 15, 0.98));
  color: #ffffff;
}

.marked-extended-spoiler.spoiler-theme-dark .marked-extended-spoiler-overlay {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(5, 5, 5, 0.99));
  color: #e0e0e0;
}

.marked-extended-spoiler.spoiler-theme-light .marked-extended-spoiler-overlay {
  background: linear-gradient(145deg, rgba(245, 245, 245, 0.95), rgba(230, 230, 230, 0.98));
  color: #333333;
}

.marked-extended-spoiler.spoiler-theme-danger .marked-extended-spoiler-overlay {
  background: linear-gradient(145deg, rgba(220, 53, 69, 0.95), rgba(180, 40, 50, 0.98));
  color: #ffffff;
}

.marked-extended-spoiler.spoiler-theme-info .marked-extended-spoiler-overlay {
  background: linear-gradient(145deg, rgba(13, 110, 253, 0.95), rgba(10, 88, 202, 0.98));
  color: #ffffff;
}

.marked-extended-spoiler.spoiler-theme-warning .marked-extended-spoiler-overlay {
  background: linear-gradient(145deg, rgba(255, 193, 7, 0.95), rgba(255, 160, 0, 0.98));
  color: #000000;
}

.marked-extended-spoiler.spoiler-theme-success .marked-extended-spoiler-overlay {
  background: linear-gradient(145deg, rgba(25, 135, 84, 0.95), rgba(20, 108, 67, 0.98));
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .marked-extended-spoiler,
  .marked-extended-spoiler-content,
  .marked-extended-spoiler-overlay,
  .marked-extended-spoiler-particles {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }

  .marked-extended-spoiler:hover,
  .marked-extended-spoiler:focus {
    transform: none;
  }

  .marked-extended-spoiler-particles .particle {
    animation: none !important;
    opacity: 0.3 !important;
  }
}

@media (max-width: 768px) {
  .marked-extended-spoiler-reveal-hint span {
    font-size: 0.8em;
  }
}