/*
  ITERACJA 101
  Polityka prywatności: rzeczywiście widoczne, animowane tło pod treścią.
*/

/* Ciemne otwarcie dokumentu. */
.privacy-hero{isolation:isolate}
.privacy-hero::after{z-index:0}
.privacy-geometry{
  z-index:1;
  opacity:1;
  perspective:900px;
  transform-style:preserve-3d
}
.privacy-geometry i,
.privacy-geometry b{
  will-change:transform,opacity;
  backface-visibility:hidden
}
.privacy-geometry i:nth-child(1){
  background:rgba(247,236,222,.055);
  animation:privacy-hero-mass-a 24s ease-in-out -5s infinite alternate
}
.privacy-geometry i:nth-child(2){
  background:rgba(247,236,222,.043);
  animation:privacy-hero-mass-b 31s ease-in-out -14s infinite alternate
}
.privacy-geometry i:nth-child(3){
  background:rgba(50,36,28,.24);
  animation:privacy-hero-bar-a 19s cubic-bezier(.38,.05,.34,1) -8s infinite alternate
}
.privacy-geometry i:nth-child(4){
  background:rgba(241,90,41,.12);
  animation:privacy-hero-mass-c 27s ease-in-out -17s infinite alternate
}
.privacy-geometry b:nth-of-type(1){
  background:rgba(241,90,41,.34);
  animation:privacy-hero-square-a 15s cubic-bezier(.34,.03,.32,1) -4s infinite
}
.privacy-geometry b:nth-of-type(2){
  background:rgba(247,236,222,.085);
  animation:privacy-hero-square-b 21s ease-in-out -11s infinite alternate
}

@keyframes privacy-hero-mass-a{
  from{transform:translate3d(-3vw,-1vh,-28px);opacity:.58}
  to{transform:translate3d(5vw,2.6vh,18px);opacity:.92}
}
@keyframes privacy-hero-mass-b{
  from{transform:translate3d(2vw,-3vh,-50px);opacity:.5}
  to{transform:translate3d(-4.5vw,4vh,12px);opacity:.82}
}
@keyframes privacy-hero-bar-a{
  from{transform:translate3d(-5vw,0,-20px) scaleX(.76);opacity:.5}
  to{transform:translate3d(5vw,-2vh,15px) scaleX(1.08);opacity:.88}
}
@keyframes privacy-hero-mass-c{
  from{transform:translate3d(0,3vh,-8px) scale(.92);opacity:.48}
  to{transform:translate3d(-5vw,-2vh,24px) scale(1.04);opacity:.82}
}
@keyframes privacy-hero-square-a{
  0%,12%{transform:translate3d(0,0,44px)}
  44%,60%{transform:translate3d(-6vw,0,44px)}
  88%,100%{transform:translate3d(-6vw,8vh,44px)}
}
@keyframes privacy-hero-square-b{
  from{transform:translate3d(-2vw,2vh,8px);opacity:.52}
  to{transform:translate3d(5vw,-3vh,34px);opacity:.9}
}

/* Jasna część: warstwa jest nad aplą, ale pod indeksem i treścią. */
.privacy-document{
  position:relative;
  isolation:isolate;
  overflow:hidden
}
.privacy-document-bg{
  z-index:0;
  opacity:1;
  transform:translateZ(0)
}
.privacy-layout{
  position:relative;
  z-index:2
}
.privacy-index{
  background:linear-gradient(90deg,rgba(247,236,222,.91),rgba(247,236,222,.74) 86%,transparent)
}
.privacy-copy>section{
  background:linear-gradient(90deg,rgba(247,236,222,.92),rgba(247,236,222,.8) 76%,rgba(247,236,222,.34))
}

/* Elementy pozostają jasne i niskokontrastowe również w trakcie ruchu. */
.privacy-document-bg i{
  opacity:.64;
  filter:saturate(.78)
}
.privacy-document-bg b{
  opacity:.56;
  filter:saturate(.84)
}

@media(max-width:700px){
  .privacy-geometry i:nth-child(1){width:46%}
  .privacy-geometry i:nth-child(2){right:-9%;width:34%}
  .privacy-geometry i:nth-child(3){left:22%;width:56%}
  .privacy-geometry b:nth-of-type(1){right:10%}
  .privacy-index{background:rgba(247,236,222,.9)}
  .privacy-copy>section{background:rgba(247,236,222,.84)}
}

@media(prefers-reduced-motion:reduce){
  .privacy-geometry i,
  .privacy-geometry b,
  .privacy-document-bg i,
  .privacy-document-bg b{animation:none!important}
}