/* IMPAL 3D-Implementation - Copyright(C) 2025 Martin Rebhan / impal.org */
:root{
 --impal-hb:linear-gradient(90deg,#090,#059);
 --impal-s:0.5;
 --impal-S:1;
 --impal-r3x:0deg;
 --impal-r3y:0deg;
 --impal-r3z:0deg;
 --impal-r3a:0deg;
 --impal-r3s:calc(var(--impal-s)/var(--impal-P)*4);
 --impal-r3p:calc(1780px + var(--impal-r3s) * 1000px);/* s? */
 --impal-l:0px;
 --impal-t:0px;
 --impal-w:310px;
 --impal-h:310px;
 --impal-W:calc(var(--impal-w) * var(--impal-S));
 --impal-H:calc(var(--impal-h) * var(--impal-S));
 --impal-M:min(var(--impal-W),var(--impal-H));
 --impal-A:calc(var(--impal-M)/2);
 --impal-L:calc(var(--impal-W)/2);/*wird überschrieben!*/
 --impal-T:calc(var(--impal-H)/2);
 --impal-cL:0px;
 --impal-cT:0px;
 --impal-bs:3px;
 --impal-bc:#FB0;
 --impal-br:0%;
 --impal-ts:1s;
 --impal-tz:0px;
 --impal-t3s:var(--impal-M);
 --impal-t3z:calc((var(--impal-t3s)/2)/tan((360/var(--impal-P)/2)*pi/180) + var(--impal-tz));
 --impal-m:inline-block;
 --impal-Q:6;
 --impal-P:calc(var(--impal-Q) - var(--impal-p) );
 --impal-p:2;
 --impal-q:4;
 --impal-rX-1:0deg;
 --impal-rY-1:0deg;
 --impal-rX-2:0deg;
 --impal-rY-2:-90deg;
 --impal-rX-3:90deg;
 --impal-rY-3:0deg;
 --impal-rX-4:-90deg;
 --impal-rY-4:0deg;
 --impal-rX-5:0deg;
 --impal-rY-5:90deg;
 --impal-rX-6:0deg;
 --impal-rY-6:180deg;
 --impal-r3dxxx:
 rotate3d(var(--impal-r3x),var(--impal-r3y),var(--impal-r3z),var(--impal-r3a))   
 scale3d(var(--impal-r3s),var(--impal-r3s),var(--impal-r3s));
 --impal-r3d:
 rotateX(var(--impal-r3x)) rotateY(var(--impal-r3y)) rotateZ(var(--impal-r3z))
 scale3d(var(--impal-r3s),var(--impal-r3s),var(--impal-r3s));

 /*--impal-R3x:calc( -1* var(--impal-r3x));
 --impal-R3y:calc( -1* var(--impal-r3y));
 --impal-R3z:calc( -1* var(--impal-r3z));
 --impal-R3s:calc( 5* var(--impal-r3s));
 --impal-R3d:
 rotateX(var(--impal-R3x)) rotateY(var(--impal-R3y)) rotateZ(var(--impal-R3z))
 /*scale3d(var(--impal-R3s),var(--impal-R3s),var(--impal-R3s))
 ;*/
}


main{
 position:relative;
 display:inline-grid;
 gap:10px;
 &>i{display:none;}
 &>img,video{display:none;}
 &>iht{/*column-span: all;*/
  width:calc(var(--impal-vpW)-10px);max-width:calc(var(--impal-vpW)-10px);
  height:var(--impal-vpH);max-height:var(--impal-vpH);
  display:inline-block;
  padding:5px;
  color:var(--impal-cF);/*#*/
  background:var(--impal-c4);/*#*/
   background:#0A08;
  font-size:1.5em;
  column-width:310px;
  column-count:calc(var(--impal-vpW)/310);
  column-gap:15px;
  column-rule:4px dotted rgb(79 185 227);
  &>p{
   padding:3px;
   color:var(--impal-cD);/*#*/
  }
 }
}

ic{
 position:relative;
 margin:5px;
 overflow:hidden;
 vertical-align:top;
 display:inline-grid;
 gap:2px;
 &#CB>i{display:none;}
 &#CB{overflow:visible;}
}

ifc{
 width:var(--impal-W);
 height:var(--impal-W);
 overflow:hidden;
 background:#EEE;/*#*/
 &:fullscreen>control{display:inline-block;}
}
img,video,ifc{
 box-shadow:0 0 0 3px #EEE;/*#*/
 margin:3px;
 padding:0;
 display:inline-block;
}
ifc>video{
 box-shadow:none;
 border:0;
}
ifc>iframe{
 border:0;
 margin:0;
 padding:0;
}
ifc>div{
 position:relative;
 top:-21px;
 padding:1px 0 0 3px;
 background:#EEE;/*#*/
 width:var(--impal-W);
 height:17px;
 &::before{content:"© ";}
 &::after{content:" | IMPAL V.51 (Test)";}
}
i,ifch{
 padding:0 2px;
 width:calc(100% - 4px);
 background:var(--impal-cD);/*#*/
 text-align:left;
 display:inline-block;
}
ifch>*{
 float:left;
 margin:2px;
 font-weight:bold;
}
ifch>button,div>button,menu>button{
 width:38px;
 height:38px;
 margin:2px;
 font-size:1em;
 background:none;
}
menu>ifch{
 width:calc(100% - 2px);
 box-sizing:border-box;
}
/*.w{width:var(--impal-W);150,00}
.h{height:var(--impal-H);}*/
.hide{display:none;}         /*  */
.show{display:inline-block;transform:scale(1);} /*  */

ifc.i3c{
 position:relative;
 background:none;box-shadow:none;overflow:visible;
 /*left:var(--impal-l);
 top:var(--impal-t);*/
 /*transform-style:preserve-3d;
 transform-origin:50% 50%;
 transform:var(--impal-R3d);*/
 &:fullscreen{background:#8A8 url(/img/cms.millimeterpapier.png);
  position:absolute;
  left:0;
  top:0;
  transition:perspective var(--impal-ts) linear;
  &>i3c{
   position:absolute;
   left:var(--impal-L);
   top:var(--impal-T);
   width:var(--impal-W);
   height:var(--impal-H);
  }
 }
 transition:perspective var(--impal-ts) linear;
 perspective:var(--impal-r3p);
}
i3c{
 position:absolute;
 border:0;
 margin:0;
 padding:0;
 width:100%;
 height:100%;
 transform-style:preserve-3d;
 transform-origin:50% 50%;
 transform:var(--impal-r3d);
 transition:var(--impal-ts) linear;
 &>side{
  /*box-shadow:0 0 0 var(--impal-bs) var(--impal-bc);*/
  /*outline:var(--impal-bs) solid #00A;
  outline-offset:calc( - var(--impal-bs));*/
  /*border-image:linear-gradient(90deg,var(--impal-bc));
  border-image-outset:calc( - var(--impal-bs));*/
  border:var(--impal-bs) solid var(--impal-bc);
  margin:0;
  padding:0;
  box-sizing:border-box;/* !! (so keine border-korrektur nötig) */
  border-radius:var(--impal-br);
  &>*/*:not(img)*/{position:absolute;}
  /*&>img{border:none;margin:0;padding:0;}
  /*&:nth-child(1){transform:rotateX(var(--impal-rX-1)) rotateY(var(--impal-rY-1)) translateZ(var(--impal-t3z));}
  &:nth-child(2){transform:rotateX(var(--impal-rX-2)) rotateY(var(--impal-rY-2)) translateZ(var(--impal-t3z));}
  &:nth-child(3){transform:rotateX(var(--impal-rX-3)) rotateY(var(--impal-rY-3)) translateZ(var(--impal-t3z));}
  &:nth-child(4){transform:rotateX(var(--impal-rX-4)) rotateY(var(--impal-rY-4)) translateZ(var(--impal-t3z));}
  &:nth-child(5){transform:rotateX(var(--impal-rX-5)) rotateY(var(--impal-rY-5)) translateZ(var(--impal-t3z));}
  &:nth-child(6){transform:rotateX(var(--impal-rX-6)) rotateY(var(--impal-rY-6)) translateZ(var(--impal-t3z));}
  &:nth-child(7){transform:rotateX(var(--impal-rX-7)) rotateY(var(--impal-rY-7)) translateZ(var(--impal-t3z));}*/
 }
}
side{
 position:absolute;
 display:flex;
 align-items:center;
 justify-content:center;
 width:var(--impal-t3s);
 height:var(--impal-t3s);
 backface-visibility:inherit;
 background:#070;/*var(--impal-bc);*/
 color:#0F0;
 &:not(.f){overflow:hidden;}
 &.f{overflow:visible;}
 &>i{display:none;}
 &>img{width:var(--impal-w);}
 &>img.w,video.w{
  height:var(--impal-t3s);
  width:calc(var(--impal-S)/height);
  /*max-height:var(--impal-t3s);
  min-height:var(--impal-t3s);*/
 }
 &>img.h,video.h{
  width:var(--impal-t3s);
  height:calc(var(--impal-S)/width);
  /*max-width:var(--impal-t3s);
  min-width:var(--impal-t3s);*/
 }
 &>div,iht{
  display:block;
  position:absolute;
  inset:80% 3% 3% 3%;
  padding:3%;
  background:#0A08;
  font-size:3em;
  color:var(--impal-cD);/*#*/
 }
}
.axes{
 position:absolute;
 width:100%;
 height:100%;
}

.i3c>blende{
 position:absolute;
 width:100%;
 height:100%;
 background:#0303;
 display:var(--impal-m);/*!nmv*/
}
.i3c>control{
 position:absolute;
 left:var(--impal-cL);
 top:var(--impal-cT);
 width:360px;
 height:100%;
 border:none;
 background:#0009;/*#*/
 text-align:left;
 display:none;
 flex-flow:row wrap;
 color:var(--impal-cF);/*#*/
 &>div{
  position:relative;
  width:44px;
  height:35px;
  padding:3px;
  margin:-2px;
  font-size:1.2em;
  background:#000E;/*#*/
  text-indent:3px;
  float:left;
  &.on{background:#F00;z-index:3;}
  &:hover:not(:nth-child(2),:last-child,.on){background:#FFF3;}
  &:nth-child(1){text-indent:0;width:44px;height:44px;z-index:2;}
  &>button{width:44px;height:44px;font-size:2em;background:var(--impal-cD);}
  &>input{border:0;width:44px;height:16px;margin:0;padding:0;font-size:1.1em;}
  &:nth-child(2){
   width:calc(360px - 48px);
   height:14px;
   padding:0;
   margin:0;
   font-size:1em;
   color:var(--impal-cF);/*#*/
   float:right;
   z-index:0;
   &::before{color:#5FF;content:var(--impal-Qa);}
   &::after{color:#CA0;content:var(--impal-Qb);}
  }
 }
}

.i3c>control>div.matrix{
 &::before{width:90%;color:#5FF;content:"Transformations-Matrix";}
 display:flex;
 flex-flow:row wrap;
 position:relative;
 bottom:0px;
 width:234px;
 height:120px;
 margin:10px 0 0 0;
 padding:2px;
 background:#222;/*#*/
 &>b{width:50px;margin:2px;padding:2px;background:#0909;text-align:right;}
}
.i3c>control>div.trigotool{
 &::before{width:90%;color:#5FF;content:"Trigo-Tool2";}
 display:flex;
 flex-flow:row wrap;
 position:relative;
 bottom:0px;
 width:114px;
 height:120px;
 margin:10px 0 0 2px;
 padding:2px;
 background:#222;/*#*/
 &>c{width:20px;margin:2px;padding:2px;background:#0099;text-align:center;font-size:16px;}
 &>d{width:20px;margin:2px;padding:2px;background:#0909;text-align:center;font-size:10px;}
}
.i3c>control>div.xxxtrigotool{
 &::before{width:90%;color:#5FF;content:"Trigo-Tool";}
 display:flex;
 flex-flow:row wrap;
 bottom:0px;
 width:114px;
 height:120px;
 margin:10px 0 0 2px;
 padding:2px;
 background:#222;/*#*/
 &>d{width:20px;margin:2px;padding:2px;background:#0909;text-align:center;font-size:16px;}
}
wwz{
 position:absolute;
 left:0px;
 top:0px;
 font-size:20px;
 width:var(--impal-t3z);
 background:#5FF;
}
wws{
 position:absolute;
 left:0px;
 top:25px;
 font-size:20px;
 width:var(--impal-t3s);
 background:#5FF;
}