/* 🕹️ 🚀 Arcade Master Theme - Deep Space Arcade 🚀 🕹️ */

/* basic theme */
:root {
  --scalar-text-decoration: underline;
  --scalar-text-decoration-hover: underline;
}

.light-mode {
  --scalar-color-1: rgb(9, 9, 11);
  --scalar-color-2: rgb(113, 113, 122);
  --scalar-color-3: rgba(25, 25, 28, 0.5);
  --scalar-color-accent: #e60036;

  --scalar-background-1: #ffffff;
  --scalar-background-2: #f4f5f8;
  --scalar-background-3: #e6e9f0;
  --scalar-background-accent: #ff003c14;

  --scalar-border-color: rgb(228, 228, 231);
  --scalar-code-language-color-supersede: var(--scalar-color-1);
}

.dark-mode {
  --scalar-color-1: #fafafa;
  --scalar-color-2: #9ea4b8;
  --scalar-color-3: rgba(255, 255, 255, 0.533);
  --scalar-color-accent: #ff003c;
  /* Rojo Neón */

  --scalar-background-1: #050608;
  /* Negro espacial muy profundo */
  --scalar-background-2: #12141d;
  --scalar-background-3: #1a1d29;
  --scalar-background-accent: #ff003c1a;
  /* Glow de botón */

  --scalar-border-color: rgba(255, 255, 255, 0.12);
  --scalar-code-language-color-supersede: var(--scalar-color-1);
}

/* Document Sidebar */
.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: var(--scalar-background-1);
  --scalar-sidebar-color-1: var(--scalar-color-1);
  --scalar-sidebar-color-2: var(--scalar-color-2);
  --scalar-sidebar-border-color: var(--scalar-border-color);

  --scalar-sidebar-item-hover-color: currentColor;
  --scalar-sidebar-item-hover-background: var(--scalar-background-2);

  --scalar-sidebar-item-active-background: var(--scalar-background-accent);
  --scalar-sidebar-color-active: var(--scalar-color-accent);

  --scalar-sidebar-search-background: transparent;
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
  --scalar-sidebar-search-color: var(--scalar-color-3);
}

.light-mode .t-doc__sidebar {
  --scalar-sidebar-item-active-background: var(--scalar-background-2);
}

/* advanced */
.light-mode {
  --scalar-color-green: #00aa44;
  --scalar-color-red: #e60036;
  --scalar-color-yellow: #dca300;
  --scalar-color-blue: #0077ff;
  --scalar-color-orange: #ff6600;
  --scalar-color-purple: #8800ff;

  --scalar-button-1: rgba(0, 0, 0, 1);
  --scalar-button-1-hover: rgba(0, 0, 0, 0.8);
  --scalar-button-1-color: rgba(255, 255, 255, 0.9);
}

.dark-mode {
  --scalar-color-green: #00fa69;
  --scalar-color-red: #ff2a55;
  --scalar-color-yellow: #ffea00;
  --scalar-color-blue: #00e5ff;
  --scalar-color-orange: #f98943;
  --scalar-color-purple: #bc13fe;

  --scalar-button-1: #ff003c;
  /* Botón rojo arcade */
  --scalar-button-1-hover: #ff2a55;
  --scalar-button-1-color: #ffffff;
}

/* Custom theme - Text Gradients (Blanco metálico a Rojo Neón) */
.dark-mode h2.t-editor__heading,
.dark-mode .t-editor__page-title h1,
.dark-mode h1.section-header:not(::selection),
.dark-mode .markdown h1,
.dark-mode .markdown h2,
.dark-mode .markdown h3,
.dark-mode .markdown h4,
.dark-mode .markdown h5,
.dark-mode .markdown h6 {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right bottom, rgb(255, 255, 255) 30%, var(--scalar-color-accent));
  -webkit-background-clip: text;
  background-clip: text;
}

.examples .scalar-card-footer {
  --scalar-background-3: transparent;
  padding-top: 0;
}

/* Hero section flare - Haces de luz tipo CRT / Outrun */
.section-flare {
  width: 100vw;
  height: 550px;
  position: absolute;
}

.section-flare-item:nth-of-type(1) {
  position: absolute;
  width: 100vw;
  height: 550px;
  --stripesDark: repeating-linear-gradient(100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%);
  --rainbow: repeating-linear-gradient(100deg, #fff 10%, #fff 16%, #fff 22%, #fff 30%);
  background-image: var(--stripesDark), var(--rainbow);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: invert(100%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  pointer-events: none;
  opacity: 0.07;
}

.dark-mode .section-flare-item:nth-of-type(1) {
  background-image: var(--stripesDark), var(--rainbow);
  /* Aumentamos un poco la opacidad para que parezca luz de neón */
  filter: opacity(60%) saturate(200%);
  opacity: 0.35;
  height: 350px;
}

.section-flare-item:nth-of-type(1):after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--stripesDark), var(--rainbow);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
}

.dark-mode .section-flare:after {
  background-image: var(--stripesDark), var(--rainbow);
}

/* Polvo espacial convertido en "Arcade Pixels" */
.section-flare-item:nth-of-type(2) {
  --star-color: #00e5ff;
  /* Cyan */
  --star-color2: #ff003c;
  /* Rojo */
  --star-color3: #ffea00;
  /* Amarillo */
  width: 100%;
  height: 100%;
  position: absolute;
  background-image:
    radial-gradient(2px 2px at 20px 30px, var(--star-color2), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 40px 70px, var(--star-color), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 50px 160px, var(--star-color3), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 90px 40px, var(--star-color), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 130px 80px, var(--star-color2), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 160px 120px, var(--star-color3), rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  opacity: 0.4;
  /* Aumentado ligeramente para que brillen más los colores */
}

/* Selección de texto color Cyan Neón */
.light-mode *::selection {
  background-color: color-mix(in srgb, var(--scalar-color-blue), transparent 70%);
}

.dark-mode *::selection {
  background-color: color-mix(in srgb, var(--scalar-color-blue), transparent 60%);
}

/* document header: Blur animado al hacer scroll */
.light-mode .t-doc__header,
.dark-mode .t-doc__header {
  animation: headerbackground forwards;
  animation-timeline: scroll();
  animation-range: 0px 200px;
}

@keyframes headerbackground {
  from {
    background: transparent;
    backdrop-filter: none;
  }

  to {
    background: var(--scalar-header-background-1);
    backdrop-filter: blur(12px);
  }
}

/* remove flare on safari to prevent dropped frames on scroll */
@supports (-webkit-hyphens: none) {
  .section-flare {
    display: none;
  }
}

/* document background */
.light-mode .t-doc .layout-content,
.dark-mode .t-doc .layout-content {
  background: transparent;
}