/* Cartão 1: notificações de subscrições a entrar em loop, cada vez mais depressa.
   A pilha cresce a partir do centro, com o mesmo espaço em cima e em baixo. Quando ocupa o cartão todo
   (classe "full", posta pelo app.js), as mais antigas saem pelo topo e a mais recente fica junto ao fundo. */
.pvis.shot { container-type: inline-size;
  background: radial-gradient(60% 50% at 18% 28%, rgba(74, 132, 210, .38), transparent 70%),
              radial-gradient(55% 45% at 86% 68%, rgba(128, 92, 210, .30), transparent 70%),
              radial-gradient(70% 60% at 50% 0%, rgba(143, 176, 224, .12), transparent 70%), #121210; }
/* esbatido em baixo (substitui a máscara, que desligaria o desfoque do vidro) */
.pvis.shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(to bottom, transparent, #121210); pointer-events: none; z-index: 4; }
.pvis.shot .scene { padding: 0; }
.shot .col { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; padding-bottom: 11px; }
/* column-reverse: o 1.º do DOM fica em baixo e os seguintes por cima; "full" encosta o mais recente ao topo */
.shot .col.full { justify-content: flex-end; padding-top: 13px; padding-bottom: 0; }

.sn { --sn-h: 66px; position: relative; flex: none; width: min(330px, 80%); height: 0; display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .09)); color: #f5f5f5;
  border: .67px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
  opacity: 0; margin-top: 0; padding: 0 14px; transform: translateY(-26px) scale(.96);
  transition: height .6s cubic-bezier(.2, .8, .3, 1), opacity .45s ease, margin-top .6s ease, transform .6s cubic-bezier(.2, .9, .3, 1.1), filter .5s ease; }
.sn > * { opacity: 0; transition: opacity .3s ease .12s; }
.sn.on { height: var(--sn-h); opacity: 1; margin-top: 11px; transform: none; }
.sn.on > * { opacity: 1; }
.sn .appico { width: 46px; height: 46px; border-radius: 11px; background: linear-gradient(145deg, var(--c1, #999), var(--c2, #666)); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.sn .appico svg { width: 26px; height: 26px; display: block; }
.sn b { display: block; font-size: 17px; font-weight: 500; line-height: 1.15; }
.sn span.body { display: block; font-size: 15.5px; line-height: 1.25; color: rgba(255, 255, 255, .78); }
.sn em { align-self: start; font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .5); margin-top: 12px; white-space: nowrap; }

/* só a 1.ª notificação tem camadas empilhadas por trás; as outras são simples */
.sn:first-child.on::before, .sn:first-child.on::after { content: ""; position: absolute; left: 6%; right: 6%; top: calc(100% - 2px); height: 9px; border-radius: 0 0 14px 14px;
  background: rgba(255, 255, 255, .10); border: .67px solid rgba(255, 255, 255, .16); border-top: 0; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); z-index: -1; }
.sn:first-child.on::after { left: 11%; right: 11%; top: calc(100% + 5px); height: 8px; background: rgba(255, 255, 255, .06); z-index: -2; }
/* os antigos desfocam e desvanecem */
.sn.on:has(~ .sn.on ~ .sn.on ~ .sn.on) { filter: blur(.6px); }
.sn.on:has(~ .sn.on ~ .sn.on ~ .sn.on ~ .sn.on) { filter: blur(1.4px); opacity: .85; }
.sn.on:has(~ .sn.on ~ .sn.on ~ .sn.on ~ .sn.on ~ .sn.on ~ .sn.on) { filter: blur(2.6px); opacity: .6; }
.pvis.shot .tag-fict { z-index: 5; }

/* telemóvel */
@media (max-width: 420px) { .sn { --sn-h: 58px; grid-template-columns: 40px 1fr auto; } .sn .appico { width: 40px; height: 40px; } .sn b { font-size: 15.5px; } .sn span.body { font-size: 14px; } .sn em { margin-top: 10px; } }
/* adapta-se à largura do próprio cartão (3 colunas em ecrãs médios) */
@container (max-width: 340px) {
  .sn { --sn-h: 50px; width: 90%; grid-template-columns: 34px 1fr auto; gap: 9px; border-radius: 16px; }
  .sn .appico { width: 34px; height: 34px; border-radius: 9px; }
  .sn .appico svg { width: 20px; height: 20px; }
  .sn b { font-size: 14px; }
  .sn span.body { font-size: 12.5px; white-space: nowrap; }
  .sn em { font-size: 10.5px; margin-top: 8px; }
}
@container (max-width: 250px) { .sn span.body { font-size: 11.5px; } .sn b { font-size: 13px; } .sn em { font-size: 9.5px; } }