/* hscroll — galeria cinematográfica: scroll vertical vira movimento horizontal; texto à esquerda, foto em card à direita */
.hscroll{position:relative;background:var(--espresso)}
.hscroll-pin{position:relative;height:100vh;overflow:hidden}

.hscroll-track{position:relative;display:flex;height:100%;width:max-content;will-change:transform}
.hscroll-panel{position:relative;width:100vw;height:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6vw;padding-inline:9vw;overflow:hidden}

/* a própria foto do painel, em tamanho cheio e bem apagada, só pra dar ambiência ao fundo */
.hscroll-panel-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;opacity:.13;pointer-events:none}
.hscroll-panel-vignette{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 42%,transparent 25%,rgba(20,13,13,.6) 100%);pointer-events:none}

.hscroll-ghost{position:absolute;z-index:1;top:8%;left:4vw;font-family:var(--font-display);font-style:italic;font-weight:600;font-size:clamp(8rem,16vw,13rem);color:var(--ivory);opacity:.07;line-height:1;pointer-events:none}

/* card da foto — borda, sombra, zoom no hover, e um anel rosa que "explode" pra fora ao passar o mouse */
.hscroll-media{position:relative;isolation:isolate;flex:0 0 auto;width:min(34vw,440px);aspect-ratio:4/5;border-radius:var(--radius);overflow:visible;transition:transform .3s var(--ease-smooth)}
.hscroll-media:hover{transform:translateY(-6px)}
.hscroll-media-frame{position:relative;isolation:isolate;width:100%;height:100%;border-radius:inherit;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4);border:1px solid rgba(228,200,137,.28)}
.hscroll-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-smooth)}
.hscroll-media:hover img{transform:scale(1.06)}
.hscroll-media::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;border:2px solid var(--rose);opacity:0;transform:scale(1);pointer-events:none;transition:opacity .45s var(--ease-smooth),transform .45s var(--ease-smooth)}
.hscroll-media:hover::after{opacity:1;transform:scale(1.07)}
.hscroll-tag{position:absolute;top:1.1rem;left:1.1rem;z-index:1;background:var(--white);color:var(--gold-deep);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;padding:.45rem 1rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-soft)}

.hscroll-content{position:relative;z-index:1;flex:0 1 460px;max-width:460px;color:var(--ivory)}
.hscroll-num{display:block;font-family:var(--font-script);font-size:1.5rem;color:var(--gold-light);margin-bottom:.4rem}
.hscroll-title{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.08;color:var(--ivory);margin-bottom:1.1rem}
.hscroll-text{font-size:1.02rem;line-height:1.75;color:var(--blush);margin-bottom:1.5rem}
.hscroll-pills{display:flex;flex-wrap:wrap;gap:.6rem}
.hscroll-pills span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ivory);border:1px solid rgba(251,246,240,.35);border-radius:var(--radius-pill);padding:.4rem 1rem}

/* cta do último painel — convite direto pro contato, ao fechar a galeria */
.hscroll-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}

/* barra de progresso — fixa no topo, mostra em qual área você está */
.hscroll-progress{position:absolute;left:6vw;right:6vw;top:2.4rem;z-index:2;display:flex;align-items:center;gap:1rem;color:var(--ivory)}
.hscroll-progress-label{font-family:var(--font-display);font-style:italic;font-size:.9rem;min-width:1.4rem}
.hscroll-progress-track{flex:1;height:2px;background:rgba(251,246,240,.25);border-radius:var(--radius-pill);overflow:hidden}
.hscroll-progress-fill{height:100%;width:0%;background:var(--grad-gold)}
.hscroll-hint{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:.6rem;color:var(--ivory);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;opacity:.85;transition:opacity .6s var(--ease-smooth)}
.hscroll-hint i{width:15px;height:15px;animation:float-soft 1.8s ease-in-out infinite}
.hscroll-hint.is-hidden{opacity:0}

/* mobile — sem hijack de scroll: painéis empilhados, foto em cima, texto embaixo */
@media (max-width:900px){
  .hscroll-panel{flex-direction:column;justify-content:center;gap:2rem;padding-inline:1.75rem}
  .hscroll-media{width:min(70vw,340px)}
  /* flex-basis:460px do desktop virava altura mínima quando o eixo principal passa a ser vertical, abrindo um vão enorme entre o texto e a foto */
  .hscroll-content{flex:0 1 auto;max-width:420px;text-align:center}
  .hscroll-cta{justify-content:center}
  .hscroll-content.reveal,.hscroll-media.reveal{opacity:0;transform:translateY(22px) scale(.99);transition:opacity .7s var(--ease-signature),transform .7s var(--ease-signature);transition-delay:var(--reveal-delay,0ms)}
  .hscroll-content.reveal.is-visible,.hscroll-media.reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}
}

@media (min-width:901px){
  /* no desktop o GSAP ScrollTrigger controla a entrada dos painéis — a classe reveal não deve alterar nada aqui */
  .hscroll-content.reveal,.hscroll-media.reveal{opacity:1;transform:none}
}

@media (max-width:820px){
  .hscroll-pin{height:auto;overflow:visible}
  .hscroll-track{flex-direction:column;width:100%}
  .hscroll-panel{width:100%;height:auto;overflow:visible;padding-block:3.5rem;border-bottom:1px solid rgba(251,246,240,.12)}
  .hscroll-panel:last-child{border-bottom:none}
  .hscroll-progress,.hscroll-hint{display:none}
  .hscroll-title{font-size:clamp(2rem,7vw,2.6rem)}
  .hscroll-ghost{display:none}
}