/* ============================================================
   Lynkova — VELVET DUSK THEME (Luxury Royal Lavender)
   Premium Animated Theme — Business Plan+
   ============================================================ */

/* ---------- Google Font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ---------- CSS Custom Properties ---------- */
.theme-velvet-dusk {
  --velvet-bg: var(--profile-bg, #090915);
  --velvet-primary: var(--profile-accent, #8b5cf6);
  --velvet-lavender: #ebd5ff;
  --velvet-lavender-hover: #f3e8ff;
  --velvet-dark: #3b0764;
  --velvet-dark-hover: #4c1d95;
  --velvet-text: var(--profile-text-primary, #ebd5ff);
  --velvet-text-dim: var(--profile-text-secondary, rgba(235, 213, 255, 0.7));
  --velvet-glass: rgba(14, 10, 26, 0.55);
  --velvet-border: rgba(235, 213, 255, 0.15);
}

/* ---------- Background Base ---------- */
.theme-velvet-dusk .profile-bg {
  background: var(--velvet-bg) !important;
  animation: none !important;
}

.theme-velvet-dusk .profile-bg::after {
  display: none;
}

/* ---------- Animation Layer: Velvet Glow ---------- */
.theme-velvet-dusk .anim-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.theme-velvet-dusk .anim-layer::before,
.theme-velvet-dusk .anim-layer::after,
.theme-velvet-dusk .velvet-dusk-orb-3 {
  content: '';
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

/* Orb 1: Violet/Magenta Glow */
.theme-velvet-dusk .anim-layer::before {
  width: 600px;
  height: 380px;
  background: radial-gradient(circle, #581c87 0%, transparent 70%);
  filter: blur(100px);
  opacity: 0.22;
  top: 10%;
  left: 5%;
  animation: velvetFloat1 18s ease-in-out infinite;
}

/* Orb 2: Deep Indigo Glow */
.theme-velvet-dusk .anim-layer::after {
  width: 550px;
  height: 350px;
  background: radial-gradient(circle, #1e1b4b 0%, transparent 75%);
  filter: blur(110px);
  opacity: 0.25;
  top: 45%;
  right: 5%;
  animation: velvetFloat2 22s ease-in-out infinite;
}

/* Orb 3: Soft Lavender Glow */
.theme-velvet-dusk .velvet-dusk-orb-3 {
  width: 500px;
  height: 300px;
  background: radial-gradient(circle, #7e22ce 0%, transparent 70%);
  filter: blur(95px);
  opacity: 0.18;
  bottom: -5%;
  left: 20%;
  animation: velvetFloat3 16s ease-in-out infinite;
}

/* Noise overlay */
.theme-velvet-dusk .anim-layer .velvet-noise {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  pointer-events: none;
}

/* ---------- Velvet Floating Keyframes ---------- */
@keyframes velvetFloat1 {
  0%   { transform: translate(0%, 0%) scale(1) rotate(0deg); opacity: 0.22; }
  50%  { transform: translate(5%, 7%) scale(1.08) rotate(20deg); opacity: 0.28; }
  100% { transform: translate(0%, 0%) scale(1) rotate(0deg); opacity: 0.22; }
}

@keyframes velvetFloat2 {
  0%   { transform: translate(0%, 0%) scale(1.1); }
  50%  { transform: translate(-4%, -6%) scale(0.95); }
  100% { transform: translate(0%, 0%) scale(1.1); }
}

@keyframes velvetFloat3 {
  0%   { transform: translate(0%, 0%) scale(0.9); opacity: 0.18; }
  50%  { transform: translate(3%, -4%) scale(1.12); opacity: 0.24; }
  100% { transform: translate(0%, 0%) scale(0.9); opacity: 0.18; }
}

/* ---------- Profile Card ---------- */
.theme-velvet-dusk .profile-card {
  background: var(--velvet-glass);
  border: 1px solid var(--velvet-border);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 28px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 45px rgba(139, 92, 246, 0.05);
  padding: 40px 28px 32px;
}

/* ---------- Avatar Ring ---------- */
.theme-velvet-dusk .profile-avatar-wrap {
  position: relative;
  z-index: 2;
  margin-bottom: 18px;
}

.theme-velvet-dusk .profile-avatar {
  border: 3px solid transparent !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.theme-velvet-dusk .profile-avatar-wrap::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: conic-gradient(
    #4c1d95,
    #8b5cf6,
    #ebd5ff,
    #8b5cf6,
    #4c1d95
  );
  animation: velvetSpin 5s linear infinite;
  z-index: 0;
}

@keyframes velvetSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Text Styling ---------- */
.theme-velvet-dusk .profile-name {
  color: var(--velvet-text) !important;
  font-weight: 600;
  font-size: 1.95rem !important;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #FFFFFF, var(--velvet-lavender));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-velvet-dusk .profile-bio {
  color: var(--velvet-text-dim) !important;
  font-weight: 400;
  line-height: 1.6;
}

/* ---------- Link Buttons ---------- */
.theme-velvet-dusk .profile-link {
  background: var(--velvet-lavender) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--velvet-dark) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 0;
  transform: translateY(20px);
  animation: velvetLinkEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.theme-velvet-dusk .profile-link:hover {
  background: var(--velvet-lavender-hover) !important;
  color: var(--velvet-dark-hover) !important;
  box-shadow: 
    0 10px 25px rgba(235, 213, 255, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-3px) scale(1.015) !important;
}

.theme-velvet-dusk .profile-link .plink-title {
  color: var(--velvet-dark) !important;
  font-weight: 600;
}

.theme-velvet-dusk .profile-link:hover .plink-title {
  color: var(--velvet-dark-hover) !important;
}

.theme-velvet-dusk .profile-link .plink-desc {
  color: #6b21a8 !important;
}

.theme-velvet-dusk .profile-link .plink-icon-box {
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 50% !important;
}

.theme-velvet-dusk .btn-link-share-trigger {
  color: var(--velvet-dark) !important;
  opacity: 0.75;
}

.theme-velvet-dusk .btn-link-share-trigger:hover {
  color: var(--velvet-dark-hover) !important;
  opacity: 1 !important;
  background: rgba(59, 7, 100, 0.08) !important;
}

@keyframes velvetLinkEntry {
  to { opacity: 1; transform: translateY(0); }
}

.theme-velvet-dusk .profile-link:nth-child(1) { animation-delay: 0.08s; }
.theme-velvet-dusk .profile-link:nth-child(2) { animation-delay: 0.16s; }
.theme-velvet-dusk .profile-link:nth-child(3) { animation-delay: 0.24s; }
.theme-velvet-dusk .profile-link:nth-child(4) { animation-delay: 0.32s; }
.theme-velvet-dusk .profile-link:nth-child(5) { animation-delay: 0.40s; }
.theme-velvet-dusk .profile-link:nth-child(6) { animation-delay: 0.48s; }
.theme-velvet-dusk .profile-link:nth-child(n+7) { animation-delay: 0.56s; }

/* ---------- Social Links ---------- */
.theme-velvet-dusk .social-link {
  border-color: rgba(235, 213, 255, 0.2) !important;
  background: rgba(235, 213, 255, 0.06) !important;
  color: var(--velvet-text) !important;
  transition: all 0.25s;
}

.theme-velvet-dusk .social-link:hover {
  border-color: var(--velvet-lavender) !important;
  background: rgba(235, 213, 255, 0.15) !important;
  box-shadow: 0 0 15px rgba(235, 213, 255, 0.25);
  color: #fff !important;
  transform: translateY(-2px);
}

/* ---------- Action Buttons ---------- */
.theme-velvet-dusk .profile-action-btn {
  border-color: rgba(235, 213, 255, 0.2) !important;
  background: rgba(235, 213, 255, 0.06) !important;
  color: var(--velvet-text) !important;
}

.theme-velvet-dusk .profile-action-btn:hover {
  border-color: var(--velvet-lavender) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---------- Work Status Badge ---------- */
.theme-velvet-dusk .work-status {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  color: var(--velvet-lavender) !important;
  font-family: 'Outfit', sans-serif !important;
}

/* ---------- Announcement Banner ---------- */
.theme-velvet-dusk .announcement-banner {
  background: rgba(235, 213, 255, 0.06) !important;
  border-color: rgba(235, 213, 255, 0.22) !important;
  color: var(--velvet-text) !important;
}

/* ---------- Branding Footer ---------- */
.theme-velvet-dusk .profile-branding {
  color: rgba(235, 213, 255, 0.25) !important;
}

.theme-velvet-dusk .profile-branding a {
  color: rgba(235, 213, 255, 0.4) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .theme-velvet-dusk .anim-layer::before {
    width: 320px;
    height: 200px;
    filter: blur(70px);
  }
  .theme-velvet-dusk .anim-layer::after {
    width: 280px;
    height: 180px;
    filter: blur(65px);
  }
  .theme-velvet-dusk .velvet-dusk-orb-3 {
    width: 300px;
    height: 180px;
    filter: blur(75px);
  }

}