/* =========================================================
   DYNA werbung+design – Intro zum Logo-Wuerfel
   Gehoert zu js/dyna-intro.js. Ergaenzt css/dyna-cube.css.
   Waehrend des Intros: Logo und Kontur-Wuerfel ausgeblendet,
   ein grosser Foto-Wuerfel (ohne Kontur) dreht und wandert ins «a».
   ========================================================= */
.dyna-logo.di-run svg { opacity: 0; }
.dyna-logo.di-run .dl-wrap { opacity: 0; }
.dyna-logo .di-wrap {
	position: absolute; pointer-events: none;
	--s: calc(100cqw * var(--size, 15.84) / 212.98);
	left: calc(100% * var(--x, 197.06) / 212.98);
	top:  calc(100% * var(--y, 43.78) / 59.69);
	width: var(--s); height: var(--s);
	perspective: calc(var(--s) * 7);
	opacity: var(--op, 1);
}
.dyna-logo .di-pos  { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--s) / -2)); }
.dyna-logo .di-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.dyna-logo .di-f    { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; }
.dyna-logo .di-f > i { position: absolute; inset: 0; }
.dyna-logo .di-img { background: #6b6f72 center / cover no-repeat; }
.dyna-logo .di-sh  { background: #000; opacity: 0; }
.dyna-logo .di-f:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.dyna-logo .di-f:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.dyna-logo .di-f:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.dyna-logo .di-f:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.dyna-logo .di-f:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.dyna-logo .di-f:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }