/*
 * Free World Kids — motion layer
 * A light, buoyant rhythm for the existing Manrope / Tovari visual system.
 * Every decorative motion is optional; the content remains complete without JS.
 */

/* Arabic characters drift around the portrait, like little discoveries. */
.hero-art .arabic-float {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(42px, 5.2vw, 64px);
	aspect-ratio: 1;
	border: 1px solid rgba(65, 80, 103, .12);
	border-radius: 42% 58% 54% 46% / 54% 42% 58% 46%;
	background: rgba(255, 253, 249, .92);
	color: var(--ink);
	font: 400 clamp(25px, 3vw, 36px)/1 Georgia, "Times New Roman", serif;
	box-shadow: 0 12px 28px rgba(65, 80, 103, .12);
	pointer-events: none;
	will-change: transform;
	animation: fwk-letter-drift 5.8s ease-in-out infinite;
}

.hero-art .arabic-float--1 { top: 13%; right: 11%; color: var(--pink-dark); animation-delay: -1.1s; }
.hero-art .arabic-float--2 { top: 35%; left: 2%; background: #d8efff; animation-delay: -3.4s; }
.hero-art .arabic-float--3 { right: 2%; bottom: 38%; background: #fff6d6; animation-delay: -2.2s; }
.hero-art .arabic-float--4 { bottom: 12%; left: 14%; color: var(--blue-deep); animation-delay: -.4s; }
.hero-art .arabic-float--5 { top: 5%; left: 29%; width: clamp(34px, 4vw, 48px); background: #fbe3ec; animation-delay: -4.1s; }

@keyframes fwk-letter-drift {
	0%, 100% { transform: translateY(0) rotate(-7deg); }
	50% { transform: translateY(-11px) rotate(5deg); }
}

/* Benefits move as one considered sequence, then respond softly to a pointer. */
.benefit-grid .benefit {
	transition: translate .32s cubic-bezier(.2, .75, .25, 1), rotate .32s ease, box-shadow .32s ease;
}

.benefit-grid .benefit:hover {
	translate: 0 -5px;
	rotate: -.35deg;
	box-shadow: 0 18px 34px rgba(65, 80, 103, .13);
}

.benefit-grid .benefit:nth-child(2):hover,
.benefit-grid .benefit:nth-child(5):hover {
	rotate: .35deg;
}

.benefit-grid .benefit.is-visible:nth-child(1) { animation-delay: 0ms; }
.benefit-grid .benefit.is-visible:nth-child(2) { animation-delay: 90ms; }
.benefit-grid .benefit.is-visible:nth-child(3) { animation-delay: 160ms; }
.benefit-grid .benefit.is-visible:nth-child(4) { animation-delay: 230ms; }
.benefit-grid .benefit.is-visible:nth-child(5) { animation-delay: 300ms; }

.benefit-mark {
	transition: transform .45s cubic-bezier(.2, .75, .25, 1), opacity .3s ease;
}

.benefit:hover .benefit-mark {
	transform: rotate(0deg) translateY(-4px);
	opacity: .3;
}

/* The ordered list keeps its own numbering: the connecting line makes the route legible. */
.steps {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps > .step {
	position: relative;
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 24px 0 32px;
	list-style: none;
}

.steps > .step::marker { content: ""; }

.steps > .step::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 77px;
	bottom: -1px;
	left: 25px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--pink) 0%, rgba(38, 137, 204, .42) 100%);
	transform-origin: top center;
}

.steps > .step:last-child::before { display: none; }

.steps > .step .step-num {
	position: relative;
	z-index: 1;
	border: 3px solid #e6f4ff;
	box-shadow: 0 0 0 1px rgba(65, 80, 103, .1), 0 6px 14px rgba(65, 80, 103, .12);
	transition: transform .3s cubic-bezier(.2, .75, .25, 1), background-color .3s ease, box-shadow .3s ease;
}

.steps > .step:hover .step-num {
	transform: scale(1.08) rotate(-5deg);
	background: var(--blue-deep);
	box-shadow: 0 0 0 4px rgba(38, 137, 204, .12), 0 9px 18px rgba(65, 80, 103, .15);
}

.steps > .step h3 {
	transition: color .25s ease, transform .3s ease;
}

.steps > .step:hover h3 {
	color: var(--pink-dark);
	transform: translateX(3px);
}

.steps > .step.is-visible::before {
	animation: fwk-connector-arrive .7s cubic-bezier(.2, .75, .25, 1) both;
}

.steps > .step.is-visible .step-num {
	animation: fwk-step-arrive .55s cubic-bezier(.2, .75, .25, 1) both;
}

.steps > .step:nth-child(2).is-visible .step-num { animation-delay: 90ms; }
.steps > .step:nth-child(3).is-visible .step-num { animation-delay: 180ms; }
.steps > .step:nth-child(4).is-visible .step-num { animation-delay: 270ms; }

@keyframes fwk-connector-arrive {
	from { transform: scaleY(.25); }
	to { transform: scaleY(1); }
}

@keyframes fwk-step-arrive {
	from { transform: scale(.84) rotate(-7deg); }
	to { transform: scale(1) rotate(0); }
}

/* Parent photo and storybook illustration retain their original proportions. */
.parent-note img {
	width: 100%;
	height: 330px;
	object-fit: cover;
	border-radius: 20px 20px 0 0;
}

.method-illustration {
	width: 340px;
	transition: transform .45s cubic-bezier(.2, .75, .25, 1);
}

.method-illustration:hover {
	transform: translateY(-5px) rotate(-1deg);
}

/* Not open yet: clear status, readable copy, and no misleading purchase controls. */
.tariff-card--soon {
	position: relative;
	border: 1px solid rgba(65, 80, 103, .18);
	background: #fff4d4;
	box-shadow: 0 20px 50px rgba(104, 67, 13, .13);
}

.tariff-card--soon::before {
	content: "СКОРО";
	position: absolute;
	top: 16px;
	right: 17px;
	z-index: 2;
	padding: 7px 11px;
	border: 1px solid rgba(65, 80, 103, .22);
	border-radius: 99px;
	background: #fffdf9;
	color: var(--ink);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .1em;
}

.tariff-card--soon .tariff-controls,
.tariff-card--soon .price-line,
.tariff-card--soon [data-lead-open] {
	display: none;
}

.tariff-card--soon .tariff-coming-soon {
	display: block;
	margin-top: 26px;
	padding: 18px 20px;
	border: 1px solid rgba(65, 80, 103, .15);
	border-radius: 18px;
	background: rgba(255, 253, 249, .76);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
}

.tariff-card--soon .tariff-top {
	padding-right: 68px;
}

.tariff-card--soon .button:disabled {
	background: #e7dfce;
	color: #526072;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}
.coming-soon-label { font-size: 11px; letter-spacing: .12em; color: #80631d; }
.tariff-coming-soon h4 { font: 400 30px/1.1 var(--font-display); margin: 12px 0; }
.tariff-coming-soon p { margin: 0; }
.tariff-card:not(.tariff-card--soon) .tariff-illustration { width: 110px; height: 110px; }

@media (max-width: 720px) {
	.hero-art .arabic-float--1 { right: 9%; top: 12%; }
	.hero-art .arabic-float--2 { left: 0; top: 36%; }
	.hero-art .arabic-float--3 { right: 0; bottom: 34%; }
	.hero-art .arabic-float--4 { left: 12%; bottom: 9%; }
	.hero-art .arabic-float--5 { left: 27%; top: 3%; }

	.steps > .step {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 14px;
		padding: 20px 0 24px;
	}

	.steps > .step::before {
		top: 63px;
		left: 20px;
	}

	.steps > .step .step-num {
		border-width: 2px;
	}

	.parent-note img {
		height: 230px;
		border-radius: 16px 16px 0 0;
	}

	.tariff-card--soon::before {
		top: 13px;
		right: 13px;
	}
}

@media (max-width: 380px) {
	.hero-art .arabic-float { width: 38px; font-size: 23px; }
	.hero-art .arabic-float--5 { width: 32px; }
	.tariff-card--soon .tariff-top { padding-right: 56px; }
	.tariff-card--soon .tariff-coming-soon { padding: 15px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-art .arabic-float,
	.benefit-grid .benefit,
	.benefit-mark,
	.steps > .step .step-num,
	.steps > .step h3,
	.method-illustration {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		translate: none !important;
		rotate: none !important;
	}

	.steps > .step.is-visible::before {
		animation: none !important;
		transform: scaleY(1);
	}
}