/* Базовые переменные и сброс */
:root{
	--pad:55px;
	--bg-dark:#000000;
	--bg-home:#203450;
	--text:#ffffff;
	--text-dim:#9aa3ad;
	--menu-gap:18px;
	--menu-size:21px; /* Inter Regular 21px */
	--radius:14px;
	--shadow:0 10px 30px rgba(0,0,0,0.25);
	/* Плавная шкала: 600px → 13px, 1512px → ~30px, cap 34px на 1920+ */
	--fz-main: clamp(13px, calc(1.864vw + 1.82px), 34px);
}
/* Светлая тема для отдельных слайдов */
.theme-light{
	--text:#000000;
	--text-dim:#595959;
}
*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
html,body,#app{margin:0;padding:0}
body{
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
	background:#000;
	color:var(--text);
}

/* Общие контейнеры вью */
.view{
	position:relative;
	min-height:100vh;
	width:100vw;
	overflow:hidden;
}

/* Главный экран */
.home{
	background:var(--bg-home);
}
.home__video{
	position:fixed;
	inset:0;
	width:100vw;
	height:100vh;
	object-fit:cover;
	pointer-events:none;
	filter:saturate(1.05) contrast(1.05) brightness(1.02);
}
.home__noise{
	position:fixed;
	inset:0;
	pointer-events:none;
}
.home__text{
	position:relative;
	z-index:2;
	padding:var(--pad);
	max-width:50vw;
	text-align:left;
	font-weight:400;
	line-height:140%;
	font-size:var(--fz-main);
}

/* Двухколоночный типовой слайд */
.slide-two-col{
	display:flex;
	min-height:100vh;
}
.slide-two-col .slide-left,
.slide-two-col .slide-right{
	width:50vw;
	min-height:100vh;
	position:relative;
}
.slide-two-col .slide-left{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	/* justify-content:flex-end; */
	padding:var(--pad);
}
.slide-two-col .slide-left .main-text{
	width:100%;
	text-align:left;
	font-weight:400;
	line-height:140%;
	font-size:var(--fz-main);
}
.slide-two-col .slide-right .main-text{
	width:100%;
	text-align:left;
	font-weight:400;
	line-height:140%;
	font-size:var(--fz-main);
}
.slide-two-col .slide-right{
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.video-holder{
	position:relative;
	width:100%;
	height:100%;
}
.video-holder video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.video-holder img{
	position:absolute;
	inset:0;
	/* width:100%; */
	height:100%;
	object-fit:contain; /* вписываем без обрезки */
}
.video-holder iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
	background:transparent;
}
.noise-overlay{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events:none;
	image-rendering:pixelated;
}

/* Плавное появление медиа */
.media-fade{
	opacity:0;
	transition:opacity .45s ease;
}
.media-fade.loaded{
	opacity:1;
}

/* Оверлей загрузки + верхняя полоса прогресса */
#preloader{
	position:fixed;
	inset:0;            /* на весь экран */
	background:#000;
	display:grid;
	place-items:center;
	z-index:1000;
	transition:opacity .35s ease, visibility .35s ease;
}
#preloader[aria-hidden="true"]{
	opacity:0;
	visibility:hidden;
}
.preloader__spinner{
	height:70vh;        /* 70% высоты экрана */
	width:auto;
	max-width:100vw;
	display:block;
}
#preloaderProgress{
	position:fixed;
	top:0; left:0;
	height:4px;
	width:0%;
	background:#fff;
	z-index:1001;
	transition:width .2s ease;
}
#preloaderProgress[aria-hidden="true"]{
	opacity:0;
	visibility:hidden;
}

/* Блокировка портретной ориентации на мобильных */
.orientation-overlay{
	position:fixed;
	inset:0;
	background:#000;
	color:#fff;
	display:none;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:24px;
	z-index:100000;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
	font-size: clamp(16px, 2.4vw, 20px);
	line-height:1.4;
}
.orientation-overlay__icon{ width:120px; height:auto; opacity:.95; display:block; margin:0 auto 18px; }
.orientation-overlay__content{ max-width:540px; opacity:.9; }
@media screen and (orientation: portrait) and (max-width: 1024px){
	.orientation-overlay{ display:flex; }
	html, body{ height:100%; overflow:hidden; }
}

/* Слайд 01 — центрированный логотип + фон-эффект */
.slide-01{
	display:grid;
	place-items:center;
	min-height:100vh;
	background:#000;
	position:relative;
}
.slide-01__burst{
	position:absolute;
	inset:0;
	pointer-events:none;
	mix-blend-mode:lighten;
	background: radial-gradient(600px 600px at 50% 50%, rgba(255,0,122,0.25), rgba(77,61,255,0.15), transparent 70%);
	transition: background-position 0.15s ease-out;
}
.slide-01__logo{
	position:relative;
	z-index:2;
	display:block;
	width:45vw;
	margin-top: 45px;
	height:auto;
	filter:drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}

/* Нижнее меню (общее) */
.footer{
	position:fixed;
	left:var(--pad);
	bottom:var(--pad);
	display:flex;
	align-items:center;
	gap:var(--menu-gap);
	z-index:50;
	font-size:var(--menu-size);
}
.footer a, .footer button{
	color:var(--text);
	text-decoration:none;
	background:transparent;
	border:none;
	cursor:pointer;
	padding:0;
	font:inherit;
}
.footer__brand:hover,
.footer__resume:hover,
.footer__project:hover{opacity:0.8}
/* На главном экране у "Шведюк Д.А." отключаем визуальный hover */
.is-home .footer__brand:hover,
.is-home .footer__brand:focus,
.is-home .footer__brand:active{opacity:1 !important}
.footer__nav{
	display:none;
}
.footer__arrow{display:none}
.footer__project{display:none}
.footer__interactive{display:none}

/* Боковое меню */
#sideMenu{
	position:fixed;
	top:0; right:0;
	height:100vh;
	width:max(50vw, 820px);
	background:#0d0d10;
	color:var(--text);
	transform:translateX(110%);
	transition:transform .28s ease;
	z-index:60;
	display:flex;
	flex-direction:column;
	box-shadow:-16px 0 40px rgba(0,0,0,0.45);
}
#sideMenu[aria-hidden="false"]{transform:translateX(0)}
#sideMenuBackdrop{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,0.35);
	backdrop-filter: blur(2px);
	opacity:0;
	pointer-events:none;
	transition:opacity .2s ease;
	z-index:55;
}
#sideMenuBackdrop[aria-hidden="false"]{
	opacity:1;
	pointer-events:auto;
}

/* На светлых слайдах цвета сайд-меню остаются белыми */
.theme-light #sideMenu,
.theme-light #sideMenu .side-item__title,
.theme-light #sideMenu .side-item__num,
.theme-light #sideMenu .side-item__badge,
.theme-light #sideMenu .side-menu__title,
.theme-light #sideMenu .side-menu__close{
	color:#fff;
}
.side-menu__header{
	display:none;
}
.side-menu__title{
	font-weight:600;
	font-size:22px;
}
.side-menu__close{
	width:56px;height:56px;
	display:grid;place-items:center;
	border-radius:16px;
	padding:8px;
	background:rgba(0,0,0,0.3);
	backdrop-filter: blur(40px);
	border:1px solid rgba(255,255,255,0.2);
	transition:background .12s ease, transform .12s ease;
}
.side-menu__close:hover{background:rgba(255,255,255,0.2); transform:translateY(-1px)}
.side-menu__close:active{background:rgba(255,255,255,0.3)}
.side-menu__close img{width:28px;height:28px;display:block}
.side-menu__list{
	padding:55px;
	overflow:auto;
	display:grid;
	grid-template-columns: repeat(3, minmax(160px, 1fr)) max-content;
	column-gap:36px;
	row-gap:10px;
	align-content:start;
	font-size:13px;
}
.side-col{
	display:flex;
	flex-direction:column;
	gap:10px;
	min-width:0;
}
.side-menu__close--grid{
	justify-self:end;
	align-self:start;
}
.side-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px 10px;
	border-radius:8px;
	cursor:pointer;
	transition:background .12s ease;
}
.side-item:hover{background:rgba(255,255,255,0.06)}
.side-item__num{
	display:inline-block;
	min-width:20px;
	color:var(--text-dim);
	font-weight:500;
	font-size:13px;
}
.side-item__title{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:13px;
}
.side-item__badge{
	color:var(--text-dim);
	font-size:13px;
}
.side-item--active{background:rgba(255,255,255,0.12)}

/* Эффект курсора для тайпинга */
.typewriter__cursor{
	animation:blink .9s step-end infinite
}
@keyframes blink{50%{opacity:0}}

/* Переносы строк из исходного текста */
.typewriter__content{
	white-space: pre-line;
}

/* Правый верх: проект и интерактивность */
.top-right{
	position:fixed;
	top:var(--pad);
	right:var(--pad);
	z-index:50;
	text-align:right;
	font-size:var(--menu-size);
}
.top-right__project{
	background:transparent;
	color:var(--text);
	border:none;
	cursor:pointer;
	padding:0;
	font:inherit;
}
.top-right__project:hover{opacity:.85}
.top-right__interactive{
	margin-top:6px;
	color:rgba(255, 255, 255, 0.80);;
	position:relative; /* для тултипа */
}
/* Tooltip для "интерактивный ✦" */
.top-right__interactive::after{
	content: 'На этом слайде интерактивный фон — просто поводите мышкой по экрану';
	position:absolute;
	top: calc(100% + 8px);
	right: 0;
	max-width: 320px;
	background: rgba(0, 0, 0, 0.60);
	color:#fff;
	padding: 10px 12px;
	border-radius: 10px;
	font-size:12px;
	line-height:1.35;
	white-space: normal;
	opacity:0;
	visibility:hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 100;
	pointer-events: none;
	text-align: left;
}
.top-right__interactive:hover::after,
.top-right__interactive:focus-visible::after{
	opacity:1;
	visibility:visible;
	transform: translateY(0);
}

/* Правый низ: стрелки навигации */
.controls{
	position:fixed;
	right:var(--pad);
	bottom:var(--pad);
	z-index:50;
	display:flex;
	align-items:center;
	gap:4px;
	padding:8px;
	border-radius:16px;
	/* background:rgba(255,255,255,0.06); */
	background: rgba(0, 0, 0, 0.30);
	backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.20);
	/* box-shadow: var(--shadow); */
}
.controls__arrow{
	width:49px;
    height:40px;
	display:grid;place-items:center;
	border:none;
	border-radius:8px;
	background:transparent;
	cursor:pointer;
	transition:background .12s ease, transform .12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.controls__arrow:hover{
	background:rgba(255,255,255,0.08);
	transform:translateY(-1px);
}
.controls__arrow img{
	width:40px;height:26px;display:block
}
.controls__arrow:focus,
.controls__arrow:focus-visible{
	/* outline:none; */
	/* box-shadow:none; */
	/* как hover */
	background:rgba(255,255,255,0.08);
	transform:translateY(-1px);
}
.controls__arrow::-moz-focus-inner{border:0}

/* Центрированный текстовый блок фиксированной высоты */
.center-text-box{
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:min(900px, calc(100vw - 2*var(--pad)));
	height:300px;
	display:flex;
	align-items:flex-start; /* печать начинается сверху */
	justify-content:flex-start;
	overflow:hidden; /* чтобы рост текста не сдвигал компоновку */
	padding:0 var(--pad);
	z-index:2;
}
.center-text-box .main-text{
	width:100%;
	text-align:left;
	font-weight:400;
	line-height:140%;
	font-size:var(--fz-main);
}
/* гарантируем одинаковую ширину области печати */
.center-text-box .typewriter{
	display:block !important;
	width:100%;
}

/* Фоновое изображение: высота 100vh, центрируется по вертикали (и по горизонтали) */
.bg-fullheight-center{
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	height:100vh;
	width:auto;
	z-index:1;
	pointer-events:none;
}

/* Фоновое видео/изображение: ширина 100vw, центр по вертикали и горизонтали */
.bg-fullwidth-center{
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:100vw;
	height:auto;
	z-index:1;
	pointer-events:none;
}

/* Фоновое изображение: ширина 100vw, прижато к низу */
.bg-fullwidth-bottom{
	position:fixed;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	width:100vw;
	height:auto;
	z-index:1;
	pointer-events:none;
}

/* Фоновый iframe: высота 100vh, центр по вертикали */
.bg-iframe-fullheight-center{
	position:fixed;
	left:0;
	top:0;
	transform:none;
	width:100vw;
	height:100vh;
	border:0;
	z-index:1;
	background:transparent;
}

/* Правый фиксированный iframe на фоне */
.iframe-right{
	position:fixed;
	inset:0;
	width:100vw;
	height:100vh;
	border:0;
	z-index:1;
}

/* Адаптивность */
@media (max-width: 900px){
	.home__text{max-width:50vw}
	/* .slide-two-col{display:block} */
	.slide-two-col .slide-left,
	.slide-two-col .slide-right{width:50vw}
	.slide-two-col .slide-right{min-height:50vh}
	.center-text-box {padding:0px; width: auto; height: auto;}
	.footer{left:var(--pad); bottom:var(--pad)}
}
a {
    color: #24A1de;
}

a:hover {
    color: #1e8fc8;
}

/* Главная (00): у "Шведюк Д.А." цвет и ховер не меняются */
.is-home .footer__brand,
.is-home .footer__brand:visited,
.is-home .footer__brand:hover,
.is-home .footer__brand:focus,
.is-home .footer__brand:active{
	color: var(--text) !important;
	opacity: 1 !important;
	text-decoration: none !important;
}
/* Мобильные отступы */
@media (max-width: 900px){
	:root{
		--pad:16px;
	}
	/* В сайд-меню padding был зафиксирован в 55px — переопределяем */
	#sideMenu .side-menu__list{
		padding:16px;
	}
}