/* ══════════════════════════════════════════════════════════════════════════
   WorldMates — Modern visual layer for the user profile/timeline page.
   Loaded LAST, after style.css. Same additive approach as chat-modern.css /
   welcome-modern.css: never touch layout-critical properties (position,
   width/height, the cover's padding-bottom aspect-ratio trick, the avatar's
   -70px overlap margin) — only add color, shadow, blur, and motion.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --wmc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wmc-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 1. Cover photo — gradient wash + vignette on top of the existing blur ── */

.wo_user_profile .cardheader {
  position: relative;
}
.wo_user_profile .cardheader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 22%) 100%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgb(0 0 0 / 12%), transparent 70%);
}

/* ── 2. Header card — subtle glass, replacing the flat transparent card ──── */

.tag_cover_bg .card.hovercard,
.wo_user_profile .card.hovercard {
  animation: wmc-profile-in .4s var(--wmc-smooth) both;
}

@keyframes wmc-profile-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 3. Avatar — gradient ring + shadow (layers on top of, doesn't replace,
   the existing .unseen_story ring mechanic — different pseudo/property). ── */

.wo_user_profile .user-avatar {
  border-radius: 50%;
  transition: transform .25s var(--wmc-spring);
}
.wo_user_profile .user-avatar img {
  box-shadow: 0 4px 18px rgb(0 0 0 / 22%), 0 0 0 2px color-mix(in srgb, var(--main) 55%, transparent);
  border-radius: 50%;
  transition: box-shadow .25s var(--wmc-smooth);
}
.wo_user_profile .user-avatar:hover {
  transform: translateY(-2px);
}
.wo_user_profile .user-avatar:hover img {
  box-shadow: 0 6px 24px rgb(0 0 0 / 28%), 0 0 0 3px color-mix(in srgb, var(--main) 70%, transparent);
}

/* ── 4. Action buttons (dropdown / edit-profile / follow-message row) ────── */

.tag_user_prof_opts .dropdown-toggle,
.wow_user_page_btns .btn {
  transition: transform .16s var(--wmc-spring), box-shadow .2s var(--wmc-smooth), background-color .2s;
}
.tag_user_prof_opts .dropdown-toggle:hover,
.wow_user_page_btns .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgb(0 0 0 / 20%);
}
.wow_user_page_btns .btn.btn-main {
  background: linear-gradient(135deg, var(--main), color-mix(in srgb, var(--main) 72%, #000));
}

/* ── 5. Tab navigation — animated underline + hover background ──────────── */

.wo_user_profile .user-bottom-nav li a {
  border-radius: 10px 10px 0 0;
  transition: background-color .18s var(--wmc-smooth), color .18s;
}
.wo_user_profile .user-bottom-nav li a:hover {
  background: color-mix(in srgb, var(--main) 7%, transparent);
}
.wo_user_profile .user-bottom-nav li .menuactive:after {
  transition: left .2s var(--wmc-smooth), right .2s var(--wmc-smooth);
}

/* ── 6. Social links row — hover scale + accent glow ─────────────────────── */

.wo_user_profile .event-info-cont-small .social-links a {
  display: inline-flex;
  transition: transform .18s var(--wmc-spring), filter .18s var(--wmc-smooth);
}
.wo_user_profile .event-info-cont-small .social-links a:hover {
  transform: translateY(-2px) scale(1.12);
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
}

/* ── 7. Profile completion bar — nicer step chips ────────────────────────── */

.profile-completion-bar .body .step {
  transition: transform .16s var(--wmc-spring), background-color .18s, border-color .18s;
}
.profile-completion-bar .body .step:not(.done):hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--main) 40%, transparent);
}

/* ── 8. Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tag_cover_bg .card.hovercard,
  .wo_user_profile .card.hovercard,
  .wo_user_profile .user-avatar,
  .wo_user_profile .user-avatar img,
  .tag_user_prof_opts .dropdown-toggle,
  .wow_user_page_btns .btn,
  .wo_user_profile .user-bottom-nav li a,
  .wo_user_profile .event-info-cont-small .social-links a,
  .profile-completion-bar .body .step {
    animation: none !important;
    transition: none !important;
  }
}