/* определяем скорость и направление прокрутки */
/*
@supports (animation-timeline: scroll()) {

	@property --scroll-velocity {
	  syntax: "<number>";
	  inherits: true;
	  initial-value: 0;
	}
	@property --scroll-position {
	  syntax: "<number>";
	  inherits: true;
	  initial-value: 0;
	}
	@property --scroll-position-delayed {
	  syntax: "<number>";
	  inherits: true;
	  initial-value: 0;
	}
	@property --scroll-speed {
	  syntax: "<number>";
	  inherits: true;
	  initial-value: 0;
	}
	@property --scroll-direction {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	body {
	  animation: adjust-pos linear both;
	  animation-timeline: scroll(self);
	}
	footer {
	  transition: --scroll-position-delayed 0.15s linear;
	  --scroll-velocity: calc( var(--scroll-position) - var(--scroll-position-delayed) );
	  
	  --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
	  
	  --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
	}
	@keyframes adjust-pos {
	  to {
		--scroll-position: 1;
		--scroll-position-delayed: 1;
	  }
	}
	
			footer::after {	
			  content: counter(cnt);
			  counter-reset: cnt calc(var(--scroll-velocity) * 100);
			  font-size: 40px;
			  position: fixed;
			  inset: 0;
			  width: fit-content;
			  height: fit-content;
			  padding: 20px;
			  margin: auto;
			  background:#fee;
			  z-index: 999;
			 }
}
*/

@supports (animation-timeline: scroll()) {

    .advert_pane {
		animation: ad_pane-progress .1ms linear both;
		animation-timeline: --section2-tl;
		animation-range: entry 10%;	
	}
	@keyframes ad_pane-progress {
		to {
		  opacity: .2;
		  filter: blur(2px);
		}
	}	

}

/*section.white-shadow-top */
section:nth-of-type(2) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
}