/* Cases em vitrine curva (estilo streaming). Montada por zett-v6.js sobre o .z-works existente;
   sem JS, a grade original continua valendo. */
.z-works.z-works--flow{display:block;position:relative;--cw:clamp(280px,38vw,560px);--step:.92;--tilt:24deg;--lift:46px;
  margin-inline:calc(var(--gutter)*-1);opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.z-works.z-works--flow.in{opacity:1;transform:none}
.z-flow__stage{position:relative;height:calc(var(--cw)*.656 + 70px);perspective:1700px;perspective-origin:50% 45%;overflow:hidden;overflow:clip;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.z-flow__stage::before{content:"";position:absolute;left:50%;top:52%;width:calc(var(--cw)*1.1);height:calc(var(--cw)*.5);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,var(--glow),transparent 72%);filter:blur(30px);opacity:.75;pointer-events:none}
.z-works--flow .z-work,.z-works--flow .z-work--feat{position:absolute;left:50%;top:35px;width:var(--cw);margin-left:calc(var(--cw)/-2);aspect-ratio:16/10.5;grid-column:auto;cursor:pointer;
  z-index:calc(10 - var(--a));
  transform:translateX(calc(var(--o)*var(--cw)*var(--step))) translateZ(calc(var(--a)*var(--lift))) rotateY(calc(var(--o)*var(--tilt)*-1)) scale(var(--s,1));
  filter:brightness(calc(1 - var(--a)*.18)) saturate(calc(1 - var(--a)*.15));
  transition:transform .95s var(--ease),filter .95s var(--ease),opacity .6s,box-shadow .6s;will-change:transform}
.z-works--flow .z-work.is-far{opacity:0;pointer-events:none}
.z-works--flow .z-work.is-active{--s:1.06;cursor:default;box-shadow:0 0 0 1px var(--amber) inset,0 34px 90px rgba(0,0,0,.65),0 0 70px var(--glow)}
.z-works--flow .z-work:not(.is-active) .z-work__info,.z-works--flow .z-work:not(.is-active) .z-work__badge,.z-works--flow .z-work:not(.is-active) .z-work__index{opacity:0;pointer-events:none}
.z-works--flow .z-work__info,.z-works--flow .z-work__badge,.z-works--flow .z-work__index{transition:opacity .5s .25s}
.z-works--flow .z-work:not(.is-active):hover{filter:brightness(calc(1.12 - var(--a)*.18))}
.z-works--flow .z-work--feat h3{font-size:clamp(20px,2vw,30px)}
.z-flow__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px;padding-inline:var(--gutter)}
.z-flow__arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel);color:var(--text);cursor:pointer;transition:border-color .3s,color .3s}
.z-flow__arrow svg{width:18px;height:18px}
.z-flow__arrow:hover,.z-flow__arrow:focus-visible{border-color:var(--amber);color:var(--amber-hi)}
.z-flow__dots{display:flex;gap:8px}
.z-flow__dot{position:relative;width:26px;height:4px;padding:0;border:0;border-radius:4px;background:var(--line-2);overflow:hidden;cursor:pointer;transition:width .4s var(--ease)}
.z-flow__dot::before{content:"";position:absolute;inset:-10px 0}
.z-flow__dot.is-active{width:54px}
.z-flow__dot.is-active::after{content:"";position:absolute;inset:0;background:var(--amber);transform-origin:left;animation:zFlowProgress 6s linear forwards}
.z-works--flow.is-paused .z-flow__dot.is-active::after{animation-play-state:paused}
@keyframes zFlowProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:820px){
  .z-works.z-works--flow{--cw:66vw;--step:.7;--tilt:20deg;--lift:34px}
  .z-works--flow .z-work h3,.z-works--flow .z-work--feat h3{font-size:20px}
  .z-works--flow .z-work__info p{font-size:12px}
  .z-works--flow .z-work__badge{display:none}
  .z-works--flow .z-work,.z-works--flow .z-work--feat{aspect-ratio:16/12.5}
  .z-flow__stage{height:calc(var(--cw)*.78 + 60px)}
}
@media (prefers-reduced-motion:reduce){
  .z-works--flow .z-work{transition:none}
  .z-flow__dot.is-active::after{animation:none;transform:none}
}