/* =========================
  CHARACTER EFFECTS
========================= */

.character-effect-wrap {
  --character-effect-motion-from-y: 4px;
  --character-effect-motion-to-y: -4px;
  --character-effect-motion-from-scale: 0.96;
  --character-effect-motion-to-scale: 1;
  --character-effect-motion-from-opacity: 0.25;
  --character-effect-motion-to-opacity: 1;
  --character-effect-motion-duration: 2.4s;
  --character-effect-motion-easing: ease-in-out;

  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: fit-content;
  height: fit-content;
  line-height: 0;
  vertical-align: middle;
  overflow: visible;
  isolation: isolate;
}

.character-effect-character {
  position: relative;
  display: block;
  flex-shrink: 0;
  z-index: 10;
}

.character-effect-layer {
  --character-effect-x: var(--character-effect-default-x, 0px);
  --character-effect-y: var(--character-effect-default-y, 4%);
  --character-effect-width: var(--character-effect-default-width, 46%);
  --character-effect-z: var(--character-effect-default-z, 20);
  --character-effect-origin: var(
    --character-effect-default-origin,
    50% 100%
  );
  --character-effect-anchor-x: -50%;
  --character-effect-anchor-y: -100%;
  --character-effect-rotation: var(
    --character-effect-default-rotation,
    0deg
  );
  --character-effect-aspect-ratio: var(
    --character-effect-default-aspect-ratio,
    auto
  );

  position: absolute;
  left: calc(50% + var(--character-effect-x));
  top: var(--character-effect-y);
  width: var(--character-effect-width);
  pointer-events: none;
  user-select: none;
  z-index: var(--character-effect-z);
  aspect-ratio: var(--character-effect-aspect-ratio);
  transform: translate(
      var(--character-effect-anchor-x),
      var(--character-effect-anchor-y)
    )
    rotate(var(--character-effect-rotation));
  transform-origin: var(--character-effect-origin);
}

.character-effect-wrap[data-character-effect-ready='false']
  > .character-effect-layer {
  visibility: hidden;
}

.character-effect-layer[data-character-effect-placement='overhead'] {
  left: calc(50% + var(--character-effect-x));
  top: var(--character-effect-y);
  --character-effect-anchor-x: -50%;
  --character-effect-anchor-y: -100%;
  transform-origin: var(--character-effect-origin);
}

.character-effect-layer[data-character-effect-placement='behind'],
.character-effect-layer[data-character-effect-placement='aura-back'] {
  --character-effect-width: var(--character-effect-default-width, 118%);
  --character-effect-z: var(--character-effect-default-z, 0);

  left: calc(50% + var(--character-effect-x));
  top: calc(50% + var(--character-effect-y));
  --character-effect-anchor-x: -50%;
  --character-effect-anchor-y: -50%;
  transform-origin: 50% 50%;
}

.character-effect-layer[data-character-effect-placement='front'] {
  --character-effect-width: var(--character-effect-default-width, 100%);
  --character-effect-z: var(--character-effect-default-z, 30);

  left: calc(50% + var(--character-effect-x));
  top: calc(50% + var(--character-effect-y));
  --character-effect-anchor-x: -50%;
  --character-effect-anchor-y: -50%;
  transform-origin: 50% 50%;
}

.character-effect-layer[data-character-effect-placement='front']:is(
    [data-character-effect-context='profile'],
    [data-character-effect-context='inventory'],
    [data-character-effect-context='post'],
    [data-character-effect-context='comment']
  ) {
  top: auto;
  bottom: var(--character-effect-ground-offset, 0px);
  --character-effect-anchor-x: -50%;
  --character-effect-anchor-y: 0%;
  transform-origin: 50% 100%;
}

.character-effect-layer[data-character-effect-placement='front-small'] {
  --character-effect-width: var(--character-effect-default-width, 34%);
  --character-effect-z: var(--character-effect-default-z, 30);

  left: calc(50% + var(--character-effect-x));
  top: calc(58% + var(--character-effect-y));
  --character-effect-anchor-x: -50%;
  --character-effect-anchor-y: -50%;
  transform-origin: 50% 50%;
}

.character-effect-layer[data-character-effect-placement='side-left'] {
  --character-effect-width: var(--character-effect-default-width, 42%);

  left: calc(0px + var(--character-effect-x));
  top: calc(42% + var(--character-effect-y));
  --character-effect-anchor-x: -70%;
  --character-effect-anchor-y: -50%;
  transform-origin: 100% 50%;
}

.character-effect-layer[data-character-effect-placement='side-right'] {
  --character-effect-width: var(--character-effect-default-width, 42%);

  left: calc(100% + var(--character-effect-x));
  top: calc(42% + var(--character-effect-y));
  --character-effect-anchor-x: -30%;
  --character-effect-anchor-y: -50%;
  transform-origin: 0 50%;
}

.character-effect-motion {
  display: block;
  width: 100%;
  opacity: var(--character-effect-motion-to-opacity);
  transform-origin: inherit;
}

.character-effect-motion[data-character-effect-animation='float'] {
  will-change: transform, opacity;
  animation: characterEffectFloat var(--character-effect-motion-duration)
    var(--character-effect-motion-easing) infinite;
}

.character-effect-img {
  display: block;
  width: 100%;
  height: auto;
}

.character-effect-img--heart {
  filter: drop-shadow(0 4px 8px rgba(134, 198, 36, 0.22));
}

.character-effect-sprite {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--character-effect-sprite-aspect-ratio, 1 / 1);
  overflow: hidden;
  transform: translateY(
    var(--character-effect-sprite-frame-bottom-offset, 0%)
  );
}

.character-effect-sprite__sheet {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(var(--character-effect-sprite-columns) * 100%);
  max-width: none;
  height: calc(var(--character-effect-sprite-rows) * 100%);
  transform: translate(
    calc(
      var(--character-effect-sprite-column) * -100% /
        var(--character-effect-sprite-columns)
    ),
    calc(
      var(--character-effect-sprite-row) * -100% /
        var(--character-effect-sprite-rows)
    )
  );
}

.character-effect-sprite--fire {
  filter: drop-shadow(0 3px 8px rgba(255, 96, 0, 0.2));
  will-change: transform;
}

.character-effect-vector {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}

.character-effect-vector--spider-web {
  --spider-web-primary: #c8fff0;
  --spider-web-accent: #4f9f62;
  --spider-web-duration: 4.8s;
  --spider-web-loop: infinite;
}

.character-effect-spider-web {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.character-effect-vector__fallback {
  display: none;
  width: 100%;
  height: auto;
}

.character-effect-vector--spider-web :is(
    .web-afterglow,
    .web-bloom,
    .web-halo,
    .web-anchor,
    .web-sweep,
    .web-spider,
    .web-drops
  ) {
  transform-box: fill-box;
  transform-origin: center;
}

.character-effect-vector--spider-web .web-afterglow {
  animation: characterEffectSpiderWebAfterglow var(--spider-web-duration)
    ease-in-out var(--spider-web-loop);
}

.character-effect-vector--spider-web .web-bloom {
  animation: characterEffectSpiderWebBloom var(--spider-web-duration)
    cubic-bezier(0.22, 0.73, 0.24, 1) var(--spider-web-loop);
}

.character-effect-vector--spider-web .web-halo {
  animation: characterEffectSpiderWebHalo var(--spider-web-duration) ease-in-out
    var(--spider-web-loop);
}

.character-effect-vector--spider-web :is(
    .web-spokes path,
    .web-rings path,
    .web-anchor path,
    .web-sweep path,
    .web-spider-line
  ) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.character-effect-vector--spider-web .web-spokes path {
  animation: characterEffectSpiderWebDrawEarly var(--spider-web-duration)
    cubic-bezier(0.18, 0.75, 0.2, 1) var(--spider-web-loop);
}

.character-effect-vector--spider-web .web-rings-a path {
  animation: characterEffectSpiderWebDrawMiddle var(--spider-web-duration)
    cubic-bezier(0.18, 0.75, 0.2, 1) var(--spider-web-loop);
}

.character-effect-vector--spider-web .web-rings-b path {
  animation: characterEffectSpiderWebDrawLate var(--spider-web-duration)
    cubic-bezier(0.18, 0.75, 0.2, 1) var(--spider-web-loop);
}

.character-effect-vector--spider-web .web-knots {
  transform-box: fill-box;
  transform-origin: center;
  animation: characterEffectSpiderWebKnots var(--spider-web-duration) ease-in-out
    var(--spider-web-loop);
}

.character-effect-vector--spider-web .web-anchor path {
  animation: characterEffectSpiderWebAnchor var(--spider-web-duration)
    ease-in-out var(--spider-web-loop);
}

.character-effect-vector--spider-web .web-sweep path {
  animation: characterEffectSpiderWebSweep var(--spider-web-duration)
    cubic-bezier(0.2, 0.76, 0.22, 1) var(--spider-web-loop);
}

.character-effect-vector--spider-web .web-drops circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: characterEffectSpiderWebDrop var(--spider-web-duration) ease-in-out
    var(--spider-web-loop);
  animation-delay: var(--spider-web-drop-delay);
}

.character-effect-vector--spider-web .web-spider-line {
  animation: characterEffectSpiderWebSpiderLine var(--spider-web-duration)
    ease-in-out var(--spider-web-loop);
}

.character-effect-vector--spider-web .web-spider-body {
  transform-origin: 425px 160px;
  animation: characterEffectSpiderWebSpider var(--spider-web-duration)
    cubic-bezier(0.45, 0.08, 0.25, 1) var(--spider-web-loop);
}

@supports not (transform-box: fill-box) {
  .character-effect-vector--spider-web .character-effect-spider-web {
    display: none;
  }

  .character-effect-vector--spider-web .character-effect-vector__fallback {
    display: block;
  }
}

@keyframes characterEffectSpiderWebAfterglow {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.96);
  }

  28% {
    opacity: 0.2;
    transform: scale(1);
  }

  62% {
    opacity: 0.16;
    transform: scale(1.02);
  }

  88% {
    opacity: 0.1;
    transform: scale(1.04);
  }
}

@keyframes characterEffectSpiderWebBloom {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.72) rotate(-4deg);
  }

  3% {
    opacity: 0.16;
    transform: scale(0.76) rotate(-3.6deg);
  }

  16% {
    opacity: 0.92;
    transform: scale(0.92) rotate(-1.6deg);
  }

  30% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  46% {
    opacity: 0.96;
    transform: scale(1.012) rotate(0.6deg);
  }

  58% {
    opacity: 1;
    transform: scale(1) rotate(-0.4deg);
  }

  70% {
    opacity: 0.82;
    transform: scale(1.025) rotate(1deg);
  }

  84% {
    opacity: 0.42;
    transform: scale(1.055) rotate(2.5deg);
  }

  92% {
    opacity: 0.08;
    transform: scale(1.07) rotate(3deg);
  }
}

@keyframes characterEffectSpiderWebHalo {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.68);
  }

  20% {
    opacity: 0.45;
    transform: scale(0.95);
  }

  45% {
    opacity: 0.28;
    transform: scale(1.02);
  }

  78% {
    opacity: 0.18;
    transform: scale(1.06);
  }

  92% {
    opacity: 0.08;
    transform: scale(1.1);
  }
}

@keyframes characterEffectSpiderWebDrawEarly {
  0%,
  100% {
    opacity: 0.05;
    stroke-dashoffset: 1;
  }

  3% {
    opacity: 0.15;
    stroke-dashoffset: 0.96;
  }

  24%,
  64% {
    opacity: 0.96;
    stroke-dashoffset: 0;
  }

  83% {
    opacity: 0.42;
    stroke-dashoffset: -0.7;
  }

  90% {
    opacity: 0.06;
    stroke-dashoffset: -1;
  }

  92% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }
}

@keyframes characterEffectSpiderWebDrawMiddle {
  0%,
  8%,
  100% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }

  14% {
    opacity: 0.2;
    stroke-dashoffset: 0.9;
  }

  32%,
  64% {
    opacity: 0.92;
    stroke-dashoffset: 0;
  }

  84% {
    opacity: 0.38;
    stroke-dashoffset: -0.72;
  }

  91% {
    opacity: 0.05;
    stroke-dashoffset: -1;
  }

  93% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }
}

@keyframes characterEffectSpiderWebDrawLate {
  0%,
  14%,
  100% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }

  20% {
    opacity: 0.18;
    stroke-dashoffset: 0.9;
  }

  38%,
  65% {
    opacity: 0.9;
    stroke-dashoffset: 0;
  }

  85% {
    opacity: 0.34;
    stroke-dashoffset: -0.74;
  }

  92% {
    opacity: 0.04;
    stroke-dashoffset: -1;
  }

  94% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }
}

@keyframes characterEffectSpiderWebKnots {
  0%,
  24%,
  100% {
    opacity: 0.05;
    transform: scale(0.45);
  }

  35% {
    opacity: 1;
    transform: scale(1.22);
  }

  48% {
    opacity: 0.82;
    transform: scale(0.9);
  }

  65% {
    opacity: 0.74;
    transform: scale(1.02);
  }

  84% {
    opacity: 0.24;
    transform: scale(0.55);
  }

  92% {
    opacity: 0.05;
    transform: scale(0.4);
  }
}

@keyframes characterEffectSpiderWebAnchor {
  0%,
  100% {
    opacity: 0.05;
    stroke-dashoffset: 1;
  }

  3% {
    opacity: 0.12;
    stroke-dashoffset: 0.96;
  }

  18%,
  55% {
    opacity: 0.82;
    stroke-dashoffset: 0;
  }

  79% {
    opacity: 0.25;
    stroke-dashoffset: -0.7;
  }

  88% {
    opacity: 0.04;
    stroke-dashoffset: -1;
  }

  90% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }
}

@keyframes characterEffectSpiderWebSweep {
  0%,
  28%,
  100% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }

  37% {
    opacity: 0.18;
    stroke-dashoffset: 0.8;
  }

  46% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  64% {
    opacity: 0.8;
    stroke-dashoffset: 0;
  }

  84% {
    opacity: 0.32;
    stroke-dashoffset: -0.7;
  }

  91% {
    opacity: 0.04;
    stroke-dashoffset: -1;
  }

  93% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }
}

@keyframes characterEffectSpiderWebDrop {
  0%,
  30%,
  100% {
    opacity: 0.06;
    transform: translate(0, 0) scale(0.25);
  }

  41% {
    opacity: 0.95;
    transform: translate(0, 0) scale(1.18);
  }

  58% {
    opacity: 0.72;
    transform: translate(0, -9px) scale(0.92);
  }

  82% {
    opacity: 0.16;
    transform: translate(
        var(--spider-web-drift-x),
        var(--spider-web-drift-y)
      )
      scale(0.12);
  }

  91% {
    opacity: 0.04;
    transform: translate(
        var(--spider-web-drift-x),
        var(--spider-web-drift-y)
      )
      scale(0.08);
  }
}

@keyframes characterEffectSpiderWebSpiderLine {
  0%,
  9%,
  100% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }

  19%,
  52% {
    opacity: 0.78;
    stroke-dashoffset: 0;
  }

  78% {
    opacity: 0.18;
    stroke-dashoffset: 0.74;
  }

  88% {
    opacity: 0.04;
    stroke-dashoffset: 1;
  }
}

@keyframes characterEffectSpiderWebSpider {
  0%,
  100% {
    opacity: 0.05;
    transform: translateY(-62px) scale(0.62);
  }

  15% {
    opacity: 0.12;
    transform: translateY(-48px) scale(0.72);
  }

  27% {
    opacity: 0.92;
    transform: translateY(0) scale(1);
  }

  52% {
    opacity: 0.9;
    transform: translateY(7px) rotate(5deg);
  }

  65% {
    opacity: 0.75;
    transform: translateY(-2px) rotate(-3deg);
  }

  80% {
    opacity: 0.28;
    transform: translateY(-40px) scale(0.8);
  }

  90% {
    opacity: 0.05;
    transform: translateY(-62px) scale(0.62);
  }
}

@keyframes characterEffectFloat {
  0% {
    opacity: var(--character-effect-motion-from-opacity);
    transform: translateY(var(--character-effect-motion-from-y))
      scale(var(--character-effect-motion-from-scale));
  }

  50% {
    opacity: var(--character-effect-motion-to-opacity);
    transform: translateY(var(--character-effect-motion-to-y))
      scale(var(--character-effect-motion-to-scale));
  }

  100% {
    opacity: var(--character-effect-motion-from-opacity);
    transform: translateY(var(--character-effect-motion-from-y))
      scale(var(--character-effect-motion-from-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-effect-motion[data-character-effect-animation] {
    animation: none;
    opacity: 0.8;
    transform: none;
  }

  .character-effect-vector--spider-web {
    opacity: 0.76;
  }

  .character-effect-vector--spider-web * {
    animation: none !important;
  }

  .character-effect-vector--spider-web :is(
      .web-spokes path,
      .web-rings path,
      .web-anchor path,
      .web-sweep path
    ) {
    opacity: 0.72;
    stroke-dashoffset: 0;
  }

  .character-effect-vector--spider-web .web-bloom {
    opacity: 0.72;
    transform: none;
  }

  .character-effect-vector--spider-web .web-afterglow {
    opacity: 0.18;
    transform: none;
  }

  .character-effect-vector--spider-web .web-halo {
    opacity: 0.2;
    transform: none;
  }

  .character-effect-vector--spider-web .web-knots {
    opacity: 0.68;
    transform: none;
  }

  .character-effect-vector--spider-web .web-sweep {
    opacity: 0.48;
  }

  .character-effect-vector--spider-web :is(.web-spider, .web-drops) {
    display: none;
  }
}

.store-card__effect-stage,
.profile-character-effect-card__stage {
  width: 72px;
}

.store-card__effect-character,
.profile-character-effect-card__character {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: contain;
}

.store-item-preview__character-effect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.store-item-preview__character-effect-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 32px;
  margin: 0;
  overflow: visible;
}

.store-item-preview__effect-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  max-width: 100%;
  overflow: visible;
}

.store-item-preview__effect-character {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 220px;
  max-height: 220px;
  height: auto;
  object-fit: contain;
}

.store-item-preview__effect-help {
  margin: 0;
  color: var(--color-text-sub);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 700px) {
  .profile-character-effect-card__stage {
    width: 48px;
  }

  .profile-character-effect-card__character {
    height: 48px;
  }

  .store-item-preview__effect-stage {
    width: 160px;
  }

  .store-item-preview__effect-character {
    max-width: 160px;
    max-height: 160px;
  }

  .store-item-preview__character-effect-card {
    min-height: 220px;
    padding: 24px;
  }
}