/* Cenas do lancamento do site novo (outubro de 2026), tiradas do video e da
   contagem decrescente: fitas a correr, selo, confetti e estrela, so' na
   pagina inicial.
   Para as tirar, apagar este ficheiro, o <link> no index.html e os blocos
   marcados "lancamento" no HTML. */

.lancamento-fita { position: relative; z-index: 5; width: 112%; margin: 0 -6%; padding: 18px 0; overflow: hidden; background: #ed8365; color: #1e1c1c; transform: rotate(-2deg); font-family: var(--letra-sans, Inter, system-ui, sans-serif); font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; white-space: nowrap; }
.lancamento-fita_pista { display: flex; width: max-content; }
.lancamento-fita .lancamento-fita_pista > p { display: flex; flex-shrink: 0; margin: 0; max-width: none; font-size: inherit; }
.lancamento-fita span::before { content: "+"; margin: 0 24px; color: #fff; }
/* A fita fica por cima da costura entre o heroi e a secao seguinte. */
.lancamento-fita-envolvente { position: relative; z-index: 5; overflow-x: clip; margin: -82px 0; padding: 48px 0; pointer-events: none; }

/* Selo: autocolante amarelo de bordo ondulado, texto a rodar e o D+ do logotipo ao centro. */
.lancamento-selo { position: absolute; z-index: 3; right: 6%; bottom: 14%; width: 168px; height: 168px; pointer-events: none; filter: drop-shadow(0 16px 18px rgba(30, 28, 28, 0.28)); }
.lancamento-selo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lancamento-selo_onda { fill: #e8c87c; }
.lancamento-selo text { font: 700 11.5px var(--letra-sans, Inter, system-ui, sans-serif); letter-spacing: 0.12em; fill: #1e1c1c; }
.lancamento-selo .mais { fill: #ed8365; font-weight: 800; }
/* Tudo no selo gira no sentido dos ponteiros do relogio; o brilho fica parado, como num autocolante a luz. */
.lancamento-selo_brilho { mix-blend-mode: soft-light; }

/* Segunda fita, lilas, cruzada por tras da coral. */
.lancamento-fita.-cruzada { position: absolute; z-index: -1; top: 48px; left: 0; background: #b48ec6; transform: rotate(2.4deg); }


/* Confetti que cai uma vez, ao abrir a pagina. */
.lancamento-confetti { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.lancamento-confetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; transform: rotate(var(--r)); }
.lancamento-confetti i.-redondo { width: 11px; height: 11px; border-radius: 50%; }
.lancamento-confetti i.-fita { width: 6px; height: 22px; border-radius: 3px; }

.lancamento-nuvem { position: absolute; z-index: 1; height: auto; pointer-events: none; }
.lancamento-nuvem.-um { width: 200px; top: 22%; left: 4%; }
.lancamento-nuvem.-dois { width: 260px; top: 12%; right: 36px; opacity: 0.9; }

/* Mais abaixo na pagina: confetti na chamada "Estamos aqui para si.", a estrela
   "Desde 2015" na foto e duas fitas antes do rodape. */
.lancamento-confetti.-chamada { z-index: 0; }
.lancamento-fita.-verde { background: #94ccbe; }
.lancamento-fita.-lilas { background: #b48ec6; }

.lancamento-estrela { position: absolute; z-index: 5; top: -56px; left: 5%; width: 150px; height: 150px; overflow: hidden; pointer-events: none; transform: rotate(-12deg); filter: drop-shadow(0 14px 16px rgba(30, 28, 28, 0.25)); }
.lancamento-estrela_pontas { position: absolute; inset: 0; width: 100%; height: 100%; fill: #ed8365; stroke: #ed8365; stroke-width: 6; stroke-linejoin: round; }
.lancamento-estrela_texto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; max-width: none; color: #1e1c1c; font: 500 36px/1 var(--letra-sans, Inter, system-ui, sans-serif); letter-spacing: -0.04em; }
.lancamento-estrela_texto span { margin-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* Abaixo de 1000px o heroi da pagina inicial e' o segundo bloco, que nao e' sticky. */
@media (max-width: 999px) {
  .desenvolvermais-heroi-inicio_interior:not(.-fixo) .desenvolvermais-heroi-inicio_contentor { position: relative; }
  .lancamento-selo { bottom: auto; top: 16%; right: 5%; }
}
@media (max-width: 767px) {
  .lancamento-selo { width: 120px; height: 120px; right: 16px; top: 13%; }
  .lancamento-nuvem.-um { width: 130px; top: 30%; left: -30px; }
  .lancamento-nuvem.-dois { display: none; }
  .lancamento-estrela { width: 104px; height: 104px; top: -44px; left: auto; right: 16px; }
  .lancamento-estrela_texto { font-size: 25px; }
  .lancamento-estrela_texto span { font-size: 10px; margin-bottom: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
  .lancamento-fita_pista { animation: lancamento-correr 40s linear infinite; }
  .lancamento-selo { opacity: 0; }
  .ja-carregou .lancamento-selo { opacity: 1; animation: lancamento-carimbar 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 0.9s both; }
  .lancamento-selo_roda { animation: lancamento-girar 34s linear infinite; }
  .lancamento-selo_texto { animation: lancamento-girar 22s linear infinite; }
  .lancamento-selo_centro { animation: lancamento-abanar 3.2s ease-in-out infinite alternate; }
  .ja-carregou .lancamento-confetti i { animation: lancamento-cair var(--t) cubic-bezier(0.3, 0.2, 0.6, 1) var(--d) 1 both; }
  @keyframes lancamento-cair { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(40px, 105vh) rotate(calc(var(--r) + 540deg)); } }
  .ja-carregou .lancamento-confetti.-chamada i { animation: none; }
  .ja-carregou .lancamento-confetti.-chamada.esta-visivel i { animation: lancamento-cair var(--t) cubic-bezier(0.3, 0.2, 0.6, 1) var(--d) 1 both; }
  .lancamento-fita.-ao-contrario .lancamento-fita_pista { animation-direction: reverse; }
  .lancamento-estrela { opacity: 0; }
  .lancamento-estrela.esta-visivel { opacity: 1; animation: lancamento-carimbar 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 0.2s both; }
  .lancamento-estrela_pontas { animation: lancamento-girar 30s linear infinite; }
  .lancamento-nuvem.-um { animation: lancamento-flutuar 9s ease-in-out infinite alternate; }
  .lancamento-nuvem.-dois { animation: lancamento-flutuar 12s ease-in-out -4s infinite alternate-reverse; }
  @keyframes lancamento-flutuar { to { transform: translateX(28px); } }
  @keyframes lancamento-carimbar { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } }
  @keyframes lancamento-abanar { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
  @keyframes lancamento-correr { to { transform: translateX(-50%); } }
  @keyframes lancamento-girar { to { transform: rotate(360deg); } }
}

/* No telemovel e no tablet as personagens ficam presas ao fundo do ecra por
   cima do cartao creme, e a fita da costura cortava-as ao meio. Ai' usa-se a
   copia que esta' dentro do cartao: passa por baixo das personagens, como o
   texto. O selo vai-se apagando ao descer, para nao espreitar por cima do menu. */
.lancamento-fita-envolvente.-telemovel { display: none; }
@media (max-width: 999px) {
  .lancamento-fita-envolvente:not(.-rodape):not(.-telemovel) { display: none; }
  .lancamento-fita-envolvente.-telemovel { display: block; position: absolute; z-index: 4; top: -86px; left: 0; right: 0; margin: 0; }
  .desenvolvermais-heroi-inicio .lancamento-selo, .ja-carregou .desenvolvermais-heroi-inicio .lancamento-selo { opacity: clamp(0, calc(1 - var(--progresso, 0) * 6), 1); }
}

/* Selo em roseta (pedido do Jose': "muito mais talento"). Por tras, duas caudas
   de fita e uma estrela coral; a frente, o anel aos segmentos do D+ do video e
   um reflexo que passa de vez em quando. Ao aterrar faz uma onda; ao tocar-lhe
   salta e larga confetti. */
.lancamento-selo { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lancamento-selo_caudas { z-index: -1; }
.lancamento-selo_cauda { transform-box: fill-box; transform-origin: 50% 0; }
.lancamento-selo_cauda.-esq { transform: rotate(6deg); }
.lancamento-selo_cauda.-dir { transform: rotate(-6deg); }
.lancamento-selo_reflexo { transform-box: view-box; transform-origin: 80px 80px; transform: rotate(24deg) translateX(-40px); }
.lancamento-selo::after { content: ""; position: absolute; inset: 4%; border: 3px solid #e8c87c; border-radius: 50%; opacity: 0; pointer-events: none; }
.lancamento-selo_papel { position: absolute; top: 50%; left: 50%; width: 9px; height: 13px; margin: -6px 0 0 -4px; border-radius: 2px; background: var(--c); pointer-events: none; }
.lancamento-selo_papel.-redondo { width: 10px; height: 10px; border-radius: 50%; }
@media (max-width: 767px) {
  .lancamento-selo { width: 132px; height: 132px; top: 10.5%; }
}

@media (prefers-reduced-motion: no-preference) {
  .lancamento-selo_estrela { animation: lancamento-girar 48s linear infinite; }
  .lancamento-selo_anel { animation: lancamento-girar 12s linear infinite; }
  .lancamento-selo_cauda.-esq { animation: lancamento-cauda-esq 2.6s ease-in-out infinite alternate; }
  .lancamento-selo_cauda.-dir { animation: lancamento-cauda-dir 3.1s ease-in-out -1s infinite alternate; }
  @keyframes lancamento-cauda-esq { from { transform: rotate(10deg); } to { transform: rotate(-2deg); } }
  @keyframes lancamento-cauda-dir { from { transform: rotate(-10deg); } to { transform: rotate(3deg); } }
  .lancamento-selo_reflexo { animation: lancamento-reluzir 5.5s ease-in-out 2.2s infinite; }
  @keyframes lancamento-reluzir { 0% { transform: rotate(24deg) translateX(-40px); } 28%, 100% { transform: rotate(24deg) translateX(230px); } }
  .ja-carregou .lancamento-selo::after { animation: lancamento-onda 0.9s ease-out 1.25s both; }
  @keyframes lancamento-onda { 0% { opacity: 0.9; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.7); } }
  /* Ao tocar: salta e larga confetti. O salto vai no SVG
     de dentro, para nao lutar com o carimbo de entrada do proprio selo. */
  .lancamento-selo.-festa .lancamento-selo_centro { animation: lancamento-saltar 0.6s cubic-bezier(0.3, 1.8, 0.5, 1); }
  @keyframes lancamento-saltar { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-10deg); } 100% { transform: scale(1); } }
  .lancamento-selo_papel { animation: lancamento-estourar 1s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
  @keyframes lancamento-estourar { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--r)); } }
  /* Durante o lancamento os confetti do heroi nunca param de cair. */
  .ja-carregou .desenvolvermais-heroi-inicio .lancamento-confetti i { animation-iteration-count: infinite; }
}
@media (prefers-reduced-motion: reduce) { .lancamento-selo_papel { display: none; } }