/* CSescape.ru — CSS-only animations for selected USER IDs.
   Assignment and dynamic DOM markup come from cse-user-styles.js;
   no CSS effect calls JavaScript during its animation.
   Source for fx-contour, fx-crt, fx-sundial, fx-duotone, fx-groovy,
   fx-pewpew, fx-anaglyph, fx-blueprint, fx-parallax and fx-topographic:
   user-provided exact Colorion CSS effect specifications, 2026-11-04.
   Unique classes preserved exactly. Group 17 is no longer special. */

:root {
  --ink: currentColor;
  --ink-2: #FF4FD8;
  --ink-3: #4FF8FF;
}

/* Integration layer for GameCMS hyperlinks, comments, profile headers. */
.cse-user-style-target {
  background-image: none !important;
  background-color: transparent !important;
  text-shadow: none !important;
  /* Unset legacy group effects only on explicitly selected users. */
  -webkit-text-fill-color: initial !important;
}
.cse-user-style-output {
  --ink: currentColor;
  --ink-2: #FF4FD8;
  --ink-3: #4FF8FF;
  color: #ecf6ff !important;
  -webkit-text-fill-color: currentColor !important;
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  isolation: isolate;
  white-space: pre;
  font-weight: 900;
  letter-spacing: 1.3px;
  line-height: 1.15;
}
.cse-user-style-output > div {
  display: inline-block;
  vertical-align: baseline;
}
.cse-user-style-output > .fx-contour {
  width: calc(var(--cse-chars, 12) * .67em);
  height: 1.4em;
  vertical-align: -.22em;
  display: inline-block;
}
/* Keep original animation curves/colours but match the surrounding
   GameCMS font size instead of forcing huge 26–40 px forum nicknames. */
.cse-user-style-output > .fx-crt,
.cse-user-style-output > .fx-blueprint,
.cse-user-style-output > .fx-anaglyph,
.cse-user-style-output > .fx-sundial,
.cse-user-style-output > .fx-duotone,
.cse-user-style-output > .fx-parallax,
.cse-user-style-output > .fx-topographic,
.cse-user-style-output > .fx-groovy,
.cse-user-style-output > .fx-pewpew {
  font-size: 1em;
}
.cse-user-style-output > .fx-blueprint {
  -webkit-text-fill-color: transparent;
}
.cse-user-style-output > .fx-topographic {
  -webkit-text-fill-color: transparent;
}
/* Keep animated transforms from displacing layout of surrounding links. */
.cse-user-style-output > .fx-parallax,
.cse-user-style-output > .fx-groovy,
.cse-user-style-output > .fx-pewpew {
  vertical-align: baseline;
}

/* 1 WHITE — copied from the user's --WHITE-- section (hard vertical seam). */
@keyframes cse-white-flow { 0%{background-position:0 200%}100%{background-position:0 0} }
.fx-white {
  --stroke-size: 1.5px;
  --dur: 2s;
  position:relative;
  display:inline-block;
  font-weight:bold;
  line-height:1;
  white-space:pre;
}
.fx-white .stroke-text {
  position:absolute;
  left:0; top:0; z-index:0; pointer-events:none;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke-width:var(--stroke-size);
  background:linear-gradient(to top,white 0%,white 50%,#333333 50%,#333333 100%);
  background-size:100% 200%;
  animation:cse-white-flow var(--dur) linear infinite;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke-color:transparent;
}
.fx-white .fill-text {
  position:relative;
  z-index:1;
  background:linear-gradient(to top,black 0%,black 50%,white 50%,white 100%);
  background-size:100% 200%;
  animation:cse-white-flow var(--dur) linear infinite;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* 2 GREEN — user's approved hard horizontal split, 3-second full cycle. */
@keyframes cse-green-flow { 0%{background-position:200% 0}100%{background-position:0 0} }
.fx-green {
  --stroke-size: 1.5px;
  --dur: 3s;
  position:relative;
  display:inline-block;
  font-weight:bold;
  line-height:1;
  white-space:pre;
}
.fx-green .stroke-text {
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke-width:var(--stroke-size);
  background:linear-gradient(to left,#00ff46 0%,#00ff46 50%,black 50%,black 100%);
  background-size:200% 100%;
  animation:cse-green-flow var(--dur) linear infinite;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-stroke-color:transparent;
}
.fx-green .fill-text {
  position:relative;z-index:1;
  background:linear-gradient(to left,black 0%,black 50%,#00ff46 50%,#00ff46 100%);
  background-size:200% 100%;
  animation:cse-green-flow var(--dur) linear infinite;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* 3 DECODER — retained as a brief decorative JS scramble, never the real text. */
.fx-decoder {
  position:relative;display:inline-block;
  font:700 1em/1.12 "JetBrains Mono",monospace;
  color:#acffd0;
  text-shadow:0 0 7px #06ba73;
}
.fx-decoder .decoder-scramble {
  position:absolute;inset:0;z-index:1;
  display:block;opacity:0;pointer-events:none;
  white-space:pre;
  font:inherit;
  color:#64ffad;
  background:#18241f;
  text-shadow:0 0 8px #18eb83;
}
.fx-decoder.cse-decoding .decoder-scramble {opacity:1;}

/* 4 OUTLINE — 15 Wireframe. Exact colour tokens and dashed stroke timing. */
.fx-contour {
  width: 240px;
  height: 56px;
  overflow: visible;
}
.fx-contour text {
  font: 600 40px "JetBrains Mono", monospace;
  letter-spacing: .02em;
  fill: color-mix(in srgb, var(--ink) 10%, transparent);
  stroke: var(--ink-3);
  stroke-width: 1.2;
  stroke-dasharray: 34 66;
  animation: fx-contour 3.2s linear infinite;
}
@keyframes fx-contour {
  to { stroke-dashoffset: -100; }
}

/* 5 DEPTH-3D — 18 Anaglyph-3D. */
.fx-anaglyph {
  font: 600 30px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: var(--ink);
  animation: fx-anaglyph 2.4s ease-in-out infinite;
}
@keyframes fx-anaglyph {
  0%, 100% { text-shadow: 0 0 0 #ff3355, 0 0 0 #33ddff; }
  50% {
    text-shadow:
      -6px 0 1px #ff3355,
       6px 0 1px #33ddff;
  }
}

/* 6 SPECTRUM — per-character rainbow, separate colour phase for each glyph. */
.fx-spectrum {
  font:700 1em/1.1 "JetBrains Mono",monospace;
  display:inline-flex;
  color:#ff4b85;
}
.fx-spectrum b {
  display:inline-block;
  font-weight:inherit;
  color:#ff4b85;
  animation:fx-spectrum 3.3s linear infinite;
  animation-delay:calc(var(--i)*-.17s);
}
@keyframes fx-spectrum {
  to {filter:hue-rotate(360deg);}
}

/* 7 CRT_MODE — 20 Phosphor. */
.fx-crt {
  position: relative;
  font: 600 26px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  padding: .3em .5em;
  color: #4dff88;
  text-shadow: 0 0 7px rgba(77, 255, 136, .8);
  background: rgba(20, 60, 35, .18);
  border-radius: 4px;
  animation: fx-crt-flicker 3.4s steps(1) infinite;
}
.fx-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(0deg,
      transparent 0 2px,
      rgba(0, 0, 0, .38) 2px 4px);
  animation: fx-crt-roll 6s linear infinite;
}
@keyframes fx-crt-flicker {
  0%, 6%, 100% { opacity: 1; }
  3%   { opacity: .82; }
  4.5% { opacity: .95; transform: translateY(1px); }
  70%  { opacity: .9; }
  71%  { opacity: 1; transform: none; }
}
@keyframes fx-crt-roll {
  to { background-position: 0 48px; }
}

/* 8 SHADOW — 29 Sundial. */
.fx-sundial {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: var(--ink);
  animation: fx-sundial 5s linear infinite;
}
@keyframes fx-sundial {
  0%, 100% {
    text-shadow:
      4px 0 var(--ink-2),
      8px 0 color-mix(in srgb, var(--ink-2) 55%, transparent),
      12px 0 color-mix(in srgb, var(--ink-2) 25%, transparent);
  }
  12.5% {
    text-shadow:
      2.8px 2.8px var(--ink-2),
      5.6px 5.6px color-mix(in srgb, var(--ink-2) 55%, transparent),
      8.4px 8.4px color-mix(in srgb, var(--ink-2) 25%, transparent);
  }
  25% {
    text-shadow:
      0 4px var(--ink-2),
      0 8px color-mix(in srgb, var(--ink-2) 55%, transparent),
      0 12px color-mix(in srgb, var(--ink-2) 25%, transparent);
  }
  37.5% {
    text-shadow:
      -2.8px 2.8px var(--ink-2),
      -5.6px 5.6px color-mix(in srgb, var(--ink-2) 55%, transparent),
      -8.4px 8.4px color-mix(in srgb, var(--ink-2) 25%, transparent);
  }
  50% {
    text-shadow:
      -4px 0 var(--ink-2),
      -8px 0 color-mix(in srgb, var(--ink-2) 55%, transparent),
      -12px 0 color-mix(in srgb, var(--ink-2) 25%, transparent);
  }
  62.5% {
    text-shadow:
      -2.8px -2.8px var(--ink-2),
      -5.6px -5.6px color-mix(in srgb, var(--ink-2) 55%, transparent),
      -8.4px -8.4px color-mix(in srgb, var(--ink-2) 25%, transparent);
  }
  75% {
    text-shadow:
      0 -4px var(--ink-2),
      0 -8px color-mix(in srgb, var(--ink-2) 55%, transparent),
      0 -12px color-mix(in srgb, var(--ink-2) 25%, transparent);
  }
  87.5% {
    text-shadow:
      2.8px -2.8px var(--ink-2),
      5.6px -5.6px color-mix(in srgb, var(--ink-2) 55%, transparent),
      8.4px -8.4px color-mix(in srgb, var(--ink-2) 25%, transparent);
  }
}

/* 9 DRAFT — 35 Blueprint. */
.fx-blueprint {
  font: 600 28px/1.15 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: transparent;
  padding: .28em .45em;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink-3) 80%, var(--ink));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink-3) 22%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--ink-3) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink-3) 42%, transparent), transparent 35% 65%, color-mix(in srgb, var(--ink-3) 42%, transparent));
  background-size: 12px 12px, 12px 12px, 240% 100%;
  background-position: 0 0, 0 0, 100% 0;
  border: 1px solid color-mix(in srgb, var(--ink-3) 42%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--ink-3) 18%, transparent);
  animation: fx-blueprint 4s linear infinite;
}
@keyframes fx-blueprint {
  to { background-position: 24px 0, 0 24px, -100% 0; }
}

/* 10 LAYERS — 50 Parallax. */
.fx-parallax {
  font: 600 30px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  color: var(--ink);
  display: inline-flex;
}
.fx-parallax b {
  font-weight: inherit;
  display: inline-block;
  text-shadow:
    4px 4px 0 color-mix(in srgb, var(--ink-2) 72%, transparent),
   -4px -3px 0 color-mix(in srgb, var(--ink-3) 72%, transparent);
  animation: fx-parallax 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.11s);
}
@keyframes fx-parallax {
  0%, 100% {
    transform: translate(0);
    text-shadow:
      4px 4px 0 color-mix(in srgb, var(--ink-2) 72%, transparent),
     -4px -3px 0 color-mix(in srgb, var(--ink-3) 72%, transparent);
  }
  50% {
    transform: translateY(-4px);
    text-shadow:
      8px 2px 0 color-mix(in srgb, var(--ink-2) 72%, transparent),
     -8px -1px 0 color-mix(in srgb, var(--ink-3) 72%, transparent);
  }
}

/* 11 TERRAIN — 52 Topographic. */
.fx-topographic {
  font: 600 28px/1.15 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: transparent;
  /* Static bright contour stays readable while the terrain lines move. */
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink-3) 70%, #ffffff);
  paint-order: stroke fill;
  background:
    repeating-radial-gradient(ellipse at 30% 55%,
      var(--ink) 0 1px,
      transparent 1px 7px
    ),
    repeating-radial-gradient(ellipse at 78% 35%,
      var(--ink-3) 0 1px,
      transparent 1px 8px
    );
  background-size: 130px 70px, 170px 80px;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ink-3) 25%, transparent));
  animation: fx-topographic 5s linear infinite;
}
@keyframes fx-topographic {
  to { background-position: 130px 0, -170px 0; }
}

/* 12 RAINBOW — one smooth hue shared by every letter simultaneously. */
.fx-rainbow {
  font: 800 1em/1.1 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  color: #ff3030;
  filter: hue-rotate(0deg);
  animation: fx-uniform-rainbow 12s linear infinite;
}
@keyframes fx-uniform-rainbow { to { filter: hue-rotate(360deg); } }

/* 13 DUO — 56 Duotone. */
.fx-duotone {
  position: relative;
  font: 600 38px/1.05 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: var(--ink);
}
.fx-duotone::before,
.fx-duotone::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.fx-duotone::before {
  color: var(--ink-2);
  animation: fx-duotone-a 2.6s ease-in-out infinite;
}
.fx-duotone::after {
  color: var(--ink-3);
  animation: fx-duotone-b 2.6s ease-in-out infinite;
}
@keyframes fx-duotone-a {
  0%, 100% { transform: translate(-3px, 0); opacity: .42; }
  50%      { transform: translate(-9px, -3px); opacity: .8; }
}
@keyframes fx-duotone-b {
  0%, 100% { transform: translate(3px, 0); opacity: .42; }
  50%      { transform: translate(9px, 3px); opacity: .8; }
}

/* 14 GROOVY — 91 Groovy. */
.fx-groovy {
  --groovy-1: #f6b33d;
  --groovy-2: #e8692c;
  --groovy-3: #b23a28;
  --groovy-4: #5b2a1e;
  font: 800 40px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .02em;
  color: #ffe6bd;
  display: inline-flex;
  transform: skewX(-8deg);
}
.fx-groovy b {
  font-weight: inherit;
  display: inline-block;
  animation: fx-groovy 3.2s cubic-bezier(.45, 0, .3, 1) infinite;
  animation-delay: calc(var(--i) * .1s);
}
@keyframes fx-groovy {
  0%, 100% {
    transform: translate(0, 0);
    text-shadow:
      1px 1px 0 var(--groovy-1),
      2px 2px 0 var(--groovy-2),
      3px 3px 0 var(--groovy-3),
      4px 4px 0 var(--groovy-4);
  }
  35%, 65% {
    transform: translate(-3px, -5px);
    text-shadow:
      3px 3px 0 var(--groovy-1),
      6px 6px 0 var(--groovy-2),
      9px 9px 0 var(--groovy-3),
      12px 12px 0 var(--groovy-4);
  }
}

/* 15 PEW PEW — 93 Pew-Pew. */
.fx-pewpew {
  font: 700 34px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  color: var(--ink);
  display: inline-flex;
}
.fx-pewpew b {
  position: relative;
  font-weight: inherit;
  display: inline-block;
  animation: fx-pewpew 3.2s infinite;
  animation-delay: calc(var(--i) * .14s);
}
.fx-pewpew b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5em;
  height: 1.5em;
  margin: -.75em 0 0 -.75em;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff 0 7%,
    var(--ink-3) 14%,
    color-mix(in srgb, var(--ink-2) 50%, transparent) 26%,
    transparent 46%);
  opacity: 0;
  pointer-events: none;
  animation: fx-pewpew-spark 3.2s ease-out infinite;
  animation-delay: calc(var(--i) * .14s);
}
@keyframes fx-pewpew {
  0% {
    opacity: 0;
    transform: translateX(-170px) scale(4, .08);
    color: #fff;
    text-shadow: 0 0 4px var(--ink-3), 0 0 10px var(--ink-3);
    animation-timing-function: linear;
  }
  2% { opacity: 1; animation-timing-function: linear; }
  8% {
    transform: translateX(0) scale(1.35, .7);
    color: #fff;
    text-shadow: 0 0 6px #fff, 0 0 16px var(--ink-3), 0 0 30px var(--ink-2);
    animation-timing-function: cubic-bezier(.2, .8, .3, 1);
  }
  12% { transform: translateX(-6px) scale(.88, 1.14); }
  17% { transform: translateX(2px) scale(1.04, .97); }
  24%, 80% {
    opacity: 1;
    transform: none;
    color: var(--ink);
    text-shadow: 0 0 10px color-mix(in srgb, var(--ink-3) 40%, transparent);
  }
  92%, 100% {
    opacity: 0;
    transform: translateX(18px);
    text-shadow: none;
  }
}
@keyframes fx-pewpew-spark {
  0%, 7% { opacity: 0; transform: scale(0); }
  8%     { opacity: 1; transform: scale(.45); }
  20%    { opacity: 0; transform: scale(1.7); }
  100%   { opacity: 0; transform: scale(1.7); }
}

/* CSS-only animation reduced-motion fallback for all fx-* classes. */
@media (prefers-reduced-motion: reduce) {
  .cse-user-style-output *,
  .cse-user-style-output *::before,
  .cse-user-style-output *::after,
  .cse-style-preview *,
  .cse-style-preview *::before,
  .cse-style-preview *::after {
    animation: none !important;
    transition: none !important;
  }
}