/* =========================================================
   TokenCast — 100 animasi = 25 efek masuk × 4 efek diam
   Dipakai halaman utama & pratinjau di dashboard admin.
   Variabel: --a-name, --a-dur, --a-ease, --a-stagger
   ========================================================= */

/* ---------- Pemutar efek masuk ---------- */
.tc-anim {
  animation-name: var(--a-name, tc-fadeIn);
  animation-duration: var(--a-dur, .8s);
  animation-timing-function: var(--a-ease, ease-out);
  animation-fill-mode: both;
  backface-visibility: hidden;
}
.tc-split { perspective: 700px; }
.tc-split .word { display: inline-block; white-space: nowrap; }
.tc-split .ch { display: inline-block; white-space: pre; }
.tc-split.tc-play .ch {
  animation-name: var(--a-name, tc-fadeIn);
  animation-duration: var(--a-dur, .5s);
  animation-timing-function: var(--a-ease, ease-out);
  animation-fill-mode: both;
  animation-delay: calc(var(--i, 0) * var(--a-stagger, .05s));
  transform-origin: 50% 50% -.3em;
}

/* ---------- Efek diam (berjalan terus) ---------- */
.tc-idle { position: relative; }
[data-idle="pulse"] .tc-idle { animation: tc-idle-pulse 2.6s ease-in-out infinite; }
[data-idle="float"] .tc-idle { animation: tc-idle-float 4s ease-in-out infinite; }
[data-idle="shimmer"] .tc-idle::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  background-size: 260% 100%;
  mix-blend-mode: soft-light;
  animation: tc-idle-shimmer 3.4s ease-in-out infinite;
}
@keyframes tc-idle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes tc-idle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.12em); } }
@keyframes tc-idle-shimmer { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }

/* ---------- Dasar ---------- */
@keyframes tc-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tc-zoomIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes tc-zoomOut { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
@keyframes tc-slideUp { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
@keyframes tc-slideDown { from { opacity: 0; transform: translateY(-60%); } to { opacity: 1; transform: none; } }
@keyframes tc-slideLeft { from { opacity: 0; transform: translateX(40%); } to { opacity: 1; transform: none; } }
@keyframes tc-slideRight { from { opacity: 0; transform: translateX(-40%); } to { opacity: 1; transform: none; } }
@keyframes tc-blurIn { from { opacity: 0; filter: blur(18px); transform: scale(1.08); } to { opacity: 1; filter: blur(0); transform: none; } }

/* ---------- Putar & Balik ---------- */
@keyframes tc-flipX {
  0% { opacity: 0; transform: perspective(600px) rotateX(90deg); }
  40% { transform: perspective(600px) rotateX(-15deg); }
  70% { opacity: 1; transform: perspective(600px) rotateX(8deg); }
  100% { transform: perspective(600px) rotateX(0); }
}
@keyframes tc-flipY {
  0% { opacity: 0; transform: perspective(600px) rotateY(90deg); }
  40% { transform: perspective(600px) rotateY(-15deg); }
  70% { opacity: 1; transform: perspective(600px) rotateY(8deg); }
  100% { transform: perspective(600px) rotateY(0); }
}
@keyframes tc-rotateIn { from { opacity: 0; transform: rotate(-200deg) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes tc-rollIn { from { opacity: 0; transform: translateX(-60%) rotate(-120deg); } to { opacity: 1; transform: none; } }
@keyframes tc-swing {
  0% { opacity: 0; transform: rotate(0); transform-origin: top center; }
  20% { opacity: 1; transform: rotate(12deg); transform-origin: top center; }
  40% { transform: rotate(-9deg); transform-origin: top center; }
  60% { transform: rotate(5deg); transform-origin: top center; }
  80% { transform: rotate(-3deg); transform-origin: top center; }
  100% { transform: rotate(0); transform-origin: top center; }
}
@keyframes tc-lightSpeed {
  0% { opacity: 0; transform: translateX(60%) skewX(-30deg); }
  60% { opacity: 1; transform: skewX(20deg); }
  80% { transform: skewX(-5deg); }
  100% { transform: none; }
}

/* ---------- Pantul & Goyang ---------- */
@keyframes tc-bounceIn {
  0% { opacity: 0; transform: scale(.3); }
  20% { transform: scale(1.1); }
  40% { transform: scale(.9); }
  60% { opacity: 1; transform: scale(1.03); }
  80% { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tc-rubberBand {
  0% { opacity: 0; transform: scale(1); }
  20% { opacity: 1; }
  30% { transform: scale(1.25, .75); }
  40% { transform: scale(.75, 1.25); }
  50% { transform: scale(1.15, .85); }
  65% { transform: scale(.95, 1.05); }
  75% { transform: scale(1.05, .95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tc-jello {
  0% { opacity: 0; transform: none; }
  11% { opacity: 1; }
  22% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33% { transform: skewX(6.25deg) skewY(6.25deg); }
  44% { transform: skewX(-3.1deg) skewY(-3.1deg); }
  55% { transform: skewX(1.5deg) skewY(1.5deg); }
  66% { transform: skewX(-.8deg) skewY(-.8deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes tc-tada {
  0% { opacity: 0; transform: scale(1); }
  10%, 20% { opacity: 1; transform: scale(.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes tc-heartBeat {
  0% { opacity: 0; transform: scale(1); }
  10% { opacity: 1; }
  14% { transform: scale(1.18); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); }
  70% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tc-dropIn {
  0% { opacity: 0; transform: translateY(-120%); }
  50% { opacity: 1; transform: translateY(0); }
  65% { transform: translateY(-14%); }
  80% { transform: translateY(0); }
  90% { transform: translateY(-4%); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Per karakter ---------- */
@keyframes tc-typeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tc-flipDigit {
  0% { opacity: 0; transform: rotateX(-100deg); }
  60% { opacity: 1; transform: rotateX(20deg); }
  100% { opacity: 1; transform: rotateX(0); }
}
@keyframes tc-waveIn {
  0% { opacity: 0; transform: translateY(.8em) scale(.6); }
  60% { opacity: 1; transform: translateY(-.15em) scale(1.08); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Efek khusus ---------- */
@keyframes tc-glitch {
  0% { opacity: 0; transform: translate(0); text-shadow: none; }
  10% { opacity: 1; transform: translate(-4px, 2px); text-shadow: 4px 0 #ff0050, -4px 0 #00e5ff; clip-path: inset(10% 0 55% 0); }
  20% { transform: translate(4px, -2px); clip-path: inset(60% 0 5% 0); }
  30% { transform: translate(-3px, 0); text-shadow: -3px 0 #ff0050, 3px 0 #00e5ff; clip-path: inset(30% 0 30% 0); }
  40% { transform: translate(2px, 1px); clip-path: inset(0 0 80% 0); }
  50% { transform: translate(-1px, -1px); clip-path: inset(0); text-shadow: 2px 0 #ff0050, -2px 0 #00e5ff; }
  70% { transform: translate(1px, 0); text-shadow: -1px 0 #ff0050, 1px 0 #00e5ff; }
  100% { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes tc-flicker {
  0%, 18%, 22%, 25%, 53%, 57% { opacity: 0; }
  19%, 23%, 54% { opacity: .55; }
  20%, 24%, 55%, 100% { opacity: 1; }
}