/* Original VibeForge avatar art. Only the large profile avatar is decorated. */
.vf-profile-shell .profile-avatar-wrapper > img {
  position: relative;
  z-index: 0;
}

.vf-avatar-effect-art {
  display: none;
  position: absolute;
  width: 128%;
  height: 128%;
  left: 50%;
  top: 50%;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.avatar-frame-fx-aurora > .vf-avatar-effect-art,
.avatar-frame-fx-radiant > .vf-avatar-effect-art,
.avatar-frame-fx-pride > .vf-avatar-effect-art,
.avatar-frame-fx-trans > .vf-avatar-effect-art,
.avatar-frame-fx-xmas > .vf-avatar-effect-art,
.avatar-frame-fx-autumn > .vf-avatar-effect-art,
.avatar-frame-fx-hallow > .vf-avatar-effect-art,
.avatar-frame-fx-easter > .vf-avatar-effect-art {
  display: block;
}

.avatar-frame-fx-bubbles > .vf-avatar-effect-art,
.avatar-frame-fx-doodle > .vf-avatar-effect-art,
.avatar-frame-fx-butter > .vf-avatar-effect-art,
.avatar-frame-fx-galaxy > .vf-avatar-effect-art {
  display: block;
}

.avatar-frame-fx-aurora > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/aurora.webp'); }
.avatar-frame-fx-radiant > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/radiant.webp'); }
.avatar-frame-fx-pride > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/pride.webp'); }
.avatar-frame-fx-trans > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/trans-pride.webp'); }
.avatar-frame-fx-xmas > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/christmas.webp'); }
.avatar-frame-fx-autumn > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/thanksgiving.webp'); }
.avatar-frame-fx-hallow > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/halloween.webp'); }
.avatar-frame-fx-easter > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/easter.webp'); }
.avatar-frame-fx-bubbles > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/bubbles.webp'); }
.avatar-frame-fx-doodle > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/doodle.webp'); }
.avatar-frame-fx-butter > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/butterfly.webp'); }
.avatar-frame-fx-galaxy > .vf-avatar-effect-art { background-image: url('../images/avatar-effects/galaxy.webp'); }

.vf-profile-shell .avatar-frame-fx-aurora > .vf-avatar-effect-art,
.vf-profile-shell .avatar-frame-fx-pride > .vf-avatar-effect-art,
.vf-profile-shell .avatar-frame-fx-trans > .vf-avatar-effect-art {
  animation: vf-avatar-orbit 7s ease-in-out infinite;
}

.vf-profile-shell .avatar-frame-fx-radiant > .vf-avatar-effect-art,
.vf-profile-shell .avatar-frame-fx-xmas > .vf-avatar-effect-art,
.vf-profile-shell .avatar-frame-fx-autumn > .vf-avatar-effect-art,
.vf-profile-shell .avatar-frame-fx-hallow > .vf-avatar-effect-art,
.vf-profile-shell .avatar-frame-fx-easter > .vf-avatar-effect-art {
  animation: vf-avatar-glow 5s ease-in-out infinite;
}

.vf-profile-shell .avatar-frame-fx-bubbles > .vf-avatar-effect-art {
  animation: vf-avatar-bob 5.5s ease-in-out infinite;
}

.vf-profile-shell .avatar-frame-fx-doodle > .vf-avatar-effect-art {
  animation: vf-avatar-wiggle 4s ease-in-out infinite;
}

.vf-profile-shell .avatar-frame-fx-butter > .vf-avatar-effect-art {
  animation: vf-avatar-flutter 5s ease-in-out infinite;
}

.vf-profile-shell .avatar-frame-fx-galaxy > .vf-avatar-effect-art {
  animation: vf-avatar-orbit 8s ease-in-out infinite;
}

@keyframes vf-avatar-orbit {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(3deg) scale(1.025); }
}

@keyframes vf-avatar-glow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  50% { transform: translate(-50%, -50%) scale(1.035); filter: brightness(1.12); }
}

@keyframes vf-avatar-bob {
  0%, 100% { transform: translate(-50%, -50%) translateY(2px) scale(1); }
  50% { transform: translate(-50%, -50%) translateY(-3px) scale(1.025); }
}

@keyframes vf-avatar-wiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  25% { transform: translate(-50%, -50%) rotate(2deg); }
  50% { transform: translate(-50%, -50%) rotate(-1deg); }
  75% { transform: translate(-50%, -50%) rotate(3deg); }
}

@keyframes vf-avatar-flutter {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(2deg) scale(1.025); }
}

/* The existing static frames remain available next to the new art choices. */
.vf-avatar-effects-setting fieldset { min-width: 0; }
.vf-avatar-effects-setting legend { float: none; width: auto; margin-bottom: .25rem; font-size: 1rem; }
.vf-avatar-choice-heading { margin: 1rem 0 .55rem; font-size: .8rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; opacity: .76; }
.vf-avatar-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .7rem; }
.vf-avatar-choice { min-width: 0; cursor: pointer; }
.vf-avatar-choice-content { display: flex; min-height: 116px; flex-direction: column; align-items: center; justify-content: center; gap: .42rem; padding: .55rem .3rem; border: 1px solid rgba(87, 112, 141, .26); border-radius: 14px; background: rgba(138, 161, 184, .06); transition: border-color .18s, box-shadow .18s, background-color .18s; }
.vf-avatar-choice:hover .vf-avatar-choice-content { border-color: rgba(25, 125, 193, .6); background: rgba(25, 125, 193, .08); }
.vf-avatar-choice input:checked + .vf-avatar-choice-content { border-color: #1679bd; background: rgba(22, 121, 189, .1); box-shadow: inset 0 0 0 1px #1679bd, 0 4px 14px rgba(22, 121, 189, .13); }
.vf-avatar-choice input:focus-visible + .vf-avatar-choice-content { outline: 3px solid #1679bd; outline-offset: 3px; }
.vf-avatar-choice-avatar { position: relative; display: block; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; }
.vf-avatar-choice-avatar > img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }
.vf-avatar-choice-avatar > .vf-avatar-effect-art { width: 128%; height: 128%; }
.vf-avatar-choice-avatar.avatar-frame-gold > img { border: 3px solid #d4af37; }
.vf-avatar-choice-avatar.avatar-frame-silver > img { border: 3px solid #c0c0c0; }
.vf-avatar-choice-avatar.avatar-frame-rainbow > img { border: 3px solid #af64e6; box-shadow: 0 0 0 2px #ffbd4a, 0 0 0 4px #4ecbb7; }
.vf-avatar-choice-avatar.avatar-frame-neon > img { border: 3px solid #00d5e8; box-shadow: 0 0 9px rgba(0, 213, 232, .7); }
.vf-avatar-choice-label { position: relative; z-index: 2; overflow-wrap: anywhere; text-align: center; font-size: .78rem; font-weight: 650; line-height: 1.2; }
.vf-avatar-choice input:checked + .vf-avatar-choice-content .vf-avatar-effect-art,
.vf-avatar-choice:hover .vf-avatar-effect-art { animation: vf-avatar-glow 5s ease-in-out infinite; }
.vf-avatar-choice input:checked + .vf-avatar-choice-content .avatar-frame-fx-bubbles > .vf-avatar-effect-art,
.vf-avatar-choice:hover .avatar-frame-fx-bubbles > .vf-avatar-effect-art { animation-name: vf-avatar-bob; }
.vf-avatar-choice input:checked + .vf-avatar-choice-content .avatar-frame-fx-doodle > .vf-avatar-effect-art,
.vf-avatar-choice:hover .avatar-frame-fx-doodle > .vf-avatar-effect-art { animation-name: vf-avatar-wiggle; }
.vf-avatar-choice input:checked + .vf-avatar-choice-content .avatar-frame-fx-butter > .vf-avatar-effect-art,
.vf-avatar-choice:hover .avatar-frame-fx-butter > .vf-avatar-effect-art { animation-name: vf-avatar-flutter; }
.vf-avatar-choice input:checked + .vf-avatar-choice-content .avatar-frame-fx-galaxy > .vf-avatar-effect-art,
.vf-avatar-choice:hover .avatar-frame-fx-galaxy > .vf-avatar-effect-art { animation-name: vf-avatar-orbit; }

@media (prefers-reduced-motion: reduce) {
  .vf-profile-shell .vf-avatar-effect-art,
  .vf-avatar-choice .vf-avatar-effect-art { animation: none !important; transform: translate(-50%, -50%) !important; filter: none !important; }
  .vf-avatar-choice-content { transition: none; }
}

/* Keep profile art clear of the cover edge and the stacked identity panel. */
/* Presets style the profile components, but the page canvas follows the site. */
html body.vf-page-profile .main-wrapper .vf-profile-shell.profile-theme-preset-page {
  background: transparent !important;
}

@media (max-width: 991.98px) {
  html body.vf-page-profile:not(.night-mode) .main-wrapper .vf-profile-shell .profile-header .profile-name-wrapper .profile-header-title-row > a:first-child,
  html body.vf-page-profile:not(.night-mode) .main-wrapper .vf-profile-shell .profile-header .profile-name-wrapper .profile-header-title-row > a:first-child:visited {
    color: #13293a !important;
    text-shadow: none !important;
  }

  html body.vf-page-profile .main-wrapper .vf-profile-shell .profile-header:has(.profile-avatar-wrapper[class*="avatar-frame-fx-"]) .profile-name-wrapper {
    margin-top: 24px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  html body.vf-page-profile .main-wrapper .vf-profile-shell .profile-header .profile-header-title-row {
    justify-content: center !important;
    margin-top: 18px !important;
  }

  html body.vf-page-profile:not(.night-mode) .main-wrapper .vf-profile-shell .profile-header .profile-header-meta-item,
  html body.vf-page-profile:not(.night-mode) .main-wrapper .vf-profile-shell .profile-header .profile-header-meta-item i,
  html body.vf-page-profile:not(.night-mode) .main-wrapper .vf-profile-shell .profile-header .profile-header-meta-link,
  html body.vf-page-profile:not(.night-mode) .main-wrapper .vf-profile-shell .profile-header .profile-header-pronouns,
  html body.vf-page-profile:not(.night-mode) .main-wrapper .vf-profile-shell .profile-header .profile-header-identity {
    color: #24445b !important;
    text-shadow: none !important;
  }

  html body.vf-page-profile:not(.night-mode) .main-wrapper .vf-profile-shell .profile-header .profile-header-social-link {
    background: #31546b !important;
    color: #fff !important;
  }

  html body.vf-page-profile .main-wrapper .vf-profile-shell .profile-tabs-wrapper {
    scrollbar-width: none !important;
  }

  html body.vf-page-profile .main-wrapper .vf-profile-shell .profile-tabs-wrapper::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }

  /* The logo already links home; retain a compact, usable search field beside nav. */
  html body.vf-page-profile .main-wrapper .main-header .header-search-cluster .home-icon {
    display: none !important;
  }

  html body.vf-page-profile .main-wrapper .main-header .header-search-cluster,
  html body.vf-page-profile .main-wrapper .main-header .header-search-cluster .search-wrapper,
  html body.vf-page-profile .main-wrapper .main-header .header-search-cluster .vf-header-search-form,
  html body.vf-page-profile .main-wrapper .main-header .header-search-cluster #search-input {
    width: 110px !important;
    max-width: 110px !important;
  }
}