/***********************************************/
/* emx_nav_left.css                            */

/* HTML tag styles                             */
/***********************************************/

body{
	font-family: Comic Sans MS, Arial,sans-serif;
	color: white;
	background: black;                        /* фон — SVG-фрактал в #bg (index.html), см. ниже */
	font: lighter Comic Sans MS;
}

/* Фон: inline SVG-фрактал (#fractal) на чёрном, во весь экран, центр фрактала = центр окна */
#bg{
	position: fixed; z-index: -1;
	top: 0; left: 0; width: 100%; height: 100%;
	overflow: hidden; background: black;
}
#bg svg{
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;   /* внутри svg — preserveAspectRatio slice */
	opacity: 0.85;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce){ #bg svg{ opacity: 0.5; } }

/******* hyperlink and anchor tag styles *******/

a:link{
	color: #c924af;
	text-decoration: underline;
}


 a:visited{
    color: #c924af;
    text-decoration: none;
}

a:hover{
	text-decoration: overline;
}

/************** header tag styles **************/

h1{
	font: bold 150% Comic Sans MS;
	color: White;
	margin: 0px;
	padding: 0px;
	text-decoration: underline;
}

h2{
	font: bold 150% Comic Sans MS;
	color: #9400D3;
	margin: 0px;
	padding: 0px;
}

h3{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 font: 100% Arial,sans-serif;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font: 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}
/******* переключаемые разделы (index.html) *******/

.page{ display: none; }
.page.active{ display: block; }

/******* центральная область: единственный скролл на странице *******/

#content{
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: #FF0080 transparent;
}
#content::-webkit-scrollbar{ width: 8px; }
#content::-webkit-scrollbar-track{ background: transparent; }
#content::-webkit-scrollbar-thumb{ background: #FF0080; border-radius: 4px; }
#contentInner{ padding: 9px; transition: opacity 0.12s ease; }   /* кроссфейд при смене раздела */

/******* шапка: картинка вписана по ширине, слоган поверх *******/

#cellHead{ padding: 0; }
/* высота шапки — половина от пропорций картинки (912:150 → 912:75); картинка вписана по ширине,
   лишнее сверху и снизу обрезается без искажения */
#headWrap{ position: relative; line-height: 0; overflow: hidden; aspect-ratio: 912 / 75; }
#headImg{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#slogan{
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	text-align: center;
	line-height: 1.1;
	font-weight: bold;
	color: white;
	text-shadow: 0 0 12px #FF0080, 0 0 32px #FF0080, 0 0 2px black, 1px 1px 2px black;   /* розовое свечение как у интро — текст «приезжает» без смены вида */
}

/******* ячейки таблицы: чёрный с прозрачностью, фон просвечивает на 30% *******/

#layout, #layout tr{ background: transparent; }
#layout > tbody > tr > td{ background-color: rgba(0, 0, 0, 0.7); }   /* только ячейки каркаса; вложенные таблицы разделов прозрачные */

/******* левая колонка: Pneumolab и Magnezit — обрезаны по тексту, рамка как у кнопок; Magnezit у нижнего края *******/

#cellNav{ position: relative; }
#navWrap{ padding-bottom: 90px; }                /* место под Magnezit (71px + рамка + отступ) */
#pneumoBtn img, #magnezit img{
	display: inline-block;               /* родной размер (обрезка по тексту 98x71), по центру колонки как раньше */
	/* скос как у кнопок knopka0N.jpg: светлый верх/лево, тёмный низ/право, ~3px, чуть скруглённые углы */
	border-style: solid; border-width: 3px;
	border-color: #ddd3e4 #5a4870 #5a4870 #ddd3e4;
	border-radius: 4px;
}
#magnezit{ position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; line-height: 0; }

/******* интро при входе: спиннер → слоган из центра → fade out → fade in сайта *******/

#intro{
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: black; z-index: 1000;
	display: none; align-items: center; justify-content: center;
	transition: opacity 1.2s ease;
}
body.intro #intro{ display: flex; }
#intro.hide{ display: flex; opacity: 0; pointer-events: none; }   /* остаётся flex, пока гаснет, иначе исчезнет рывком */
/* сайт под оверлеем не трогаем: fade in сайта = плавное исчезновение чёрного оверлея (фон и содержимое вместе) */

#introSpinner{
	width: 56px; height: 56px; border-radius: 50%;
	border: 5px solid rgba(255, 0, 128, 0.25); border-top-color: #FF0080;
	animation: ffspin 0.9s linear infinite;
	transition: opacity 0.3s;
}
#intro.spun #introSpinner{ opacity: 0; }
@keyframes ffspin{ to{ transform: rotate(360deg); } }

#introText{
	position: absolute; left: 50%; top: 50%;
	white-space: pre;                             /* строка растёт из центра посимвольно, переносов нет */
	font-family: Comic Sans MS, Arial, sans-serif; font-weight: bold; line-height: 1.1;   /* как у #slogan */
	font-size: 6vw;                               /* скрипт заменяет на размер шрифта шапки */
	color: white;
	text-shadow: 0 0 12px #FF0080, 0 0 32px #FF0080, 0 0 2px black, 1px 1px 2px black;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
}
#intro.spun #introText{ opacity: 1; }
#introText .ch{ display: inline-block; position: relative; text-align: center; vertical-align: top; }   /* слот символа фиксированной ширины */
#introText .ly{ opacity: 0; transition: opacity 120ms linear; }                                        /* слой буквы: микрофейд */
#introText .ly.b{ position: absolute; left: 0; right: 0; top: 0; }
#introText .ch.ghost{ position: absolute; pointer-events: none; white-space: pre; }                    /* шлейф буквы по её маршруту */
#introText.liquid{ filter: url(#liquid); }                                                             /* «вода» на время переезда */

/******* телефон / узкий экран (портрет): во всю ширину, узкая колонка кнопок слева, содержимое справа, высота = вьюпорт *******/

@media (max-width: 700px){
	body{ margin: 0; }
	#layout{ width: 100% !important; border-left: 0; border-right: 0; }
	#rowMid{ display: flex; align-items: stretch; }                      /* строка — флекс, чтобы поменять колонки местами */
	#rowMid > td{ display: block; width: auto !important; }
	#cellMid{ order: 2; flex: 1 1 auto; min-width: 0; }                  /* содержимое справа, всё оставшееся место */
	#cellNav{ order: 1; flex: 0 0 27vw; position: relative; padding: 4px 3px; }   /* кнопки слева; relative — для Magnezit внизу */
	#navWrap{ padding-bottom: calc(27vw * 0.75 + 12px); }               /* место под Magnezit (ширина колонки × 71/98) */
	#navWrap br{ display: none; }
	#navWrap > div{ text-align: center; }
	#navWrap > div a.nav img{ display: block; width: 100%; height: auto; margin: 4px auto; }   /* кнопка на всю ширину колонки */
	#pneumoBtn img, #magnezit img{ display: block; width: 100%; height: auto; margin: 0 auto; }
	#pneumoBtn{ display: block; margin-top: 22px; }                       /* отступ от кнопок, как два <br> на десктопе */
	#magnezit{ position: absolute; left: 3px; right: 3px; bottom: 6px; }  /* у нижнего края колонки, как на десктопе */
	#contentInner{ padding: 6px; }
	#contentInner img{ max-width: 100%; height: auto; }
	#page-home img[align="left"]{ float: none; display: block; margin: 0 auto 8px; }
	h1{ font-size: 1.2em; }
}