/*
 * Retro Filter – CRT Effect
 * Theme-agnostic, uses custom properties so themes can override intensity/colors.
 */

/* Default values – themes can override these on :root or body */
:root {
  /* Effect intensity */
  --crt-scanline-opacity: 0.08;
  --crt-vignette-strength: 0.25;

  /* Global filter */
  --crt-filter-contrast: 1.05;
  --crt-filter-saturation: 0.9;

  /* Text appearance */
  --crt-text-shadow-color: rgba(0, 0, 0, 0.35);

  /* Optional link palette when effect is on */
  --crt-link-color: #9ae6ff;
  --crt-link-color-hover: #c0f1ff;
  --crt-link-underline: rgba(154, 230, 255, 0.6);
  --crt-link-underline-hover: rgba(192, 241, 255, 0.9);
}

/* Main "CRT is active" state */
body.crt-effect {
  /* Gentle glow/softening */
  text-shadow: 0 0 1px var(--crt-text-shadow-color);
}

body.crt-effect .crt-effect-main {
  /* This filter affects everything (text + backgrounds) uniformly */
  filter:
    contrast(var(--crt-filter-contrast))
    saturate(var(--crt-filter-saturation));
}

/* Hotfix: prevent CRT filter from breaking offcanvas positioning */
#mobile-menu-offcanvas {
  filter: none !important;
}

/* Global overlay container (injected via JS) */
body.crt-effect .crt-effect-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50; /* above most content, below modals if they use higher z-index */
  mix-blend-mode: normal;
}

/* Scanlines */
body.crt-effect .crt-effect-overlay::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, var(--crt-scanline-opacity)) 0,
    rgba(255, 255, 255, var(--crt-scanline-opacity)) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 2px
  );
  background-size: 100% 2px;
  mix-blend-mode: soft-light;
}

/* Vignette */
body.crt-effect .crt-effect-overlay::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(0, 0, 0, var(--crt-vignette-strength)) 100%
  );
  mix-blend-mode: overlay;
}

/* Optional: link styling when CRT is active */
body.crt-effect a {
  color: var(--crt-link-color);
  text-decoration-color: var(--crt-link-underline);
}

body.crt-effect a:hover,
body.crt-effect a:focus {
  color: var(--crt-link-color-hover);
  text-decoration-color: var(--crt-link-underline-hover);
}

/* Keep code/monospace crisp enough */
body.crt-effect code,
body.crt-effect pre {
  text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.5);
}

/* Toggle block styles (minimal, theme-safe) */

.crt-effect-toggle-block {
  /* TODO cleanup */
  /* text-align: right; */
}

.crt-effect-toggle-button {
  border: none;
  background: transparent;
  padding: 0.25rem 0.75rem;
  color: var(--lucoles-ltda-button);
  cursor: pointer;
  transition:
    background   200ms ease,
    color        200ms ease;
}

.crt-effect-toggle-button:hover,
.crt-effect-toggle-button:focus-visible {
  color: var(--lucoles-ltda-button-hover);
  background: var(--lucoles-ltda-button-hover-bg);
}

.crt-effect-toggle-button[aria-pressed="true"] {
  color: var(--lucoles-ltda-button-on);
}

.crt-effect-toggle-button[aria-pressed="true"]:hover {
  color: var(--lucoles-ltda-button-hover);
}