/* ===== Developer credit: continuous Dragon-Ball-style charge-up animation =====
   Used in the footer "Developed by" line across every page. */

.dev-credit-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: gokuCharge 4s ease-in-out infinite;
}

.dev-credit-wrap .dev-credit{
  color: inherit;
}

/* letters "power up" like a charging aura, staggered per letter */
.dev-name span{
  display: inline-block;
  color: var(--c);
  text-shadow: 0 0 4px currentColor;
  animation: devPowerUp 1.8s ease-in-out infinite;
}
.dev-name span:nth-child(1){ animation-delay: 0s; }
.dev-name span:nth-child(2){ animation-delay: .1s; }
.dev-name span:nth-child(3){ animation-delay: .2s; }
.dev-name span:nth-child(4){ animation-delay: .3s; }
.dev-name span:nth-child(5){ animation-delay: .4s; }
.dev-name span:nth-child(6){ animation-delay: .5s; }
.dev-name span:nth-child(7){ animation-delay: .6s; }
.dev-name span:nth-child(8){ animation-delay: .7s; }
.dev-name span:nth-child(9){ animation-delay: .8s; }
.dev-name span:nth-child(10){ animation-delay: .9s; }
@keyframes devPowerUp{
  0%, 100%{ transform: translateY(0) scale(1); text-shadow: 0 0 3px currentColor; }
  50%{ transform: translateY(-3px) scale(1.18); text-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }
}

/* Dragon Ball: spinning orange orb with a pulsing charge-up aura */
.db-ball{
  position: relative;
  width: 12px; height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffe9a8, #ffb300 45%, #e8890c 78%, #a85d00 100%);
  animation: dbSpin 3s linear infinite, dbAura 1.6s ease-in-out infinite;
}
.db-star{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 6.5px; line-height: 1; color: #c62828;
  text-shadow: 0 0 1px rgba(0,0,0,.5);
}
@keyframes dbSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes dbAura{
  0%, 100%{ box-shadow: 0 0 5px rgba(255,179,0,.5), 0 0 10px rgba(255,140,0,.3); }
  50%{ box-shadow: 0 0 10px rgba(255,205,0,.9), 0 0 20px rgba(255,140,0,.6); }
}

/* expanding golden aura rings pulsing outward from the credit line */
.dev-credit-wrap::before,
.dev-credit-wrap::after{
  content: "";
  position: absolute;
  top: 50%; left: 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,205,0,.65);
  transform: translate(-50%, -50%) scale(.3);
  opacity: 0;
  pointer-events: none;
  animation: gokuRing 4s ease-out infinite;
}
.dev-credit-wrap::after{ animation-delay: 2s; }
@keyframes gokuRing{
  0%{ transform: translate(-50%, -50%) scale(.3); opacity: .85; border-color: rgba(255,220,0,.85); }
  60%{ opacity: .3; }
  100%{ transform: translate(-50%, -50%) scale(5); opacity: 0; border-color: rgba(255,140,0,0); }
}

/* the whole line trembles as power builds, then flashes gold at full charge */
@keyframes gokuCharge{
  0%, 68%{ transform: translateX(0); filter: brightness(1); }
  76%{ transform: translateX(-1px); }
  79%{ transform: translateX(1px); }
  82%{ transform: translateX(-1px); }
  85%{ transform: translateX(1px); }
  88%{ transform: translateX(0); filter: brightness(1.15); }
  95%{ transform: scale(1.04); filter: brightness(1.9) saturate(1.3); }
  100%{ transform: scale(1); filter: brightness(1); }
}

/* rising "ki" energy sparks spawned continuously by dev-credit-fx.js */
.ki-field{
  position: absolute;
  top: -10px; bottom: -10px; left: -6px; right: -6px;
  pointer-events: none;
  overflow: hidden;
}
.ki-spark{
  position: absolute;
  bottom: 8px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5c2, #ffcc33 55%, transparent 75%);
  box-shadow: 0 0 4px #ffcc33, 0 0 8px #ff9900;
  animation: kiRise 1.5s ease-out forwards;
}
@keyframes kiRise{
  0%{ transform: translateY(0) scale(1); opacity: .9; }
  100%{ transform: translateY(-24px) scale(.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .dev-name span, .db-ball, .ki-spark, .dev-credit-wrap,
  .dev-credit-wrap::before, .dev-credit-wrap::after{ animation: none !important; }
}

/* Developer credit link -> https://ramchandraspace.netlify.app/ */
a.dev-name{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 6px 2px;              /* larger tap/click area for the small text */
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
a.dev-name:hover{ border-bottom-color: #ffcc33; }
a.dev-name:focus-visible{
  outline: 2px solid #ffcc33;
  outline-offset: 2px;
  border-radius: 3px;
}