/* fx.css — kozmetik efektlerin ortak stilleri.
   Hem herkese açık profil sayfası hem panel önizlemesi yükler; renk için
   --a (vurgu) değişkenini okur, o yüzden uygulayan öğede --a tanımlı olmalı. */

/* Kullanıcı adı efektleri */
.fx-name-glow { animation: fxGlow 3.2s ease-in-out infinite; }
@keyframes fxGlow {
  0%, 100% { text-shadow: 0 0 6px color-mix(in srgb, var(--a) 40%, transparent); }
  50% { text-shadow: 0 0 16px var(--a), 0 0 34px color-mix(in srgb, var(--a) 55%, transparent); }
}
.fx-name-rainbow {
  background: linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #4f8cff, #b06ab3, #ff5f6d);
  background-size: 400% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: fxSlide 7s linear infinite;
}
.fx-name-gold {
  background: linear-gradient(100deg, #8a6d2f 15%, #f7e7a0 38%, #ffd977 50%, #f7e7a0 62%, #8a6d2f 85%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: fxSlide 3.6s linear infinite;
}
@keyframes fxSlide { to { background-position: -400% 0; } }
.fx-name-neon {
  color: #fff; -webkit-text-fill-color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--a), 0 0 30px var(--a),
    0 0 52px color-mix(in srgb, var(--a) 60%, transparent);
}

/* Avatar çerçeveleri. Degrade halka sarmalayıcı ister (img'e ::before olmaz). */
.fx-av-ring { box-shadow: 0 0 0 2.5px var(--a); }
.fx-av-glow {
  box-shadow: 0 0 20px color-mix(in srgb, var(--a) 65%, transparent),
    0 0 44px color-mix(in srgb, var(--a) 32%, transparent);
}
.fx-avwrap { position: relative; display: inline-grid; place-items: center; border-radius: 50%; padding: 3.5px; }
.fx-avwrap::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a), rgba(255,255,255,0.85), var(--a) 55%, rgba(255,255,255,0.5), var(--a));
  animation: fxSpin 5s linear infinite;
}
.fx-avwrap > * { position: relative; }
@keyframes fxSpin { to { transform: rotate(1turn); } }

/* Daktilo imleci */
.fx-caret {
  display: inline-block; width: 2px; height: 1em; background: var(--a);
  vertical-align: text-bottom; margin-left: 2px;
  animation: fxCaret 1s steps(1) infinite;
}
@keyframes fxCaret { 50% { opacity: 0; } }

/* Sayfa kenarlığı: içerikten bağımsız sabit çerçeve; renk/kalınlık satır içinde verilir */
.fx-frame { position: fixed; inset: 12px; pointer-events: none; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .fx-name-glow, .fx-name-rainbow, .fx-name-gold, .fx-avwrap::before, .fx-caret { animation: none; }
}