/* «Выбор NPK» — изолированные стили, подключаются только на главной (functions.php).
   Design freeze: docs/NPK_CONCEPT_B_PLUS_PLUS_FINAL.md §21 — палитра/композиция/CTA
   не менять без нового design-approval цикла. Токены скопированы в область видимости
   компонента, а не в :root, чтобы не пересекаться с существующими --main-color и т.п. */

.npk-choice,
.npk-choice-seam-bridge,
.npk-choice-seam-exit {
	--npk-ink: #14140f;
	--npk-graphite: #23231d;
	--npk-services-bg: #f5f8f9; /* совпадает с фоном header__nav в head.php — нейтральный якорь перехода */
	--npk-white: #ffffff;
	--npk-gold: #c8a15b;
	--npk-gold-dim: #8a734a;
	--npk-muted: #a89e8c;
	--npk-font-display: 'Unbounded', sans-serif;
	--npk-font-body: 'Raleway', sans-serif;
}

.npk-choice *,
.npk-choice-seam-bridge *,
.npk-choice-seam-exit * { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
	.npk-choice *, .npk-choice-seam-bridge *, .npk-choice-seam-exit * {
		transition-duration: .01ms !important;
		animation: none !important;
	}
}

/* ── переходы ─────────────────────────────────────────────── */
.npk-choice-seam-bridge {
	height: 110px;
	background: linear-gradient(180deg, var(--npk-services-bg) 0%, var(--npk-ink) 100%);
	display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
}
.npk-choice-seam-bridge span {
	font-family: var(--npk-font-display); font-size: 12px; font-weight: 500;
	letter-spacing: .16em; text-transform: uppercase;
	background: linear-gradient(90deg, #8a8577 0%, var(--npk-gold) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.npk-choice-seam-exit {
	height: 90px;
	background: linear-gradient(180deg, var(--npk-ink) 0%, var(--npk-services-bg) 100%);
}

/* ── секция ───────────────────────────────────────────────── */
.npk-choice { background: var(--npk-ink); color: var(--npk-white); padding: 52px 0 0; font-family: var(--npk-font-body); }
.npk-choice__head {
	/* .wrapper (main.css) уже центрирует и ограничивает ширину — свой padding не добавляем */
	display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
	padding-bottom: 36px;
}
.npk-choice__head-left { max-width: 600px; }
.npk-choice__kicker {
	font-family: var(--npk-font-display); font-size: 12px; font-weight: 500;
	letter-spacing: .22em; text-transform: uppercase; color: var(--npk-gold);
	margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.npk-choice__kicker::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: var(--npk-gold-dim); }
.npk-choice__title {
	font-family: var(--npk-font-display) !important; font-size: 38px; font-weight: 700;
	letter-spacing: -.015em; line-height: 1.06; color: var(--npk-white); margin: 0;
}
.npk-choice__head-right { font-size: 13.5px; color: rgba(247,245,240,.5); line-height: 1.65; max-width: 280px; padding-bottom: 6px; }

/* ── carousel shell (Swiper) ──────────────────────────────── */
.npk-choice__carousel { position: relative; }
.npk-choice .swiper-container { overflow: hidden; height: 620px; }
.npk-choice .swiper-wrapper { align-items: stretch; }

.npk-choice__nav-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 44px; height: 44px; border: 1px solid rgba(247,245,240,.25);
	background: rgba(20,20,15,.35); color: var(--npk-white);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	opacity: .55; transition: opacity .2s ease, border-color .2s ease; padding: 0;
}
.npk-choice__nav-arrow:hover, .npk-choice__nav-arrow:focus-visible { opacity: 1; border-color: var(--npk-gold); }
.npk-choice__nav-arrow:focus-visible { outline: 2px solid var(--npk-gold); outline-offset: 3px; }
.npk-choice__nav-arrow.prev { left: 20px; }
.npk-choice__nav-arrow.next { right: 20px; }
.npk-choice__nav-arrow svg { width: 16px; height: 16px; }
.npk-choice__nav-arrow.swiper-button-disabled { opacity: .15; pointer-events: none; }

/* ── slide ────────────────────────────────────────────────── */
/* ВНИМАНИЕ: ширину слайда НЕЛЬЗЯ анимировать. Проверено на боевом сайте:
   с `transition: width` переход не завершался — Swiper в обработчике смены
   слайда вызывает update(), тот трогает геометрию, анимация перезапускается,
   и ширина оставалась на прежнем значении. В результате класс .is-hero уже
   стоял на новом слайде, а ширину сохранял старый: карусель превращалась в
   ряд одинаковых узких карточек, а activeIndex застревал (snapGrid считался
   по неверным ширинам). Замер: слайд с .is-hero отдавал 173px вместо 1066px.
   С мгновенной шириной переключение работает 0→1→2→3→4, hero всегда ровно
   один и всегда 1066px. Плавность даёт собственная анимация Swiper
   (transform) и появление текста панели ниже по файлу. */
.npk-choice__slide { position: relative; height: 100%; overflow: hidden; background: var(--npk-graphite); }
/* Фиксированные px, не % — Swiper сам выставляет .swiper-wrapper явную
   ширину в px, читая ширины слайдов; при width:% на слайдах это создаёт
   циклическую зависимость (wrapper ждёт детей, дети ждут wrapper) —
   после повторного swiper.update() все слайды схлопывались в 0px и
   карусель блокировалась (найдено на живом production). Значения
   калибруются под ~60%/15% для типичного desktop-контейнера (~1425px). */
/* Ширины в vw, а не в % — процент считается от .swiper-wrapper, ширину
   которого Swiper сам вычисляет по слайдам, из-за чего возникала круговая
   зависимость и все слайды схлопывались в 0px. vw привязан к вьюпорту и
   от wrapper не зависит, поэтому snapGrid остаётся корректным, а активная
   карточка занимает ~74% ширины карусели на любом десктопе (фикс. px
   давали всего ~60% на широких экранах). clamp() удерживает разумные
   границы на очень узких и очень широких мониторах. */
.npk-choice__slide.is-hero { width: clamp(320px, 74vw, 1500px); }
.npk-choice__slide.is-side { width: clamp(96px, 12vw, 260px); }

/* Полный контент (вердикт/факты/CTA/цена) есть на каждом слайде в DOM —
   какой слайд сейчас "hero" переключает JS (main.js, on slideChange).
   is-side — только имя+локация, остальное скрыто, не удалено. */
.npk-choice__slide.is-side .npk-choice__price-chip,
.npk-choice__slide.is-side .npk-choice__verdict,
.npk-choice__slide.is-side .npk-choice__facts,
.npk-choice__slide.is-side .npk-choice__cta { display: none; }
.npk-choice__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: filter 1s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.npk-choice__img.swiper-lazy { opacity: 0; }
.npk-choice__img.swiper-lazy-loaded { opacity: 1; }
.npk-choice__slide.is-side .npk-choice__img { filter: grayscale(85%) sepia(15%) brightness(.6) contrast(1.05); }
.npk-choice__slide.is-side:hover .npk-choice__img,
.npk-choice__slide.is-side:focus-within .npk-choice__img { filter: grayscale(20%) sepia(6%) brightness(.85); transform: scale(1.025); }
.npk-choice__media-link { position: absolute; inset: 0; z-index: 1; }
.npk-choice__scrim {
	position: absolute; inset: 0;
	/* Панель — full-width (.npk-choice__panel), поэтому диагональный градиент
	   слева должен доходить дальше вправо, а нижний — быть заметно сильнее и
	   выше, чтобы текст/факты/CTA читались независимо от яркости конкретного
	   фото объекта (проверено на реальных фото — были случаи потери контраста
	   белого текста на светлых участках). Верхние ~40% кадра остаются светлыми. */
	/* Панель с текстом начинается на 45% высоты карточки, а прежний нижний
	   градиент к этой отметке давал всего ~0.13 альфы — на светлых рендерах
	   (напр. ЖК Победа) название и вердикт почти сливались с фото. Нижний
	   градиент растянут до ~82% и усилен в средней зоне; верхние ~18% кадра
	   остаются чистыми, фото по-прежнему главный визуальный объект. */
	background: linear-gradient(100deg, rgba(14,14,10,.86) 0%, rgba(14,14,10,.5) 30%, rgba(14,14,10,.14) 62%, rgba(14,14,10,0) 82%),
	            linear-gradient(0deg, rgba(8,8,6,.96) 0%, rgba(8,8,6,.9) 22%, rgba(8,8,6,.72) 40%, rgba(8,8,6,.42) 55%, rgba(8,8,6,.12) 70%, rgba(8,8,6,0) 82%);
}
/* Дополнительная страховка для текста поверх ярких участков фото. */
.npk-choice__slide.is-hero .npk-choice__panel { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
/* Специфичнее исходного правила ниже по файлу — иначе оно перебивало цвет. */
.npk-choice__slide.is-hero .npk-choice__verdict-reason { color: rgba(250,249,246,.95); }
.npk-choice__slide.is-side .npk-choice__scrim { background: linear-gradient(0deg, rgba(20,20,15,.75) 0%, rgba(20,20,15,.1) 45%); }

.npk-choice__panel { position: absolute; left: 0; bottom: 0; width: 100%; padding: 36px 44px 38px; z-index: 3; }
.npk-choice__slide.is-side .npk-choice__panel { padding: 20px 18px 22px; }
.npk-choice__toprow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.npk-choice__loc { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--npk-gold); }
.npk-choice__slide.is-side .npk-choice__loc { font-size: 9.5px; opacity: .85; }
.npk-choice__price-chip { font-family: var(--npk-font-display); font-size: 12px; color: rgba(247,245,240,.55); font-weight: 300; }

.npk-choice__name { font-family: var(--npk-font-display); font-weight: 700; font-size: 42px; letter-spacing: -.015em; line-height: 1.02; color: var(--npk-white); margin: 0 0 20px; }
.npk-choice__name a { color: inherit; text-decoration: none; }
.npk-choice__name a:focus-visible { outline: 2px solid var(--npk-gold); outline-offset: 4px; }
.npk-choice__slide.is-side .npk-choice__name { font-size: 17px; margin-bottom: 0; opacity: .9; }

.npk-choice__verdict {
	display: flex; gap: 16px; align-items: flex-start; max-width: 440px; margin-bottom: 20px;
	padding-top: 18px; border-top: 1px solid rgba(200,161,91,.32);
}
.npk-choice__seal { flex: 0 0 50px; width: 50px; height: 50px; position: relative; color: var(--npk-gold); }
.npk-choice__seal svg { width: 100%; height: 100%; }
.npk-choice__seal-code { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--npk-font-display); font-weight: 300; font-size: 12px; color: var(--npk-gold); font-variant-numeric: tabular-nums; }
.npk-choice__verdict-label { font-family: var(--npk-font-display); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--npk-gold); margin-bottom: 6px; }
.npk-choice__verdict-reason { font-size: 13.5px; line-height: 1.5; color: rgba(247,245,240,.85); }

.npk-choice__offer { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(200,161,91,.25); }
.npk-choice__offer-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.npk-choice__offer-label span:first-child { font-family: var(--npk-font-display); font-size: 9.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--npk-gold); }
.npk-choice__offer-label span:last-child { font-size: 10.5px; color: rgba(247,245,240,.4); }
.npk-choice__offer-terms { font-family: var(--npk-font-display); font-size: 15px; font-weight: 500; color: var(--npk-white); line-height: 1.28; }

.npk-choice__facts { display: flex; gap: 0; font-size: 13px; color: var(--npk-gold); font-weight: 600; margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.npk-choice__facts-sep { color: rgba(200,161,91,.4); margin: 0 10px; font-weight: 400; }

.npk-choice__cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.npk-choice__btn-primary {
	position: relative; display: inline-block; font-family: var(--npk-font-body);
	font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--npk-ink); background: var(--npk-white); padding: 15px 28px; text-decoration: none;
}
.npk-choice__btn-primary:hover, .npk-choice__btn-primary:focus-visible { background: var(--npk-gold); }
.npk-choice__btn-primary:focus-visible { outline: 2px solid var(--npk-white); outline-offset: 3px; }
.npk-choice__btn-ghost {
	font-family: var(--npk-font-body); font-size: 12.5px; font-weight: 600;
	color: rgba(247,245,240,.75); text-decoration: none; position: relative; padding-bottom: 3px;
}
.npk-choice__btn-ghost::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--npk-gold-dim); transform: scaleX(.3); transform-origin: left; transition: transform .3s ease; }
.npk-choice__btn-ghost:hover::after, .npk-choice__btn-ghost:focus-visible::after { transform: scaleX(1); background: var(--npk-gold); }
.npk-choice__btn-ghost:focus-visible { outline: 2px solid var(--npk-gold); outline-offset: 3px; }

/* ── progress strip ───────────────────────────────────────── */
.npk-choice__progress { display: flex; align-items: center; gap: 10px; padding: 20px 0 40px; }
.npk-choice__progress-idx, .npk-choice__progress-total { font-family: var(--npk-font-display); font-size: 12px; color: var(--npk-gold); font-variant-numeric: tabular-nums; }
.npk-choice__progress-total { color: rgba(247,245,240,.4); }
.npk-choice__progress-track { width: 200px; height: 1px; background: rgba(247,245,240,.18); position: relative; }
.npk-choice__progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--npk-gold); transition: width .4s ease; }
.npk-choice__progress-hint { margin-left: auto; font-size: 11px; color: rgba(247,245,240,.35); }

.npk-choice__noscript-list { list-style: none; margin: 0; padding: 24px 0 40px; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.npk-choice__noscript-list a { color: var(--npk-gold); font-family: var(--npk-font-body); font-size: 13px; }

/* ── sequential reveal (JS добавляет .in-view один раз при входе в viewport) ── */
.npk-choice__slide.is-hero .npk-choice__toprow,
.npk-choice__slide.is-hero .npk-choice__name,
.npk-choice__slide.is-hero .npk-choice__verdict,
.npk-choice__slide.is-hero .npk-choice__cta { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.npk-choice__slide.is-hero .npk-choice__facts { opacity: 0; transition: opacity .5s ease; }
/* Reveal ключуется на секции (.npk-choice--seen, добавляется один раз при первом
   входе секции в зону видимости — npk-choice.js), а не на конкретном слайде —
   иначе повторный свайп на уже виденный объект каждый раз проигрывал бы анимацию
   заново, что не соответствует "один раз при первом появлении" (design freez §21). */
.npk-choice--seen .npk-choice__slide.is-hero .npk-choice__toprow,
.npk-choice--seen .npk-choice__slide.is-hero .npk-choice__name,
.npk-choice--seen .npk-choice__slide.is-hero .npk-choice__verdict,
.npk-choice--seen .npk-choice__slide.is-hero .npk-choice__cta,
.npk-choice--seen .npk-choice__slide.is-hero .npk-choice__facts { opacity: 1; transform: none; }
.npk-choice--seen .npk-choice__slide.is-hero .npk-choice__name { transition-delay: .08s; }
.npk-choice--seen .npk-choice__slide.is-hero .npk-choice__verdict { transition-delay: .2s; }
.npk-choice--seen .npk-choice__slide.is-hero .npk-choice__cta { transition-delay: .5s; }
.npk-choice--seen .npk-choice__slide.is-hero .npk-choice__facts { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
	.npk-choice__slide.is-hero .npk-choice__toprow, .npk-choice__slide.is-hero .npk-choice__name,
	.npk-choice__slide.is-hero .npk-choice__verdict, .npk-choice__slide.is-hero .npk-choice__cta,
	.npk-choice__slide.is-hero .npk-choice__facts { opacity: 1; transform: none; }
}

/* ── mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
	.npk-choice-seam-bridge { height: 60px; padding-bottom: 9px; }
	.npk-choice-seam-bridge span { font-size: 10px; }
	.npk-choice-seam-exit { height: 60px; }
	.npk-choice { padding: 28px 0 0; }
	.npk-choice__head { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 18px; }
	.npk-choice__title { font-size: 22px; }
	.npk-choice__head-right { max-width: none; padding-bottom: 0; font-size: 12.5px; }
	.npk-choice .swiper-container { height: 500px; padding-left: 18px; }
	.npk-choice__slide.is-hero { width: 88vw; max-width: 342px; }
	.npk-choice__slide.is-side { width: 13vw; max-width: 50px; }
	.npk-choice__nav-arrow { display: none; } /* на touch — свайп, стрелки только desktop, см. отчёт */
	.npk-choice__panel { padding: 16px 16px 18px; }
	.npk-choice__name { font-size: 23px; margin-bottom: 10px; }
	.npk-choice__verdict { padding-top: 10px; margin-bottom: 10px; gap: 9px; }
	.npk-choice__seal { flex-basis: 34px; width: 34px; height: 34px; }
	.npk-choice__seal-code { font-size: 8.5px; }
	.npk-choice__verdict-label { font-size: 8px; }
	.npk-choice__verdict-reason { font-size: 10.5px; }
	.npk-choice__facts { font-size: 10.5px; margin-bottom: 12px; }
	.npk-choice__cta { gap: 10px; }
	.npk-choice__btn-primary { flex: 1; text-align: center; font-size: 11px; padding: 13px 10px; }
	.npk-choice__progress { padding: 14px 0 24px; }
	.npk-choice__progress-hint { display: none; }
}


/* ── NPK: читаемость поверх фото и знак «Вердикт NPK» (TASK 2) ────────────
   Цена печаталась белым с прозрачностью .55 — на светлых кадрах она почти
   пропадала, хотя это одна из главных величин на карточке. Золото остаётся
   фирменным акцентом для меток, но несущий смысл мелкий текст делаем
   светлым и контрастным. */
.npk-choice__slide.is-hero .npk-choice__price-chip {
	color: rgba(250, 249, 246, .95);
	font-size: 14px;
	letter-spacing: .01em;
}
.npk-choice__slide.is-hero .npk-choice__facts { color: rgba(250, 249, 246, .93); }
.npk-choice__slide.is-hero .npk-choice__facts-sep { color: var(--npk-gold); opacity: .75; }
.npk-choice__slide.is-hero .npk-choice__loc { color: #dcb877; }
/* Тень мягкая и только под текстом — фото не затемняется дополнительно. */
.npk-choice__slide.is-hero .npk-choice__name { text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.npk-choice__slide.is-hero .npk-choice__price-chip,
.npk-choice__slide.is-hero .npk-choice__facts,
.npk-choice__slide.is-hero .npk-choice__verdict-reason { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

/* Знак «Вердикт NPK». Круг больше не пустой: внутри марка НПК (или код
   объекта, если куратор его задал). */
.npk-choice__seal-mark {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--npk-font-display);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: .06em;
	color: var(--npk-gold);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
	.npk-choice__seal-mark { font-size: 9px; }
	.npk-choice__slide.is-hero .npk-choice__price-chip { font-size: 12px; }
}


/* ── NPK: превью-карточки — подсказка без переключения ────────────────────
   Наведение больше не делает карточку активной (см. npk-choice.js): выбор
   происходит только по клику, стрелкам и свайпу. Поэтому hover обязан ясно
   сообщать «сюда можно нажать», не меняя раскладку: курсор-указатель, снятие
   обесцвечивания и лёгкий подъём яркости. Ширина при этом не трогается —
   любая анимация ширины на слайде Swiper ломает его геометрию. */
.npk-choice__slide.is-side { cursor: pointer; }
.npk-choice__slide.is-side:hover .npk-choice__name,
.npk-choice__slide.is-side:focus-within .npk-choice__name { opacity: 1; }
.npk-choice__slide.is-side::after {
	content: '';
	position: absolute; inset: 0;
	border: 1px solid transparent;
	transition: border-color .25s ease;
	pointer-events: none;
	z-index: 2;
}
.npk-choice__slide.is-side:hover::after,
.npk-choice__slide.is-side:focus-within::after { border-color: var(--npk-gold); }

/* NPK 1.5: simultaneous HERO crossfade. The old visual is an inert overlay,
   so Swiper always calculates only the final slide geometry. */
.npk-choice__slide--outgoing { position:absolute !important; z-index:8; pointer-events:none; margin:0 !important; opacity:1; transform:translate3d(0,0,0) scale(1); transition:opacity .66s cubic-bezier(.4,0,.2,1),transform .66s cubic-bezier(.4,0,.2,1) !important; }
.npk-choice__slide--outgoing.npk-choice__slide--outgoing-active { opacity:0; }
.npk-choice__slide--outgoing-left.npk-choice__slide--outgoing-active { transform:translate3d(-24px,0,0) scale(.995); }
.npk-choice__slide--outgoing-right.npk-choice__slide--outgoing-active { transform:translate3d(24px,0,0) scale(.995); }
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering .npk-choice__img { opacity: .08; transform: scale(1.012); transition: none; }
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering.npk-choice__slide--entering-active .npk-choice__img { opacity: 1; transform: scale(1); transition: opacity .66s cubic-bezier(.4,0,.2,1), transform .72s cubic-bezier(.4,0,.2,1), filter .66s ease; }
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering .npk-choice__toprow,
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering .npk-choice__name,
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering .npk-choice__verdict,
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering .npk-choice__facts,
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering .npk-choice__cta { opacity: 0; transform: translateY(14px); transition: none; }
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering.npk-choice__slide--entering-active .npk-choice__toprow,
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering.npk-choice__slide--entering-active .npk-choice__name,
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering.npk-choice__slide--entering-active .npk-choice__verdict,
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering.npk-choice__slide--entering-active .npk-choice__facts,
.npk-choice--seen .npk-choice__slide.is-hero.npk-choice__slide--entering.npk-choice__slide--entering-active .npk-choice__cta { opacity: 1; transform: none; transition: opacity .42s ease, transform .46s cubic-bezier(.22,.7,.24,1); }
.npk-choice--seen .npk-choice__slide--entering-active .npk-choice__toprow { transition-delay: .03s; }
.npk-choice--seen .npk-choice__slide--entering-active .npk-choice__name { transition-delay: .07s; }
.npk-choice--seen .npk-choice__slide--entering-active .npk-choice__verdict { transition-delay: .13s; }
.npk-choice--seen .npk-choice__slide--entering-active .npk-choice__facts { transition-delay: .18s; }
.npk-choice--seen .npk-choice__slide--entering-active .npk-choice__cta { transition-delay: .23s; }
@media (prefers-reduced-motion: reduce) {
    .npk-choice__slide--entering, .npk-choice__slide--entering *, .npk-choice__slide--outgoing { transition: none !important; animation: none !important; }
}