/* TeenConnect Celebrity Titles v4 — CSS-only Signature Edition */

/* =========================
   COMMON PREMIUM BADGE CORE
   ========================= */
.profile-title-badge.tc-title-luxe{
  --tc-h: 38px;
  --tc-w: 164px;
  --tc-radius: 13px;
  --tc-edge-a: #78eaff;
  --tc-edge-b: #a276ff;
  --tc-gold: #f8d676;
  --tc-panel-a: #0b1535;
  --tc-panel-b: #202a61;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--tc-h) !important;
  min-width: var(--tc-w) !important;
  padding: 0 31px 0 49px !important;
  margin: 0 4px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: var(--tc-radius) !important;
  overflow: visible !important;
  isolation: isolate !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .035em !important;
  text-decoration: none !important;
  transform: translateZ(0) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(135deg,var(--tc-panel-a),var(--tc-panel-b) 70%,var(--tc-panel-a)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 8px 18px rgba(255,255,255,.045),
    inset 0 -10px 18px rgba(2,7,24,.18),
    0 5px 14px rgba(10,18,48,.24),
    0 0 14px color-mix(in srgb,var(--tc-edge-a) 20%, transparent) !important;
}

/* double metallic border, animated very softly */
.profile-title-badge.tc-title-luxe::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  border-radius:calc(var(--tc-radius) + 2px) !important;
  padding:2px !important;
  background:linear-gradient(110deg,
    var(--tc-edge-a) 0%,
    rgba(255,255,255,.96) 20%,
    var(--tc-gold) 42%,
    var(--tc-edge-b) 66%,
    rgba(255,255,255,.82) 82%,
    var(--tc-edge-a) 100%) !important;
  background-size:240% 100% !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  filter:
    drop-shadow(0 0 4px color-mix(in srgb,var(--tc-edge-a) 42%,transparent))
    drop-shadow(0 0 5px color-mix(in srgb,var(--tc-edge-b) 28%,transparent)) !important;
  pointer-events:none !important;
  z-index:7 !important;
  animation:tcTitleV4Edge 7.5s linear infinite !important;
}

/* glass reflection sweep */
.profile-title-badge.tc-title-luxe::after{
  content:"" !important;
  position:absolute !important;
  top:2px !important;
  bottom:2px !important;
  left:-42% !important;
  width:28% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent) !important;
  transform:skewX(-20deg) !important;
  pointer-events:none !important;
  z-index:3 !important;
  opacity:0 !important;
  animation:tcTitleV4Sweep 5.8s ease-in-out infinite !important;
}

.profile-title-badge.tc-title-luxe .tc-title-text{
  position:relative !important;
  z-index:8 !important;
  min-width:74px !important;
  text-align:center !important;
}
/* top/bottom little jewel notches, like the approved reference */
.profile-title-badge.tc-title-luxe .tc-title-text::before,
.profile-title-badge.tc-title-luxe .tc-title-text::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  width:7px !important;
  height:7px !important;
  transform:translateX(-50%) rotate(45deg) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  background:linear-gradient(135deg,var(--tc-edge-a),var(--tc-gold)) !important;
  box-shadow:0 0 6px color-mix(in srgb,var(--tc-edge-a) 42%,transparent) !important;
  opacity:.72 !important;
  z-index:-1 !important;
}
.profile-title-badge.tc-title-luxe .tc-title-text::before{top:-15px !important}
.profile-title-badge.tc-title-luxe .tc-title-text::after{bottom:-15px !important}

/* left medallion */
.profile-title-badge.tc-title-luxe .tc-title-emblem{
  position:absolute !important;
  left:-8px !important;
  top:50% !important;
  width:47px !important;
  height:47px !important;
  transform:translateY(-50%) !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  z-index:10 !important;
  overflow:visible !important;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.18),transparent 25%),
    linear-gradient(145deg,rgba(17,31,76,.98),rgba(13,16,42,.98)) !important;
  border:2px solid var(--tc-gold) !important;
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb,var(--tc-edge-a) 35%,transparent),
    inset 0 0 16px rgba(255,255,255,.06),
    0 0 0 3px rgba(255,255,255,.06),
    0 0 12px color-mix(in srgb,var(--tc-edge-a) 35%,transparent) !important;
  animation:tcTitleV4EmblemFloat 3.6s ease-in-out infinite !important;
}
.profile-title-badge.tc-title-luxe .tc-title-emblem::before{
  content:"" !important;
  position:absolute !important;
  inset:-7px !important;
  border-radius:50% !important;
  border:1px solid color-mix(in srgb,var(--tc-edge-a) 65%,transparent) !important;
  border-right-color:color-mix(in srgb,var(--tc-edge-b) 70%,transparent) !important;
  border-bottom-color:transparent !important;
  box-shadow:0 0 8px color-mix(in srgb,var(--tc-edge-a) 24%,transparent) !important;
  animation:tcTitleV4Orbit 8s linear infinite !important;
}
.profile-title-badge.tc-title-luxe .tc-title-emblem::after{
  position:relative !important;
  z-index:2 !important;
  font-size:18px !important;
  line-height:1 !important;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--tc-gold) 55%,transparent)) !important;
}

/* jewel endcap on the right */
.profile-title-badge.tc-title-luxe .tc-title-gem{
  position:absolute !important;
  right:-6px !important;
  top:50% !important;
  width:20px !important;
  height:20px !important;
  transform:translateY(-50%) rotate(45deg) !important;
  z-index:10 !important;
  border:1px solid rgba(255,255,255,.78) !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.88) 0 12%,var(--tc-edge-a) 13% 48%,var(--tc-edge-b) 49% 76%,var(--tc-gold) 77% 100%) !important;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%) !important;
  box-shadow:0 0 10px color-mix(in srgb,var(--tc-edge-a) 42%,transparent) !important;
  animation:tcTitleV4Gem 2.8s ease-in-out infinite !important;
}
.profile-title-badge.tc-title-luxe .tc-title-gem::after{
  content:"" !important;
  position:absolute !important;
  inset:5px !important;
  background:rgba(255,255,255,.88) !important;
  clip-path:inherit !important;
}

/* side fins / gem guards */
.profile-title-badge.tc-title-luxe .tc-title-wing{
  position:absolute !important;
  top:50% !important;
  width:25px !important;
  height:28px !important;
  transform:translateY(-50%) !important;
  z-index:1 !important;
  opacity:.92 !important;
  pointer-events:none !important;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--tc-edge-a) 26%,transparent)) !important;
}
.profile-title-badge.tc-title-luxe .tc-title-wing.left{
  left:-19px !important;
  clip-path:polygon(100% 0,100% 100%,54% 84%,0 50%,54% 16%) !important;
  background:linear-gradient(180deg,var(--tc-edge-a),var(--tc-gold),var(--tc-edge-b)) !important;
}
.profile-title-badge.tc-title-luxe .tc-title-wing.right{
  right:-18px !important;
  clip-path:polygon(0 0,0 100%,46% 84%,100% 50%,46% 16%) !important;
  background:linear-gradient(180deg,var(--tc-edge-b),var(--tc-gold),var(--tc-edge-a)) !important;
}

/* =========================
   TIN OPERATOR — AUTHORITY
   ========================= */
.profile-title-badge.tc-title-operator{
  --tc-w:172px;
  --tc-edge-a:#52cfff;
  --tc-edge-b:#ffd66d;
  --tc-gold:#f6d16b;
  --tc-panel-a:#07132e;
  --tc-panel-b:#102f67;
  color:#fff0b6 !important;
  background:
    radial-gradient(circle at 84% 50%,rgba(75,178,255,.14),transparent 24%),
    linear-gradient(135deg,#061126 0%,#0b2150 42%,#173b74 68%,#08152f 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 9px 20px rgba(255,255,255,.04),
    inset 0 -12px 20px rgba(4,9,30,.24),
    0 5px 15px rgba(6,15,40,.28),
    0 0 16px rgba(75,193,255,.17),
    0 0 10px rgba(255,210,89,.10) !important;
}
.profile-title-badge.tc-title-operator .tc-title-emblem::after{
  content:"♛" !important;
  color:#ffd75f !important;
  text-shadow:0 0 7px rgba(255,212,87,.52) !important;
}
.profile-title-badge.tc-title-operator .tc-title-text{
  background:linear-gradient(180deg,#fff7d2 0%,#ffe59a 42%,#f2c95c 76%,#fff5cc 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  text-shadow:none !important;
  letter-spacing:.055em !important;
}

/* =========================
   TIN PARTNER — CELEBRITY
   ========================= */
.profile-title-badge.tc-title-partner{
  --tc-w:170px;
  --tc-edge-a:#b16fff;
  --tc-edge-b:#ff9ed9;
  --tc-gold:#e6b875;
  --tc-panel-a:#160c3b;
  --tc-panel-b:#432079;
  color:#f3eaff !important;
  background:
    radial-gradient(circle at 80% 22%,rgba(214,146,255,.18),transparent 26%),
    radial-gradient(circle at 20% 74%,rgba(103,119,255,.15),transparent 22%),
    linear-gradient(135deg,#12092f 0%,#26135b 42%,#532487 72%,#21103f 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 9px 20px rgba(255,255,255,.045),
    inset 0 -12px 20px rgba(16,5,42,.23),
    0 5px 15px rgba(27,12,62,.27),
    0 0 17px rgba(168,104,255,.21),
    0 0 8px rgba(255,151,217,.10) !important;
}
.profile-title-badge.tc-title-partner .tc-title-emblem::after{
  content:"✦" !important;
  color:#f0dcff !important;
  text-shadow:0 0 7px rgba(196,132,255,.68) !important;
}
/* little orbit dot */
.profile-title-badge.tc-title-partner .tc-title-emblem{
  box-shadow:
    inset 0 0 0 3px rgba(180,112,255,.20),
    inset 0 0 16px rgba(255,255,255,.06),
    0 0 0 3px rgba(255,255,255,.05),
    0 0 12px rgba(181,111,255,.30) !important;
}
.profile-title-badge.tc-title-partner .tc-title-text{
  background:linear-gradient(180deg,#ffffff 0%,#eadcff 38%,#c9aaff 74%,#fff1ff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  text-shadow:none !important;
  letter-spacing:.045em !important;
}

/* =========================
   SHOP PREVIEW PRESENTATION
   ========================= */
.profile-item-preview.type-title:has(.tc-title-operator){
  background:
    radial-gradient(circle at 50% 100%,rgba(45,137,255,.17),transparent 44%),
    radial-gradient(circle at 18% 18%,rgba(255,215,112,.08),transparent 24%),
    linear-gradient(135deg,#071126,#10275a 54%,#112d67) !important;
}
.profile-item-preview.type-title:has(.tc-title-partner){
  background:
    radial-gradient(circle at 50% 100%,rgba(145,77,255,.22),transparent 44%),
    radial-gradient(circle at 18% 18%,rgba(255,163,229,.09),transparent 22%),
    linear-gradient(135deg,#10082f,#25125d 52%,#3e1d72) !important;
}
.profile-item-preview.type-title:has(.tc-title-operator),
.profile-item-preview.type-title:has(.tc-title-partner){
  position:relative !important;
  overflow:hidden !important;
}
.profile-item-preview.type-title:has(.tc-title-operator)::before,
.profile-item-preview.type-title:has(.tc-title-partner)::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 76% 25%,rgba(255,255,255,.42) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 68%,rgba(255,255,255,.34) 0 1px,transparent 2px),
    linear-gradient(115deg,transparent 18%,rgba(255,255,255,.035) 36%,transparent 54%) !important;
  pointer-events:none !important;
  animation:tcTitleV4Stars 4.8s ease-in-out infinite !important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-luxe{
  --tc-h:56px;
  --tc-w:248px;
  --tc-radius:18px;
  padding-left:70px !important;
  padding-right:42px !important;
  font-size:17px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 12px 24px rgba(255,255,255,.05),
    0 10px 26px rgba(8,18,52,.28),
    0 0 24px color-mix(in srgb,var(--tc-edge-a) 24%,transparent) !important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-luxe .tc-title-emblem{
  width:68px !important;
  height:68px !important;
  left:-18px !important;
  border-width:3px !important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-luxe .tc-title-emblem::after{font-size:27px !important}
.profile-item-preview.type-title .profile-title-badge.tc-title-luxe .tc-title-gem{
  width:26px !important;
  height:26px !important;
  right:-9px !important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-luxe .tc-title-wing{
  width:34px !important;
  height:39px !important;
}
.profile-item-preview.type-title .profile-title-badge.tc-title-luxe .tc-title-wing.left{left:-28px !important}
.profile-item-preview.type-title .profile-title-badge.tc-title-luxe .tc-title-wing.right{right:-26px !important}
.profile-item-preview.type-title .profile-title-badge.tc-title-luxe .tc-title-text::before{top:-21px !important;width:9px !important;height:9px !important}
.profile-item-preview.type-title .profile-title-badge.tc-title-luxe .tc-title-text::after{bottom:-21px !important;width:9px !important;height:9px !important}

/* Keep the real profile impressive but compact enough not to wreck layout */
.profile-hero .profile-title-badge.tc-title-luxe{
  --tc-h:38px;
  --tc-w:164px;
}

/* animations */
@keyframes tcTitleV4Edge{to{background-position:240% 0}}
@keyframes tcTitleV4Sweep{
  0%,20%{left:-42%;opacity:0}
  30%{opacity:.75}
  64%{opacity:.32}
  78%,100%{left:128%;opacity:0}
}
@keyframes tcTitleV4Orbit{to{transform:rotate(360deg)}}
@keyframes tcTitleV4EmblemFloat{
  0%,100%{transform:translateY(-50%) scale(.985)}
  50%{transform:translateY(-50%) scale(1.025)}
}
@keyframes tcTitleV4Gem{
  0%,100%{filter:brightness(.92);opacity:.82}
  50%{filter:brightness(1.26);opacity:1}
}
@keyframes tcTitleV4Stars{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

@media(max-width:700px){
  .profile-item-preview.type-title .profile-title-badge.tc-title-luxe{
    --tc-h:48px;
    --tc-w:215px;
    padding-left:61px !important;
    padding-right:36px !important;
    font-size:15px !important;
  }
  .profile-item-preview.type-title .profile-title-badge.tc-title-luxe .tc-title-emblem{
    width:58px !important;height:58px !important;left:-15px !important;
  }
}
@media(max-width:520px){
  .profile-title-badge.tc-title-luxe{
    --tc-h:34px;
    --tc-w:145px;
    padding-left:43px !important;
    padding-right:25px !important;
    font-size:11px !important;
    margin-left:2px !important;
    margin-right:2px !important;
  }
  .profile-title-badge.tc-title-luxe .tc-title-emblem{
    width:41px !important;height:41px !important;left:-6px !important;
  }
  .profile-title-badge.tc-title-luxe .tc-title-emblem::after{font-size:16px !important}
  .profile-title-badge.tc-title-luxe .tc-title-gem{width:17px !important;height:17px !important;right:-5px !important}
  .profile-title-badge.tc-title-luxe .tc-title-wing{width:20px !important;height:24px !important}
  .profile-title-badge.tc-title-luxe .tc-title-wing.left{left:-15px !important}
  .profile-title-badge.tc-title-luxe .tc-title-wing.right{right:-14px !important}
}
@media(prefers-reduced-motion:reduce){
  .profile-title-badge.tc-title-luxe::before,
  .profile-title-badge.tc-title-luxe::after,
  .profile-title-badge.tc-title-luxe .tc-title-emblem,
  .profile-title-badge.tc-title-luxe .tc-title-emblem::before,
  .profile-title-badge.tc-title-luxe .tc-title-gem,
  .profile-item-preview.type-title:has(.tc-title-operator)::before,
  .profile-item-preview.type-title:has(.tc-title-partner)::before{animation:none !important}
}