/* ==========================================================================
   Экраны устройств — Device Screens
   ========================================================================== */

.ds {
	--ds-max-width: 100%;
	--ds-ratio: 16 / 10;
	--ds-radius: 0px;
	--ds-dur: 800ms;
	--ds-delay: 0ms;
	--ds-hover-dur: 4s;
	--ds-shift: 0px;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ds-max-width);
	margin: 2.2em auto;
	padding: 0;
	line-height: 1;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds.ds--align-left  { margin-left: 0;    margin-right: auto; }
.ds.ds--align-right { margin-left: auto; margin-right: 0; }

.ds__device { position: relative; }

/* --- экран ------------------------------------------------------------- */
.ds__screen {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--ds-ratio);
	background: #fff;
	border-radius: var(--ds-radius);
	isolation: isolate;
	-webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: скругление + transform */
}
.ds__screen.ds__screen--fixed { aspect-ratio: auto; }

.ds .ds__screen img.ds__img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	user-select: none;
	-webkit-user-drag: none;
}
a.ds__link { display: block; color: inherit; text-decoration: none; border: 0; box-shadow: none; }

/* режим hover: прокрутка при наведении */
.ds[data-ds-scroll="hover"] .ds__img {
	transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
}
.ds[data-ds-scroll="hover"] .ds__screen:hover .ds__img,
.ds[data-ds-scroll="hover"].is-scrolled .ds__img {
	transform: translate3d(0, var(--ds-shift), 0);
	transition-duration: var(--ds-hover-dur);
	transition-timing-function: linear;
}
.ds[data-ds-scroll="hover"] .ds__screen { cursor: ns-resize; }

/* режим manual: собственная прокрутка колесом/пальцем */
.ds[data-ds-scroll="manual"] .ds__screen {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	-webkit-mask-image: none;
}
.ds[data-ds-scroll="manual"] .ds__img { will-change: auto; }

/* подпись */
.ds__caption {
	margin: 1.1em auto 0;
	font-size: .875em;
	line-height: 1.45;
	text-align: center;
	opacity: .75;
}

/* ==========================================================================
   1. Браузер
   ========================================================================== */
.ds--browser .ds__device {
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, .09),
		0 24px 50px -22px rgba(15, 23, 42, .45),
		0 8px 16px -10px rgba(15, 23, 42, .2);
}
.ds__bar {
	position: relative;
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 14px;
	background: #eceef1;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ds__dots { display: flex; gap: 7px; flex: 0 0 auto; }
.ds__dots i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.ds__dots i:nth-child(2) { background: #febc2e; }
.ds__dots i:nth-child(3) { background: #28c840; }
.ds__address {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: min(58%, 460px);
	height: 26px;
	padding: 0 12px;
	border-radius: 7px;
	background: #fff;
	color: #555;
	font-size: 12.5px;
	line-height: 26px;
	white-space: nowrap;
	overflow: hidden;
}
.ds__address span { overflow: hidden; text-overflow: ellipsis; }
.ds__address svg { flex: 0 0 auto; width: 11px; height: 11px; opacity: .6; }

.ds--browser.ds--theme-dark .ds__device { background: #1e1f22; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 50px -22px rgba(0,0,0,.7); }
.ds--browser.ds--theme-dark .ds__bar { background: #2b2d31; border-bottom-color: rgba(255,255,255,.06); }
.ds--browser.ds--theme-dark .ds__address { background: #1b1c1f; color: #b9bbc0; }

@media (max-width: 520px) {
	.ds__bar { height: 32px; padding: 0 10px; }
	.ds__dots { gap: 5px; }
	.ds__dots i { width: 9px; height: 9px; }
	.ds__address { height: 20px; font-size: 11px; line-height: 20px; width: 62%; left: 58%; }
}

/* ==========================================================================
   2. Смартфон
   ========================================================================== */
.ds--phone {
	--ds-max-width: 320px;
	--ds-ratio: 9 / 19.5;
	--ds-frame: #1a1a1c;
	--ds-edge: #3b3b3f;
}
.ds--phone .ds__device {
	padding: 3.6%;
	border-radius: 15% / 7%;
	background: var(--ds-frame);
	box-shadow:
		inset 0 0 0 2px var(--ds-edge),
		inset 0 0 0 5px var(--ds-frame),
		0 30px 60px -28px rgba(0, 0, 0, .55),
		0 10px 20px -12px rgba(0, 0, 0, .3);
}
.ds--phone .ds__screen { border-radius: 11.5% / 5.3%; background: #000; }
.ds--phone .ds__island {
	position: absolute;
	z-index: 3;
	top: 5.2%;
	left: 50%;
	transform: translateX(-50%);
	width: 30%;
	height: 3.4%;
	border-radius: 99px;
	background: #000;
	pointer-events: none;
}
.ds--phone .ds__island::after { /* камера */
	content: "";
	position: absolute;
	right: 12%;
	top: 50%;
	width: 18%;
	aspect-ratio: 1;
	transform: translateY(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #2a3350 0 25%, #0a0c14 60%);
}
/* боковые кнопки */
.ds--phone .ds__device::before,
.ds--phone .ds__device::after {
	content: "";
	position: absolute;
	width: 3px;
	border-radius: 2px;
	background: var(--ds-edge);
}
.ds--phone .ds__device::before { left: -3px; top: 20%; height: 14%; }
.ds--phone .ds__device::after  { right: -3px; top: 26%; height: 11%; }

.ds--phone.ds--theme-light { --ds-frame: #e9e9ee; --ds-edge: #c7c7cc; }
.ds--phone.ds--theme-light .ds__device { box-shadow: inset 0 0 0 2px var(--ds-edge), inset 0 0 0 5px var(--ds-frame), 0 30px 60px -28px rgba(0,0,0,.35); }
.ds--phone.ds--theme-light .ds__screen { background: #fff; }

/* ==========================================================================
   3. Ноутбук
   ========================================================================== */
.ds--laptop { --ds-lid: #0e0e10; --ds-rim: #c4c7cc; --ds-base-1: #e6e8eb; --ds-base-2: #b3b7bd; }
.ds--laptop .ds__lid {
	position: relative;
	width: 84%;
	margin: 0 auto;
	padding: 2.6% 2.6% 3%;
	border-radius: 3.2% 3.2% 0 0 / 5% 5% 0 0;
	background: var(--ds-lid);
	box-shadow: 0 0 0 2px var(--ds-rim), 0 0 0 3px rgba(0,0,0,.08);
}
.ds--laptop .ds__lid::before { /* камера */
	content: "";
	position: absolute;
	top: 1.05%;
	left: 50%;
	width: .7%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: #2a2d35;
}
.ds--laptop .ds__screen { border-radius: 2px; background: #fff; }
.ds--laptop .ds__base {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 2.6%;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	background: linear-gradient(180deg, var(--ds-base-1) 0%, var(--ds-base-1) 35%, var(--ds-base-2) 100%);
	box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55);
}
.ds--laptop .ds__base::before { /* выемка для открытия */
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 15%;
	height: 45%;
	transform: translateX(-50%);
	border-radius: 0 0 10px 10px;
	background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.06));
}
.ds--laptop.ds--theme-dark { --ds-rim: #4a4c52; --ds-base-1: #5b5e64; --ds-base-2: #2f3135; }

/* ==========================================================================
   4. Появление при прокрутке (reveal)
   Класс .ds-js ставится на <html> скриптом в <head> — без JS всё видно сразу.
   ========================================================================== */
.ds-js .ds-reveal {
	--ds-shift-x: clamp(0px, 4vw, 60px);
	opacity: 0;
	transition:
		opacity   var(--ds-dur, 800ms) cubic-bezier(.2, .7, .2, 1) var(--ds-delay, 0ms),
		transform var(--ds-dur, 800ms) cubic-bezier(.2, .7, .2, 1) var(--ds-delay, 0ms),
		filter    var(--ds-dur, 800ms) cubic-bezier(.2, .7, .2, 1) var(--ds-delay, 0ms);
}
.ds-js .ds-reveal.ds-anim-fade-up    { transform: translate3d(0, 40px, 0); }
.ds-js .ds-reveal.ds-anim-fade-down  { transform: translate3d(0, -40px, 0); }
.ds-js .ds-reveal.ds-anim-slide-left { transform: translate3d(calc(var(--ds-shift-x) * -1), 0, 0); }
.ds-js .ds-reveal.ds-anim-slide-right{ transform: translate3d(var(--ds-shift-x), 0, 0); }
.ds-js .ds-reveal.ds-anim-zoom       { transform: scale(.9); }
.ds-js .ds-reveal.ds-anim-blur       { filter: blur(14px); transform: scale(1.03); }
.ds-js .ds-reveal.ds-anim-flip       { transform: perspective(1400px) rotateX(22deg) translate3d(0, 40px, 0); transform-origin: 50% 100%; }
.ds-js .ds-reveal.ds-anim-fade       { transform: none; }

.ds-js .ds-reveal.is-visible,
.ds-js .ds-reveal.ds-anim-none {
	opacity: 1;
	transform: none;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.ds-js .ds-reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
	.ds[data-ds-scroll="hover"] .ds__img { transition: none !important; }
}

@media print {
	.ds-js .ds-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}