/* ============================================================
   Era Type 812 — frontend styles
   ============================================================ */

.era-type-812 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Текст ---------- */
.era-type-812 .era-text {
	position: relative;
	z-index: 2;
	margin: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	line-height: 1;
	pointer-events: none;
}

.era-type-812 .era-line {
	display: block;
	position: relative;
	font-size: clamp(48px, 12vw, 180px);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;

	/* переменные, которыми управляют контролы Elementor */
	--era-bevel: 1;
	--era-highlight: rgba(255, 255, 255, 0.9);
	--era-shadow: rgba(0, 0, 0, 0.25);

	/* почти прозрачная «стеклянная» заливка букв */
	color: rgba(255, 255, 255, 0.12);

	/* базовое размытие фона сквозь текст (перекрывается контролом «Размытие фона») */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Многослойный «рельеф» выпуклого стекла — только запасной режим (без JS).
   В стеклянном режиме этот рельеф отключён, чтобы работал стандартный
   контрол Elementor «Тень текста». */
.era-type-812:not(.era-js) .era-line {
	text-shadow:
		0 calc(1px * var(--era-bevel)) 0 var(--era-highlight),
		0 calc(-1px * var(--era-bevel)) 0 var(--era-shadow),
		calc(-1px * var(--era-bevel)) 0 0 var(--era-highlight),
		calc(1px * var(--era-bevel)) 0 0 var(--era-shadow),
		0 calc(6px * var(--era-bevel)) calc(14px * var(--era-bevel)) var(--era-shadow),
		0 0 calc(30px * var(--era-bevel)) rgba(255, 255, 255, 0.25);
}

/* ---------- Объект (3D) ---------- */
/* Оборачивающий слой растянут на весь контейнер и центрирует объект флексом,
   поэтому центр объекта всегда совпадает с центром текста. Вертикальное
   смещение задаётся через transform: translateY() на этом же слое и больше
   не конфликтует с центрированием (само вращение живёт на .era-object). */
.era-type-812 .era-object-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1000px;
	pointer-events: none;
}

.era-type-812 .era-object--front { z-index: 7; }
.era-type-812 .era-object--back  { z-index: 0; }

/* ---------- Матовое стекло (строится через JS) ---------- */
/* Слой, который размывает фон и обрезается маской по форме букв. */
.era-type-812 .era-frost {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* SVG-накладка: края/блик стеклянных букв + defs (маска, фильтр искажения). */
.era-type-812 .era-glass-svg {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	overflow: visible;
}

/* Когда JS собрал стекло — прячем «плоскую» заливку и базовое размытие исходного
   текста, чтобы не было двойного слоя. Текст остаётся прозрачным, но продолжает
   отбрасывать тень (контрол «Тень текста»), которая ложится позади стеклянных букв. */
.era-type-812.era-js .era-line {
	color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.era-type-812 .era-object {
	display: block;
	width: 320px;
	max-width: 90%;
	height: auto;
	transform-style: preserve-3d;
	will-change: transform;
	transform: rotate(0deg);
	backface-visibility: visible;
}

/* Плавная деградация при уменьшенной анимации */
@media (prefers-reduced-motion: reduce) {
	.era-type-812 .era-object {
		transition: none;
	}
}