/* The website and texturepack share a 16-frame, 64px water-aura sprite. */
.titan-aura {
  --aura-size: 128px;
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  width: var(--aura-size);
  height: var(--aura-size);
  background-image: url('assets/icons/titan-aura-strip.png?v=20261013-ornate');
  background-repeat: no-repeat;
  background-size: var(--aura-size) calc(var(--aura-size) * 16);
  background-position: 0 0;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 5px #39ccee55);
  animation: titan-water-frames 1.6s steps(16, end) infinite;
}
.rank-card[data-rank="titan"] .rank-visual {
  background-color: #e4f5ff;
  background-image: radial-gradient(ellipse at center, #9beefa88, #d8eff850 58%, transparent 78%);
}
.rank-card[data-rank="titan"] .rank-visual::before {
  background: #eaffff55;
  box-shadow: 0 0 0 10px #b3eeff25;
}
.rank-card[data-rank="titan"]:hover .titan-aura {
  filter: drop-shadow(0 0 8px #1bcbefaa);
}
.titan-aura--dialog {
  --aura-size: 160px;
  display: block;
  margin: -12px auto -9px;
}
@keyframes titan-water-frames {
  to { background-position: 0 calc(var(--aura-size) * -16); }
}
body.motion-off .titan-aura {
  animation: none;
  background-image: url('assets/icons/titan-aura-poster.png?v=20261013-ornate');
  background-size: 100% 100%;
  background-position: 0 0;
}
@media (max-width: 650px) {
  .titan-aura--card { --aura-size: 144px; }
  .titan-aura--dialog { --aura-size: 144px; }
}
@media (max-width: 360px) {
  .titan-aura--card { --aura-size: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .titan-aura {
    animation: none;
    background-image: url('assets/icons/titan-aura-poster.png?v=20261013-ornate');
    background-size: 100% 100%;
    background-position: 0 0;
  }
}