/* ==========================================================================
   NextKat — flowers drifting top-to-bottom inside the info boxes
   Replaces the earlier static corner motifs, which read as pasted-on.
   Four line-art flowers (rose / daisy / tulip / lavender) fall through the
   card as it travels up the viewport.

   Motion uses scroll-driven animations (animation-timeline: view()), so the
   flowers move WITH the scroll rather than firing once. Browsers without
   support get the static, already-visible flowers — no broken layout.
   ========================================================================== */

.nk-card,
.nk-moment,
.nk-step,
.nk-faq__item {
	position: relative;
	overflow: hidden;
}

/* Each box carries three flowers at different depths so the drift reads as
   depth rather than a single sprite sliding down. */
.nk-card::before,
.nk-moment::before,
.nk-step::before,
.nk-faq__item::before {
	content: "";
	position: absolute;
	z-index: 0;
	width: 66px;
	height: 66px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .95;
	pointer-events: none;
	will-change: transform;
}

/* Content must sit above the flowers. */
.nk-card > *,
.nk-moment > *,
.nk-step > *,
.nk-faq__item > * { position: relative; z-index: 1; }

/* --- placement ----------------------------------------------------------
   One flower per box, in its own lane on the right. The box reserves that
   lane with padding-right so the copy never runs underneath the flower —
   without it the text and the line-art collide and both become unreadable.

   The resting position is INSIDE the box. The drift animation only nudges it
   downward from there, so the flower is visible even when scroll-driven
   animations are unsupported.
   ------------------------------------------------------------------------ */

.nk-card,
.nk-moment,
.nk-step,
.nk-faq__item { padding-right: 92px; }

.nk-card::before,
.nk-moment::before,
.nk-step::before,
.nk-faq__item::before {
	top: 16px;
	right: 14px;
}

/* --- the four flowers, rotated by nth-child -------------------------- */

.nk-card:nth-child(4n+1)::before,
.nk-moment:nth-child(3n+1)::before,
.nk-step:nth-child(3n+1)::before,
.nk-faq__item:nth-child(4n+1)::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><g stroke='%23e11d48' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M50 34c-7 0-12 5-12 12s5 12 12 12 12-5 12-12'/><path d='M50 40c-4 0-7 3-7 7s3 7 7 7 7-3 7-7'/><path d='M50 46c-2 0-3 1-3 3s1 3 3 3'/><path d='M50 34c8 0 15 5 18 13'/><path d='M50 58v22'/><path d='M50 68c-6-4-13-3-17 3 5 5 12 5 17-1'/><path d='M50 76c6-4 13-3 17 3-5 5-12 5-17-1'/></g><g stroke='%2372836c' stroke-width='1.5' stroke-linecap='round'><path d='M50 80v14'/></g></svg>");
}
.nk-card:nth-child(4n+2)::before,
.nk-moment:nth-child(3n+2)::before,
.nk-step:nth-child(3n+2)::before,
.nk-faq__item:nth-child(4n+2)::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><g stroke='%23ca8a04' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='50' cy='36' r='6'/><path d='M50 30v-13'/><path d='M50 42v13'/><path d='M44 36h-13'/><path d='M56 36h13'/><path d='M46 32l-7-7'/><path d='M54 40l7 7'/><path d='M54 32l7-7'/><path d='M46 40l-7 7'/></g><g stroke='%2372836c' stroke-width='1.5' stroke-linecap='round'><path d='M50 55v32'/><path d='M50 72c-8 0-14 4-16 10 8 2 14-2 16-10Z'/><path d='M50 82c8 0 14 4 16 10-8 2-14-2-16-10Z'/></g></svg>");
}
.nk-card:nth-child(4n+3)::before,
.nk-moment:nth-child(3n)::before,
.nk-step:nth-child(3n)::before,
.nk-faq__item:nth-child(4n+3)::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><g stroke='%23db2777' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M50 18c-9 0-15 7-15 16 0 11 7 20 15 26 8-6 15-15 15-26 0-9-6-16-15-16Z'/><path d='M50 18c-3 5-3 11 0 17'/><path d='M50 18c3 5 3 11 0 17'/><path d='M50 60v26'/></g><g stroke='%2372836c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M50 74c-7-3-14-1-18 6 6 4 13 2 18-6Z'/><path d='M50 84c7-3 14-1 18 6-6 4-13 2-18-6Z'/></g></svg>");
}
.nk-card:nth-child(4n)::before,
.nk-faq__item:nth-child(4n)::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><g stroke='%237c3aed' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M50 16c-4 3-6 7-6 11 0 4 3 7 6 9 3-2 6-5 6-9 0-4-2-8-6-11Z'/><path d='M50 30c-5 3-7 7-7 11 0 4 3 7 7 9 4-2 7-5 7-9 0-4-2-8-7-11Z'/><path d='M50 44c-6 3-8 7-8 11 0 4 3 7 8 9 5-2 8-5 8-9 0-4-2-8-8-11Z'/><path d='M50 60v28'/></g><g stroke='%2372836c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M50 74c-8 0-14 5-15 12 8 2 14-3 15-12Z'/><path d='M50 84c8 0 14 5 15 12-8 2-14-3-15-12Z'/></g></svg>");
}

/* --------------------------------------------------------------------------
   Motion: the flowers travel from above the card down past its bottom edge as
   the card moves up the screen. `view()` maps the card's journey through the
   viewport onto the animation timeline, so scroll position drives it.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	/* The flowers stay inside the box the whole time — they start near the top
	   and drift down as the card rises through the viewport. An earlier version
	   started them above the box and let them exit below, which meant they were
	   clipped (and invisible) for most of the scroll. */
	@keyframes nk-flower-drift {
		from { transform: translateY(0) rotate(-6deg); }
		to   { transform: translateY(96px) rotate(9deg); }
	}

	.nk-card::before,
	.nk-moment::before,
	.nk-step::before,
	.nk-faq__item::before {
		animation: nk-flower-drift linear both;
		animation-timeline: view();
		/* `cover` keeps the animation live for the whole time the box is on
		   screen, so the drift is visible regardless of box height. */
		animation-range: cover 0% cover 100%;
	}

}

/* Reduced motion: keep the flowers, drop the travel. */
@media (prefers-reduced-motion: reduce) {
	.nk-card::before,
	.nk-moment::before,
	.nk-step::before,
	.nk-faq__item::before {
		animation: none !important;
		top: 18px;
		opacity: .7;
	}
}

/* Small screens: keep them clearly visible, just a little smaller. */
@media (max-width: 640px) {
	.nk-card::before,
	.nk-moment::before,
	.nk-step::before,
	.nk-faq__item::before { width: 54px; height: 54px; right: 6%; }

}