/* Céu vivo — animação, ícones e toque, por cima de base.css/ceu.css.
   Ícones: traço fino, uma cor, desenhados por máscara (o texto editável no ADM
   não é tocado). Gerados por ferramentas/icones-vivo.py.
   Tudo que se mexe fica dentro de prefers-reduced-motion: no-preference. */

:root {
  --ic-pata: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%276%27 cy=%2711%27 r=%271.7%27/%3E%3Ccircle cx=%279.5%27 cy=%277%27 r=%271.7%27/%3E%3Ccircle cx=%2714.5%27 cy=%277%27 r=%271.7%27/%3E%3Ccircle cx=%2718%27 cy=%2711%27 r=%271.7%27/%3E%3Cpath d=%27M8 17c0-2.6 1.8-4.6 4-4.6s4 2 4 4.6c0 1.7-1.4 2.6-2.7 2.1-.5-.2-.9-.3-1.3-.3s-.8.1-1.3.3C9.4 19.6 8 18.7 8 17z%27/%3E%3C/svg%3E");
  --ic-coracao: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 20s-7.5-4.6-7.5-10.2A4.2 4.2 0 0 1 12 7.2a4.2 4.2 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z%27/%3E%3C/svg%3E");
  --ic-nuvem: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 18h10.2a4 4 0 0 0 .4-8 5.6 5.6 0 0 0-10.8 1.6A3.2 3.2 0 0 0 7 18z%27/%3E%3C/svg%3E");
  --ic-brilho: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3.5l1.7 5.6 5.8 1.9-5.8 1.9L12 18.5l-1.7-5.6-5.8-1.9 5.8-1.9z%27/%3E%3Cpath d=%27M19 3v3M17.5 4.5h3%27/%3E%3C/svg%3E");
  --ic-seta: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14M13 6l6 6-6 6%27/%3E%3C/svg%3E");
  --ic-camera: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 8.5h3.2l1.8-2.5h6l1.8 2.5H20V19H4z%27/%3E%3Ccircle cx=%2712%27 cy=%2713.2%27 r=%273.3%27/%3E%3C/svg%3E");
  --ic-imagem: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%275%27 width=%2716%27 height=%2714%27 rx=%272.5%27/%3E%3Ccircle cx=%279%27 cy=%2710%27 r=%271.5%27/%3E%3Cpath d=%27M4.5 17l4.5-3.8 3.5 2.8 3-2.2 4 3.2%27/%3E%3C/svg%3E");
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27/%3E%3C/svg%3E");
  --ic-troca: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4.5 12a7.5 7.5 0 0 1 13-5.1M19.5 12a7.5 7.5 0 0 1-13 5.1M17.8 3.5v3.6h-3.6M6.2 20.5v-3.6h3.6%27/%3E%3C/svg%3E");
  --ic-casa: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4.5 11 12 4.5l7.5 6.5v8.5h-5v-5.5h-5v5.5h-5z%27/%3E%3C/svg%3E");
  --ic-copiar: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%278.5%27 y=%278.5%27 width=%2711%27 height=%2711%27 rx=%272%27/%3E%3Cpath d=%27M15.5 8.5V6a1.5 1.5 0 0 0-1.5-1.5H6A1.5 1.5 0 0 0 4.5 6v8A1.5 1.5 0 0 0 6 15.5h2.5%27/%3E%3C/svg%3E");
  --ic-baixar: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 4.5v10.5M7.5 10.5 12 15l4.5-4.5M5 19.5h14%27/%3E%3C/svg%3E");
  --ic-mais: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 5.5v13M5.5 12h13%27/%3E%3C/svg%3E");
  --ic-enviar: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 4 10.5 13.5M20 4l-5.8 16-3.7-6.5L4 9.8z%27/%3E%3C/svg%3E");
  --ic-bolinha: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%277.5%27/%3E%3Cpath d=%27M5.2 9.5c3.5 1.4 10.1 1.4 13.6 0M5.2 14.5c3.5-1.4 10.1-1.4 13.6 0%27/%3E%3C/svg%3E");
}
.ic-pata { --ic: var(--ic-pata); }
.ic-coracao { --ic: var(--ic-coracao); }
.ic-nuvem { --ic: var(--ic-nuvem); }
.ic-brilho { --ic: var(--ic-brilho); }
.ic-seta { --ic: var(--ic-seta); }
.ic-camera { --ic: var(--ic-camera); }
.ic-imagem { --ic: var(--ic-imagem); }
.ic-check { --ic: var(--ic-check); }
.ic-troca { --ic: var(--ic-troca); }
.ic-casa { --ic: var(--ic-casa); }
.ic-copiar { --ic: var(--ic-copiar); }
.ic-baixar { --ic: var(--ic-baixar); }
.ic-mais { --ic: var(--ic-mais); }
.ic-enviar { --ic: var(--ic-enviar); }
.ic-bolinha { --ic: var(--ic-bolinha); }

/* ---------- ícone no botão (antes) e seta (depois) ---------- */
.ic::before, .ic-depois::after {
  content: ""; flex: none; width: 1.2em; height: 1.2em;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic::before { margin-right: .55em; }
.ic-depois::before { content: none; }
.ic-depois::after { margin-left: .5em; transition: transform .25s ease; }
.ic-depois:hover::after { transform: translateX(3px); }

/* rótulos pequenos ganham uma patinha / um coração */
.olho::before, .rotulo::before {
  content: ""; display: inline-block; width: 1.25em; height: 1.25em; margin-right: .5em; vertical-align: -.28em;
  background: currentColor; -webkit-mask: var(--ic-pata) center / contain no-repeat; mask: var(--ic-pata) center / contain no-repeat;
}
.rotulo::before { -webkit-mask-image: var(--ic-coracao); mask-image: var(--ic-coracao); }
.dicas li::before {
  width: 13px; height: 13px; top: .38em; border-radius: 0; background: var(--verde-escuro);
  -webkit-mask: var(--ic-pata) center / contain no-repeat; mask: var(--ic-pata) center / contain no-repeat;
}
.dicas li { padding-left: 22px; }

/* campo em foco: o rótulo acende */
.campo > span { transition: color .2s ease; }
.campo:focus-within > span { color: var(--azul-forte); }

/* escolha marcada ganha um check */
.opcoes button { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opcoes button::after, .escolha button::after {
  content: ""; flex: none; width: 1.15em; height: 1.15em; background: var(--azul);
  -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat;
  opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.escolha button::after { position: absolute; top: 7px; right: 7px; width: .95em; height: .95em; }
.opcoes button[aria-pressed="true"]::after, .escolha button[aria-pressed="true"]::after { opacity: 1; transform: none; }

/* toque: a onda que sai do dedo */
.botao, .porta-cartao, .opcoes button, .escolha button, .sugestoes button, .album button { position: relative; overflow: hidden; }
.onda {
  position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: currentColor; opacity: .18; pointer-events: none;
  transform: scale(0); animation: onda .6s ease-out forwards;
}
@keyframes onda { to { transform: scale(var(--s, 30)); opacity: 0; } }

/* o coração da espera (substitui o ponto verde) */
.pulso { position: relative; background: none; animation: none; display: grid; place-items: center; }
.pulso::before, .pulso::after { content: ""; position: absolute; inset: 0; }
.pulso::before { inset: 14%; background: var(--azul); -webkit-mask: var(--ic-coracao) center / contain no-repeat; mask: var(--ic-coracao) center / contain no-repeat; }
.pulso::after { border-radius: 50%; border: 1px solid var(--azul); opacity: 0; }

/* retrato do perfil: um anel fino em volta */
.retrato { position: relative; }
.retrato::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed var(--azul); opacity: .45; }

/* céu vivo: nuvens, patinhas e brilhos atrás do conteúdo */
.ceu-vivo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.capa + .ceu-vivo { z-index: -1; }
.ceu-vivo i {
  position: absolute; left: var(--x); top: var(--y); width: var(--t); height: var(--t);
  background: var(--cor, var(--azul)); opacity: 0;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}

/* festa na revelação: corações e patinhas subindo */
.festa { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.festa i {
  position: absolute; left: var(--x); bottom: -40px; width: var(--t); height: var(--t);
  background: var(--cor); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  animation: sobe-festa var(--d) cubic-bezier(.2, .7, .3, 1) var(--atraso) forwards; opacity: 0;
}
@keyframes sobe-festa {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.6); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), -78vh) rotate(var(--r)) scale(1); }
}

/* céu: sem foto; o Vanta (ceu-nuvens.js) desenha as nuvens, e este gradiente
   fica de reserva. Foto trocada no ADM (site.css, carregado depois) vence. */
.fundo.f-jardim-sol-2, .fundo.f-cantinho, .fundo, .capa { background-image: linear-gradient(180deg, #369ACA 0%, #7FB6D8 30%, #CBD4E3 58%); }
/* o canvas do céu sempre cobre o fundo inteiro, mesmo antes de o Vanta remedir */
.vanta-canvas { width: 100% !important; height: 100% !important; }

/* a página não pula de lado quando a barra de rolagem aparece/some na troca de tela */
html { scrollbar-gutter: stable; }
body { overflow-x: clip; }

@media (prefers-reduced-motion: no-preference) {
  /* a tela inteira só acende; quem se move são os itens, de leve */
  .tela.ativa { animation: acende .3s ease both; }
  @keyframes acende { from { opacity: 0; } to { opacity: 1; } }
  /* cada tela entra em degraus, de cima para baixo */
  .tela.ativa .miolo > *, .tela.ativa .acoes > *, .portas .miolo > *, .portas .cartoes > *, .portas > .ia {
    animation: degrau .55s cubic-bezier(.2, .7, .3, 1) both;
  }
  .tela.ativa .miolo > :nth-child(2), .portas .miolo > :nth-child(2) { animation-delay: .07s; }
  .tela.ativa .miolo > :nth-child(3), .portas .miolo > :nth-child(3) { animation-delay: .14s; }
  .tela.ativa .miolo > :nth-child(4) { animation-delay: .21s; }
  .tela.ativa .miolo > :nth-child(5) { animation-delay: .28s; }
  .tela.ativa .miolo > :nth-child(6) { animation-delay: .34s; }
  .tela.ativa .miolo > :nth-child(n+7) { animation-delay: .4s; }
  .tela.ativa .acoes > * { animation-delay: .3s; }
  .portas .cartoes > :nth-child(1) { animation-delay: .22s; }
  .portas .cartoes > :nth-child(2) { animation-delay: .32s; }
  .portas > .ia { animation-delay: .45s; }
  @keyframes degrau { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* os passos do "como funciona" aparecem um a um */
  .tela.ativa .como li { animation: degrau .5s cubic-bezier(.2, .7, .3, 1) both; }
  .tela.ativa .como li:nth-child(1) { animation-delay: .25s; }
  .tela.ativa .como li:nth-child(2) { animation-delay: .37s; }
  .tela.ativa .como li:nth-child(3) { animation-delay: .49s; }
  .tela.ativa .como b { animation: estala .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: inherit; }
  @keyframes estala { from { transform: scale(.3); } to { transform: none; } }

  /* cartões que respondem: sobem no passar, o ícone balança */
  .porta-cartao { transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease; }
  .porta-cartao:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(20, 50, 74, .45); }
  .porta-cartao:hover svg { animation: balanca .9s ease-in-out; }
  .porta-cartao svg { animation: flutua 5s ease-in-out infinite; }
  .porta-cartao:nth-child(2) svg { animation-delay: -2.5s; }
  @keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  @keyframes balanca { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 60% { transform: rotate(6deg); } }

  /* botões: sobem um tico no passar, afundam no toque */
  .botao { transition: transform .18s ease, background .2s ease, opacity .2s ease, box-shadow .2s ease; }
  .botao:not(:disabled):hover { transform: translateY(-1px); }
  .botao:not(:disabled):active { transform: scale(.975); }
  .botao:not(:disabled)::before { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
  .botao:not(:disabled):hover::before { transform: scale(1.15) rotate(-6deg); }

  /* o convite principal respira de leve */
  #ver_agora:not(:disabled), .tela-inicio .acoes .botao:not(.leve) { animation: degrau .55s cubic-bezier(.2, .7, .3, 1) .3s both, respira 3.2s ease-in-out 1.2s infinite; }
  @keyframes respira { 0%, 100% { box-shadow: 0 10px 26px -12px rgba(0, 139, 206, .55); } 50% { box-shadow: 0 10px 30px -8px rgba(0, 139, 206, .8), 0 0 0 6px rgba(0, 139, 206, .1); } }

  /* escolhas estalam ao marcar */
  .opcoes button[aria-pressed="true"], .escolha button[aria-pressed="true"], .cena[aria-checked="true"] { animation: escolhe .35s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes escolhe { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: none; } }
  .sugestoes button { transition: transform .15s ease, border-color .2s ease, color .2s ease; }
  .sugestoes button:active { transform: scale(.95); }

  /* coração da espera bate; o anel se abre */
  .pulso::before { animation: bate 1.6s ease-in-out infinite; }
  .pulso::after { animation: anel 1.6s ease-out infinite; }
  @keyframes bate { 0%, 100% { transform: scale(.88); } 15% { transform: scale(1.06); } 30% { transform: scale(.94); } 45% { transform: scale(1.02); } }
  @keyframes anel { 0% { transform: scale(.5); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }

  /* anel do retrato gira devagar */
  .retrato::before { animation: gira 40s linear infinite; }
  @keyframes gira { to { transform: rotate(360deg); } }

  /* álbum: os momentos entram um a um */
  .album li { animation: degrau .5s cubic-bezier(.2, .7, .3, 1) both; }
  .album li:nth-child(2) { animation-delay: .06s; } .album li:nth-child(3) { animation-delay: .12s; }
  .album li:nth-child(4) { animation-delay: .18s; } .album li:nth-child(n+5) { animation-delay: .24s; }
  .album button { transition: transform .2s ease; }
  .album button:hover { transform: translateY(-2px); }

  /* céu vivo */
  .ceu-vivo .nuvem { animation: deriva var(--d) linear var(--atraso) infinite; }
  .ceu-vivo .brilho { animation: pisca var(--d) ease-in-out var(--atraso) infinite; }
  .ceu-vivo .pata { animation: sobe-pata var(--d) ease-in-out var(--atraso) infinite; }
  @keyframes deriva { 0% { transform: translateX(-30vw); opacity: 0; } 10%, 90% { opacity: var(--o); } 100% { transform: translateX(130vw); opacity: 0; } }
  @keyframes pisca { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0); } 50% { opacity: var(--o); transform: scale(1) rotate(25deg); } }
  @keyframes sobe-pata { 0% { opacity: 0; transform: translateY(30px) rotate(var(--r)); } 30%, 70% { opacity: var(--o); } 100% { opacity: 0; transform: translateY(-60px) rotate(var(--r)); } }
}

/* ADM ligado: nada de onda nem festa atrapalhando a edição */
body.adm .onda, body.adm .festa { display: none; }