/* XNight v33 — profile dynamics: motion, mood, font, avatar hover */

/* Settings card */
.v33-dynamics-card .v33-settings-group{display:grid;gap:0;border:1px solid var(--border-color);border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--input-bg) 78%,transparent);margin-top:12px}
.v33-dynamics-card .v33-setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;min-height:60px;border-bottom:1px solid var(--border-color)}
.v33-dynamics-card .v33-setting-row:last-child{border-bottom:0}
.v33-setting-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.v33-setting-copy strong{font-size:13.5px;font-weight:800;color:var(--text-main)}
.v33-setting-copy span{font-size:11.8px;line-height:1.35;color:var(--text-muted)}
.v33-switch{appearance:none;-webkit-appearance:none;width:42px;height:24px;min-width:42px;border-radius:999px;background:#292a2e;border:1px solid rgba(255,255,255,.08);position:relative;cursor:pointer;transition:.2s ease}
.v33-switch::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;top:2px;left:2px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:.2s ease}
.v33-switch:checked{background:var(--text-main);border-color:var(--text-main)}
.v33-switch:checked::after{transform:translateX(18px);background:var(--bg-color)}
.v33-choice-block{padding:13px 14px;border-top:1px solid var(--border-color)}
.v33-choice-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.v33-choice-head .v33-setting-copy{gap:2px}
.v33-pills{display:flex;flex-wrap:wrap;gap:7px}
.v33-pill{appearance:none;border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-muted);font:inherit;font-size:12px;font-weight:760;line-height:1;padding:9px 11px;border-radius:12px;cursor:pointer;transition:.18s ease}
.v33-pill:hover{color:var(--text-main);border-color:color-mix(in srgb,var(--text-main) 22%,var(--border-color))}
.v33-pill.active{background:var(--text-main);color:var(--bg-color);border-color:var(--text-main)}
.v33-pill[data-font="outfit"]{font-family:'Outfit','Inter',sans-serif}
.v33-pill[data-font="jakarta"]{font-family:'Plus Jakarta Sans','Inter',sans-serif}
.v33-pill[data-font="system"]{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.v33-pill[data-font="serif"]{font-family:Georgia,'Times New Roman',serif}
.v33-pill[data-font="mono"]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Font applies only to the profile header/preview, not the whole application. */
.v33-profile-font-scope{--v33-profile-font:'Inter',system-ui,sans-serif;font-family:var(--v33-profile-font)!important}
.v33-profile-font-scope button,.v33-profile-font-scope .profile-name-title,.v33-profile-font-scope .profile-handle-tag,.v33-profile-font-scope .profile-bio,.v33-profile-font-scope .profile-status-pill,.v33-profile-font-scope .profile-stats-row,.v33-profile-font-scope .v9-music-card,.v33-profile-font-scope .v9-pinned-links,.v33-profile-font-scope .profile-main-link{font-family:var(--v33-profile-font)!important}
.v33-font-default{--v33-profile-font:'Inter',system-ui,sans-serif}
.v33-font-outfit{--v33-profile-font:'Outfit','Inter',sans-serif}
.v33-font-jakarta{--v33-profile-font:'Plus Jakarta Sans','Inter',sans-serif}
.v33-font-system{--v33-profile-font:system-ui,-apple-system,'Segoe UI',sans-serif}
.v33-font-serif{--v33-profile-font:Georgia,'Times New Roman',serif}
.v33-font-mono{--v33-profile-font:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace}

/* Background motion — CSS drift + pointer variables written by JS. */
.v33-motion-enabled{--v33-px:0px;--v33-py:0px}
.v33-motion-enabled .v26-surface-photo,
.v33-motion-enabled .banner-media-layer{
  transform-origin:center center!important;
  will-change:transform;
  animation:v33BackgroundDrift 12s ease-in-out infinite alternate!important;
}
.v33-motion-enabled .v26-surface-photo-blur,
.v33-motion-enabled.v9-banner-effect-blur .banner-media-layer{filter:blur(4px)}
@keyframes v33BackgroundDrift{
  0%{transform:translate3d(calc(var(--v33-px) - 5px),calc(var(--v33-py) - 3px),0) scale(1.075)}
  50%{transform:translate3d(var(--v33-px),var(--v33-py),0) scale(1.065)}
  100%{transform:translate3d(calc(var(--v33-px) + 5px),calc(var(--v33-py) + 3px),0) scale(1.075)}
}

/* Mood layer lives above banner/surface, below actual profile content. */
.v33-profile-mood{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit;contain:paint}
.v33-profile-mood span,.v33-profile-mood i{position:absolute;display:block;pointer-events:none}

.v33-mood-rain{background:linear-gradient(to bottom,rgba(130,160,190,.04),transparent 36%,rgba(110,140,170,.035))}
.v33-mood-rain span{left:var(--x);top:-18%;width:1px;height:58px;border-radius:99px;background:linear-gradient(to bottom,transparent,rgba(210,228,244,.44),transparent);opacity:.68;transform:rotate(9deg);animation:v33Rain var(--dur) linear infinite;animation-delay:var(--delay)}
@keyframes v33Rain{0%{translate:-8px -70px;opacity:0}12%{opacity:.65}100%{translate:18px 720px;opacity:0}}

.v33-mood-snow span{left:var(--x);top:-8%;width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,255,255,.82);box-shadow:0 0 8px rgba(255,255,255,.3);opacity:.78;animation:v33Snow var(--dur) linear infinite;animation-delay:var(--delay)}
@keyframes v33Snow{0%{translate:0 -20px;rotate:0deg;opacity:0}10%{opacity:.78}50%{translate:18px 330px;rotate:180deg}100%{translate:-12px 720px;rotate:360deg;opacity:.18}}

.v33-mood-stars span{left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:var(--o);box-shadow:0 0 7px rgba(255,255,255,.62);animation:v33MoodTwinkle var(--dur) ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes v33MoodTwinkle{from{transform:scale(.62);opacity:.18;filter:blur(.15px)}to{transform:scale(1.18);opacity:.88;filter:blur(0)}}

.v33-mood-fog{overflow:hidden;background:linear-gradient(180deg,rgba(220,225,232,.045),transparent 42%,rgba(210,216,225,.05))}
.v33-mood-fog i{left:-22%;width:145%;height:42%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(226,231,237,.17) 0%,rgba(204,212,221,.095) 35%,transparent 72%);filter:blur(18px);opacity:.65;animation:v33Fog 13s ease-in-out infinite alternate}
.v33-mood-fog i:nth-child(1){top:4%;animation-duration:15s}
.v33-mood-fog i:nth-child(2){top:35%;animation-delay:-5s;animation-duration:18s;opacity:.5}
.v33-mood-fog i:nth-child(3){top:64%;animation-delay:-9s;animation-duration:20s;opacity:.42}
@keyframes v33Fog{from{transform:translateX(-4%) scale(1)}to{transform:translateX(8%) scale(1.08)}}

/* Avatar hover: only the image component is scaled, stars/decor layers remain stable. */
.v33-avatar-hover-enabled #profileBigAvatar .tweet-avatar,
.v33-avatar-hover-enabled #liveAvatarPreview .tweet-avatar{
  transition:transform .28s cubic-bezier(.2,.7,.2,1),filter .28s ease!important;
  transform-origin:center!important;
  will-change:transform,filter;
}
.v33-avatar-hover-enabled #profileBigAvatar:hover .tweet-avatar,
.v33-avatar-hover-enabled #liveAvatarPreview:hover .tweet-avatar{
  transform:scale(1.06)!important;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--v33-a,#ffffff) 52%,transparent)) drop-shadow(0 0 18px color-mix(in srgb,var(--v33-b,#ffffff) 26%,transparent));
}

@media (max-width:640px){
  .v33-dynamics-card .v33-setting-row{padding:12px;gap:10px}
  .v33-choice-block{padding:12px}
  .v33-pill{font-size:11.5px;padding:8px 9px}
}
@media (prefers-reduced-motion:reduce){
  .v33-motion-enabled .v26-surface-photo,.v33-motion-enabled .banner-media-layer,.v33-profile-mood span,.v33-profile-mood i{animation:none!important}
  .v33-motion-enabled .v26-surface-photo,.v33-motion-enabled .banner-media-layer{transform:scale(1.045)!important}
}