/* ==========================================================================
   Acabamento: abertura, toques, transições, progresso e confirmações
   ========================================================================== */

/* ── ecrã de arranque ── */
#ap-splash { overflow: hidden; background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(47, 123, 255, .55), transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(10, 63, 184, .6), transparent 70%), linear-gradient(170deg, #030c33, #0a2a85); }
#ap-splash.out { opacity: 0; visibility: hidden; transform: scale(1.06); transition: opacity .6s ease, transform .6s ease, visibility .6s; }
.sp-glow { position: absolute; width: 130vmin; height: 130vmin; left: 50%; top: 42%; margin: -65vmin 0 0 -65vmin; border-radius: 50%; background: conic-gradient(from 0deg, rgba(143, 184, 255, 0), rgba(143, 184, 255, .22), rgba(255, 179, 71, .14), rgba(143, 184, 255, 0)); filter: blur(30px); animation: spGiro 9s linear infinite; }
@keyframes spGiro { to { transform: rotate(360deg); } }
.sp-notes { position: absolute; inset: 0; pointer-events: none; }
.sp-notes b { position: absolute; bottom: -10%; font: 400 28px Georgia, serif; color: rgba(255, 255, 255, .28); animation: spNota 6.5s ease-in infinite; }
.sp-notes b:nth-child(1) { left: 12%; animation-delay: .2s; } .sp-notes b:nth-child(2) { left: 28%; animation-delay: 1.4s; font-size: 38px; } .sp-notes b:nth-child(3) { left: 46%; animation-delay: 2.6s; }
.sp-notes b:nth-child(4) { left: 64%; animation-delay: .8s; font-size: 34px; } .sp-notes b:nth-child(5) { left: 80%; animation-delay: 2s; } .sp-notes b:nth-child(6) { left: 92%; animation-delay: 3.4s; font-size: 24px; }
@keyframes spNota { 0% { transform: translateY(0) rotate(-8deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-115vh) rotate(14deg); opacity: 0; } }
.sp-logo { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin-bottom: 6px; }
.sp-logo img { position: relative; z-index: 2; width: 108px; height: 108px; padding: 10px; border-radius: 30px; background: #fff; box-shadow: 0 24px 60px rgba(0, 20, 90, .6), 0 0 0 6px rgba(255, 255, 255, .12); animation: spPop .9s cubic-bezier(.2, .9, .2, 1.2) both, spFlut 3.2s ease-in-out .9s infinite; }
.sp-ring { position: absolute; inset: 0; border-radius: 38px; border: 2px solid rgba(143, 184, 255, .55); animation: spOnda 2.4s ease-out infinite; }
.sp-ring.r2 { animation-delay: 1.2s; }
@keyframes spOnda { 0% { transform: scale(.82); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes spFlut { 50% { transform: translateY(-6px); } }
#ap-splash strong { font-size: 24px; letter-spacing: .2em; background: linear-gradient(90deg, #fff, #bcd6ff, #fff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: spUp .8s .15s both, spBrilho 3s linear 1s infinite; }
@keyframes spBrilho { to { background-position: -200% 0; } }
.sp-verso { margin: 14px 28px 0; max-width: 300px; text-align: center; font: italic 400 16px/1.5 "Fraunces", Georgia, serif; color: rgba(255, 255, 255, .85); animation: spUp .9s .6s both; }
.sp-verso cite { display: block; margin-top: 4px; font: 600 11px "Inter", sans-serif; font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: #8fb8ff; }
#ap-splash i.sp-bar { width: 120px; height: 4px; margin-top: 26px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; position: relative; animation: spUp .8s .8s both; }
#ap-splash i.sp-bar::after { content: ""; position: absolute; inset: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, #8fb8ff, #fff); animation: spCarga 2s .6s ease-out forwards; left: 0; }
@keyframes spCarga { to { width: 100%; } }

/* ── barra de carregamento no topo ── */
#ap-bar { position: fixed; z-index: 95; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, #2f7bff, #8fb8ff, #ffb347); box-shadow: 0 0 10px rgba(143, 184, 255, .8); pointer-events: none; }
#ap-bar.run { animation: barRun 8s cubic-bezier(.1, .6, .2, 1) forwards; }
#ap-bar.end { width: 100%; opacity: 0; transition: width .2s, opacity .4s .2s; }
#ap-bar[hidden] { display: none; }
@keyframes barRun { 0% { width: 0; } 60% { width: 80%; } 100% { width: 92%; } }

/* ── esqueleto de carregamento ── */
.ap-sk { display: grid; gap: 14px; }
.sk { display: block; border-radius: 22px; background: linear-gradient(100deg, var(--card) 30%, rgba(255, 255, 255, .13) 50%, var(--card) 70%); background-size: 220% 100%; animation: skBrilho 1.3s linear infinite; border: 1px solid var(--line); }
.sk.a { height: 92px; } .sk.b { height: 92px; } .sk.c { height: 138px; }
@keyframes skBrilho { to { background-position: -220% 0; } }

/* ── toque: pressão e ondulação ── */
.ap-btn, .ap-row, .ap-card, .ap-hero, .ap-sab, .ap-atalhos a, .ap-tabs a, .ap-ib, .ap-chips button, .ap-keys button, .ap-seg button, .ap-tools button, .ap-pick, .ap-ig, .ap-dv-nav a, .ap-dv-share, .ap-banner button { position: relative; overflow: hidden; transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background .2s; }
.ap-fab { overflow: visible; }
.ap-hero:active, .ap-sab:active, .ap-atalhos a:active, .ap-card:active, .ap-ig:active { transform: scale(.975); }
.ap-row:active, .ap-pick:active { transform: scale(.98); }
.ap-tabs a:active { transform: scale(.9); }
.ap-rip { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .32); transform: scale(0); animation: ripAnim .6s ease-out forwards; pointer-events: none; }
body.ap-claro .ap-rip { background: rgba(0, 87, 229, .18); }
@keyframes ripAnim { to { transform: scale(1); opacity: 0; } }

/* ── transições ao entrar em cada ecrã ── */
@keyframes apRise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.ap-view > *, .ap-ig-lista > *, .ap-lyrics > .ap-st, .ap-set { animation: apRise .55s cubic-bezier(.2, .8, .2, 1) both; }
.ap-view > *:nth-child(1) { animation-delay: .02s; } .ap-view > *:nth-child(2) { animation-delay: .07s; } .ap-view > *:nth-child(3) { animation-delay: .12s; } .ap-view > *:nth-child(4) { animation-delay: .17s; }
.ap-view > *:nth-child(5) { animation-delay: .22s; } .ap-view > *:nth-child(6) { animation-delay: .27s; } .ap-view > *:nth-child(7) { animation-delay: .32s; } .ap-view > *:nth-child(n+8) { animation-delay: .36s; }
.ap-list > .ap-row { animation: apRise .45s cubic-bezier(.2, .8, .2, 1) both; }
.ap-list > .ap-row:nth-child(n+14) { animation: none; }
.ap-list > .ap-row:nth-child(1) { animation-delay: .03s; } .ap-list > .ap-row:nth-child(2) { animation-delay: .06s; } .ap-list > .ap-row:nth-child(3) { animation-delay: .09s; } .ap-list > .ap-row:nth-child(4) { animation-delay: .12s; } .ap-list > .ap-row:nth-child(5) { animation-delay: .15s; } .ap-list > .ap-row:nth-child(6) { animation-delay: .18s; } .ap-list > .ap-row:nth-child(7) { animation-delay: .21s; } .ap-list > .ap-row:nth-child(8) { animation-delay: .24s; }
.ap-lyrics > .ap-st:nth-child(1) { animation-delay: .1s; } .ap-lyrics > .ap-st:nth-child(2) { animation-delay: .2s; } .ap-lyrics > .ap-st:nth-child(3) { animation-delay: .3s; } .ap-lyrics > .ap-st:nth-child(4) { animation-delay: .4s; } .ap-lyrics > .ap-st:nth-child(n+5) { animation-delay: .5s; }
.ap-hhead .ap-num { animation: apPop .6s cubic-bezier(.2, .9, .2, 1.3) both; }
@keyframes apPop { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ap-tabs a.is-on svg { animation: apSalto .45s cubic-bezier(.2, .9, .2, 1.4); }
@keyframes apSalto { 0% { transform: translateY(6px) scale(.8); } 60% { transform: translateY(-5px) scale(1.15); } 100% { transform: translateY(-1px); } }
.ap-fab { animation: apPop .5s .3s both; }
.ap-fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(47, 123, 255, .6); animation: fabPulso 2.6s ease-out infinite; pointer-events: none; }
@keyframes fabPulso { 0% { box-shadow: 0 0 0 0 rgba(47, 123, 255, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(47, 123, 255, 0); } }
.ap-modal .ap-sheet { animation: apUp .38s cubic-bezier(.2, .9, .2, 1) both; }

/* ── vida nos cartões de destaque ── */
.ap-sab-ic { position: relative; }
.ap-sab-ic svg { animation: solSobe 3.2s ease-in-out infinite; }
@keyframes solSobe { 50% { transform: translateY(-3px); } }
.ap-sab-ic::after { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 2px solid rgba(255, 217, 168, .6); animation: spOnda 2.6s ease-out infinite; }
.ap-hero::after, .ap-sab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .13) 50%, transparent 65%); background-size: 250% 100%; background-position: 160% 0; animation: brilhoCartao 6s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes brilhoCartao { 0% { background-position: 160% 0; } 40%, 100% { background-position: -80% 0; } }
.ap-sol-h { animation: apPop .7s .1s cubic-bezier(.2, .9, .2, 1.2) both; }
.ap-sol-c { animation: apRise .6s .35s both; }

/* ── progresso ao guardar / actualizar ── */
.ap-prog { position: fixed; z-index: 85; inset: 0; display: grid; place-items: center; background: rgba(2, 8, 30, 0); transition: background .3s; pointer-events: none; }
.ap-prog.in { background: rgba(2, 8, 30, .62); pointer-events: auto; }
.ap-prog-c { position: relative; width: min(84%, 340px); padding: 28px 24px 26px; border-radius: 30px; text-align: center; background: var(--sheet); color: var(--txt); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 10, 50, .55); transform: translateY(24px) scale(.92); opacity: 0; transition: transform .4s cubic-bezier(.2, .9, .2, 1.2), opacity .3s; }
.ap-prog.in .ap-prog-c { transform: none; opacity: 1; }
.ap-prog-i { position: relative; width: 84px; height: 84px; margin: 0 auto 14px; display: grid; place-items: center; }
.ap-ring-s { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke: var(--acc); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 30 90; animation: giraAnel 1.1s linear infinite; }
@keyframes giraAnel { to { transform: rotate(270deg); } }
.ap-prog-p { font: 700 20px "Manrope", sans-serif; }
.ap-prog-c strong { display: block; font: 600 17px/1.3 "Manrope", sans-serif; }
.ap-prog-c small { display: block; margin: 4px 0 16px; color: var(--mute); font-size: 13px; }
.ap-bar { display: block; width: 100%; height: 8px; border-radius: 8px; background: var(--chip); overflow: hidden; }
.ap-bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #2f7bff, #8fb8ff); transition: width .25s ease-out; box-shadow: 0 0 12px rgba(47, 123, 255, .6); }
.ap-prog.ok .ap-bar i { background: linear-gradient(90deg, #1fa855, #5ad1c5); }
.ap-check { width: 84px; height: 84px; }
.ap-check circle { fill: rgba(90, 209, 197, .16); stroke: #5ad1c5; stroke-width: 2.5; stroke-dasharray: 160; stroke-dashoffset: 160; animation: tracar .6s ease-out forwards; }
.ap-check path { fill: none; stroke: #5ad1c5; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: tracar .45s .45s ease-out forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
.ap-prog-x { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 138, 138, .18); color: #ff8a8a; font: 700 40px "Manrope", sans-serif; animation: apPop .4s both; }
.ap-conf-b { position: absolute; left: 50%; top: 56px; pointer-events: none; }
.ap-conf-b i { position: absolute; width: 9px; height: 9px; border-radius: 3px; opacity: 0; animation: confete 1.1s .35s ease-out forwards; }
@keyframes confete { 0% { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1) rotate(260deg); opacity: 0; } }

/* troca de fundo (claro/escuro) com transição suave */
body.ap-troca, body.ap-troca * { transition: background-color .45s ease, color .45s ease, border-color .45s ease !important; }
.ap-tg svg { transition: transform .5s cubic-bezier(.2,.9,.2,1.3); }
.ap-tg:active svg { transform: rotate(180deg) scale(.8); }
body.ap-claro .ap-sab, body.ap-claro .ap-hero, body.ap-claro .ap-dev-card, body.ap-claro .ap-sol { color: #fff; }
body.ap-claro .ap-cover { box-shadow: 0 8px 20px rgba(0, 40, 120, .18); }