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

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

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

$spoiler-surface-bg-dark: rgba(0, 0, 0, 0.2) !default;
$spoiler-overlay-bg-dark: rgba(30, 30, 30, 0.95) !default;
$spoiler-overlay-color-dark: #e0e0e0 !default;
$spoiler-overlay-noise-opacity-dark: 0.3 !default;

:root {
  --spoiler-animation-duration: #{$spoiler-animation-duration};
  --spoiler-transition-timing: #{$spoiler-transition-timing};
  --spoiler-border-radius: #{$spoiler-border-radius};
  --spoiler-content-blur: #{$spoiler-content-blur};
  --spoiler-content-grayscale: #{$spoiler-content-grayscale};
  --spoiler-content-scale: #{$spoiler-content-scale};
  --spoiler-overlay-blur: #{$spoiler-overlay-blur};
  --spoiler-title-size: #{$spoiler-title-size};
  --spoiler-title-letter-spacing: #{$spoiler-title-letter-spacing};
  --spoiler-hint-size: #{$spoiler-hint-size};
  --spoiler-particle-opacity: #{$spoiler-particle-opacity};

  --spoiler-surface-bg: #{$spoiler-surface-bg};
  --spoiler-overlay-bg: #{$spoiler-overlay-bg};
  --spoiler-overlay-color: #{$spoiler-overlay-color};
  --spoiler-overlay-noise-opacity: #{$spoiler-overlay-noise-opacity};
}

body.dark {
  --spoiler-surface-bg: #{$spoiler-surface-bg-dark};
  --spoiler-overlay-bg: #{$spoiler-overlay-bg-dark};
  --spoiler-overlay-color: #{$spoiler-overlay-color-dark};
  --spoiler-overlay-noise-opacity: #{$spoiler-overlay-noise-opacity-dark};
}

.marked-extended-spoiler {
  border-radius: var(--spoiler-border-radius, $spoiler-border-radius);
  transition:
    transform var(--spoiler-animation-duration, $spoiler-animation-duration)
    var(--spoiler-transition-timing, $spoiler-transition-timing),
    box-shadow var(--spoiler-animation-duration, $spoiler-animation-duration)
    var(--spoiler-transition-timing, $spoiler-transition-timing);
  background: var(--spoiler-surface-bg, $spoiler-surface-bg);

  &:hover,
  &:focus {
    transform: translateY(-1px);
  }
}

.marked-extended-spoiler-content {
  opacity: 1;
  filter: blur(var(--spoiler-content-blur, $spoiler-content-blur))
    grayscale(var(--spoiler-content-grayscale, $spoiler-content-grayscale));
  transform: scale(var(--spoiler-content-scale, $spoiler-content-scale));
  transition:
    opacity var(--spoiler-animation-duration, $spoiler-animation-duration)
    var(--spoiler-transition-timing, $spoiler-transition-timing),
    filter var(--spoiler-animation-duration, $spoiler-animation-duration)
    var(--spoiler-transition-timing, $spoiler-transition-timing),
    transform var(--spoiler-animation-duration, $spoiler-animation-duration)
    var(--spoiler-transition-timing, $spoiler-transition-timing);

  img {
    border-radius: 4px;
  }
}

.marked-extended-spoiler-overlay {
  font-weight: 600;
  background: var(--spoiler-overlay-bg, $spoiler-overlay-bg);
  color: var(--spoiler-overlay-color, $spoiler-overlay-color);
  transition: opacity var(--spoiler-animation-duration, $spoiler-animation-duration)
    var(--spoiler-transition-timing, $spoiler-transition-timing);
  backdrop-filter: blur(var(--spoiler-overlay-blur, $spoiler-overlay-blur));
  -webkit-backdrop-filter: blur(var(--spoiler-overlay-blur, $spoiler-overlay-blur));

  &::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, $spoiler-overlay-noise-opacity);
    mix-blend-mode: overlay;
  }
}

.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, $spoiler-animation-duration)
    var(--spoiler-transition-timing, $spoiler-transition-timing);
}

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

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

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

  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, $spoiler-animation-duration)
    var(--spoiler-transition-timing, $spoiler-transition-timing);

  .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, $spoiler-particle-opacity);
  }
}

$spoiler-variants: (
  default: (bg1: rgba(30, 30, 30, 0.95), bg2: rgba(15, 15, 15, 0.98), color: #ffffff),
  dark: (bg1: rgba(20, 20, 20, 0.95), bg2: rgba(5, 5, 5, 0.99), color: #e0e0e0),
  light: (bg1: rgba(245, 245, 245, 0.95), bg2: rgba(230, 230, 230, 0.98), color: #333333),
  danger: (bg1: rgba(220, 53, 69, 0.95), bg2: rgba(180, 40, 50, 0.98), color: #ffffff),
  info: (bg1: rgba(13, 110, 253, 0.95), bg2: rgba(10, 88, 202, 0.98), color: #ffffff),
  warning: (bg1: rgba(255, 193, 7, 0.95), bg2: rgba(255, 160, 0, 0.98), color: #000000),
  success: (bg1: rgba(25, 135, 84, 0.95), bg2: rgba(20, 108, 67, 0.98), color: #ffffff)
);

@each $name, $values in $spoiler-variants {
  .marked-extended-spoiler.spoiler-theme-#{$name} .marked-extended-spoiler-overlay {
    background: linear-gradient(145deg, map-get($values, bg1), map-get($values, bg2));
    color: map-get($values, color);
  }
}

@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;
  }
}