/* eqp.wtf — página de perfil. As cores vêm do tema (--accent, --bg-*), aplicadas pelo theme.js. */
:root {
  --bg: #070708;
  --bg-color: #070505;
  --bg-blur: 0px;
  --bg-dim: .35;
  --line: #ffffff1f;
  --text: #f4f1f8;
  --muted: #c3bdd0;
  --accent: #ef4444;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--bg-color);
  color: var(--text);
  font: 400 16px/1.6 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 10px; }

/* Fundo: efeito (canvas), imagem ou vídeo, com escurecimento e desfoque do tema. */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(900px circle at 50% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), var(--bg-color); }
.bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--bg-dim)); }
.bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-media { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: blur(var(--bg-blur)); transform: scale(1.08); transition: transform .4s var(--ease); }
.cursor-fx { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }

.enter {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: #07060be6;
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: opacity .6s var(--ease);
}
.enter:focus-visible { outline: none; }
.enter-label { padding: 0 24px; font-size: 15px; font-weight: 600; letter-spacing: 2px; color: var(--muted); text-align: center; animation: pulse 2.4s ease-in-out infinite; }
.enter:focus-visible .enter-label { color: var(--text); }
.enter.is-gone { opacity: 0; pointer-events: none; }
@keyframes pulse { 50% { opacity: .45; } }

.profile { position: relative; z-index: 1; width: min(440px, calc(100% - 32px)); padding-block: 48px; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.is-in .profile, body:not(:has(.enter)) .profile { opacity: 1; transform: none; }

.card { padding: 32px 24px 24px; border-radius: 24px; }
.card-glass { border: 1px solid var(--line); background: #14121b80; backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 30px 80px -40px #000; }
.card-solid { border: 1px solid var(--line); background: #14121b; box-shadow: 0 30px 80px -40px #000; }
.card-clear { background: none; text-shadow: 0 2px 12px #000a; }

.avatar { display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 40px -6px var(--accent); }
.avatar-letter { background: color-mix(in srgb, var(--accent) 25%, var(--bg)); font-size: 44px; font-weight: 800; color: var(--accent); }

.name { position: relative; margin: 18px 0 0; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.name-glow { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent); }
.name-gradient { background: linear-gradient(90deg, #fff, var(--accent), #fff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 4s linear infinite; }
.name-rainbow { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bff95, #4dd8ff, #b28dff, #ff6b6b); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s linear infinite; }
.name-glitch::before, .name-glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.name-glitch::before { color: #ff2e63; transform: translate(2px, 0); clip-path: inset(0 0 55% 0); animation: glitch 2.6s steps(2) infinite; mix-blend-mode: screen; }
.name-glitch::after { color: #08d9d6; transform: translate(-2px, 0); clip-path: inset(50% 0 0 0); animation: glitch 2.1s steps(2) infinite reverse; mix-blend-mode: screen; }
@keyframes shine { to { background-position: 200% center; } }
@keyframes glitch { 0%, 88% { transform: translate(0); } 90% { transform: translate(3px, -1px); } 94% { transform: translate(-3px, 1px); } 98% { transform: translate(1px, 0); } }

.bio { min-height: 1.6em; margin: 8px 0 0; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.bio.is-typing::after { content: "▍"; margin-left: 1px; color: var(--accent); animation: pulse 1s steps(1) infinite; }

.links { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.link { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: #0b0a1066; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; transition: border-color .2s, background .2s, transform .3s var(--ease); }
.link:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 16%, #0b0a1088); transform: translateY(-2px); }
.icon { flex-shrink: 0; width: 18px; height: 18px; fill: currentColor; }
.link .icon { color: var(--brand, currentColor); }
button.link { width: 100%; border: 1px solid var(--line); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.link-value { overflow: hidden; max-width: 45%; color: var(--muted); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* Fileira de ícones das redes. */
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.social, button.social { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 13px; background: #0b0a1066; color: var(--brand, var(--text)); cursor: pointer; transition: transform .25s var(--ease), border-color .2s, background .2s, box-shadow .25s; }
.social .icon { width: 20px; height: 20px; }
.social:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand, var(--accent)) 55%, transparent); background: color-mix(in srgb, var(--brand, var(--accent)) 14%, #0b0a1088); box-shadow: 0 10px 24px -12px var(--brand, var(--accent)); }
.socials + .links { margin-top: 14px; }
.copied { position: fixed; left: 50%; bottom: 28px; z-index: 40; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: #111114f2; color: var(--text); font-size: 13px; font-weight: 600; transform: translateX(-50%); animation: copied 1.6s var(--ease) forwards; pointer-events: none; }
@keyframes copied { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.player:empty { display: none; }
.player { margin-top: 18px; }
.embed { display: block; width: 100%; border: 0; border-radius: 14px; }
.embed-spotify { height: 152px; }
.embed-soundcloud { height: 120px; }
.views { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.views .icon { width: 15px; height: 15px; }
.made { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-size: 13px; color: var(--muted); text-decoration: none; text-shadow: 0 1px 8px #000; }
.made:hover { color: var(--text); }

/* Fontes do tema (public/_fonts/fonts.css). */
.font-inter { font-family: "Inter", system-ui, sans-serif; }
.font-grotesk { font-family: "Space Grotesk", system-ui, sans-serif; }
.font-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.font-serif { font-family: "Playfair Display", Georgia, serif; }
.font-syne { font-family: "Syne", system-ui, sans-serif; }
.font-orbitron { font-family: "Orbitron", system-ui, sans-serif; }
.font-pixel { font-family: "Press Start 2P", ui-monospace, monospace; font-size: 12px; line-height: 1.9; }
.font-script { font-family: "Pacifico", cursive; }
.name-font-inter .name { font-family: "Inter", system-ui, sans-serif; }
.name-font-grotesk .name { font-family: "Space Grotesk", system-ui, sans-serif; }
.name-font-mono .name { font-family: "JetBrains Mono", ui-monospace, monospace; }
.name-font-serif .name { font-family: "Playfair Display", Georgia, serif; }
.name-font-syne .name { font-family: "Syne", system-ui, sans-serif; }
.name-font-orbitron .name { font-family: "Orbitron", system-ui, sans-serif; letter-spacing: .02em; }
.name-font-pixel .name { font-family: "Press Start 2P", ui-monospace, monospace; font-size: 20px; line-height: 1.5; letter-spacing: 0; }
.name-font-script .name { font-family: "Pacifico", cursive; font-weight: 400; letter-spacing: 0; }

/* Selos ao lado do nome. */
.badges { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.badges li { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 9px; background: #0007; color: var(--muted); }
.badges .icon { width: 16px; height: 16px; }
/* Nome do selo ao passar o mouse (ou focar pelo teclado). */
.badges li { position: relative; cursor: default; }
.badges li::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 30; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #111114f2; box-shadow: 0 10px 30px -10px #000; color: #f4f1f8; font: 600 12px/1 system-ui, sans-serif; white-space: nowrap; text-shadow: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.badges li:hover::after, .badges li:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.badges li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Cor de cada selo (o catálogo fica em badges.js). */
.badge-staff { color: #ff4d4d !important; }
.badge-verified { color: #3ba7ff !important; }
.badge-pro { color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important; }
.badge-creator { color: #ef4444 !important; }
.badge-booster { color: #ff73fa !important; }
.badge-helper { color: #ffb547 !important; }
.badge-bughunter { color: #5ee07a !important; }
.badge-winner { color: #ffd166 !important; }
.badge-member { color: #f4f1f8 !important; }
.badge-early { color: #ffd166 !important; }
.badge-views1k { color: #7dd3fc !important; }
.badge-views10k { color: #c084fc !important; }
.badge-views100k { color: #fde047 !important; }
.badge-paired { color: #fb7185 !important; }
.badge-genesis { color: #f0abfc !important; }
.badge-pioneer { color: #5eead4 !important; }
.badge-anniversary { color: #fdba74 !important; }

/* Laço: o outro perfil, abaixo dos selos. */
.bond { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 12px 0 0; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: #0b0a1080; color: var(--muted); font-size: 13px; text-decoration: none; transition: border-color .2s, color .2s; }
.bond:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); }
.bond img, .bond .bond-letter { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.bond .bond-letter { display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 25%, #000); color: var(--accent); font-size: 12px; font-weight: 800; }
.bond .icon { width: 13px; height: 13px; color: #fb7185; }
.bond b { overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Rodapé do perfil e denúncia. */
.foot-links { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 14px; }
.foot-links .made { margin-top: 0; }
.report-open { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; text-shadow: 0 1px 8px #000; opacity: .7; cursor: pointer; }
.report-open:hover { color: var(--text); opacity: 1; }
.report { width: min(420px, calc(100% - 32px)); padding: 0; border: 1px solid #ffffff1f; border-radius: 18px; background: #0e0e11; color: var(--text); font-family: "Inter", system-ui, sans-serif; text-align: left; }
.report::backdrop { background: #000000b3; backdrop-filter: blur(4px); }
.report form { display: grid; gap: 12px; padding: 20px; }
.report h2 { margin: 0; font-size: 18px; }
.report p { margin: 0; color: var(--muted); font-size: 13.5px; }
.report fieldset { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; }
.report legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.report label { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.report label:hover { background: #ffffff0a; }
.report input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); }
.report textarea { width: 100%; padding: 10px 12px; border: 1px solid #ffffff1f; border-radius: 10px; background: #070708; color: inherit; font: inherit; font-size: 14px; resize: vertical; }
.report-actions { display: flex; justify-content: flex-end; gap: 8px; }
.report-actions button { min-height: 40px; padding: 0 16px; border: 1px solid #ffffff1f; border-radius: 10px; background: #17171b; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.report-actions .report-send { border-color: #ff5a5a66; background: #ff5a5a1f; color: #ff8a8a; }
.report-status:empty { display: none; }

/* Widgets dentro do cartão (public/_profile/widgets.js). */
.widgets { display: grid; gap: 10px; margin: 18px 0 0; text-align: left; }
.widget { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #0b0a1080; }
.widget:empty { display: none; }
.widget-loading { margin: 0; color: var(--muted); font-size: 13px; }
.widget-head { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.widget-head .icon { width: 15px; height: 15px; color: var(--brand, var(--accent)); }
.widget-row { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.widget-pic { flex: none; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: #0006; }
.widget-round { border-radius: 50%; }
.widget-pixel { image-rendering: pixelated; }
.widget-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.widget-text strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.widget-text small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.widget-clamp { display: -webkit-box !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal !important; }
.dot-online, .dot-off { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3ba55d; box-shadow: 0 0 8px #3ba55d; }
.dot-off { background: #747f8d; box-shadow: none; }
.widget-btn { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s; }
.widget-btn:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.widget-video { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.widget-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; }
.widget-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.widget-video:hover .widget-thumb img { transform: scale(1.04); }
.widget-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 36px; border-radius: 10px; background: #ff0033e6; transform: translate(-50%, -50%); }
.widget-play::after { content: ""; position: absolute; left: 21px; top: 10px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.widget-pix .widget-key { font-family: "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.widget-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.widget-qr { display: grid; place-items: center; margin-top: 12px; }
.widget-qr canvas { width: min(220px, 100%); height: auto; border-radius: 12px; }
.widget-pix .widget-head .icon { color: #32bcad; }

/* Comentários abaixo do cartão. */
.comments { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #0b0a10b3; backdrop-filter: blur(12px); text-align: left; }
.comments:empty { display: none; }
.comments-title { margin: 0 0 12px; font-size: 15px; }
.comment-form { display: grid; gap: 8px; }
.comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #07060bb3; color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.comment-form textarea:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); outline: none; }
.comment-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.comment-status { flex: 1; color: #ff8a8a; font-size: 12.5px; }
.comment-actions button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.comment-actions button:disabled { opacity: .6; }
.comment-login { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent); font-size: 14px; font-weight: 600; }
.comment-list { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.comment { display: flex; gap: 10px; }
.comment-face { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.comment-letter { display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 25%, #000); color: var(--accent); font-size: 13px; font-weight: 800; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13px; }
.comment-author { overflow: hidden; color: var(--text); font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.comment-time { color: var(--muted); font-size: 12px; }
.comment-delete { margin-left: auto; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.comment-delete:hover { color: #ff8a8a; }
.comment-text { margin: 2px 0 0; color: var(--muted); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.comment-empty { color: var(--muted); font-size: 13.5px; }

/* ---------- Pacote de aparência ----------
   As opções chegam como data-* na raiz (body na página, a prévia no editor), postas pelo theme.js.
   Nomes e valores: LOOK em src/theme.js. */

/* Informações abaixo da bio: ocupação, cidade e hora local. */
.info { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.info li { display: inline-flex; align-items: center; gap: 6px; }
.info .icon { width: 14px; height: 14px; color: var(--accent); }
.clock { font-variant-numeric: tabular-nums; }

/* Avatar: formato, tamanho e borda. */
[data-avatar-shape="rounded"] .avatar { border-radius: 30%; }
[data-avatar-shape="soft"] .avatar { border-radius: 18%; }
[data-avatar-shape="square"] .avatar { border-radius: 8px; }
[data-avatar-size="s"] .avatar { width: 84px; height: 84px; font-size: 34px; }
[data-avatar-size="l"] .avatar { width: 144px; height: 144px; font-size: 56px; }
[data-avatar-ring="glow"] .avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 60px -2px var(--accent); }
[data-avatar-ring="none"] .avatar { box-shadow: none; }

/* Cartão com borda na cor do tema. */
.card-bordered { border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent); background: #0c0b10d9; box-shadow: 0 0 0 1px #000, 0 0 44px -16px var(--accent), 0 30px 80px -40px #000; }

/* Alinhamento e largura. */
[data-card-align="left"] .card { text-align: left; }
[data-card-align="left"] .avatar { margin: 0; }
[data-card-align="left"] :is(.badges, .socials, .info) { justify-content: flex-start; }
[data-card-align="left"] .link { justify-content: flex-start; }
[data-card-width="narrow"] .profile { width: min(360px, calc(100% - 32px)); }
[data-card-width="wide"] .profile { width: min(580px, calc(100% - 32px)); }

/* Animação do cartão e reação ao passar o mouse. translate/scale separados de transform para não brigar com a inclinação. */
.card { transition: translate .35s var(--ease), scale .35s var(--ease), box-shadow .35s var(--ease); }
[data-card-fx="float"] .card { animation: card-float 6s ease-in-out infinite; }
[data-card-fx="pulse"] .card { animation: card-pulse 3.2s ease-in-out infinite; }
[data-card-fx="shimmer"] .card { background-image: linear-gradient(110deg, transparent 38%, #ffffff17 50%, transparent 62%); background-size: 260% 100%; background-repeat: no-repeat; animation: card-shimmer 4.5s ease-in-out infinite; }
[data-card-fx="tilt"] .card { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s linear, box-shadow .35s var(--ease); }
[data-card-hover="lift"] .card:hover { translate: 0 -6px; }
[data-card-hover="glow"] .card:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 60px -10px var(--accent); }
[data-card-hover="zoom"] .card:hover { scale: 1.025; }
@keyframes card-float { 50% { translate: 0 -10px; } }
@keyframes card-pulse { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 70px -8px var(--accent); } }
@keyframes card-shimmer { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }

/* Cartão aparecendo depois do clique em entrar (o padrão "rise" é o do .profile lá em cima). */
[data-card-in="fade"]:not(.is-in):has(.enter) .profile { transform: none; }
[data-card-in="zoom"]:not(.is-in):has(.enter) .profile { transform: scale(.88); }
[data-card-in="flip"]:not(.is-in):has(.enter) .profile { transform: perspective(900px) rotateX(32deg); transform-origin: 50% 0; }
[data-card-in="drop"]:not(.is-in):has(.enter) .profile { transform: translateY(-56px); }
[data-card-in="flip"] .profile, [data-card-in="drop"] .profile { transition-duration: .9s; }
[data-card-in="none"] .profile { transition: none; }

/* Tela de entrada saindo. */
.enter { transition: opacity .6s var(--ease), transform .7s var(--ease), filter .7s var(--ease), clip-path .8s var(--ease); }
[data-enter-out="zoom"] .enter.is-gone { transform: scale(1.3); }
[data-enter-out="blur"] .enter.is-gone { filter: blur(24px); }
[data-enter-out="rise"] .enter.is-gone { transform: translateY(-100%); }
[data-enter-out="iris"] .enter { clip-path: circle(150% at 50% 50%); }
[data-enter-out="iris"] .enter.is-gone { clip-path: circle(0% at 50% 50%); opacity: 1; }

/* Links: tamanho e efeito ao passar o mouse. */
.social .icon, .link .icon { transition: transform .6s var(--ease); }
[data-link-size="s"] :is(.social, button.social) { width: 38px; height: 38px; border-radius: 11px; }
[data-link-size="s"] .social .icon { width: 17px; height: 17px; }
[data-link-size="s"] .link { min-height: 42px; font-size: 14.5px; }
[data-link-size="l"] :is(.social, button.social) { width: 54px; height: 54px; border-radius: 16px; }
[data-link-size="l"] .social .icon { width: 25px; height: 25px; }
[data-link-size="l"] .link { min-height: 56px; font-size: 17px; }
[data-link-hover="scale"] .social:hover { transform: scale(1.12); }
[data-link-hover="scale"] .link:hover { transform: scale(1.03); }
[data-link-hover="glow"] :is(.social, .link):hover { transform: none; box-shadow: 0 0 26px -4px var(--brand, var(--accent)), inset 0 0 0 1px color-mix(in srgb, var(--brand, var(--accent)) 50%, transparent); }
[data-link-hover="spin"] :is(.social, .link):hover { transform: none; }
[data-link-hover="spin"] :is(.social, .link):hover .icon { transform: rotate(360deg); }
[data-link-hover="none"] :is(.social, .link):hover { transform: none; box-shadow: none; }

/* Filtros na tela toda. */
.page-filter { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.filter-scanlines, .filter-crt, .filter-vhs { background: repeating-linear-gradient(to bottom, #0000 0 2px, #00000052 2px 3px); }
.filter-grain { opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain .9s steps(4) infinite; }
.filter-vignette, .filter-crt::after { background: radial-gradient(ellipse at center, transparent 48%, #000000c4 100%); }
.filter-crt::after { content: ""; position: absolute; inset: 0; }
.filter-crt { animation: crt-flicker 4s steps(1) infinite; }
.filter-vhs::after { content: ""; position: absolute; left: 0; right: 0; height: 18vh; background: linear-gradient(transparent, #ffffff10 40%, #ffffff1c 50%, #ffffff10 60%, transparent); filter: blur(2px); animation: vhs-band 6s linear infinite; }
[data-filter="vhs"] .profile, [data-filter="rgb"] .profile { text-shadow: 2px 0 #ff00405e, -2px 0 #00e5ff5e; }
.filter-glitch::before, .filter-glitch::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: color-mix(in srgb, var(--accent) 40%, transparent); mix-blend-mode: screen; opacity: 0; }
.filter-glitch::before { top: 30%; animation: glitch-bar 3.1s steps(1) infinite; }
.filter-glitch::after { top: 68%; height: 3px; background: #00e5ff66; animation: glitch-bar 2.3s steps(1) infinite reverse; }
[data-filter="glitch"] .name { animation: glitch-shake 3.1s steps(1) infinite; }
@keyframes grain { 25% { background-position: 40px 20px; } 50% { background-position: -30px 50px; } 75% { background-position: 60px -40px; } }
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .85; } 48% { opacity: 1; } 83% { opacity: .9; } 84% { opacity: 1; } }
@keyframes vhs-band { from { top: -20vh; } to { top: 110vh; } }
@keyframes glitch-bar { 0%, 86%, 100% { opacity: 0; transform: none; } 87% { opacity: 1; transform: translateX(-12px); } 90% { opacity: 1; transform: translateX(10px) translateY(14px); } 93% { opacity: 0; } }
@keyframes glitch-shake { 0%, 86%, 100% { translate: 0; } 87% { translate: -3px 1px; } 90% { translate: 3px -1px; } 93% { translate: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}