/*
  ITERACJA 103
  Widoczne, rozproszone prostokaty pod tekstem sekcji 02 oraz gęste,
  animowane pole geometryczne pod treścią Polityki prywatności.
*/

/* Sekcja 02: pełne elementy pozostają poza tekstem, a półprzezroczyste
   warstwy pracują na całej szerokości sceny — również pod copy. */
.principle-paper-stage>.principle-machine{z-index:1}
.principle-paper-stage>.principle-layout{z-index:3}
.principle-drift{
  z-index:0;
  transform:translateZ(-12px);
  box-shadow:none
}

/* Elementy o pełnym kryciu zostają po lewej stronie i nie przecinają pola copy. */
@media(min-width:681px){
  #gds-living-machine .principle .approved-reaction-stage .rm-a{left:-7%;right:auto;top:4%;width:38vw}
  #gds-living-machine .principle .approved-reaction-stage .rm-c{left:24%;right:auto;top:35%;width:15vw}
  #gds-living-machine .principle .approved-reaction-stage .mechanical-wave{left:25%;right:auto}
  #gds-living-machine .principle .approved-reaction-stage .edge-morph{left:30%}
}

/* Wyraźne warstwy pod prawą kolumną tekstową. */
.pd-a{left:1%;top:10%;width:34%;height:7%;background:rgba(50,36,28,.07)}
.pd-b{left:38%;top:13%;width:22%;background:rgba(175,145,117,.10)}
.pd-c{right:-2%;top:19%;width:42%;height:10%;background:rgba(50,36,28,.065)}
.pd-d{left:17%;top:43%;width:51%;height:6%;background:rgba(190,173,156,.15)}
.pd-e{right:7%;top:44%;width:22%;background:rgba(0,0,0,.048)}
.pd-f{left:-3%;top:69%;width:30%;background:rgba(50,36,28,.06)}
.pd-g{left:48%;bottom:11%;width:43%;height:8%;background:rgba(175,145,117,.105)}
.pd-h{right:-4%;bottom:-7%;width:28%;background:rgba(241,90,41,.035)}
.pd-i{left:55%;top:31%;width:40%;height:5%;background:rgba(175,145,117,.12);animation:principle-drift-x 34s ease-in-out -18s infinite alternate}
.pd-j{left:65%;top:40%;width:31%;height:16%;background:rgba(50,36,28,.052);animation:principle-drift-y 41s ease-in-out -9s infinite alternate}
.pd-k{left:52%;top:56%;width:45%;height:4%;background:rgba(190,173,156,.15);animation:principle-drift-x 29s ease-in-out -23s infinite alternate}
.pd-l{left:58%;top:64%;width:22%;height:19%;background:rgba(50,36,28,.047);animation:principle-drift-y 46s ease-in-out -14s infinite alternate}
.pd-m{right:3%;top:67%;width:18%;height:11%;background:rgba(175,145,117,.10);animation:principle-drift-x 38s ease-in-out -5s infinite alternate}
.pd-n{left:47%;top:24%;width:17%;height:9%;background:rgba(241,90,41,.035);animation:principle-drift-y 43s ease-in-out -27s infinite alternate}
.pd-o{left:70%;top:7%;width:26%;height:6%;background:rgba(50,36,28,.055);animation:principle-drift-x 36s ease-in-out -11s infinite alternate}
.pd-p{left:52%;bottom:2%;width:31%;height:5%;background:rgba(190,173,156,.13);animation:principle-drift-y 45s ease-in-out -33s infinite alternate}

/* Polityka: treść nie może zasłaniać pola, ale geometria pozostaje na tyle
   lekka, by nie zmniejszać czytelności dokumentu. */
.privacy-document-bg{
  z-index:0;
  inset:0;
  opacity:1;
  overflow:hidden;
  contain:layout paint;
  transform:translateZ(0)
}
.privacy-layout{position:relative;z-index:2}
.privacy-copy>section{background:transparent}
.privacy-document-bg i,
.privacy-document-bg b{
  position:absolute;
  display:block;
  left:var(--x)!important;
  right:auto!important;
  top:var(--y)!important;
  bottom:auto!important;
  width:var(--w)!important;
  height:var(--h)!important;
  border:0;
  background:var(--c)!important;
  opacity:var(--o);
  box-shadow:none;
  will-change:transform,opacity;
  backface-visibility:hidden;
  transform:translate3d(0,0,0)
}
.privacy-document-bg i:nth-child(4n+1){animation:privacy-field-a var(--d) ease-in-out var(--delay) infinite alternate}
.privacy-document-bg i:nth-child(4n+2){animation:privacy-field-b var(--d) ease-in-out var(--delay) infinite alternate}
.privacy-document-bg i:nth-child(4n+3){animation:privacy-field-c var(--d) ease-in-out var(--delay) infinite alternate}
.privacy-document-bg i:nth-child(4n){animation:privacy-field-d var(--d) ease-in-out var(--delay) infinite alternate}
.privacy-document-bg b:nth-of-type(odd){animation:privacy-square-field-a var(--d) ease-in-out var(--delay) infinite alternate}
.privacy-document-bg b:nth-of-type(even){animation:privacy-square-field-b var(--d) ease-in-out var(--delay) infinite alternate}

@keyframes privacy-field-a{to{transform:translate3d(5.2vw,-1.2vh,0);opacity:calc(var(--o) * .72)}}
@keyframes privacy-field-b{to{transform:translate3d(-4.4vw,2.2vh,0);opacity:calc(var(--o) * .78)}}
@keyframes privacy-field-c{to{transform:translate3d(2.7vw,3.5vh,0);opacity:calc(var(--o) * .7)}}
@keyframes privacy-field-d{to{transform:translate3d(-2.6vw,-2.8vh,0);opacity:calc(var(--o) * .76)}}
@keyframes privacy-square-field-a{to{transform:translate3d(-3.2vw,2.4vh,0);opacity:calc(var(--o) * .68)}}
@keyframes privacy-square-field-b{to{transform:translate3d(3.5vw,-2.1vh,0);opacity:calc(var(--o) * .74)}}

@media(max-width:680px){
  .pd-i{left:4%;top:10%;width:88%}.pd-j{left:37%;top:21%;width:58%}.pd-k{left:-7%;top:38%;width:93%}
  .pd-l{left:10%;top:50%;width:51%}.pd-m{right:-8%;top:58%;width:44%}.pd-n{left:4%;top:69%;width:57%}
  .pd-o{left:46%;top:77%;width:51%}.pd-p{left:11%;bottom:5%;width:74%}
  .privacy-copy>section{background:transparent}
}

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