/* Stories das entregas: cards 9:16 in an endless rail, and a full-screen viewer that behaves like
   the stories people already know. Prefix fcs-; the viewer uses fcv-. Colours from surreal.css. */

.fcs{position:relative;z-index:2;background:var(--fc-grafite);color:var(--fc-prata);padding:clamp(72px,8vw,120px) 0 clamp(80px,9vw,130px);overflow:hidden}
.fcs .fc-wrap{padding:0 var(--fc-gutter)}
.fcs__cabeca{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end;margin-bottom:40px}
.fcs__cabeca h2{margin-bottom:18px;max-width:17ch}
.fcs__cabeca .fc-lede{max-width:46ch}
.fcs__acoes{display:flex;align-items:center;gap:12px}
.fc-pill--linha{background:transparent;color:var(--fc-prata);box-shadow:inset 0 0 0 1px #ffffff40}
.fc-pill--linha:hover{background:var(--fc-prata);color:var(--fc-grafite)}
.fcs__seta{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid #ffffff40;background:transparent;color:var(--fc-prata);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.fcs__seta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcs__seta:hover{background:var(--fc-prata);border-color:var(--fc-prata);color:var(--fc-grafite)}

/* the rail: the first card starts on the text line, the rest runs off the right edge */
.fcs__janela{position:relative;overflow:hidden;padding:4px 0 8px;touch-action:pan-y;cursor:grab}
.fcs__janela.is-arrastando{cursor:grabbing}
.fcs__janela.is-arrastando .fcs__card{pointer-events:none}
.fcs__trilho{display:flex;gap:16px;width:max-content;margin:0;padding:0 var(--fc-gutter);list-style:none;will-change:transform}
.fcs__item{flex:0 0 auto;width:clamp(164px,19vw,248px)}
.fcs__card{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:16px;overflow:hidden;isolation:isolate;background:#2a3035;color:var(--fc-prata);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.fcs__card video,.fcs__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.fcs__card::before,.fcs__card::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.fcs__card::before{top:0;height:32%;background:linear-gradient(#0009,transparent)}
.fcs__card::after{bottom:0;height:30%;background:linear-gradient(transparent,#000a)}
.fcs__card:hover video{transform:scale(1.03)}
.fcs__card:focus-visible{outline:2px solid var(--fc-luz);outline-offset:3px}
.fcs__barras{position:absolute;top:10px;left:10px;right:10px;z-index:2;display:flex;gap:3px}
.fcs__barras i{position:relative;flex:1;height:2px;border-radius:2px;background:#ffffff59;overflow:hidden}
.fcs__barras b{position:absolute;top:0;bottom:0;left:0;width:0;background:#fff}
.fcs__meta{position:absolute;top:22px;left:10px;right:10px;z-index:2;display:flex;align-items:center;gap:8px;font:500 12px/1.2 var(--fc-ui)}
.fcs__avatar{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--fc-grafite);box-shadow:0 0 0 1.5px var(--fc-prata);font:600 10px/1 var(--fc-ui);letter-spacing:.02em}
.fcs__nome{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}
.fcs__pe{position:absolute;left:10px;right:10px;bottom:12px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px}
.fcs__categoria{min-width:0;padding:5px 10px;border:1px solid #ffffffb3;border-radius:99px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 11px/1.3 var(--fc-ui)}
.fcs__play{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid #ffffffb3;border-radius:50%}
.fcs__play svg{width:12px;height:12px;fill:currentColor}

/* --- the viewer --- */
html.story-aberto{overflow:hidden}
.fcv{position:fixed;inset:0;margin:0;padding:0;border:0;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden;background:transparent;color:var(--fc-prata);font-family:var(--fc-ui)}
.fcv::backdrop{background:#000000d9}
.fcv__quadro{position:relative;display:grid;place-items:center;width:100%;height:100%}
.fcv__moldura{position:relative}
.fcv__palco{position:relative;width:min(100vw,calc((100vh - 48px) * 9 / 16));height:min(100vh,calc(100vw * 16 / 9));max-height:calc(100vh - 48px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none}
.fcv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.fcv__topo{position:absolute;top:0;left:0;right:0;z-index:2;padding:12px 12px 40px;background:linear-gradient(#0009,transparent)}
.fcv__barras{display:flex;gap:4px}
.fcv__barras i{flex:1;height:2px;border-radius:2px;background:#ffffff59;overflow:hidden}
.fcv__barras b{display:block;width:0;height:100%;background:#fff}
.fcv__cabeca{display:flex;align-items:center;gap:10px;margin-top:12px}
.fcv__cabeca .fcs__avatar{width:34px;height:34px;font-size:11px}
.fcv__titulo{flex:1;min-width:0;font-size:14px;line-height:1.3}
.fcv__titulo strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}
.fcv__titulo span{display:block;color:#ffffffbf;font-size:12px}
.fcv__botao{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background .2s}
.fcv__botao svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcv__botao:hover{background:#ffffff1f}
.fcv__botao:focus-visible,.fcv__seta:focus-visible,.fcv__link:focus-visible{outline:2px solid var(--fc-luz);outline-offset:2px}
.fcv__carregando{position:absolute;left:50%;top:50%;z-index:2;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid #ffffff40;border-top-color:#fff;border-radius:50%;opacity:0;transition:opacity .2s;animation:fcv-gira .8s linear infinite;pointer-events:none}
.fcv__palco.is-carregando .fcv__carregando{opacity:1}
.fcv__pausa{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#0008;opacity:0;transition:opacity .2s;pointer-events:none}
.fcv__pausa svg{width:24px;height:24px;fill:#fff}
.fcv__palco.is-pausado .fcv__pausa{opacity:1}
.fcv__pe{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:center;padding:40px 12px 20px;background:linear-gradient(transparent,#0009)}
.fcv__pe[hidden]{display:none}
.fcv__link{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid #ffffffcc;border-radius:99px;color:#fff;font:500 13px/1.2 var(--fc-ui);text-decoration:none;transition:background .2s,color .2s}
.fcv__link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fcv__link:hover{background:#fff;color:var(--fc-grafite)}
.fcv__seta{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:48px;height:48px;margin-top:-24px;border:1px solid #ffffff59;border-radius:50%;background:transparent;color:#fff;cursor:pointer;transition:background .2s,color .2s}
.fcv__seta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcv__seta:hover:not(:disabled){background:#fff;color:var(--fc-grafite)}
.fcv__seta:disabled{opacity:.25;cursor:default}
.fcv__seta--antes{right:calc(100% + 24px)}
.fcv__seta--depois{left:calc(100% + 24px)}
@keyframes fcv-gira{to{transform:rotate(360deg)}}

@media (max-width:768px){
  .fcs__cabeca{grid-template-columns:1fr;align-items:start}
  .fcs__acoes{order:2}
  .fcv__palco{width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;aspect-ratio:auto}
  .fcv__seta{display:none}
  .fcv__topo{padding-top:max(12px,env(safe-area-inset-top))}
  .fcv__pe{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .fcs__card video,.fcs__seta,.fcv__botao,.fcv__seta,.fcv__link{transition:none}
  .fcs__card:hover video{transform:none}
  .fcv__carregando{animation-duration:1.6s}
}
.fcs__rotulo{margin:0 0 18px;font:500 14px/1.2 var(--fc-ui);letter-spacing:.01em;color:var(--fc-concreto)}