/* ==========================================================================
   Сцена 4 - Красота: арка със сакура, листенца, трите антиоксиданта
   ========================================================================== */

.nd-be { color: var(--ink); background: #f8f1ea; }
.nd-be__bg {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(48% 60% at 76% 34%, rgba(246, 198, 208, .42), transparent 70%),
		radial-gradient(42% 52% at 8% 88%, rgba(233, 196, 120, .24), transparent 70%),
		linear-gradient(180deg, #fbf6ef 0%, #f7efe7 60%, #f3e9df 100%);
}
.nd-be__bg::after {
	content: ""; position: absolute; inset: 0; opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .36 0 0 0 0 .32 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.nd-be__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
	grid-template-areas: ". stage" "head stage" "body stage" ". stage";
	grid-template-rows: 1fr auto auto 1fr;
	column-gap: clamp(28px, 4.5vw, 84px);
}
.nd-be__head { grid-area: head; }
.nd-be__stage { grid-area: stage; }
.nd-be__body { grid-area: body; }

/* --- текстът --- */
.nd-be__eyebrow { gap: 12px; margin-bottom: 26px; }
.nd-be__eyebrow::before { display: none; }
.nd-be__ei { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 1.05rem; color: #fffdf8; background: linear-gradient(135deg, #e6a3b1, #c9787f); }
.nd-be__title { margin: 0 0 26px; font-size: clamp(2.6rem, 4.75vw, 4.45rem); font-weight: 280; line-height: 1.02; letter-spacing: -.035em; color: var(--ink); }
.nd-be__line { display: block; }
.nd-be__line--gold em {
	font-style: normal; font-weight: 330;
	background: linear-gradient(100deg, #b98431 0%, #e7c27e 35%, #d99a9a 62%, #b98431 100%); background-size: 220% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em;
	animation: ndSheen 9s ease-in-out infinite alternate;
}
.nd-be__lead { max-width: 30ch; margin: 0 0 14px; font-size: clamp(1.15rem, 1.45vw, 1.38rem); line-height: 1.5; color: var(--ink-2); font-weight: 360; }
.nd-be__motto { display: flex; align-items: center; gap: 12px; margin: 0 0 34px; font-size: clamp(1rem, 1.15vw, 1.1rem); font-style: oblique 9deg; font-weight: 420; color: #a8676d; }
.nd-be__motto::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.nd-be__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- сцената --- */
.nd-be__stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1.04; justify-self: center; align-self: center; }
.nd-be__halo { position: absolute; left: 50%; top: 40%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 228, 214, .9), rgba(246, 198, 208, .35) 55%, transparent 75%); pointer-events: none; }
.nd-be__arch, .nd-be__outline {
	position: absolute; left: 50%; top: 0; width: 64%; aspect-ratio: 900 / 1242;
	border-radius: 50% 50% 26px 26px / 36.25% 36.25% 26px 26px;
}
.nd-be__arch { translate: -50% 0; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(120, 60, 60, .45), 0 0 0 1px rgba(255, 255, 255, .5); }
.nd-be__arch picture, .nd-be__arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nd-be__arch img { transform: scale(1.06) translate(var(--ax, 0), var(--ay, 0)); transition: transform 1.2s var(--ease); }
.nd-be__sheen {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(70% 50% at 28% 12%, rgba(255, 248, 230, .5), transparent 70%),
		linear-gradient(180deg, transparent 55%, rgba(248, 230, 224, .55) 100%);
}
.nd-be__outline { translate: calc(-50% + 16px) -16px; border: 1.5px solid rgba(185, 132, 49, .5); pointer-events: none; }
.nd-be__moon { position: absolute; left: 12%; top: 12%; z-index: 2; --s: 66px; box-shadow: 0 0 0 4px #fbf6ef, 0 0 0 5px rgba(185, 132, 49, .4), 0 14px 30px -10px rgba(120, 80, 30, .5); animation: ndSpin 40s linear infinite; }
.nd-be__petals { position: absolute; left: -34%; right: -34%; top: -14%; bottom: -6%; z-index: 3; width: 168%; height: 120%; pointer-events: none; }

.nd-be__prods { position: absolute; left: 50%; bottom: 12%; z-index: 4; display: flex; align-items: flex-end; justify-content: center; width: 76%; translate: -50% 0; }
.nd-be__prod { position: relative; flex: 0 0 30%; min-width: 0; transition: transform .7s var(--ease); }
.nd-be__prod:nth-child(1) { order: 2; flex-basis: 40%; z-index: 2; margin: 0 -6%; }
.nd-be__prod:nth-child(2) { order: 1; }
.nd-be__prod:nth-child(3) { order: 3; }
.nd-be__prod img { width: 100%; filter: drop-shadow(0 22px 22px rgba(90, 40, 40, .25)); animation: ndFloat 7.5s ease-in-out infinite alternate; }
.nd-be__prod:nth-child(2) img { animation-delay: -2.5s; }
.nd-be__prod:nth-child(3) img { animation-delay: -5s; }
.nd-be__prod::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -3%; height: 10%; z-index: -1; background: radial-gradient(closest-side, rgba(90, 40, 40, .3), transparent); filter: blur(4px); }
.nd-be__prod:hover, .nd-be__prod:focus-visible, .nd-be__prod.is-on { transform: translateY(-10px); }

.nd-be__card {
	position: absolute; z-index: 5; bottom: -4%; left: 50%; translate: -50% 0; width: max-content;
	display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: 22px;
	background: rgba(255, 253, 250, .95);
	box-shadow: 0 0 0 1px rgba(201, 120, 127, .22), var(--shadow);
	color: var(--ink); line-height: 1.25; transition: transform .6s var(--ease), box-shadow .6s;
}
.nd-be__card:hover { transform: translateY(-4px); }
.nd-be__ci { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; font-size: 1.4rem; color: #fffdf8; background: linear-gradient(135deg, #e6a3b1, #b9686f); }
.nd-be__ct { display: grid; gap: 1px; font-size: .84rem; color: var(--muted); white-space: nowrap; }
.nd-be__ct small { font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #a8676d; }
.nd-be__ct b { font-size: 1.02rem; font-weight: 560; color: var(--ink); }
.nd-be__ct strong { color: var(--ink); font-weight: 640; }
.nd-be__card.is-swap .nd-be__ct { animation: beSwap .5s var(--ease); }
@keyframes beSwap { from { opacity: 0; transform: translateY(6px); } }
.nd-be__go { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 4px; border-radius: 50%; background: var(--jade-800); color: var(--gold-300); font-size: 1.1rem; transition: transform .5s var(--ease); }
.nd-be__card:hover .nd-be__go { transform: translateX(3px); }

/* --- поява --- */
.nd-anim .nd-be__stage[data-reveal] { transform: none; filter: none; }
.nd-anim .nd-be__stage .nd-be__arch { clip-path: inset(100% 0 0 0 round 300px 300px 26px 26px); }
.nd-anim .nd-be__stage.is-in .nd-be__arch { clip-path: inset(0 0 0 0 round 300px 300px 26px 26px); transition: clip-path 1.8s var(--ease) .1s; }
.nd-anim .nd-be__stage .nd-be__outline, .nd-anim .nd-be__stage .nd-be__moon { opacity: 0; }
.nd-anim .nd-be__stage.is-in .nd-be__outline { opacity: 1; transition: opacity 1.4s var(--ease) .9s; }
.nd-anim .nd-be__stage.is-in .nd-be__moon { opacity: 1; transition: opacity 1s var(--ease) 1.2s; }
.nd-anim .nd-be__stage .nd-be__prod { opacity: 0; translate: 0 40px; }
.nd-anim .nd-be__stage.is-in .nd-be__prod { opacity: 1; translate: 0 0; transition: opacity 1.1s var(--ease) 1s, translate 1.4s var(--ease) 1s, transform .7s var(--ease); }
.nd-anim .nd-be__stage.is-in .nd-be__prod:nth-child(2) { transition-delay: 1.15s, 1.15s, 0s; }
.nd-anim .nd-be__stage.is-in .nd-be__prod:nth-child(3) { transition-delay: 1.3s, 1.3s, 0s; }
.nd-anim .nd-be__stage .nd-be__card { opacity: 0; }
.nd-anim .nd-be__stage.is-in .nd-be__card { opacity: 1; transition: opacity 1s var(--ease) 1.7s, transform .6s var(--ease); }

/* --- отзивчивост --- */
@media (max-height: 820px) and (min-width: 1101px) {
	.nd-be__title { font-size: clamp(2.3rem, 3.8vw, 3.6rem); margin-bottom: 16px; }
	.nd-be__motto { margin-bottom: 24px; }
	.nd-be__stage { max-width: min(560px, calc((100svh - var(--topbar-h) - var(--bar-h) - var(--hs-ui) - 40px) * .9)); }
}
@media (max-width: 1100px) {
	.nd-be__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "body"; grid-template-rows: auto; }
	.nd-be__head, .nd-be__body { text-align: center; }
	.nd-be__eyebrow, .nd-be__motto, .nd-be__cta { justify-content: center; }
	.nd-be__lead { margin-inline: auto; }
	.nd-be__stage { max-width: 480px; margin: 18px auto 64px; }
}
@media (max-width: 760px) {
	.nd-be__eyebrow { font-size: .7rem; letter-spacing: .14em; gap: 10px; }
	.nd-be__title { font-size: clamp(2.05rem, 9.1vw, 3rem); margin-bottom: 0; }
	.nd-be__stage { width: calc(100% - 20px); margin-bottom: 70px; }
	.nd-be__moon { --s: 48px; left: 6%; }
	.nd-be__motto::before { display: none; }
	.nd-be__cta { flex-direction: column; align-items: stretch; }
	.nd-be__card { padding: 8px 10px 8px 8px; gap: 10px; bottom: -8%; }
	.nd-be__card { max-width: calc(100vw - 40px); }
	.nd-be__ct { font-size: .76rem; white-space: normal; }
	.nd-be__ct b { font-size: .92rem; }
	.nd-be__ci { width: 38px; height: 38px; font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
	.nd-be__moon, .nd-be__prod img { animation: none !important; }
}