/**
 * FX Surface — лёгкий «стеклянный» набор эффектов.
 *
 * Подключается 1–3 классами:
 *   .surface--glass   — тонкое стекло + внутренний stroke + мягкая тень
 *   .surface--glow    — статичный ореол-подсветка по краям (без анимации)
 *   .surface--reveal  — плавное появление при попадании в вьюпорт
 *                       (до входа — opacity:0 + translateY + rotateX(6deg);
 *                        после  — полностью видно).
 *
 * GPU-дружелюбно: анимируются только transform и opacity.
 */

/* ---------- GLASS ---------- */
.surface--glass {
	position: relative;
	background: rgb(20 20 24 / 0.55);
	border: 1px solid rgb(255 255 255 / 0.08);
	border-radius: 18px;
	box-shadow:
		0 30px 80px rgb(0 0 0 / 0.45),
		inset 0 1px 0 rgb(255 255 255 / 0.08);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	isolation: isolate; /* чтобы псевдоэлементы не «вылезали» за тенью */
}

/* Светлый вариант — для блоков на чёрном фоне, где нужна бежево-молочная поверхность */
.surface--glass.is-light {
	background: rgb(255 255 255 / 0.88);
	border-color: rgb(0 0 0 / 0.06);
	box-shadow:
		0 30px 80px rgb(0 0 0 / 0.2),
		inset 0 1px 0 rgb(255 255 255 / 0.8);
}

/* Лёгкий блик у верхней кромки — имитация отражённого света */
.surface--glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		180deg,
		rgb(255 255 255 / 0.18),
		rgb(255 255 255 / 0) 40%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 0;
}

/* ---------- GLOW (статичный, без keyframes) ---------- */
.surface--glow {
	position: relative;
}

.surface--glow::after {
	content: "";
	position: absolute;
	inset: -40px;
	z-index: -1;
	background:
		radial-gradient(
			40% 40% at 15% 30%,
			rgb(245 192 106 / 0.14),
			transparent 60%
		),
		radial-gradient(
			40% 40% at 85% 70%,
			rgb(120 170 255 / 0.12),
			transparent 60%
		);
	filter: blur(30px);
	pointer-events: none;
	opacity: 0.9;
}

/* ---------- EDGE GLOW (контурное свечение в стиле huly.io) ----------
 *
 * Как работает:
 *   ::before — тонкое цветное кольцо по периметру (conic-gradient + mask),
 *              угол старта (--angle) плавно вращается → «бегущий» ореол.
 *   ::after  — мягкое размытое свечение под карточкой (glow-halo).
 *
 * Карточке нужен position: relative и border-radius (наследуется).
 * По умолчанию эффект приглушённый; при :hover — становится ярче.
 */
.surface--edge-glow {
	position: relative;
	isolation: isolate;
	/* Маска на самой карточке «прорезает» тонкую рамку-кольцо шириной 2px.
	   Через неё виден вращающийся ::before под карточкой. */
	--edge-thickness: 2px;
}

/*
 * Вращающийся conic-gradient «под» карточкой.
 * ::before шире карточки в 2×, центрирован и крутится через transform:rotate.
 * Видимым остаётся только тонкое кольцо по периметру — благодаря ::after,
 * который накрывает центр цветом фона карточки.
 */
.surface--edge-glow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 200%;
	height: 200%;
	transform: translate(-50%, -50%) rotate(0deg);
	background: conic-gradient(
		from 0deg,
		rgb(245 170 90 / 0)     0deg,
		rgb(245 170 90 / 1)     40deg,
		rgb(255 210 140 / 1)    70deg,
		rgb(245 170 90 / 0)    120deg,
		rgb(110 160 255 / 0)   210deg,
		rgb(110 160 255 / 1)   260deg,
		rgb(180 210 255 / 1)   290deg,
		rgb(110 160 255 / 0)   340deg
	);
	pointer-events: none;
	z-index: 0;
	animation: surface-edge-rotate 5s linear infinite;
	will-change: transform;
}

/*
 * «Вырезает» центр карточки, оставляя видимым только кольцо 2px.
 * ВАЖНО: перекрывает контент — поэтому нужно, чтобы реальный контент
 * карточки лежал ВЫШЕ ::after через z-index (делаем это точечно ниже).
 */
.surface--edge-glow::after {
	content: "";
	position: absolute;
	inset: var(--edge-thickness);
	border-radius: inherit;
	background: var(--edge-fill, #111113); /* фон «под» кольцом */
	pointer-events: none;
	z-index: 1;
}

/* Мягкое сияние-ореол под карточкой */
.surface--edge-glow::after {
	content: "";
	position: absolute;
	inset: -24px;
	border-radius: inherit;
	background:
		radial-gradient(
			55% 45% at 15% 20%,
			rgb(245 170 90 / 0.28),
			transparent 70%
		),
		radial-gradient(
			55% 45% at 85% 80%,
			rgb(110 160 255 / 0.28),
			transparent 70%
		);
	filter: blur(18px);
	opacity: 0;
	pointer-events: none;
	z-index: -1;
	transition: opacity 500ms ease;
}

.surface--edge-glow:hover::before,
.surface--edge-glow:focus-within::before {
	opacity: 1;
}

.surface--edge-glow:hover::after,
.surface--edge-glow:focus-within::after {
	opacity: 1;
}

@keyframes surface-edge-rotate {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- Модификатор: только золотое свечение, ярче ---------- */
.surface--edge-glow--gold {
	--edge-thickness: 3px; /* толще кольцо */
	/* Halo-ореол снаружи через box-shadow — overflow:hidden родителя не режет его */
	box-shadow:
		0 0 22px rgb(255 190 100 / 0.25),
		0 0 50px rgb(255 190 100 / 0.15);
	transition: box-shadow 400ms ease;
}

.surface--edge-glow--gold::before {
	/* Золотое кольцо по всему периметру.
	   Все остановки с альфой ≥ 0.55, чтобы низ/правая сторона
	   (которые дальше от центра и потому «тоньше» в conic-gradient)
	   тоже оставались видимо-золотыми. */
	background: conic-gradient(
		from 0deg,
		rgb(255 190 100 / 0.7)    0deg,
		rgb(255 230 160 / 1)     45deg,
		rgb(255 245 200 / 1)     90deg,
		rgb(255 200 120 / 0.75) 135deg,
		rgb(255 180 90 / 0.65)  180deg,
		rgb(255 200 120 / 0.75) 225deg,
		rgb(255 230 160 / 1)    270deg,
		rgb(255 245 200 / 1)    315deg,
		rgb(255 190 100 / 0.7)  360deg
	);
	filter: blur(0.5px) saturate(1.25) brightness(1.05);
}

.surface--edge-glow--gold:hover {
	box-shadow:
		0 0 32px rgb(255 190 100 / 0.5),
		0 0 70px rgb(255 190 100 / 0.3);
}

/* Вариант «всегда горит» — без необходимости наводить курсор.
   Используем для блоков, где эффект должен быть постоянным. */
.surface--edge-glow.is-always-on::before {
	opacity: 1;
}
.surface--edge-glow.is-always-on::after {
	opacity: 0.65;
}

/* ---------- REVEAL ---------- */
.surface--reveal {
	opacity: 0;
	transform: translate3d(0, 60px, 0) scale(0.96);
	transition:
		opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
	will-change: opacity, transform;
}

.surface--reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* Небольшой поворот по X — только для «крупных» карточек */
.surface--reveal.is-tilted {
	transform: translate3d(0, 60px, 0) rotateX(10deg) scale(0.96);
	transform-origin: 50% 100%;
	perspective: 1400px;
}

.surface--reveal.is-tilted.is-visible {
	transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
}

/* Задержки для последовательного появления группы карточек */
.surface--reveal.is-delay-1 { transition-delay: 100ms; }
.surface--reveal.is-delay-2 { transition-delay: 200ms; }
.surface--reveal.is-delay-3 { transition-delay: 300ms; }
.surface--reveal.is-delay-4 { transition-delay: 400ms; }
.surface--reveal.is-delay-5 { transition-delay: 500ms; }
.surface--reveal.is-delay-6 { transition-delay: 600ms; }
.surface--reveal.is-delay-7 { transition-delay: 700ms; }
.surface--reveal.is-delay-8 { transition-delay: 800ms; }

/* ---------- Адаптация для слабых устройств / reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.surface--reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* На мобилках снимаем backdrop-filter — он дорогой; заменяем на плотный фон */
@media (max-width: 768px) {
	.surface--glass {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgb(20 20 24 / 0.88);
	}
	.surface--glass.is-light {
		background: rgb(255 255 255 / 0.96);
	}
	.surface--glow::after {
		display: none;
	}
}