/* ==========================================================================
   BARALHO STICKY — cards que se empilham sobre uma foto pinada
   Prefixo: deck-
   Tokens usados: --fg --fg-2 --fg-muted --rule-2 --dark --dark-rgb
                  --display --nav-h --ease
   Primitiva usada: .glass (core/base.css)
   ========================================================================== */

.deck-sec{position:relative}

/* ---- o palco ----
   sticky a top:0 com height:100vh limita a altura VISÍVEL da foto a uma
   tela, por mais alta que a seção fique por causa dos cards.
   O margin-bottom negativo puxa o .wrap de volta para cima, sobrepondo o
   palco. O overflow:hidden mora AQUI e não na seção: na seção ele quebraria
   o sticky dos cards, que ficam fora deste bloco. */
.deck-stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  margin-bottom:calc(-100vh);z-index:0;
}
.deck-bg{position:absolute;inset:0}
.deck-bg img{width:100%;height:100%;object-fit:cover}

/* Vinheta nas quatro bordas: a foto dissolve no fundo em vez de cortar reto.
   O reforço diagonal garante leitura por trás dos cards de vidro, que ficam
   à esquerda. */
.deck-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 95% at 62% 55%,transparent 40%,rgba(var(--dark-rgb),.6) 86%,var(--dark) 100%),
    linear-gradient(105deg,rgba(var(--dark-rgb),.92) 0%,rgba(var(--dark-rgb),.55) 32%,transparent 56%),
    linear-gradient(to bottom,rgb(var(--dark-rgb)) 0%,rgba(var(--dark-rgb),.7) 14%,transparent 34%,transparent 62%,rgb(var(--dark-rgb)) 100%);
}
.deck-sec > .wrap{position:relative;z-index:2}

/* O sec-pad da seção não segura folga suficiente aqui: o título fica sobre o
   palco pinado e precisa de respiro próprio contra o topo. */
/* Só o respiro do topo: centralização vem de .sec-head do core. */
.deck-head{padding-top:clamp(28px,7vh,80px)}
.deck-head .sec-title{max-width:none;margin-inline:auto}   /* 22ch quebraria a linha */
.deck-head .eyebrow{margin-inline:auto}
.deck-lead{font-size:17px;line-height:1.6;color:var(--fg-2);margin-top:18px;margin-inline:auto}

/* ---- a pilha ----
   Cada card gruda um pouco mais abaixo que o anterior (--deck-i * --deck-peek),
   então eles se empilham deixando só uma faixa do anterior à mostra. O
   z-index cresce junto, então o card mais novo sempre cobre os antigos. */
.deck{
  margin-top:clamp(46px,7vh,80px);
  --deck-top:calc(var(--nav-h) + clamp(16px,4vh,40px));
  --deck-peek:14px;
}
.deck-list{
  display:flex;flex-direction:column;gap:clamp(16px,2.2vh,26px);
  max-width:520px;padding-bottom:clamp(40px,8vh,90px);
}

/* --deck-p (0 a 1) é o quanto este card já foi coberto pelo seguinte.
   Quem calcula é o script; o CSS só o consome para encolher e apagar. */
.deck-card{
  position:sticky;
  top:calc(var(--deck-top) + var(--deck-i) * var(--deck-peek));
  z-index:var(--deck-z);
  border-radius:14px;padding:clamp(24px,2.6vw,34px);
  --glass-bg:rgba(var(--dark-rgb),.55);
  transform-origin:top center;
  transform:scale(calc(1 - .035 * var(--deck-p,0)));
  transition:transform .25s linear;
}
.deck-card > *{transition:opacity .25s linear}
.deck-card.is-stacked > .deck-title,
.deck-card.is-stacked > .deck-text{opacity:calc(1 - .6 * var(--deck-p,0))}


.deck-title{
  font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,23px);
  letter-spacing:-.025em;line-height:1.25;color:var(--fg);margin-top:16px;
}
.deck-text{font-size:17px;line-height:1.6;color:var(--fg-2);margin-top:12px}

/* ---- mobile ----
   Sem pilha: os cards viram uma lista comum e o palco vira um bloco de
   proporção fixa no fluxo. Empilhar em tela pequena esconderia o conteúdo. */
@media(max-width:900px){
  .deck-stage{position:relative;height:auto;aspect-ratio:4/3.3;margin:0;overflow:hidden}
  .deck-bg img{filter:grayscale(.45) brightness(.62)}
  .deck-bg::after{background:linear-gradient(to bottom,transparent 45%,var(--dark) 96%)}
  .deck-head{padding-top:0;margin-top:-64px;position:relative;z-index:2}
  .deck-list{max-width:none}
  .deck-card{position:static;transform:none}
  .deck-card.is-stacked > .deck-title,
  .deck-card.is-stacked > .deck-text{opacity:1}
}

@media(prefers-reduced-motion:reduce){.deck-card{transform:none}}