/* =========================================================
   friend.tv.it — Animated Text page 
   ========================================================= */



/* =========================================================
   Animated text
   ========================================================= */

.animated-text{
  font-size: var(--fs0, 32px);
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: .3px;
  text-align:center;

  background: linear-gradient(var(--angle, 90deg), var(--c1, #ff5ccf), var(--c2, #71d7ff));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;

  text-shadow: var(--strokeShadow, none);

  animation-duration: var(--dur, 2.5s);
  animation-delay: var(--delay, 0s);
  animation-timing-function: var(--ease, ease-in-out);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;

  will-change: transform, filter, background-position, background-size, text-shadow, width;
}

/* Variants */
.anim-gradientShift{
  background-size: 220% 220%;
  background-position: 0% 50%;
  animation-name: gradientShift;
}
@keyframes gradientShift{
  0%{ background-position:0% 50%; font-size: var(--fs0, 32px); }
  100%{ background-position:100% 50%; font-size: var(--fs1, 64px); }
}

.anim-shimmer{
  background-size: 260% 100%;
  animation-name: shimmer;
}
@keyframes shimmer{
  0%{
    background-image: linear-gradient(var(--angle, 90deg),
      var(--c1, #ff5ccf),
      color-mix(in srgb, var(--c1, #ff5ccf) 35%, white 65%),
      var(--c2, #71d7ff)
    );
    background-position: 0% 50%;
    font-size: var(--fs0, 32px);
    filter: brightness(1);
  }
  100%{
    background-position: 100% 50%;
    font-size: var(--fs1, 64px);
    filter: brightness(1.08);
  }
}

.anim-pulse{ animation-name: pulse; }
@keyframes pulse{
  0%{ transform: scale(1); font-size: var(--fs0, 32px); filter: saturate(1); }
  100%{ transform: scale(1.08); font-size: var(--fs1, 64px); filter: saturate(1.2); }
}

.anim-glow{ animation-name: glow; }
@keyframes glow{
  0%{ font-size: var(--fs0, 32px); filter: blur(0px); }
  100%{ font-size: var(--fs1, 64px); filter: blur(.15px); }
}

.glow-extra{
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c2, #71d7ff) 35%, transparent))
          drop-shadow(0 0 22px color-mix(in srgb, var(--c1, #ff5ccf) 25%, transparent));
}

.anim-bounce{
  animation-name: bounce;
  animation-timing-function: cubic-bezier(.2,.9,.25,1);
}
@keyframes bounce{
  0%{ transform: translateY(0); font-size: var(--fs0, 32px); }
  60%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); font-size: var(--fs1, 64px); }
}

/* Typewriter */
.typewrap{
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  border-right: 3px solid var(--caretColor, #000);
  width: 0ch;
  animation:
    typewriterLoop var(--dur, 2.5s) steps(var(--chars, 28)) infinite,
    caretBlink 0.7s steps(2,end) infinite;
}
.typewrap.is-off{
  width:auto;
  overflow:visible;
  border-right:0;
  animation:none;
}
@keyframes typewriterLoop{
  0%{ width: 0ch; }
  45%{ width: calc(var(--chars, 28) * 1ch); }
  65%{ width: calc(var(--chars, 28) * 1ch); }
  100%{ width: 0ch; }
}
@keyframes caretBlink{ 50%{ border-right-color: transparent; } }

/* Glyph grid */
.glyphGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
@media (min-width: 560px){
  .glyphGrid{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 860px){
  .glyphGrid{ grid-template-columns: repeat(6, 1fr); }
}

.glyphBtn{
  border:2px solid #000;
  border-radius:12px;
  padding:8px 8px;
  background: rgba(255,255,255,.78);
  box-shadow: 2px 2px 0 #000;
  cursor:pointer;
  user-select:none;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:64px;
}
.glyphBtn:active{ transform: translate(2px,2px); box-shadow: 0 0 0 #000; }

.glyphTop{
  font-weight:1000;
  font-family: var(--mono);
  font-size: 12px;
  line-height:1.15;
  word-break: break-word;
}
.glyphTag{
  font-size:10px;
  opacity:.8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}