/* ===================================================
   Associação Peixe Vivo — página inicial "em breve"
   19º Festival de Pesca · O Matrinxã do Brasil
   =================================================== */

:root{
  --blue:#0299E2;
  --teal:#47A5AF;
  --leaf:#2E7D32;
  --leaf-light:#8BC34A;
  --gold:#FFC93C;
  --ink:#2b3a2f;
  --mist:#EAF7F6;
  --shadow: 0 16px 40px rgba(2,60,80,.16);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Quicksand','Segoe UI',sans-serif;
  color:var(--ink);
  background: linear-gradient(180deg, #eaf9f6 0%, #d9f2ec 40%, #bfe8e0 100%);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
.container{ max-width:900px; margin:0 auto; padding:0 24px; }

.preview-bar{
  background: var(--ink); color:#fff; text-align:center;
  font-size:.82rem; padding:9px 16px;
}
.preview-bar strong{ color:#a8f0c4; }

.top-link{
  text-align:center; padding:14px 0 0;
  font-family:'Quicksand',sans-serif; font-size:.85rem;
}
.top-link a{
  color:var(--leaf); font-weight:700; text-decoration:none;
  border-bottom:2px dashed rgba(46,125,50,.4); padding-bottom:2px;
}
.top-link a:hover{ border-color: var(--leaf); }

.hero{
  position:relative;
  padding:50px 0 40px;
  text-align:center;
  overflow:hidden;
}

.bubble{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(2,153,226,.15));
  animation: rise 9s ease-in infinite;
  opacity:.6;
}
@keyframes rise{
  0%{ transform: translateY(40px) scale(.8); opacity:0; }
  15%{ opacity:.7; }
  100%{ transform: translateY(-520px) scale(1.1); opacity:0; }
}

.logo-wrap{
  position:relative; z-index:2;
  display:inline-block;
  animation: floatLogo 5s ease-in-out infinite;
}
.logo-wrap img{
  width:min(60vw, 300px);
  margin:0 auto;
  filter: drop-shadow(0 14px 26px rgba(2,153,226,.25));
}
@keyframes floatLogo{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.badge-embreve{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background: var(--gold); color:#5a3e00;
  font-weight:700; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 20px; border-radius:40px; margin:22px 0 18px;
  box-shadow:0 10px 22px rgba(255,201,60,.4);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}

.announce{
  position:relative; z-index:2;
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size: clamp(1.5rem, 4.2vw, 2.5rem);
  line-height:1.35;
  color: var(--ink);
  max-width:760px;
  margin:0 auto 10px;
  opacity:0; transform: translateY(30px);
  animation: revealUp 1s ease forwards .3s;
}
.announce .brand-name{ color: var(--leaf); }
.announce .fest-name{
  color: var(--blue);
  position:relative;
  white-space:nowrap;
}
@keyframes revealUp{
  to{ opacity:1; transform:none; }
}

.wave-underline{
  width:140px; height:14px; margin:18px auto 6px;
  opacity:0; animation: revealUp 1s ease forwards .6s;
}

.sub{
  position:relative; z-index:2;
  font-size:1rem; color:#4a5d52; max-width:520px; margin:10px auto 0;
  opacity:0; animation: revealUp 1s ease forwards .8s;
}

.banner-section{
  position:relative; z-index:2;
  padding: 30px 0 70px;
  text-align:center;
}
.banner-card{
  display:inline-block; max-width:420px; width:100%;
  background:#fff; padding:14px; border-radius:24px;
  box-shadow: var(--shadow);
  opacity:0; transform: translateY(40px) scale(.97);
  animation: revealUp2 .9s ease forwards 1.05s;
}
@keyframes revealUp2{
  to{ opacity:1; transform:none; }
}
.banner-card img{ border-radius:16px; }
.banner-caption{
  margin-top:16px; font-size:.85rem; color:#5b6a6e;
}

.contact-strip{
  position:relative; z-index:2;
  text-align:center; padding:0 0 40px;
  font-size:.92rem; color:#38493d;
}
.contact-strip a{ color:var(--blue); font-weight:700; text-decoration:none; }
.contact-strip .divider{ opacity:.4; margin:0 8px; }

footer.mini{
  background: var(--ink); color:#cfe8d8; text-align:center;
  padding:20px 16px; font-size:.8rem;
}
footer.mini a{ color:#a8f0c4; }

@media (max-width:600px){
  .hero{ padding-top:30px; }
  .announce .fest-name{ white-space:normal; }
}