html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 }
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block; }

html { min-height: 100%; position: relative; }
html, html a {
	-webkit-font-smoothing: antialiased;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

.montserrat-all {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}

body, select, input, textarea, button { color: #353535; outline: none; }

a { outline: none; color: #3394e6; text-decoration: none; }
	a:hover { text-decoration: underline; }

	a img { border: 0 none; }
	a > img { vertical-align: bottom; }

.clr { clear: both }
.clrfix:after { clear: both; content: ""; display: block; height: 0; width: 0; visibility: hidden }

body { background: #f7f7f7; }

.head { margin-bottom: 40px; text-align: left; }
.osagych { max-width: 100%; margin: 2% auto 0 auto;}
.osagych h1 { font-size: 3em; font-weight: bold }
.osagych p { font-size: 1.5em; }
.offpage { max-width: 500px;}
.logo { text-align: center; }
	.logo > img { max-width: 120px; vertical-align: top; }
	.wrap { text-align: center; }
	.wrap > .title { font-size: 28px; display: block; margin: 4% 0 5% 0; }

	.copyright {
		position: absolute;
		bottom: 0; left: 0; right: 0;
		padding: 10px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		font-size: .8em;
		background-color: #f7f7f7;
		color: #919191;
	}
	.copyright:hover { opacity: 1; }

.e-osago-announcement {
	position: relative;
	display: inline-block;
	padding: 14px 24px;
	margin: 20px 0;
	font-family: 'Segoe UI', 'Roboto', sans-serif;
	font-size: 1.7rem;
	font-weight: 500;
	color: #1a1a2e;
	overflow: visible;
}

.magic-text {
	background: linear-gradient(
			90deg,
			#3a5efc,
			#6b45d9,
			#3a5efc,
			#5a3ad0
	);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: shineFlow 6s ease-in-out infinite;
	position: relative;
	display: inline;
}

.magic-emoji {
	color: #ffcc00;
	font-size: 1.85rem;
	position: relative;
	z-index: 2;
	display: inline-block;
	animation: emojiPulse 2s ease-in-out infinite alternate;
	text-shadow:
			0 0 8px rgba(255, 204, 0, 0.5),
			0 0 14px rgba(255, 204, 0, 0.4),
			0 0 20px rgba(255, 204, 0, 0.3);
}

.magic-emoji::after {
	content: "";
	position: absolute;
	top: -12px;
	left: -12px;
	right: -12px;
	bottom: -12px;
	border: 2px solid rgba(255, 204, 0, 0.3);
	border-radius: 50%;
	opacity: 0;
	z-index: -1;
	animation: auraFloat 3s ease-in-out infinite alternate;
	pointer-events: none;
	box-shadow: 0 0 15px 2px rgba(255, 204, 0, 0.2);
}

.e-osago-announcement::before {
	content: "";
	position: absolute;
	top: -16px;
	left: -16px;
	right: -16px;
	bottom: -16px;
	background: radial-gradient(
			ellipse at center,
			rgba(107, 69, 217, 0.2) 0%,
			rgba(138, 100, 240, 0.1) 50%,
			transparent 75%
	);
	z-index: -2;
	border-radius: 16px;
	filter: blur(12px);
	opacity: 0;
	animation: globalGlow 3s ease-in-out infinite alternate;
}

.sparkle {
	position: absolute;
	width: 7px;
	height: 7px;
	background: #5d4ed9;
	border-radius: 50%;
	opacity: 0;
	z-index: -1;
	pointer-events: none;
	filter: blur(1px);
}

.sparkle:nth-child(1) { top: 25%; left: 10%; animation: floatSpark 4s ease-in-out infinite 1s; }
.sparkle:nth-child(2) { top: 70%; right: 12%; width: 5px; height: 5px; background: #4a6cf7; animation: floatSpark 5s ease-in-out infinite 2s; }
.sparkle:nth-child(3) { top: 40%; right: 25%; width: 4px; height: 4px; background: #8a60f8; animation: floatSpark 6s ease-in-out infinite 3s; }

/* === НОВАЯ АНИМАЦИЯ: ВКЛЮЧЕНИЕ ПОРТАЛА === */
@keyframes portalActivate {
	0% {
		transform: scale(0.8);
		opacity: 0;
		filter: blur(5px);
	}
	70% {
		transform: scale(1.05);
		opacity: 1;
		filter: blur(0);
		text-shadow: 0 0 20px rgba(100, 80, 200, 0.8);
	}
	100% {
		transform: scale(1);
		opacity: 1;
		filter: blur(0);
	}
}

/* Применяем только при загрузке */
.e-osago-announcement {
	animation: portalActivate 1.8s ease-out 1;
	animation-fill-mode: forwards; /* чтобы остался в финальном состоянии */
}

/* Остальные анимации (уже как были) */
@keyframes shineFlow {
	0% { background-position: 0% 50%; }
	100% { background-position: 300% 50%; }
}

@keyframes emojiPulse {
	0% {
		transform: scale(1);
		text-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
	}
	100% {
		transform: scale(1.12);
		text-shadow:
				0 0 12px rgba(255, 204, 0, 0.6),
				0 0 20px rgba(255, 204, 0, 0.7),
				0 0 30px rgba(255, 204, 0, 0.5);
	}
}

@keyframes auraFloat {
	0% { opacity: 0.3; transform: scale(0.9); }
	100% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes globalGlow {
	0% { opacity: 0.3; }
	100% { opacity: 0.6; }
}

@keyframes floatSpark {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
		opacity: 0;
	}
	20% { opacity: 0.7; }
	50% {
		transform: translateY(-25px) rotate(8deg);
		opacity: 0.5;
	}
	80% { opacity: 0.2; }
}