/* ============================================
   ParatyAnas - Homepage Styles
   Fonts: westsac (titles), system sans-serif (body)
   ============================================ */

/* --- RESET & BASE --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Cores do livro */
  --cor-ninho:      #C5962A;
  --cor-ninho-bg:   #E8C86A;
  --cor-ninho-deep: #A67B1E;
  --cor-asas:       #D94F3B;
  --cor-asas-bg:    #E8705E;
  --cor-liberdade:  #3A9E8F;
  --cor-liberdade-bg: #5BBDAE;
  --cor-receituario:#2B4C8C;
  --cor-receituario-bg: #4A6DB0;
  --cor-fundo:      #F5E6C8;
  --cor-fundo-hero: #ffac00;
  --cor-texto:      #2D2A26;
  --cor-texto-leve: #4A4540;
  --cor-branco:     #FFFDF8;
  --cor-dourada:    #BFA058;

  /* Tipografia */
  --font-titulo: "westsac", sans-serif;
  --font-corpo:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-peso-leve: 300;
  --font-peso-normal: 400;

  /* Espacamento */
  --espacamento-pagina: clamp(1.5rem, 5vw, 4rem);
}

html {
  font-size: 16px;
  scroll-behavior: auto; /* Lenis cuida do smooth scroll */
}

body {
  font-family: var(--font-corpo);
  font-weight: var(--font-peso-normal);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================
   LOADER
   ============================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #ffac00;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}

.loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.loader__bird {
  width: 120px;
  animation: loader-float 1.5s ease-in-out infinite;
}

.loader__bird img {
  width: 100%;
}

@keyframes loader-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(2deg); }
}

/* ============================================
   HERO - CAPA DO LIVRO
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-color: #ffac00;
  z-index: 0;
}

.hero__scene {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 7 / 10;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__layer {
  position: absolute;
  will-change: transform;
}

/* --- Titulo PARATYANAS --- */
.hero__titulo {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  opacity: 0;
  z-index: 4;
}

.hero__titulo-img {
  width: 100%;
}

/* --- Autora --- */
.hero__autora {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  opacity: 0;
  z-index: 4;
}

.hero__autora-img {
  width: 100%;
}

/* --- Tagline --- */
.hero__tagline {
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  opacity: 0;
  z-index: 4;
}

.hero__tagline-img {
  width: 100%;
}

/* --- Panela --- */
.hero__panela {
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  opacity: 0;
  z-index: 1;
}

.hero__panela-img {
  width: 100%;
}

/* --- Braco e mao --- */
/* Sobe bastante para preencher o gap entre titulo e panela,
   dando espaco para as letras caírem entre os dedos e a boca.
   z-index 5: acima de tudo exceto passaro */
.hero__braco {
  bottom: 50%;
  left: -8%;
  width: 62%;
  opacity: 0;
  z-index: 5;
  transform: rotate(-8deg);
}

/* --- Passaro --- */
.hero__passaro {
  top: 2%;
  right: 2%;
  width: 14%;
  opacity: 0;
  z-index: 6;
}

.hero__passaro-img {
  width: 100%;
}

/* --- Letras (vapor) --- */
/* Zona entre os dedos (bottom:50%) e a boca da panela (bottom:~35%).
   Coluna estreita alinhada abaixo dos dedos.
   z-index 3: acima da panela (1) mas abaixo do braco (5) */
.hero__letras {
  position: absolute;
  bottom: 28%;
  left: 30%;
  width: 32%;
  height: 26%;
  pointer-events: none;
  z-index: 3;
}

.hero__letra {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}

/* Letras em queda: top:0% = perto dos dedos, top:85% = perto da boca da panela.
   Variacao horizontal pequena para parecer queda natural, nao grade. */
.hero__letra--s { width: 26%; left: 8%;  top: 2%;  }
.hero__letra--b { width: 28%; left: 58%; top: 5%;  }
.hero__letra--a { width: 20%; left: 30%; top: 28%; }
.hero__letra--z { width: 30%; left: 62%; top: 38%; }
.hero__letra--m { width: 34%; left: 5%;  top: 55%; }
.hero__letra--g { width: 22%; left: 52%; top: 62%; }
.hero__letra--q { width: 28%; left: 22%; top: 78%; }

/* --- Scroll hint --- */
.hero__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--cor-ninho-deep), transparent);
  animation: scroll-hint 2s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* ============================================
   SINOPSE - TEXTO DA QUARTA CAPA
   ============================================ */
.sinopse {
  position: relative;
  padding: clamp(4rem, 10vh, 8rem) var(--espacamento-pagina);
  background-color: var(--cor-branco);
  overflow: hidden;
}

.sinopse__container {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.sinopse__passaro {
  margin: 0 auto 2rem;
  width: 60px;
  opacity: 0;
}

.sinopse__passaro img {
  width: 100%;
}

.sinopse__texto {
  border: none;
  margin: 0;
  padding: 0;
}

.sinopse__paragrafo {
  font-family: var(--font-corpo);
  font-weight: var(--font-peso-normal);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.85;
  color: var(--cor-texto-leve);
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(30px);
}

.sinopse__paragrafo:last-child {
  margin-bottom: 0;
}

.sinopse__destaque {
  font-family: var(--font-titulo);
  font-weight: var(--font-peso-normal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-asas);
  font-size: 1.05em;
}

/* ============================================
   EXPLORAR - CARDS DE NAVEGACAO
   ============================================ */
.explorar {
  padding: clamp(4rem, 10vh, 8rem) var(--espacamento-pagina);
  background-color: var(--cor-fundo);
}

.explorar__titulo {
  font-family: var(--font-titulo);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
  color: var(--cor-texto);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: clamp(2rem, 5vh, 4rem);
  opacity: 0;
  transform: translateY(20px);
}

.explorar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .explorar__grid {
    grid-template-columns: 1fr;
  }
}

.explorar__card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  color: var(--cor-branco);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease;
  opacity: 0;
  transform: translateY(40px);
}

.explorar__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.explorar__card-inner {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Cores dos cards por secao */
.explorar__card--ninho {
  background: linear-gradient(135deg, var(--cor-ninho) 0%, var(--cor-ninho-deep) 100%);
}

.explorar__card--asas {
  background: linear-gradient(135deg, var(--cor-asas) 0%, #B83A2A 100%);
}

.explorar__card--liberdade {
  background: linear-gradient(135deg, var(--cor-liberdade) 0%, #2B7D6F 100%);
}

.explorar__card--receituario {
  background: linear-gradient(135deg, var(--cor-receituario) 0%, #1E3A6E 100%);
}

.explorar__card-label {
  font-family: var(--font-corpo);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 0.5rem;
}

.explorar__card-titulo {
  font-family: var(--font-titulo);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  line-height: 1.1;
}

.explorar__card-desc {
  font-family: var(--font-corpo);
  font-weight: var(--font-peso-normal);
  font-size: clamp(0.85rem, 1.4vw, 0.95rem);
  line-height: 1.65;
  opacity: 0.85;
  margin-bottom: 1rem;
}

.explorar__card-link {
  font-family: var(--font-corpo);
  font-size: 0.85rem;
  font-weight: var(--font-peso-normal);
  letter-spacing: 0.05em;
  opacity: 0.9;
  transition: opacity 0.3s;
}

.explorar__card:hover .explorar__card-link {
  opacity: 1;
}

/* ============================================
   RODAPE
   ============================================ */
.rodape {
  background-color: var(--cor-texto);
  color: var(--cor-branco);
  padding: clamp(3rem, 8vh, 5rem) var(--espacamento-pagina);
}

.rodape__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.rodape__logo {
  margin-bottom: 1.5rem;
}

.rodape__logo-img {
  width: 220px;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Tagline como imagem original do logo, invertida para branco */
.rodape__tagline-img {
  width: 220px;
  margin: 0.6rem auto 0;
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

.rodape__comprar {
  margin: 2rem 0;
}

.rodape__comprar-link {
  display: inline-block;
  font-family: var(--font-corpo);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  transition: background-color 0.3s, border-color 0.3s;
}

.rodape__comprar-link:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

.rodape__nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.rodape__nav a {
  font-family: var(--font-corpo);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.rodape__nav a:hover {
  opacity: 1;
}


.rodape__copy {
  font-size: 0.75rem;
  opacity: 0.3;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .hero__scene {
    max-width: 90vw;
    aspect-ratio: auto;
    min-height: 85vh;
    min-height: 85dvh;
  }

  .hero__titulo {
    top: 12%;
    width: 90%;
  }

  .hero__autora {
    top: 6%;
    width: 30%;
  }

  .hero__tagline {
    top: 24%;
    width: 82%;
  }

  .hero__panela {
    bottom: 2%;
    width: 90%;
  }

  .hero__braco {
    bottom: 48%;
    left: -12%;
    width: 70%;
    transform: rotate(-8deg);
  }

  .hero__passaro {
    top: 5%;
    right: 3%;
    width: 18%;
  }

  .hero__letras {
    bottom: 26%;
    left: 28%;
    width: 38%;
    height: 26%;
  }

  .hero__scroll-hint {
    bottom: 1rem;
  }

  .explorar__card-inner {
    min-height: 180px;
  }

  .rodape__nav {
    gap: 1.2rem;
  }
}

@media (min-width: 1200px) {
  .hero__scene {
    max-width: 600px;
  }
}

/* ============================================
   LINHA DOURADA DECORATIVA (como no livro)
   ============================================ */
.sinopse::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cor-dourada), transparent);
  opacity: 0.4;
}

.explorar::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--cor-dourada);
  margin: 0 auto 0;
  opacity: 0;
}