/* Portí · componentes animados (laboratório, out/2026).
   Refeitos a partir das referências da Spell UI, sem biblioteca externa: só CSS + JS puro, cores e raios dos tokens
   (--porti-*), então valem para a Portí e para as marcas dos white labels. Respeitam "reduzir movimento".
   Prefixo pc-. Uso: <link rel="stylesheet" href="componentes.css"> + <script src="componentes.js"></script> e PC.ligar(). */

:root { --pc-dur: .6s; --pc-ease: cubic-bezier(.22, .9, .3, 1); }

/* ───────── textos ───────── */
.pc-palavras .pc-p { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
.pc-palavras.pc-anda .pc-p { animation: pc-surgir var(--pc-dur) var(--pc-ease) forwards; animation-delay: calc(var(--i) * 70ms); }
.pc-palavras[data-efeito="desfoque"] .pc-p { filter: blur(10px); transform: translateY(4px); }
.pc-palavras[data-efeito="desfoque"].pc-anda .pc-p { animation-name: pc-desfocar; }
.pc-palavras[data-efeito="subir"] .pc-p { transform: translateY(.7em); }
@keyframes pc-surgir { to { opacity: 1; transform: none; } }
@keyframes pc-desfocar { to { opacity: 1; filter: blur(0); transform: none; } }

.pc-brilho { color: var(--porti-text-2); background: linear-gradient(100deg, currentColor 40%, var(--porti-text) 50%, currentColor 60%) 0 0 / 250% 100% text;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: pc-brilho 2.2s linear infinite; }
@keyframes pc-brilho { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.pc-destaque { --pc-tinta: color-mix(in srgb, var(--porti-action) 24%, transparent); background: linear-gradient(var(--pc-tinta), var(--pc-tinta)) 0 100% / 0 55% no-repeat; padding: 0 .15em; border-radius: .2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s var(--pc-ease) .2s; }
.pc-destaque.pc-anda { background-size: 100% 55%; }

.pc-embaralha { font-family: var(--porti-mono); font-variant-numeric: tabular-nums; }

.pc-faixa { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pc-faixa-trilho { display: flex; gap: var(--pc-faixa-gap, 48px); width: max-content; animation: pc-faixa var(--pc-faixa-dur, 28s) linear infinite; }
.pc-faixa:hover .pc-faixa-trilho { animation-play-state: paused; }
.pc-faixa-trilho > * { flex: none; }
@keyframes pc-faixa { to { transform: translateX(calc(-50% - var(--pc-faixa-gap, 48px) / 2)); } }

.pc-assinatura path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--pc-len, 1000); stroke-dashoffset: var(--pc-len, 1000); }
.pc-assinatura.pc-anda path { animation: pc-tracar 2.4s var(--pc-ease) forwards; }
@keyframes pc-tracar { to { stroke-dashoffset: 0; } }

/* ───────── botões ───────── */
.pc-btn { font: 600 15px var(--porti-sans); border: 0; border-radius: var(--porti-radius-pill); padding: 12px 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  background: var(--porti-action); color: #fff; transition: transform .15s ease, box-shadow .25s ease, background .25s ease; -webkit-tap-highlight-color: transparent; }
.pc-btn:focus-visible { outline: 3px solid var(--porti-focus, var(--porti-action)); outline-offset: 3px; }

.pc-btn-aura { position: relative; isolation: isolate; }
.pc-btn-aura::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; background: var(--porti-action); opacity: .45; filter: blur(10px); animation: pc-aura 2.6s ease-in-out infinite; }
@keyframes pc-aura { 50% { opacity: .85; filter: blur(16px); } }

.pc-btn-fluxo { background: transparent; color: var(--porti-action); box-shadow: inset 0 0 0 2px var(--porti-action); position: relative; overflow: hidden; isolation: isolate; }
.pc-btn-fluxo::before { content: ''; position: absolute; inset: 0; background: var(--porti-action); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--pc-ease); z-index: -1; }
.pc-btn-fluxo:hover, .pc-btn-fluxo:focus-visible { color: #fff; }
.pc-btn-fluxo:hover::before, .pc-btn-fluxo:focus-visible::before { transform: scaleX(1); }
.pc-btn-fluxo .pc-seta { transition: transform .35s var(--pc-ease); }
.pc-btn-fluxo:hover .pc-seta { transform: translateX(5px); }

.pc-btn-copiar { background: var(--porti-surface-alt); color: var(--porti-text); box-shadow: inset 0 0 0 1px var(--porti-border); font-family: var(--porti-mono); font-weight: 500; font-size: 14px; }
.pc-btn-copiar .pc-ic { position: relative; width: 18px; height: 18px; flex: none; }
.pc-btn-copiar .pc-ic svg { position: absolute; inset: 0; transition: transform .3s var(--pc-ease), opacity .2s; }
.pc-btn-copiar .pc-ok { opacity: 0; transform: scale(.4) rotate(-20deg); color: var(--porti-success, #1f9d55); }
.pc-btn-copiar.pc-copiado .pc-ok { opacity: 1; transform: none; }
.pc-btn-copiar.pc-copiado .pc-copia { opacity: 0; transform: scale(.4); }
.pc-btn-copiar.pc-copiado { box-shadow: inset 0 0 0 1px var(--porti-success, #1f9d55); }

.pc-btn-pulo:active { transform: scale(.94); }
.pc-btn-pulo { position: relative; overflow: hidden; }
.pc-onda { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: pc-onda .6s ease-out forwards; pointer-events: none; }
@keyframes pc-onda { to { transform: scale(4); opacity: 0; } }

/* ───────── cartões ───────── */
.pc-inclina { perspective: 900px; display: inline-block; }
.pc-inclina-cartao { position: relative; transform-style: preserve-3d; transition: transform .25s ease-out; border-radius: var(--porti-radius-lg); will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.pc-inclina-cartao::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 45%); }
.pc-inclina:hover .pc-inclina-cartao::after, .pc-inclina.pc-ativo .pc-inclina-cartao::after { opacity: 1; }

.pc-foco { position: relative; border-radius: var(--porti-radius-md); background: var(--porti-surface); border: 1px solid var(--porti-border); overflow: hidden; }
.pc-foco::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--porti-action) 22%, transparent), transparent 70%); }
.pc-foco:hover::before { opacity: 1; }

/* ───────── campos ───────── */
.pc-campo { position: relative; display: block; }
.pc-campo input { width: 100%; box-sizing: border-box; font: 16px var(--porti-sans); color: var(--porti-text); background: var(--porti-surface); border: 1.5px solid var(--porti-border-strong, var(--porti-border));
  border-radius: var(--porti-radius-md); padding: 22px 14px 8px; outline: none; transition: border-color .2s, box-shadow .2s; }
.pc-campo span { position: absolute; left: 15px; top: 15px; font: 15px var(--porti-sans); color: var(--porti-text-3, var(--porti-text-2)); pointer-events: none; transition: transform .2s var(--pc-ease), color .2s; transform-origin: left top; }
.pc-campo input:focus { border-color: var(--porti-action); box-shadow: 0 0 0 4px var(--porti-accent-soft); }
.pc-campo input:focus + span, .pc-campo input:not(:placeholder-shown) + span { transform: translateY(-9px) scale(.78); color: var(--porti-action); }

.pc-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 15px var(--porti-sans); color: var(--porti-text); user-select: none; }
.pc-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pc-check .pc-caixa { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--porti-border-strong, var(--porti-border)); display: grid; place-items: center; transition: background .2s, border-color .2s, transform .15s; }
.pc-check .pc-caixa svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .3s var(--pc-ease) .05s; }
.pc-check input:checked + .pc-caixa { background: var(--porti-action); border-color: var(--porti-action); transform: scale(1.06); }
.pc-check input:checked + .pc-caixa svg { stroke-dashoffset: 0; }
.pc-check input:focus-visible + .pc-caixa { box-shadow: 0 0 0 4px var(--porti-accent-soft); }

.pc-cores { display: flex; gap: 10px; flex-wrap: wrap; }
.pc-cores button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px var(--porti-surface), 0 0 0 3px transparent; transition: box-shadow .2s, transform .15s; }
.pc-cores button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--porti-surface), 0 0 0 5px var(--c); transform: scale(1.08); }

.pc-faisca { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--porti-action); pointer-events: none; animation: pc-faisca .55s ease-out forwards; }
@keyframes pc-faisca { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ───────── carregando ───────── */
.pc-giro { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--porti-accent-soft); border-top-color: var(--porti-action); animation: pc-gira .8s linear infinite; }
@keyframes pc-gira { to { transform: rotate(360deg); } }
.pc-barras { display: inline-flex; gap: 4px; align-items: center; height: 26px; }
.pc-barras i { width: 5px; height: 100%; border-radius: 3px; background: var(--porti-action); animation: pc-barra 1s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes pc-barra { 0%, 100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
.pc-esqueleto { border-radius: var(--porti-radius-sm); background: var(--porti-surface-alt); position: relative; overflow: hidden; }
.pc-esqueleto::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); animation: pc-varre 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--porti-text) 7%, transparent), transparent); }
@keyframes pc-varre { to { transform: translateX(100%); } }

.pc-tecla { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; box-sizing: border-box; border-radius: 8px; font: 500 13px var(--porti-mono); color: var(--porti-text);
  background: var(--porti-surface); border: 1px solid var(--porti-border); box-shadow: 0 3px 0 var(--porti-border); transition: transform .08s, box-shadow .08s; }
.pc-tecla.pc-apertada { transform: translateY(3px); box-shadow: 0 0 0 var(--porti-border); background: var(--porti-accent-soft); }

/* ───────── fundos (só sites: a marca Portí não usa degradê) ───────── */
.pc-raios { position: relative; overflow: hidden; background: var(--porti-roxo-900, #111); isolation: isolate; }
.pc-raios::before { content: ''; position: absolute; left: 50%; top: -40%; width: 160%; aspect-ratio: 1; translate: -50% 0; z-index: -1; opacity: .6;
  background: repeating-conic-gradient(from 180deg at 50% 0%, transparent 0deg 6deg, color-mix(in srgb, #fff 30%, transparent) 7deg 8.5deg, transparent 10deg 15deg);
  -webkit-mask: radial-gradient(ellipse 45% 55% at 50% 0%, #000 0%, transparent 85%); mask: radial-gradient(ellipse 45% 55% at 50% 0%, #000 0%, transparent 85%); animation: pc-raios 9s ease-in-out infinite alternate; }
@keyframes pc-raios { to { opacity: 1; rotate: 4deg; } }

.pc-aurora { position: relative; overflow: hidden; background: var(--porti-roxo-900, #111); isolation: isolate; }
.pc-aurora i { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(48px); opacity: .7; z-index: -1; animation: pc-mancha 12s ease-in-out infinite alternate; }
.pc-aurora i:nth-child(1) { background: var(--porti-action); left: -10%; top: -20%; }
.pc-aurora i:nth-child(2) { background: var(--porti-roxo-500, var(--porti-brand)); right: -15%; top: 10%; animation-duration: 15s; }
.pc-aurora i:nth-child(3) { background: var(--porti-brand); left: 20%; bottom: -40%; animation-duration: 18s; }
@keyframes pc-mancha { to { transform: translate(18%, 12%) scale(1.15); } }

/* ───────── movimento reduzido: tudo aparece pronto, sem animação ───────── */
@media (prefers-reduced-motion: reduce) {
  .pc-palavras .pc-p { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
  .pc-brilho, .pc-faixa-trilho, .pc-btn-aura::before, .pc-raios::before, .pc-aurora i, .pc-esqueleto::after, .pc-barras i { animation: none !important; }
  .pc-assinatura path { stroke-dashoffset: 0 !important; animation: none !important; }
  .pc-destaque { background-size: 100% 55%; transition: none; }
  .pc-inclina-cartao { transform: none !important; }
}
[data-movimento="reduzido"] .pc-palavras .pc-p { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
[data-movimento="reduzido"] :is(.pc-brilho, .pc-faixa-trilho, .pc-raios, .pc-aurora i, .pc-esqueleto, .pc-barras i, .pc-giro) { animation: none !important; }
[data-movimento="reduzido"] .pc-raios::before, [data-movimento="reduzido"] .pc-btn-aura::before, [data-movimento="reduzido"] .pc-esqueleto::after { animation: none !important; }
[data-movimento="reduzido"] .pc-assinatura path { stroke-dashoffset: 0 !important; animation: none !important; }
[data-movimento="reduzido"] .pc-destaque { background-size: 100% 55%; transition: none; }
[data-movimento="reduzido"] .pc-inclina-cartao { transform: none !important; }

/* ───────── extras (08/10): QR, cartão de áudio, livro 3D, texto com degradê ───────── */
.pc-qr { display: inline-block; background: #fff; padding: 10px; border-radius: var(--porti-radius-md); line-height: 0; box-shadow: 0 1px 0 var(--porti-border); }
.pc-qr svg { width: var(--pc-qr-tam, 168px); height: auto; display: block; }

.pc-audio { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; width: 100%; max-width: 380px; padding: 12px; text-align: left;
  background: var(--porti-surface); border: 1px solid var(--porti-border); border-radius: var(--porti-radius-lg); box-shadow: var(--porti-shadow-float, 0 8px 24px rgba(0,0,0,.12)); }
.pc-audio-capa { width: 64px; height: 64px; border-radius: var(--porti-radius-md); background: var(--porti-brand); color: #fff; display: grid; place-items: center; font: 700 22px var(--porti-display); overflow: hidden; position: relative; }
.pc-audio-capa img { width: 100%; height: 100%; object-fit: cover; }
.pc-audio-info { min-width: 0; }
.pc-audio-info b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-audio-info small { display: block; color: var(--porti-text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-audio-barra { height: 5px; border-radius: 3px; background: var(--porti-surface-alt); margin-top: 8px; cursor: pointer; position: relative; overflow: hidden; }
.pc-audio-barra i { position: absolute; inset: 0 auto 0 0; width: var(--pc-prog, 0%); background: var(--porti-action); border-radius: inherit; }
.pc-audio-tempos { display: flex; justify-content: space-between; font: 11px var(--porti-mono); color: var(--porti-text-2); margin-top: 4px; }
.pc-audio-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--porti-action); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.pc-audio-play:active { transform: scale(.92); }
.pc-audio-play svg { width: 18px; height: 18px; }
.pc-audio .pc-pausa, .pc-audio.pc-tocando .pc-toca { display: none; }
.pc-audio.pc-tocando .pc-pausa { display: block; }
.pc-audio-eq { position: absolute; right: 6px; bottom: 6px; display: none; gap: 2px; align-items: flex-end; height: 14px; }
.pc-audio.pc-tocando .pc-audio-eq { display: flex; }
.pc-audio-eq i { width: 3px; height: 100%; background: #fff; border-radius: 1px; animation: pc-barra .9s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); transform-origin: bottom; }

.pc-livro { perspective: 1100px; display: inline-block; padding: 10px 26px; }
.pc-livro-corpo { position: relative; width: 150px; aspect-ratio: 3 / 4.3; transform-style: preserve-3d; transform: rotateY(-28deg) rotateX(4deg); transition: transform .6s var(--pc-ease); }
.pc-livro:hover .pc-livro-corpo, .pc-livro:focus-within .pc-livro-corpo { transform: rotateY(-8deg) rotateX(2deg) translateY(-6px); }
.pc-livro-capa { position: absolute; inset: 0; border-radius: 3px 8px 8px 3px; background: var(--porti-brand); color: #fff; padding: 16px 14px 14px 20px; display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  transform: translateZ(14px); box-shadow: inset 6px 0 8px -4px rgba(0,0,0,.35), 0 18px 30px rgba(0,0,0,.25); overflow: hidden; }
.pc-livro-capa::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.18); }
.pc-livro-capa b { font: 700 17px/1.15 var(--porti-display); }
.pc-livro-capa small { font: 500 10px var(--porti-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.pc-livro-paginas { position: absolute; top: 3px; bottom: 3px; right: -1px; width: 28px; transform: rotateY(90deg) translateZ(136px) translateX(-14px); transform-origin: right;
  background: repeating-linear-gradient(90deg, #f4f1ee 0 2px, #ddd8d2 2px 3px); }
.pc-livro-fundo { position: absolute; inset: 0; border-radius: 3px 8px 8px 3px; background: color-mix(in srgb, var(--porti-brand) 80%, #000); transform: translateZ(-14px); }

.pc-onda-texto { background: linear-gradient(90deg, var(--porti-action), var(--porti-roxo-300, #B4A0CD), var(--porti-brand), var(--porti-action)) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: pc-onda-texto 6s linear infinite; }
@keyframes pc-onda-texto { to { background-position: 300% 0; } }

@media (prefers-reduced-motion: reduce) { .pc-onda-texto, .pc-audio-eq i { animation: none !important; } .pc-livro-corpo { transition: none; } }
[data-movimento="reduzido"] :is(.pc-onda-texto, .pc-audio-eq i) { animation: none !important; }
[data-movimento="reduzido"] .pc-livro-corpo { transition: none; }