/* O "presente" — chamada flutuante pro banco de questões.
   Aparece no canto inferior-direito em desktop; vira card no fluxo em mobile. */

.gift-cta {
  /* Unidade base responsiva. Tudo escala em função dela.
     Cap superior 19 (≈70% maior que o original). Em viewports apertados encolhe via vw/vmin. */
  --k: clamp(13px, min(1vw, 1.7vmin), 19px);

  position: fixed;
  /* Posição base: alinha o limite direito do gift próximo do início do card
     "Qual é a sua ambição?" (que começa após coluna esquerda de 580px).
     Usa `right` em px (após calc) — ambos estados usam `right`, browsers
     interpolam em px → animação "estrela cadente" funciona. */
  right: calc(50% + clamp(80px, 6vw, 180px));
  bottom: clamp(16px, 2.4vh, 28px);
  z-index: 100;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--k) * 0.733);
  text-decoration: none;
  cursor: pointer;
  transition:
    opacity .4s ease,
    right .95s cubic-bezier(.32, .9, .35, 1),
    bottom .95s cubic-bezier(.32, .9, .35, 1);
}

/* Estado "compacto": ativado quando o usuário rola pra fora da hero.
   A tag colapsa, o ícone encolhe e voa pro canto INFERIOR ESQUERDO
   (o canto direito é do lançador do Caderno). Continua presente e clicável.
   Mantemos a posição via `right` (px-resolvable) pra interpolar suave a partir
   do estado da hero: right = 100% menos a largura do ícone menos a margem,
   o que ancora o ícone à esquerda sem trocar pra `left` (que não anima). */
.gift-cta.is-compact {
  right: calc(100% - var(--k) * 4.6 - clamp(16px, 2.4vw, 28px));
  /* Sobe o presente pra abrir espaço ABAIXO dele pro balão "se mudar de ideia"
     (altura do balão ~30px + folga) sem que ele corte no rodapé. */
  bottom: clamp(52px, 6vh, 72px);
}
.gift-cta.is-compact .gift-cta__tag {
  opacity: 0;
  max-height: 0;
  padding-top: 0; padding-bottom: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.gift-cta.is-compact .gift-cta__tag::before,
.gift-cta.is-compact .gift-cta__tag::after {
  opacity: 0;
}
.gift-cta.is-compact .gift-cta__svg {
  width: calc(var(--k) * 4.6);
  height: calc(var(--k) * 4.6);
}
.gift-cta__tag {
  transition: opacity .35s ease, max-height .35s ease, padding .35s ease, margin .35s ease;
}
.gift-cta__tag::before,
.gift-cta__tag::after {
  transition: opacity .25s ease;
}

/* Hint "se mudar de ideia, clica aqui" — aparece SÓ no modo compact,
   ABAIXO do ícone. Delay pra surgir DEPOIS que o presente terminou
   de voar pro canto direito. */
.gift-cta__hint {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  white-space: nowrap;
  background: var(--surface-bg);
  color: var(--surface-ink);
  padding: 6px 12px;
  border-radius: 999px;
  font: 500 16px/1.2 Inter, system-ui, sans-serif;
  border: 1px solid var(--surface-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px) scale(.92);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.gift-cta.is-compact .gift-cta__hint {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* Delay pra aparecer DEPOIS que o presente terminou de voar */
  transition-delay: .7s;
}

/* Tag manuscrita "presente" — em Caveat, pendurada por cordão */
.gift-cta__tag {
  display: inline-block;
  text-align: center;
  padding: calc(var(--k) * 0.5) calc(var(--k) * 0.95) calc(var(--k) * 0.4);
  background: linear-gradient(135deg, #f5ebd1, #e8d7a6);
  color: #5c3a18;
  font: 600 calc(var(--k) * 1.7)/1.18 Caveat, cursive;
  letter-spacing: 0.01em;
  border-radius: calc(var(--k) * 0.333);
  transform: rotate(2deg);
  box-shadow: 0 calc(var(--k) * 0.333) calc(var(--k) * 1.067) rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
  margin-bottom: calc(var(--k) * -0.3);
  /* Calibrado pra que a linha 1 (a maior agora, já que a linha 2 é <small>)
     + padding caiba sem quebrar. Resultado: 2 linhas via <br>. */
  max-width: min(42vw, calc(var(--k) * 30));
  /* furinho no topo da tag por onde passa o cordão */
}
.gift-cta__tag strong {
  font-weight: 800;
  color: #3a2710;
}
.gift-cta__tag small {
  font-size: 0.95em;
  font-weight: 500;
  opacity: 0.92;
}
.gift-cta__tag::before {
  content: ""; position: absolute;
  top: calc(var(--k) * 0.22); left: 50%; transform: translateX(-50%);
  width: calc(var(--k) * 0.42); height: calc(var(--k) * 0.42);
  background: #3a2710;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}
.gift-cta__tag::after {
  /* cordão fininho subindo da tag até o laço */
  content: ""; position: absolute;
  top: calc(var(--k) * -1.267); left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 2px; height: calc(var(--k) * 1.267);
  background: rgba(58, 39, 16, 0.7);
}

/* Pacote do presente — SVG inline */
.gift-cta__svg {
  width: calc(var(--k) * 10.13);
  height: calc(var(--k) * 10.13);
  filter: drop-shadow(0 calc(var(--k) * 1.067) calc(var(--k) * 1.8) rgba(0,0,0,0.45)) drop-shadow(0 calc(var(--k) * 0.333) calc(var(--k) * 0.733) rgba(0,0,0,0.3));
  /* Respiração suave: pulsa muito de leve a cada 4s */
  animation: gift-breath 4.2s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease, width .4s ease, height .4s ease;
}

@keyframes gift-breath {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.025) translateY(-2px); }
}

/* Login aberto: o presente já fica invisível (opacity:0 + pointer-events:none
   pela regra body.is-login-open #giftBancoCta do index.html), mas a respiração
   continuava rodando os dois drop-shadows à toa. Pausa enquanto o modal está
   aberto; ao fechar, a classe sai do body e a respiração retoma. */
body.is-login-open #giftBancoCta .gift-cta__svg {
  animation-play-state: paused;
}

/* Hover: laço brilha, presente sobe um pouco mais */
.gift-cta:hover .gift-cta__svg,
.gift-cta:focus-visible .gift-cta__svg {
  transform: scale(1.08) translateY(-8px) rotate(2deg);
  filter: drop-shadow(0 24px 38px rgba(0,0,0,0.5)) drop-shadow(0 0 24px rgba(251, 232, 180, 0.35));
  animation-play-state: paused;
}
.gift-cta:hover .gift-cta__shine,
.gift-cta:focus-visible .gift-cta__shine {
  animation: gift-shine 1.4s ease-out;
}

@keyframes gift-shine {
  0% { transform: translateX(-100%) rotate(20deg); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translateX(220%) rotate(20deg); opacity: 0; }
}

.gift-cta:focus-visible {
  outline: 2px solid rgba(212, 168, 87, 0.6);
  outline-offset: 8px;
  border-radius: 8px;
}

/* Animação ao clicar — abre o presente antes de navegar */
.gift-cta.is-opening .gift-cta__svg {
  animation: gift-open .55s forwards cubic-bezier(.4,0,.2,1);
}
@keyframes gift-open {
  0%   { transform: scale(1.08) translateY(-8px); }
  40%  { transform: scale(1.18) translateY(-16px) rotate(-4deg); }
  100% { transform: scale(0.6) translateY(-108px) rotate(8deg); opacity: 0; }
}
.gift-cta.is-opening .gift-cta__tag {
  animation: tag-fly .55s forwards cubic-bezier(.4,0,.2,1);
}
@keyframes tag-fly {
  0% { opacity: 1; }
  100% { transform: translateY(27px) rotate(-15deg); opacity: 0; }
}

/* Em telas pequenas, presente sai do canto e vai no fluxo da página
   (entre hero e próxima seção) pra não atrapalhar o card de ambição */
@media (max-width: 1100px) {
  .gift-cta {
    position: relative;
    right: auto; bottom: auto;
    margin: 32px auto 16px;
    background: rgba(14, 10, 6, 0.65);
    padding: 19px 27px;
    border-radius: 24px;
    border: 1px solid rgba(212, 168, 87, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-direction: row;
    gap: 19px;
  }
  .gift-cta__svg { width: 86px; height: 86px; }
  .gift-cta__tag { transform: rotate(-2deg); font-size: 18px; max-width: 297px; padding: 8px 16px 7px; }
  .gift-cta__tag::after { display: none; }
}

@media (max-width: 480px) {
  .gift-cta {
    flex-direction: column;
    gap: 6px;
  }
}

/* Suporte a usuários que pedem menos animação */
@media (prefers-reduced-motion: reduce) {
  .gift-cta__svg { animation: none; }
  .gift-cta:hover .gift-cta__svg, .gift-cta:focus-visible .gift-cta__svg { transform: none; }
}

/* Safety: em viewports baixos, reserva espaço no slogan-col pra que o conteúdo
   (didática superior / rotina adaptativa / "O destino da educação...") suba em vez
   de ser sobreposto pelo presente flutuante. Como a coluna usa justify-content:center,
   padding-bottom empurra o centro pra cima. */
@media (min-width: 1101px) {
  .hero-v2__slogan-col {
    padding-bottom: max(0px, calc(290px - 30vh));
  }

  /* Compact (presente já voou pro canto ESQUERDO): a tag colapsada precisa
     zerar a largura — senão ela segura o container em ~369px e, posicionado
     via `right`, o ícone não encostaria na margem esquerda. Com a tag em
     width:0 e o hint ABSOLUTO (fora do fluxo, não mede largura), o container
     encolhe pro tamanho do ícone e o cálculo de `right` o ancora exatamente
     na margem esquerda — e o balão, ancorado em left:0, fica acima dele sem
     vazar pela borda. */
  .gift-cta.is-compact .gift-cta__tag { width: 0; }
}

/* ===== Segundo presente (azul / lei seca) — par do dourado ===================
   Reusa TODO o estilo do .gift-cta (mesma plaquinha de papel, mesmo laço). Só a
   SVG é azul (gradientes próprios no markup). A POSIÇÃO é definida pelo
   presente-banco.js, que o coloca à esquerda do dourado (na hero) e empilhado no
   canto (quando rola). A regra abaixo é só uma posição inicial aproximada, pra
   não piscar no lugar do dourado antes do JS rodar. */
.gift-cta--blue {
  right: calc(50% + clamp(80px, 6vw, 180px) + 330px);
  /* Sem transição de posição: o JS o reposiciona quadro a quadro pra espelhar o
     dourado exatamente (a transição faria ele "arrastar" atrasado). Mantém só o
     fade de opacidade. */
  transition: opacity .4s ease;
}
/* No mobile estreito a home é a home-mobile.html (que tem o seu próprio par);
   aqui no index.html o segundo presente flutuante sai de cena. */
@media (max-width: 1100px) {
  .gift-cta--blue { display: none; }
}