/* ---------------------------------------------------------------------------
   Шаблон расширения. Поля подстановки, формат $имя$ — 6 штук, все в .makisu:

     $---makisu-width$         ширина меню            по умолчанию  clamp(270px, 16vh, 360px)
     $---makisu-height$        высота одной пластины                calc(4vw + 4vh)
     $---makisu-font-title$    кегль заголовка                      calc(2vw + 2vh)
     $---makisu-font-item$     кегль пункта                         clamp(30px, 6vh, 48px)
     $---makisu-perspective$   дистанция камеры                     1200px
     $---makisu-yaw$           разворот меню                        40deg
	 $---makisu-transform-origin$	центр трансформации				left / right

   Значение подставляется целиком, с единицами: сюда можно класть и px, и vw,
   и calc(), и clamp() — скрипт эти числа не читает, он меряет вёрстку.
   --------------------------------------------------------------------------- */
/* Размеры и ракурс. Единицы любые: px, %, vw, vh, calc(), clamp() —
   скрипт не читает эти числа, он меряет фактическую высоту пластины,
   поэтому вёрстка может быть адаптивной, в том числе через @media.
   Высота одна на все пластины: и заголовки, и пункты — звенья одной
   цепи. Шрифт задаётся заголовкам и пунктам отдельно. */
   
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

.makisu {
    --makisu-width:       calc(16vw + 16vh);
    --makisu-height:      calc(4vw + 4vh);
    --makisu-title-size:  calc(3vw + 2vh);
    --makisu-item-size:   calc(2vw + 2vh);
    --makisu-perspective: 800px;
	--makisu-transform-origin: left;
    --makisu-yaw:         20deg;
	--makisu-color: 		#FFFFFF;
	--makisu-background-color: 		#E32551;

    font-family: "Outfit", Arial, Helvetica, sans-serif;			/*	Sett	*/
    width: var(--makisu-width);
    transform: perspective(var(--makisu-perspective)) rotateY(var(--makisu-yaw));
    transform-origin: var(--makisu-transform-origin) top;
    transform-style: preserve-3d;
    position: relative;
}

.makisu-plate { /* позиция и поворот приходят из расчёта цепи */
    position: absolute; left: 0; top: 0;
    width: var(--makisu-width);
    height: var(--makisu-height);
    line-height: var(--makisu-height);
    box-sizing: border-box;
    background-color: var(--makisu-background-color);
    text-transform: uppercase;
    user-select: none;
    transform-origin: center top;   /* ось шарнира — строго верхняя грань */
    transform-style: preserve-3d;
    will-change: transform;

		&.makisu-title { /* заголовок секции */
			font-size: var(--makisu-title-size);
			font-weight: bold;
			border-bottom: 2px solid rgba(0, 0, 0, 0.15);
			cursor: alias;	}

		&.makisu-item { /* пункт секции */
			font-size: var(--makisu-item-size);
			border-top: 1px dashed rgba(255, 255, 255, 0.3);
			cursor: pointer;	}

		.makisu-label {
			display: block;
			padding-left: 20px;
			color: var(--makisu-color);
			text-decoration: none;
			backface-visibility: hidden;					 /* надпись прячется на изнанке */
			transition: padding-left 1000ms ease;
				&:hover { padding-left: 30px; 	}	}
}
				/* Запасной вид: если скрипт не отработал, остаётся обычный список ссылок */
.makisu-source { 
	&, dl { margin: 0; padding: 0; color: #fff; }
	a  { color: #fff; }
	dt:empty, dd:has(a:empty) { display: none; }
}