/* ============================================================
   САМИ Сусами — ПРЕМИУМ-слой (вариант B «дорогой»)
   Подключается ПОВЕРХ main.css + widgets.css.
   Базовые токены наследуются, здесь — глубина и объём.
   ============================================================ */

/* --- Глобальный фон: мягкий mesh-градиент --- */
body {
	background:
		radial-gradient(1200px 700px at 85% -5%, rgba(245, 130, 32, 0.14), transparent 55%),
		radial-gradient(1000px 600px at -10% 30%, rgba(232, 23, 93, 0.10), transparent 55%),
		radial-gradient(900px 700px at 50% 110%, rgba(234, 247, 239, 0.9), transparent 60%),
		var(--color-bg);
	background-attachment: fixed;
}

/* --- Стеклянная шапка --- */
.site-header {
	background: rgba(255, 253, 248, 0.72);
	backdrop-filter: blur(18px) saturate(1.4);
	border-bottom: 1px solid rgba(240, 226, 214, 0.8);
	box-shadow: 0 10px 34px rgba(42, 34, 51, 0.07);
}
.site-header.is-scrolled {
	background: rgba(255, 253, 248, 0.9);
	box-shadow: 0 16px 40px rgba(42, 34, 51, 0.12);
}

/* --- Заголовки секций: градиентный мазок-подчёркивание --- */
.ss-section__head h2,
.ss-signup__contacts h2 {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

/* Плашка-надзаголовок всегда на своей строке, по центру над заголовком
   (иначе inline-block плашка вставала в одну строку с коротким заголовком). */
.ss-section__head .ss-kicker {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
.ss-section__head h2::after,
.ss-signup__contacts h2::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: -14px;
	height: 10px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
	opacity: 0.35;
	filter: blur(1px);
}
.ss-section__head { margin-bottom: clamp(48px, 5vw, 72px); }
.ss-signup__contacts h2 { display: block; }

/* --- Kicker: премиальная капсула --- */
.ss-kicker {
	background: linear-gradient(120deg, rgba(232, 23, 93, 0.14), rgba(245, 130, 32, 0.16));
	border: 1px solid rgba(232, 23, 93, 0.18);
	box-shadow: 0 6px 18px rgba(232, 23, 93, 0.12);
}

/* --- Кнопки: градиент + глянцевый блик --- */
.btn--accent,
.btn--orange {
	background: linear-gradient(135deg, var(--color-accent) 0%, #F04E8A 55%, var(--color-accent-2) 130%);
	background-size: 160% auto;
	position: relative;
	overflow: hidden;
	box-shadow:
		0 12px 28px rgba(232, 23, 93, 0.42),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--accent::before,
.btn--orange::before {
	content: "";
	position: absolute;
	top: 0; left: -80%;
	width: 55%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-22deg);
	transition: left 0.55s ease;
}
.btn--accent:hover::before,
.btn--orange:hover::before { left: 130%; }
.btn--accent:hover,
.btn--orange:hover {
	background-position: 90% center;
	transform: translateY(-3px);
	box-shadow:
		0 18px 38px rgba(232, 23, 93, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--ghost {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 2px var(--color-accent), 0 8px 20px rgba(42, 34, 51, 0.08);
}
.btn--ghost:hover {
	transform: translateY(-3px);
	box-shadow: inset 0 0 0 2px var(--color-accent-dark), 0 14px 28px rgba(232, 23, 93, 0.22);
}

/* --- Hero: объёмное фото с двойной подложкой --- */
.ss-hero {
	background:
		radial-gradient(1100px 600px at 88% -12%, rgba(245, 130, 32, 0.22), transparent 55%),
		radial-gradient(900px 560px at -8% 25%, rgba(232, 23, 93, 0.14), transparent 55%),
		var(--color-bg);
}
.ss-hero__media { position: relative; perspective: 1200px; }
.ss-hero__media::before,
.ss-hero__media::after {
	content: "";
	position: absolute;
	border-radius: var(--radius-lg);
	transition: transform 0.45s ease;
}
.ss-hero__media::before {
	inset: 26px -26px -26px 26px;
	background: linear-gradient(135deg, rgba(232, 23, 93, 0.35), rgba(245, 130, 32, 0.35));
	filter: blur(34px);
	z-index: -1;
}
.ss-hero__media::after {
	inset: 0;
	transform: rotate(0deg) translateZ(0);
	background: #fff;
	box-shadow: 0 34px 70px rgba(42, 34, 51, 0.2);
	z-index: -1;
	transform: rotate(1.2deg);
}
.ss-hero__media img {
	position: relative;
	transform: rotate(1.2deg);
	border: 10px solid #fff;
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 70px rgba(42, 34, 51, 0.22);
	transition: transform 0.45s ease;
}
.ss-hero__media:hover img { transform: rotate(0deg) scale(1.015); }
.ss-hero__media:hover::after { transform: rotate(0.4deg); }

.ss-hero__fact-symbol {
	background: linear-gradient(135deg, rgba(245, 130, 32, 0.22), rgba(232, 23, 93, 0.14));
	box-shadow: 0 6px 14px rgba(245, 130, 32, 0.22);
}

/* --- Карточки направлений: 3D-tilt + объёмная цветная тень --- */
.ss-cards { perspective: 1600px; }
.ss-card {
	position: relative;
	border: 0;
	background: linear-gradient(160deg, #fff 0%, #FFF8F0 100%);
	transform-style: preserve-3d;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	box-shadow:
		0 10px 26px rgba(42, 34, 51, 0.08),
		0 30px 60px -18px rgba(232, 23, 93, 0.14);
}
.ss-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 0 0 1px rgba(240, 226, 214, 0.65);
	pointer-events: none;
}
.ss-card:hover {
	box-shadow:
		0 18px 36px rgba(42, 34, 51, 0.12),
		0 46px 90px -20px rgba(232, 23, 93, 0.28);
}
.ss-card__media { overflow: hidden; }
.ss-card__media img { transition: transform 0.5s ease; }
.ss-card:hover .ss-card__media img { transform: scale(1.06); }
.ss-card__body { transform: translateZ(26px); }

/* --- О клубе: фото-полароид --- */
.ss-about__media { position: relative; }
.ss-about__media::before {
	content: "";
	position: absolute;
	inset: 30px -30px -30px 30px;
	background: linear-gradient(135deg, rgba(245, 130, 32, 0.35), rgba(234, 247, 239, 0.9));
	filter: blur(36px);
	z-index: -1;
}
.ss-about__media img {
	border: 10px solid #fff;
	box-shadow: 0 30px 66px rgba(42, 34, 51, 0.18);
}
.ss-about__symbol {
	background: linear-gradient(135deg, rgba(232, 23, 93, 0.16), rgba(245, 130, 32, 0.14));
	box-shadow: 0 8px 18px rgba(232, 23, 93, 0.16);
}

/* --- Возрастная линейка: парящие плашки --- */
.ss-ages__track { perspective: 1400px; }
.ss-ages__step {
	background: linear-gradient(165deg, #fff 0%, #FFF6EC 100%);
	border: 0;
	box-shadow:
		0 12px 26px rgba(42, 34, 51, 0.07),
		0 34px 60px -22px rgba(245, 130, 32, 0.22);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ss-ages__step:nth-child(even) { transform: translateY(18px); }
.ss-ages__step:hover {
	transform: translateY(-6px);
	box-shadow:
		0 18px 34px rgba(42, 34, 51, 0.1),
		0 48px 90px -22px rgba(245, 130, 32, 0.32);
}
.ss-ages__step::before {
	background: linear-gradient(135deg, var(--color-accent), #F04E8A 60%, var(--color-accent-2));
	box-shadow: 0 10px 22px rgba(232, 23, 93, 0.45);
}
.ss-ages__badge {
	background: linear-gradient(120deg, rgba(245, 130, 32, 0.2), rgba(232, 23, 93, 0.1));
	border: 1px solid rgba(245, 130, 32, 0.25);
}

/* --- Галерея: наклонные плитки --- */
.ss-gallery { perspective: 1400px; }
.ss-gallery__item {
	border: 6px solid #fff;
	box-shadow: 0 16px 36px rgba(42, 34, 51, 0.14);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ss-gallery__item:nth-child(odd) { transform: rotate(-1.4deg); }
.ss-gallery__item:nth-child(even) { transform: rotate(1.2deg); }
.ss-gallery__item:hover {
	transform: rotate(0deg) translateY(-6px) scale(1.03);
	box-shadow: 0 28px 60px rgba(42, 34, 51, 0.2);
	z-index: 2;
}

/* --- Секция записи: стеклянная форма --- */
.ss-signup__form {
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow:
		0 24px 60px rgba(42, 34, 51, 0.13),
		0 60px 110px -30px rgba(232, 23, 93, 0.18);
}
.ss-form input,
.ss-form select,
.ss-form textarea {
	background: rgba(255, 253, 248, 0.8);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ss-form input:focus,
.ss-form select:focus,
.ss-form textarea:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 4px rgba(232, 23, 93, 0.12);
}

/* --- Бегущая строка: глубже --- */
.ss-marquee {
	box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25), 0 18px 40px rgba(42, 34, 51, 0.25);
}
.ss-marquee__track span {
	background: linear-gradient(90deg, var(--color-accent-2), #FFC36B);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Подвал --- */
.site-footer { box-shadow: 0 -30px 70px -30px rgba(42, 34, 51, 0.35); }
.site-footer__social a {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.site-footer__social a:hover { transform: translateY(-2px); }

/* --- Мягкие входы --- */
.reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* --- Тач-устройства: без 3D-микроэффектов --- */
@media (hover: none) {
	.ss-card__body { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.btn--accent::before, .btn--orange::before { display: none; }
	.ss-gallery__item:nth-child(odd) { transform: none; }
	.ss-gallery__item:nth-child(even) { transform: none; }
	.ss-ages__step:nth-child(even) { transform: none; }
}