/* Efekty jména. Načítá forum.css i post.php, proto samostatný soubor.
   Přidělování je v app/name_effects.php - tady je jen vzhled.

   Dvě pravidla, která drží celý soubor pohromadě:
   1) barva se maluje gradientem přes background-clip, ne color;
   2) záři nese ::after s kopií textu (data-text), protože text s průhlednou
      barvou nejde stínovat text-shadow - stín by se kreslil pod gradient. */

.uname {
  position: relative;
  display: inline-block;
  font-weight: 600;
  /* Barva pro prohlížeč bez background-clip a pro chvíli, než se načte font. */
  color: var(--text);
  white-space: nowrap;
}

/* Vrstva se září. Leží pod textem a je jen dekorace. */
.uname::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .uname[class*="fx-"],
  .uname-vip {
    /* Musí být repeat. Písmeno bez podkladu je při background-clip:text
       průhledné, takže jakmile gradient odjede za okraj, text v tom místě
       zmizí. Všechny gradienty níž začínají i končí stejnou barvou, takže
       opakování není vidět. */
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------------------------------------------------------------- 1 Ocel */
.fx-steel {
  background-image: linear-gradient(100deg, #8b93a3 0%, #e6ebf2 45%, #8b93a3 90%);
  background-size: 250% 100%;
  animation: uname-sweep 7s linear infinite;
}

/* ------------------------------------------------------------ 2 Smaragd */
.fx-emerald {
  background-image: linear-gradient(100deg, #2fa06a, #6ff0b0, #2fa06a);
  background-size: 220% 100%;
  animation: uname-sweep 6s linear infinite;
}
.fx-emerald::after { animation: uname-breathe 3.4s ease-in-out infinite; color: #6ff0b0; }

/* -------------------------------------------------------------- 3 Safír */
.fx-sapphire {
  background-image: linear-gradient(100deg, #3b6fd4, #8fc0ff, #3b6fd4);
  background-size: 220% 100%;
  animation: uname-sweep 6s linear infinite;
}
.fx-sapphire::after { animation: uname-breathe 3s ease-in-out infinite; color: #8fc0ff; }

/* -------------------------------------------------------------- 4 Bronz */
.fx-bronze {
  background-image: linear-gradient(100deg, #9a5f2c 0%, #e7a765 40%, #ffd9ab 50%, #e7a765 60%, #9a5f2c 100%);
  background-size: 280% 100%;
  animation: uname-sweep 5.5s linear infinite;
}

/* -------------------------------------------------------------- 5 Oceán */
.fx-ocean {
  background-image: linear-gradient(100deg, #1f7fa8, #4fd8e0, #9af0ff, #4fd8e0, #1f7fa8);
  background-size: 300% 100%;
  animation: uname-sweep 5s linear infinite;
}
.fx-ocean::after { animation: uname-breathe 4s ease-in-out infinite; color: #4fd8e0; }

/* ----------------------------------------------------------- 6 Stříbro */
.fx-silver {
  background-image: linear-gradient(100deg, #9aa4b2 0%, #ffffff 46%, #dfe6ef 54%, #9aa4b2 100%);
  background-size: 320% 100%;
  animation: uname-sweep 4.5s linear infinite;
}
.fx-silver::after { animation: uname-breathe 3.6s ease-in-out infinite; color: #ffffff; }

/* ----------------------------------------------------------- 7 Ametyst */
.fx-amethyst {
  background-image: linear-gradient(100deg, #7c3fd4, #c79bff, #f0e0ff, #c79bff, #7c3fd4);
  background-size: 300% 100%;
  animation: uname-sweep 5s linear infinite;
}
.fx-amethyst::after { animation: uname-breathe 3.2s ease-in-out infinite; color: #c79bff; }
/* Třpytka: malá hvězdička, která se objevuje a mizí vedle jména. */
.fx-amethyst::before {
  content: "✦";
  position: absolute;
  right: -0.75em;
  top: -0.15em;
  font-size: 0.62em;
  color: #e2c4ff;
  animation: uname-twinkle 2.6s ease-in-out infinite;
}

/* ---------------------------------------------------------- 8 Soumrak */
.fx-sunset {
  background-image: linear-gradient(100deg, #ff7a3d, #ff5f9e, #ffb56b, #ff5f9e, #ff7a3d);
  background-size: 300% 100%;
  animation: uname-sweep 5.5s linear infinite;
}
.fx-sunset::after { animation: uname-breathe 3.8s ease-in-out infinite; color: #ff7a9e; }

/* ------------------------------------------------------------- 9 Zlato */
.fx-gold {
  background-image: linear-gradient(100deg, #b8860b 0%, #ffd75e 40%, #fff6cc 50%, #ffd75e 60%, #b8860b 100%);
  background-size: 320% 100%;
  animation: uname-sweep 4.5s linear infinite;
}
.fx-gold::after { animation: uname-breathe 3s ease-in-out infinite; color: #ffd75e; }

/* -------------------------------------------------------- 10 Jinovatka */
.fx-frost {
  background-image: linear-gradient(100deg, #a8d8ff, #ffffff, #d6f3ff, #ffffff, #a8d8ff);
  background-size: 300% 100%;
  animation: uname-sweep 5s linear infinite;
}
.fx-frost::after { animation: uname-breathe 3.4s ease-in-out infinite; color: #cfeaff; }
.fx-frost::before {
  content: "❄";
  position: absolute;
  right: -0.85em;
  top: -0.1em;
  font-size: 0.6em;
  color: #dff2ff;
  animation: uname-drift 4.5s ease-in-out infinite;
}

/* ------------------------------------------------------------ 11 Karmín */
.fx-crimson {
  background-image: linear-gradient(100deg, #8f1f2e, #ff4d5e, #ffa0a8, #ff4d5e, #8f1f2e);
  background-size: 300% 100%;
  animation: uname-sweep 4.5s linear infinite;
}
.fx-crimson::after { animation: uname-ember 2.4s ease-in-out infinite; color: #ff4d5e; }

/* --------------------------------------------------------------- 12 Neon */
.fx-neon {
  background-image: linear-gradient(100deg, #17e0d0, #b6fff8, #17e0d0);
  background-size: 240% 100%;
  animation: uname-sweep 4s linear infinite;
}
.fx-neon::after {
  color: #17e0d0;
  animation: uname-breathe 3s ease-in-out infinite;
}

/* ------------------------------------------------------ 13 Polární záře */
.fx-aurora {
  background-image: linear-gradient(100deg, #29d98c, #45e0d0, #7b8cff, #c07bff, #29d98c);
  background-size: 380% 100%;
  animation: uname-sweep 8s linear infinite;
}
.fx-aurora::after { animation: uname-breathe 4.5s ease-in-out infinite; color: #6fe0c0; }

/* ------------------------------------------------------------ 14 Plamen */
.fx-flame {
  /* Zrcadlený přechod: začíná i končí stejnou barvou, takže se smyčka
     nezasekne o viditelný skok při návratu na začátek. */
  background-image: linear-gradient(0deg,
    #ff2d00 0%, #ff8a00 20%, #ffd93d 38%, #fff3b0 50%,
    #ffd93d 62%, #ff8a00 80%, #ff2d00 100%);
  background-size: 100% 260%;
  /* Oheň stoupá, proto se hýbe svisle, ne vodorovně. */
  animation: uname-rise 2.4s linear infinite;
}
.fx-flame::after { animation: uname-ember 1.8s ease-in-out infinite; color: #ff7b00; }

/* --------------------------------------------------------- 15 Hologram */
.fx-holo {
  background-image: linear-gradient(100deg,
    #ff4d6d, #ffa64d, #ffe94d, #4dff88, #4dd2ff, #7c4dff, #ff4dd2, #ff4d6d);
  background-size: 420% 100%;
  animation: uname-sweep 6s linear infinite;
}
.fx-holo::after { animation: uname-holo-glow 4s ease-in-out infinite; color: #b3a8ff; }

/* ------------------------------------------------- rank: Veterán / Legenda */
.fx-veteran {
  background-image: linear-gradient(100deg, #3f9e6f, #9ae7c0, #d8fff0, #9ae7c0, #3f9e6f);
  background-size: 300% 100%;
  animation: uname-sweep 5.5s linear infinite;
}
.fx-veteran::after { animation: uname-breathe 3.6s ease-in-out infinite; color: #9ae7c0; }

.fx-legend {
  background-image: linear-gradient(100deg, #c9a227, #fff0a8, #ffffff, #fff0a8, #c9a227);
  background-size: 340% 100%;
  animation: uname-sweep 4s linear infinite;
}
.fx-legend::after { animation: uname-breathe 2.6s ease-in-out infinite; color: #ffe98a; }
.fx-legend::before {
  content: "★";
  position: absolute;
  right: -0.85em;
  top: -0.12em;
  font-size: 0.6em;
  color: #ffe98a;
  animation: uname-twinkle 2.2s ease-in-out infinite;
}

/* ------------------------------------------------ role: moderátor / admin */
/* Moderátor je podle zadání fialový. Přeliv zůstává, jen v jiných odstínech -
   tyrkysová se pletla s rankem za 2000 příspěvků. */
.fx-guardian {
  background-image: linear-gradient(100deg,
    #6d28d9 0%, #a78bfa 30%, #f3ecff 50%, #a78bfa 70%, #6d28d9 100%);
  background-size: 320% 100%;
  animation: uname-sweep 4.5s linear infinite;
}
/* Kopie textu pro záři (::after, inset 0) musí začínat tam, kde začíná
   text - a ten je kvůli štítu (::before) posunutý o šířku štítu a mezeru.
   Bez posunu ležela kopie o kus vlevo a jméno bylo vidět dvakrát přes
   sebe, nečitelně. */
.fx-guardian::after { left: 1.02em; animation: uname-breathe 3.2s ease-in-out infinite; color: #b794ff; }
/* Štít před jménem - u role je vidět hodnost hned, bez najetí myší. */
.fx-guardian::before {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-right: 0.3em;
  vertical-align: -0.04em;
  background: currentColor;
  color: #6ff2ec;
  clip-path: polygon(50% 0%, 100% 22%, 100% 58%, 50% 100%, 0% 58%, 0% 22%);
}

.fx-royal {
  background-image: linear-gradient(100deg,
    #f5b400 0%, #ffe066 22%, #ffffff 40%, #ff5a5a 55%, #ffffff 70%, #ffe066 85%, #f5b400 100%);
  background-size: 360% 100%;
  animation: uname-sweep 4s linear infinite;
}
.fx-royal::after { animation: uname-royal-glow 3s ease-in-out infinite; color: #ffcf3d; }
.fx-royal::before {
  content: "♛";
  position: absolute;
  left: -0.9em;
  top: -0.08em;
  font-size: 0.66em;
  color: #ffcf3d;
  animation: uname-twinkle 3s ease-in-out infinite;
}

/* ---------------------------------------------------------------- VIP */
/* Předplatné nedostane plnou barvu - těch šestnáct spotřebovaly ranky -
   ale dvoutónový přeliv, který jméno protéká zleva doprava. Odstíny nese
   --vip-a a --vip-b, ať je pravidlo jen jedno pro všechny varianty. */
.uname-vip {
  background-image: linear-gradient(100deg,
    var(--vip-a) 0%, var(--vip-b) 50%, var(--vip-a) 100%);
  background-size: 260% 100%;
  animation: uname-sweep 5s linear infinite;
}
/* Jediná záře, kterou jméno má. U ranků zůstává vyhrazená profilovce,
   u předplatného je to ta viditelná část, za kterou se platí. */
.uname-vip::after {
  color: var(--vip-glow);
  animation: uname-breathe 3.4s ease-in-out infinite;
}

.uname-vip--red    { --vip-a: #ff2d55; --vip-b: #ff8a8a; --vip-glow: #ff5c72; }
.uname-vip--blue   { --vip-a: #2f7bff; --vip-b: #7fd4ff; --vip-glow: #5aa2ff; }
.uname-vip--green  { --vip-a: #1fc973; --vip-b: #7dffb8; --vip-glow: #3ddc95; }
.uname-vip--gold   { --vip-a: #e8a317; --vip-b: #ffe98a; --vip-glow: #ffcc4d; }

/* Duhová jde přes celé spektrum, proto si přeliv i délku řídí sama.
   Odstíny jsou ty z ranků, aby fórum drželo jednu paletu. */
.uname-vip--rainbow {
  background-image: linear-gradient(100deg,
    #ff4d63, #ffc531, #3ce07f, #38c6ff, #a97bff, #ff5099, #ff4d63);
  background-size: 420% 100%;
  animation: uname-sweep 6s linear infinite;
  --vip-glow: #ff7ad9;
}

/* Rank Nesmrtelný má v PHP příznak 'glow'. Text je plnou barvou, takže
   stačí stín na vrstvě pod ním. */
.uname-glow::after {
  text-shadow: 0 0 6px currentColor, 0 0 16px currentColor;
}

/* ------------------------------------------------------------ animace */
/* Procenta u background-position se počítají z rozdílu velikostí, takže
   0-100 % je přesně rozsah, ve kterém gradient text pořád celý překrývá.
   Cokoli nad 100 % ho odsune pryč a text se začne vytrácet. */
/* Pozice jde od 100 % k 0 %: obrázek je širší než text, takže se tím
   přeliv posouvá zleva doprava (opačně by jel proti směru čtení). */
@keyframes uname-sweep {
  from { background-position: 100% 50%; }
  to   { background-position: 0% 50%; }
}
@keyframes uname-rise {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}
@keyframes uname-breathe {
  0%, 100% { text-shadow: 0 0 4px currentColor; }
  50%      { text-shadow: 0 0 11px currentColor, 0 0 20px currentColor; }
}
@keyframes uname-ember {
  0%, 100% { text-shadow: 0 0 5px currentColor, 0 1px 10px currentColor; }
  50%      { text-shadow: 0 0 12px currentColor, 0 2px 22px currentColor; }
}
@keyframes uname-holo-glow {
  0%, 100% { text-shadow: 0 0 6px #7c4dff, 0 0 16px #4dd2ff; }
  50%      { text-shadow: 0 0 12px #ff4dd2, 0 0 26px #ffe94d; }
}
@keyframes uname-royal-glow {
  0%, 100% { text-shadow: 0 0 7px #ffcf3d, 0 0 16px #ff6b6b; }
  50%      { text-shadow: 0 0 15px #ffd75e, 0 0 32px #ff8a3d; }
}
@keyframes uname-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.82) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.12) rotate(18deg); }
}
@keyframes uname-drift {
  0%, 100% { opacity: 0.35; transform: translateY(0) rotate(0deg); }
  50%      { opacity: 1;    transform: translateY(0.16em) rotate(140deg); }
}

/* Kdo nechce pohyb, dostane statickou verzi. Gradient zůstává (je to barva,
   ne pohyb), zamrzne ale uprostřed, aby text nebyl useknutý na jedné barvě. */
@media (prefers-reduced-motion: reduce) {
  .uname[class*="fx-"],
  .uname-vip {
    animation: none !important;
    background-position: 50% 50% !important;
  }
  .uname[class*="fx-"]::after,
  .uname-vip::after {
    animation: none !important;
    text-shadow: 0 0 7px currentColor;
  }
  .uname[class*="fx-"]::before {
    animation: none !important;
    opacity: 0.9;
    transform: none;
  }
}

/* Ve výpisech se jméno tlačí do řádku s dalšími údaji - dekorace po stranách
   by rozhodila mřížku, tak tam nechá jen barvu a záři. */
.thread-sub .uname::before,
.cat-last-meta .uname::before,
.chat-head .uname::before,
.admin-user-name .uname::before { display: none; }
/* Bez štítu se text neposouvá, tak ani kopie pro záři (viz .fx-guardian::after). */
.thread-sub .fx-guardian::after,
.cat-last-meta .fx-guardian::after,
.chat-head .fx-guardian::after,
.admin-user-name .fx-guardian::after { left: 0; }

/* Onyx - černá a červená se střídají a jedou přes jméno zleva doprava.
   Pruhy jsou ostré (černá se do červené nerozpíjí), aby bylo střídání
   vidět a ne jen tmavší odstín červené. */
.fx-onyx {
  background-image: linear-gradient(100deg,
    #ff2a2a 0%, #ff2a2a 18%, #050505 32%, #050505 50%,
    #ff2a2a 64%, #ff2a2a 82%, #050505 96%, #050505 100%);
  background-size: 300% 100%;
  animation: uname-sweep 3.2s linear infinite;
}
/* Černá písmena by na černém pozadí zmizela. Vrstva pod textem proto
   dělá kolem písmen světlý červenobílý obrys - černé části jména se
   pak čtou jako tmavé siluety v záři, červené svítí. */
.fx-onyx::after {
  color: #ffd6d6;
  text-shadow:
    0 0 1px #ffffff, 0 0 2px #ffffff,
    0 0 6px #ff3b3b, 0 0 14px #ff1f1f;
  animation: uname-onyx-glow 2.6s ease-in-out infinite;
}
@keyframes uname-onyx-glow {
  0%, 100% { text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 6px #ff3b3b, 0 0 14px #ff1f1f; }
  50%      { text-shadow: 0 0 1px #ffffff, 0 0 3px #ffffff, 0 0 10px #ff3b3b, 0 0 24px #ff1f1f; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-onyx { animation: none; }
  .fx-onyx::after { animation: none; }
}