/* ==========================================================
   home.css — exclusivo da página inicial (index.html)
   ========================================================== */

/* ---------- hero ---------- */
.hero{
  position:relative;
  height:100vh;
  min-height:620px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ink);
}
.hero-bg{
  position:absolute;
  inset:0;
  background-image:url('img/fluxo/fluxo-capa.jpg');
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  animation:heroDrift 18s var(--ease) forwards;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,.32) 45%,rgba(20,18,16,.72) 100%);
}
@keyframes heroDrift{to{transform:scale(1);}}

.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
  color:#FAF8F4;
}
.hero-eyebrow{
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 22px;
}
.hero-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(44px,7.4vw,96px);
  line-height:1.04;
  margin:0 0 26px;
  color:#FAF8F4;
}
.hero-title em{
  font-style:italic;
  color:var(--gold-soft);
}
.hero-sub{
  max-width:520px;
  font-size:16px;
  line-height:1.85;
  color:rgba(250,248,244,.76);
  margin:0;
}

.scroll-cue{
  position:absolute;
  left:50%;bottom:38px;
  z-index:2;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.scroll-cue span{
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(250,248,244,.6);
}
.scroll-cue .line{
  width:1px;height:54px;
  background:linear-gradient(180deg,var(--gold-soft),transparent);
  animation:cueSlide 2.4s var(--ease) infinite;
}
@keyframes cueSlide{
  0%{transform:scaleY(0);transform-origin:top;}
  45%{transform:scaleY(1);transform-origin:top;}
  55%{transform:scaleY(1);transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* ---------- declaração de abertura ---------- */
.intro-statement{padding:130px 0;}
.intro-statement .wrap{max-width:920px;text-align:center;}
.intro-statement p{
  font-family:var(--serif);
  font-size:clamp(23px,2.9vw,34px);
  font-weight:300;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}
.intro-statement strong{
  font-weight:400;
  color:var(--ink);
  font-style:italic;
}

/* ---------- seção de séries ---------- */
.series-section{padding:0 0 130px;}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  padding-bottom:46px;
  margin-bottom:56px;
  border-bottom:1px solid var(--line);
}
.section-head h2{
  font-size:clamp(32px,4.6vw,52px);
  font-weight:300;
  margin:0;
}

.series-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.series-card{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper-2);
}
.series-card img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease), filter .7s var(--ease);
}
.series-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(20,18,16,0) 42%,rgba(20,18,16,.78) 100%);
  transition:opacity .6s var(--ease);
}
.series-card:hover img{transform:scale(1.05);}

.series-card-overlay{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.series-card-num{
  font-size:11px;
  letter-spacing:.26em;
  color:var(--gold-soft);
}
.series-card-title{
  font-family:var(--serif);
  font-size:26px;
  font-weight:400;
  color:#FAF8F4;
}

@media (max-width:1000px){
  .series-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .hero{height:88vh;min-height:520px;}
  .hero-content{padding:0 22px;}
  .intro-statement{padding:88px 0;}
  .series-section{padding-bottom:88px;}
  .section-head{flex-direction:column;align-items:flex-start;gap:22px;}
}
@media (max-width:620px){
  .series-grid{grid-template-columns:1fr;}
}