/* ===========================
   HOME — UroBaby (compacto)
   Ajustes: proximidade + atraso da tagline
   =========================== */

/* ===== Fundo ===== */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:url('/static/img/urobaby_bg.png') center/cover no-repeat;
  filter: blur(2px) brightness(.88);
  transform: scale(1.02);
}
@media (min-width: 768px){
  body::before{ filter: blur(3px) brightness(.85); transform: scale(1.03); }
}

/* ===== Acessibilidade ===== */
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Seção principal ===== */
.brand-hero{
  min-height: calc(100vh - 80px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(12px, 1.2vw, 18px); /* <— menor gap geral entre palco e CTA */
  text-align:center; color:#fff; position:relative; padding:clamp(16px, 4vw, 40px);
}

/* ===== Palco em fluxo (tagline > coração > nome) ===== */
.brand-stage{
  /* Tamanhos */
  --heart-size: clamp(220px, 32vw, 400px);
  --name-width: clamp(240px, 36vw, 520px);

  --t-cta-delay: calc(var(--t-name-delay) + var(--t-name-dur) + .10s);
  --t-cta-dur: .55s;

  /* Espaçamento mais “fechado” entre os 3 elementos */
  --stack-gap: clamp(2px, 0.5vw, 6px);

  /* Timings (estágio: coração -> nome -> tagline atrasada) */
  --t-heart-delay: .10s;  --t-heart-dur: .70s;
  --t-name-delay:  .32s;  --t-name-dur:  .80s;
  /* Tagline entra DEPOIS da logo pronta (+ atraso extra) */
  --t-tag-delay:   .95s;  --t-tag-dur:   .70s;

  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--stack-gap);
  width: min(90vw, 720px);
  margin-inline:auto;
}

/* ===== Tagline (acima do coração, mas aparece depois) ===== */
.brand-tagline{
  order: 0;
  font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.8rem); /* maior em todas as telas */
  line-height: 1.3;
  color:#eee;
  text-shadow:1px 1px 4px rgba(0,0,0,.4);
  margin:0;
  opacity:0;
  transform: translateY(8px);
  animation: fadeUp var(--t-tag-dur) ease-out var(--t-tag-delay) forwards;
}

/* ===== Coração ===== */
.brand-heart{
  order: 1;
  width: var(--heart-size); height:auto;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.26)) drop-shadow(0 2px 8px rgba(0,0,0,.24));
  opacity:0; transform: scale(.965);
  animation: fadeInScale var(--t-heart-dur) ease-out var(--t-heart-delay) forwards;
}

/* ===== Nome ===== */
.brand-name{
  margin-top: -200px;
  order: 2;
  width: var(--name-width); height:auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
  opacity:0; transform: translateY(4px);
  animation: fadeUp var(--t-name-dur) ease-out var(--t-name-delay) forwards;
}


/* ===== CTA ===== */
.brand-cta{
  align-self:center;
  margin-top: clamp(6px, 0.8vw, 12px); /* mobile mantém distância perfeita */
}

.brand-cta a.btn{
  display:inline-block;
  padding:.85rem 1.2rem;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  min-width: clamp(170px, 30vw, 240px);
  text-align:center;
  font-weight:600;
  background:#25d366; color:#fff; text-decoration:none;

  /* transições + FADE-IN */
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  opacity: 0;
  transform: translateY(8px);
  animation: ctaIn var(--t-cta-dur, .55s) ease-out var(--t-cta-delay, .95s) forwards;
}

.brand-cta a.btn:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

/* ===== Animações ===== */
@keyframes fadeInScale{
  from{ opacity:0; transform: scale(.965); }
  to  { opacity:1; transform: scale(1); }
}
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}

/* ===== Redução de movimento ===== */
@media (prefers-reduced-motion: reduce){
  .brand-tagline, .brand-heart, .brand-name{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ===== Telas pequenas ===== */
@media (max-width: 420px){
  .brand-stage{
    --heart-size: clamp(170px, 44vw, 230px);
    --name-width: clamp(180px, 52vw, 300px);
    --stack-gap: clamp(2px, 1.2vw, 8px); /* ainda mais próximo em telas pequenas */
  }
  .brand-cta{ margin-top: clamp(4px, 1vw, 10px); }
}

/* Ajuste específico para DESKTOP:
   aproxima o botão do nome, sem afetar o mobile */
@media (min-width: 768px){
  .brand-cta{ margin-top: -150px; }
}

@keyframes ctaIn{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .brand-cta a.btn{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}