/* =========================================================================
   Batley Pharmacy — components
   Reusable pieces: buttons, header and navigation, cards, ratings, forms.
   Layout that positions these on the page lives in sections.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.btn {
	--btn-bg: var(--color-primary);
	--btn-fg: var(--color-on-primary);
	--btn-border: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.8125rem 1.75rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-border);
	border-radius: var(--radius-pill);
	/* Button labels are the one place the design switches family: IBM Plex
	   Sans at 16px over a 20px line with 0.1px tracking. */
	font-family: var(--font-button);
	font-size: 1rem;
	font-weight: var(--fw-medium);
	line-height: 1.25;
	letter-spacing: var(--ls-button);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.btn:hover {
	color: var(--btn-fg);
	transform: translateY(-2px);
	box-shadow: var(--shadow-primary);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	--btn-bg: var(--color-primary);
	--btn-fg: var(--color-on-primary);
}

.btn--primary:hover {
	--btn-bg: var(--color-primary-hover);
}

.btn--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--color-primary);
	--btn-border: var(--color-primary);
}

.btn--secondary:hover {
	--btn-bg: var(--color-primary);
	--btn-fg: var(--color-on-primary);
}

.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--color-heading);
	--btn-border: var(--color-border);
}

.btn--ghost:hover {
	--btn-bg: var(--color-surface-muted);
	--btn-fg: var(--color-heading);
	box-shadow: none;
}

/* On a coloured card the button inverts to white. */
.btn--on-color {
	--btn-bg: #ffffff;
	--btn-fg: var(--color-heading);
}

.btn--on-color:hover {
	--btn-bg: rgba(255, 255, 255, 0.88);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.btn--sm { padding: 0.5625rem 1.25rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1rem 2.25rem; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

.btn__icon {
	flex-shrink: 0;
	transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__icon {
	transform: translateX(3px);
}

/* Circular icon-only action, as used on the reviews badge. */
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--color-surface-soft);
	color: var(--color-heading);
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn-icon:hover {
	background: var(--color-primary-100);
	color: var(--color-primary);
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   Site header
   ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--color-surface);
	border-bottom: 1px solid transparent;
	transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Toggled from main.js once the page scrolls: the bar takes the palest step
   of the brand blue scale, so the stuck state reads at a glance while the
   dark text and blue button keep their contrast. */
.site-header.is-stuck {
	background: var(--color-primary-50);
	border-bottom-color: var(--color-primary-100);
	box-shadow: var(--shadow-sm);
}

/* The grey pills would sink into the tint, so they turn white against it. */
/* The items are plain text since 2026-10-29, so nothing changes under them. */
.site-header.is-stuck .nav-pills__pill,
.site-header.is-stuck .nav-pills__pill:hover {
	background: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: 5rem;
}

.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-branding img,
.custom-logo {
	width: auto;
	max-height: 2.75rem;
}

.site-title {
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	margin: 0;
}

.site-description {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-muted);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Primary navigation
   ---------------------------------------------------------------------- */

.primary-nav .nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 0.4rem + 1.6vw, 2.25rem);
}

.primary-nav .nav__item {
	position: relative;
}

.primary-nav .nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	padding: 0.5rem 0;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

/* Underline grows from the left on hover and on the current page. */
.primary-nav .nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-primary);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.primary-nav .nav__item:hover > .nav__link::after,
.primary-nav .nav__item:focus-within > .nav__link::after,
.primary-nav .current-menu-item > .nav__link::after,
.primary-nav .current-menu-ancestor > .nav__link::after {
	transform: scaleX(1);
}

.primary-nav .nav__link:hover,
.primary-nav .current-menu-item > .nav__link {
	color: var(--color-primary);
}

.primary-nav .nav__toggle-icon {
	transition: transform var(--dur) var(--ease);
}

.primary-nav .nav__item:hover > .nav__link .nav__toggle-icon,
.primary-nav .nav__item:focus-within > .nav__link .nav__toggle-icon {
	transform: rotate(180deg);
}

/* Dropdowns */
.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 14rem;
	margin: 0;
	padding: var(--space-2xs);
	list-style: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease),
		visibility var(--dur) var(--ease);
}

.primary-nav .nav__item:hover > .sub-menu,
.primary-nav .nav__item:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu a {
	display: block;
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.primary-nav .sub-menu a:hover {
	background: var(--color-primary-50);
	color: var(--color-primary);
}

/* Third level opens to the side. */
.primary-nav .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin-left: var(--space-3xs);
}

/* -------------------------------------------------------------------------
   Mobile navigation
   ---------------------------------------------------------------------- */

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	transition: background-color var(--dur) var(--ease);
}

.nav-toggle:hover {
	background: var(--color-surface-muted);
}

.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.mobile-nav {
	position: fixed;
	inset: 5rem 0 0;
	z-index: var(--z-overlay);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg) var(--container-pad) var(--space-2xl);
	background: var(--color-surface);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.mobile-nav.is-open {
	opacity: 1;
	transform: translateY(0);
}

.mobile-nav .nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

/* The row holds the link and its submenu button side by side; the submenu
   itself wraps onto a new line beneath both. */
.mobile-nav .nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--color-border);
}

.mobile-nav .nav__link {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0.875rem 0;
	color: var(--color-heading);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
}

.mobile-nav .nav__link:hover {
	color: var(--color-primary);
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.submenu-toggle:hover {
	background: var(--color-surface-muted);
	color: var(--color-primary);
}

.submenu-toggle .nav__toggle-icon {
	transition: transform var(--dur) var(--ease);
}

.submenu-toggle[aria-expanded="true"] .nav__toggle-icon {
	transform: rotate(180deg);
}

.mobile-nav .sub-menu {
	flex-basis: 100%;
	list-style: none;
	margin: 0;
	padding: 0 0 var(--space-2xs) var(--space-sm);
	/* Reset the desktop dropdown treatment. */
	position: static;
	min-width: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mobile-nav .sub-menu a {
	display: block;
	padding: 0.625rem 0;
	color: var(--color-text);
	font-size: var(--fs-body);
}

/* Stops the page behind the panel from scrolling while it is open. */
body.nav-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Header navigation
   The nav design of 2026-10-29: plain labels with a chevron, 30px apart,
   Manrope medium 15; under each a plain white card - rows of 14 on 40px
   lines, a light grey-blue wash on the row under the pointer, the NHS
   mark after an NHS row, and "View All Services" with an arrow at the
   foot - which opens on hover (main.js) as well as on click and from the
   keyboard. Beside the items, two pill buttons: one filled, one outlined.
   Until 2026-10-29 the items were grey pills over tinted panels.
   ---------------------------------------------------------------------- */

.nav-pills {
	display: flex;
	align-items: center;
	gap: 1.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-pills__item {
	position: relative;
}

.nav-pills__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--color-heading);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	line-height: 1.25;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--dur) var(--ease);
}

.nav-pills__pill:hover,
.nav-pills__pill[aria-expanded="true"] {
	background: none;
	color: var(--color-primary);
}

.nav-pills__chevron {
	width: 0.75rem;
	height: 0.75rem;
	color: var(--color-text);
	transition: transform var(--dur) var(--ease);
}

.nav-pills__pill[aria-expanded="true"] .nav-pills__chevron {
	transform: rotate(180deg);
}

/* ---- The two buttons ----
   40 high on 24px of padding, Manrope 14 with the arrow after the label;
   the first filled, the second white on a pale blue line. */

.site-header__cta {
	gap: 0.5rem;
	height: 2.5rem;
	padding: 0 1.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
}

.site-header__cta .btn__icon {
	width: 0.875rem;
	height: 0.875rem;
}

.site-header__cta--outline {
	--btn-bg: #ffffff;
	--btn-fg: var(--color-primary);
	--btn-border: #b3cfe4;
}

.site-header__cta--outline:hover {
	--btn-bg: var(--color-primary-50);
	--btn-fg: var(--color-primary);
	--btn-border: var(--color-primary);
}

/* ---- The dropdown ---- */

.nav-dropdown {
	position: absolute;
	top: calc(100% + 0.5rem);
	/* The rows' text starts level with the label above. */
	left: -1.25rem;
	z-index: var(--z-overlay);
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	/* Absolutely positioned, so shrink-to-fit would otherwise measure the
	   card against the label's own width; max-content sizes it to its
	   rows, and the max-width keeps it inside the viewport. */
	width: max-content;
	max-width: calc(100vw - 2rem);
	flex-wrap: wrap;
}

/* An invisible bridge over the gap under the label, so the pointer can
   travel down to the card without the card closing on the way. */
.nav-dropdown::before {
	position: absolute;
	inset: -0.6rem 0 auto;
	height: 0.6rem;
	content: "";
}

.nav-panel {
	display: flex;
	flex-direction: column;
	min-width: 14rem;
	padding: 0.5rem;
	background: var(--color-surface);
	border: 1px solid #e6ebf0;
	border-radius: 0.625rem;
	box-shadow: 0 12px 32px rgba(15, 42, 74, 0.12);
	text-align: left;
}

/* A heading is drawn only where one dropdown holds several panels (the
   header partial decides), to tell them apart. */
.nav-panel__head {
	padding: 0.5rem 0.75rem 0.25rem;
}

.nav-panel__title {
	margin: 0;
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.nav-panel--green .nav-panel__title { color: #1e7a3f; }
.nav-panel--amber .nav-panel__title { color: #9a6b1a; }

.nav-panel__subtitle {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--fs-xs);
}

.nav-panel__list {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-panel__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.1rem 0.75rem;
	padding: 0.5625rem 0.75rem;
	border-radius: 0.375rem;
	color: var(--color-heading);
	transition: background-color var(--dur-fast) var(--ease);
}

.nav-panel__link:hover,
.nav-panel__link:focus-visible {
	background: #eef2f5;
	color: var(--color-heading);
}

.nav-panel__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: var(--fw-regular);
	line-height: 1.3;
}

.nav-panel__icon {
	flex-shrink: 0;
	color: var(--color-primary);
}

/* The NHS mark: the service's own blue lozenge with the white italic
   wordmark. */
.nav-panel__badge {
	padding: 0.05rem 0.3rem;
	background: #005eb8;
	border-radius: 3px;
	color: #ffffff;
	font-size: 0.625rem;
	font-weight: var(--fw-bold);
	font-style: italic;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* A tag on the right and a line under the label, where a menu item sets
   them (Appearance → Menus); the design's own rows carry neither. */
.nav-panel__tag {
	grid-column: 2;
	grid-row: 1;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	white-space: nowrap;
}

.nav-panel__sub {
	grid-column: 1 / -1;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	line-height: 1.4;
}

.nav-panel__promo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.25rem 0;
	padding: 0.6rem 0.75rem;
	background: #e8f1fb;
	border-radius: 0.375rem;
	color: #1b4f9c;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.nav-panel__promo:hover {
	background: var(--color-primary-100);
	color: #123a63;
}

/* "View All Services", its arrow on the right. */
.nav-panel__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.5625rem 0.75rem;
	border-radius: 0.375rem;
	color: #545759;
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1.3;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav-panel__all:hover,
.nav-panel__all:focus-visible {
	background: #eef2f5;
	color: var(--color-primary);
}

.nav-panel__all svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* -------------------------------------------------------------------------
   Media
   ---------------------------------------------------------------------- */

.media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--color-surface-muted);
}

.media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform var(--dur-slow) var(--ease-out);
}

.media--zoom:hover img {
	transform: scale(1.04);
}

/* Aspect ratios taken from the exported asset dimensions. */
.media--hero      { aspect-ratio: 1374 / 775; border-radius: var(--radius-2xl); }
.media--feature   { aspect-ratio: 793 / 466; }
.media--wide      { aspect-ratio: 387 / 245; border-radius: var(--radius-lg); }
.media--tall      { aspect-ratio: 387 / 466; }
.media--portrait  { aspect-ratio: 303 / 415; }
.media--card      { aspect-ratio: 360 / 294; border-radius: var(--radius-lg); }
.media--square    { aspect-ratio: 1; }

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */

.card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-md);
	flex: 1;
}

.card__title {
	font-size: var(--fs-h4);
}

/* The whole card is clickable, but the link itself stays the accessible
   target rather than a click handler on a div. */
.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card--linked {
	position: relative;
}

.card__excerpt {
	color: var(--color-text);
	font-size: var(--fs-sm);
}

/* The coloured panels from the design live with the composition that uses
   them, as .popular-card--* in sections.css. Their gradients are still drawn
   in CSS from the sampled endpoints rather than used as flat images, so the
   copy inside stays real text. */

/* -------------------------------------------------------------------------
   Reviews
   ---------------------------------------------------------------------- */

.review-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-md) var(--space-lg);
	background: var(--color-surface-muted);
	border-radius: var(--radius-xl);
	break-inside: avoid;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.review-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

/* The highlighted variant: the design's blue wash, palest at the top right
   and deepening toward the bottom left. */
.review-card--featured {
	background: linear-gradient(215deg, #f2f8ff 0%, #cfe3fb 45%, #8cbaf2 100%);
}

.review-card__head {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.review-card__avatar {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-divider);
}

.review-card__name {
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	margin: 0;
}

.review-card__date {
	font-size: var(--fs-sm);
	color: var(--color-muted);
}

.review-card__text {
	color: var(--color-heading);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

.review-card__text p + p {
	margin-top: var(--space-2xs);
}

/* Star rating */
.rating {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	color: var(--color-star);
}

.rating .star { flex-shrink: 0; }
.rating .star--off { opacity: 1; }

/* The Google rating card lives with the reviews composition that uses it, as
   .google-card in sections.css. */

/* -------------------------------------------------------------------------
   Forms
   ---------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary-400);
	box-shadow: 0 0 0 3px var(--color-primary-100);
}

textarea { min-height: 9rem; resize: vertical; }

label {
	display: inline-block;
	margin-bottom: var(--space-3xs);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.search-form {
	display: flex;
	gap: var(--space-2xs);
}

.search-form .search-field { flex: 1; }

/* -------------------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------------- */

.pagination {
	margin-top: var(--space-2xl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-3xs);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-2xs);
	border-radius: var(--radius-sm);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pagination .page-numbers:hover {
	background: var(--color-primary-50);
	color: var(--color-primary);
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* -------------------------------------------------------------------------
   Scroll reveal
   Elements start slightly offset and settle once observed by main.js. The
   "no-js" guard means content is visible even if JavaScript never runs.
   The rise is slow and soft (2026-10-21): 0.8s on a gentle ease-out,
   after a short wait, so nothing snaps into place. --reveal-delay, set
   on the element by its own stylesheet, holds its rise back further so
   a row of cards comes up one after another.
   ---------------------------------------------------------------------- */

.js .reveal {
	--reveal-duration: 0.8s;
	--reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--reveal-wait: 0.15s;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
	transition-delay: calc(var(--reveal-wait) + var(--reveal-delay, 0s));
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal {
		opacity: 1;
		transform: none;
	}
}