/* =====================================================================
   Capsule Records — thèmes du site + logo glitch
   Servi tel quel (nginx en prod) : modifier ce fichier ou un logo de
   logos/ suffit, sans rebuild. Pour ajouter un thème : un bloc
   [data-theme="nom"] ci-dessous, son nom dans --caps-themes, et
   logos/logo-nom-512.webp|png + logos/favicon-nom-96.png.

   --c1 accent principal   --c2 accent secondaire   --c3 / --c4 accents rares
   --bg fond   --panel surfaces   --fg texte   --mist texte doux   --dim texte éteint
   --scene-filter filtre CSS optionnel sur la scène 3D (elle lit déjà --c1…--c4)
   --logo / --favicon logo du header et icône d'onglet du thème
   ===================================================================== */

:root {
  --caps-themes: original logo cyber acid toxic blood;
}

:root,
[data-theme="original"] {
  --c1: #00f0ff;
  --c2: #ff2bd6;
  --c3: #7b5cff;
  --c4: #b8ff2e;
  --bg: #04060c;
  --panel: #0a0f1a;
  --fg: #e6f4ff;
  --mist: #94a8c4;
  --dim: #5a6b85;
  --scene-filter: none;
  --logo: image-set(url("/caps/logos/logo-initial-512.webp") type("image/webp"), url("/caps/logos/logo-initial-512.png") type("image/png"));
  --favicon: url("/caps/logos/favicon-initial-96.png");
}

[data-theme="logo"] {
  --c1: #c13cff;
  --c2: #7dff3c;
  --c3: #ff4fd8;
  --c4: #d4ff3c;
  --bg: #0b0710;
  --panel: #150d1f;
  --fg: #f4ecff;
  --mist: #b4a2c8;
  --dim: #6e5a84;
  --scene-filter: none;
  --logo: image-set(url("/caps/logos/logo-original-512.webp") type("image/webp"), url("/caps/logos/logo-original-512.png") type("image/png"));
  --favicon: url("/caps/logos/favicon-original-96.png");
}

[data-theme="cyber"] {
  --c1: #28e3ff;
  --c2: #ff2fb4;
  --c3: #5b7bff;
  --c4: #7dffea;
  --bg: #03080f;
  --panel: #08121f;
  --fg: #e6fbff;
  --mist: #8fb6cc;
  --dim: #4d6a80;
  --scene-filter: none;
  --logo: image-set(url("/caps/logos/logo-cyber-512.webp") type("image/webp"), url("/caps/logos/logo-cyber-512.png") type("image/png"));
  --favicon: url("/caps/logos/favicon-cyber-96.png");
}

[data-theme="acid"] {
  --c1: #ff6a1a;
  --c2: #ffd21a;
  --c3: #ff3d6e;
  --c4: #c8ff1a;
  --bg: #0d0803;
  --panel: #1a1008;
  --fg: #fff3e6;
  --mist: #c9aa8f;
  --dim: #7d6450;
  --scene-filter: none;
  --logo: image-set(url("/caps/logos/logo-acid-512.webp") type("image/webp"), url("/caps/logos/logo-acid-512.png") type("image/png"));
  --favicon: url("/caps/logos/favicon-acid-96.png");
}

[data-theme="toxic"] {
  --c1: #4dff3a;
  --c2: #9b3cff;
  --c3: #2bd9a0;
  --c4: #e6ff2e;
  --bg: #040b04;
  --panel: #0b170b;
  --fg: #ecffe8;
  --mist: #9cc596;
  --dim: #5a7d55;
  --scene-filter: none;
  --logo: image-set(url("/caps/logos/logo-toxic-512.webp") type("image/webp"), url("/caps/logos/logo-toxic-512.png") type("image/png"));
  --favicon: url("/caps/logos/favicon-toxic-96.png");
}

[data-theme="blood"] {
  --c1: #ff2e4d;
  --c2: #3cb8ff;
  --c3: #b03cff;
  --c4: #ffb02e;
  --bg: #0d0406;
  --panel: #1a0a0e;
  --fg: #ffe9ec;
  --mist: #c99aa3;
  --dim: #7d5560;
  --scene-filter: none;
  --logo: image-set(url("/caps/logos/logo-blood-512.webp") type("image/webp"), url("/caps/logos/logo-blood-512.png") type("image/png"));
  --favicon: url("/caps/logos/favicon-blood-96.png");
}

html {
  transition: background-color 0.25s steps(3), color 0.25s steps(3);
}

/* ===== Logo ===== */
.caps-logo {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--logo-size, 96px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.caps-logo > span {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--logo) center / contain no-repeat;
  pointer-events: none;
  user-select: none;
}

.caps-logo .m {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

.caps-logo .g {
  opacity: 0;
}

.caps-logo:hover .m {
  transform: rotate(-8deg) scale(1.06);
  filter: drop-shadow(0 0 10px var(--c1)) drop-shadow(0 0 22px color-mix(in srgb, var(--c2) 45%, transparent));
}

.caps-logo:active .m {
  transform: rotate(4deg) scale(0.94);
}

.caps-logo:focus-visible {
  outline: 2px solid var(--c2);
  outline-offset: 4px;
  border-radius: 50%;
}

.caps-logo.is-glitching .m {
  animation: caps-shake 0.5s steps(2) both;
}

.caps-logo.is-glitching .g1 {
  opacity: 0.85;
  mix-blend-mode: screen;
  filter: hue-rotate(-60deg) saturate(2);
  animation: caps-slice1 0.5s steps(1) both;
}

.caps-logo.is-glitching .g2 {
  opacity: 0.85;
  mix-blend-mode: screen;
  filter: hue-rotate(140deg) saturate(2);
  animation: caps-slice2 0.5s steps(1) both;
}

@keyframes caps-shake {
  0% { transform: none; }
  20% { transform: translate(-3px, 2px) skewX(6deg); }
  40% { transform: translate(4px, -1px); }
  60% { transform: translate(-2px, 0) skewX(-8deg); }
  80% { transform: translate(2px, 1px); }
  100% { transform: none; }
}

@keyframes caps-slice1 {
  0% { clip-path: inset(10% 0 70% 0); transform: translate(-8px); }
  20% { clip-path: inset(55% 0 25% 0); transform: translate(7px); }
  40% { clip-path: inset(30% 0 50% 0); transform: translate(-5px); }
  60% { clip-path: inset(75% 0 5% 0); transform: translate(9px); }
  80% { clip-path: inset(0 0 85% 0); transform: translate(-4px); }
  100% { clip-path: inset(50% 0 50% 0); opacity: 0; }
}

@keyframes caps-slice2 {
  0% { clip-path: inset(65% 0 15% 0); transform: translate(8px); }
  20% { clip-path: inset(5% 0 80% 0); transform: translate(-9px); }
  40% { clip-path: inset(45% 0 35% 0); transform: translate(6px); }
  60% { clip-path: inset(20% 0 60% 0); transform: translate(-7px); }
  80% { clip-path: inset(85% 0 0 0); transform: translate(5px); }
  100% { clip-path: inset(50% 0 50% 0); opacity: 0; }
}

/* ===== Glitch plein écran pendant le changement de thème ===== */
html.caps-switching body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--c1) 25%, transparent) 2px 3px),
    linear-gradient(90deg, color-mix(in srgb, var(--c2) 18%, transparent), transparent 30% 70%, color-mix(in srgb, var(--c1) 18%, transparent));
  mix-blend-mode: screen;
  animation: caps-flash 0.5s steps(4) both;
}

@keyframes caps-flash {
  0% { opacity: 0; transform: translateY(0); }
  25% { opacity: 1; transform: translateY(-6px); }
  50% { opacity: 0.4; transform: translateY(4px); }
  75% { opacity: 0.9; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .caps-logo.is-glitching .m,
  .caps-logo.is-glitching .g {
    animation: none !important;
  }

  .caps-logo .g,
  html.caps-switching body::after {
    display: none;
  }
}