.tww-entrance,
.tww-workshop,
.tww-featured-creations,
.tww-portals,
.tww-about {
	padding-block: var(--tww-section-space);
	padding-inline: var(--tww-page-gutter);
}

.tww-entrance > *,
.tww-workshop > *,
.tww-featured-creations > *,
.tww-portals > *,
.tww-about > * {
	margin-inline: auto;
	max-width: var(--tww-content-max);
}

.tww-entrance {
	align-content: center;
	background:
		linear-gradient(180deg, rgb(11 19 43 / 38%), rgb(11 19 43 / 72%)),
		url("../images/homepage/woodland-entrance-mobile-v1.jpg") center / cover no-repeat,
		var(--tww-color-midnight);
	color: var(--tww-color-parchment);
	display: grid;
	isolation: isolate;
	min-block-size: min(48rem, 82vh);
	overflow: hidden;
	position: relative;
	text-align: center;
}

.tww-entrance::before {
	background:
		linear-gradient(180deg, rgb(11 19 43 / 38%), rgb(11 19 43 / 72%)),
		url('../images/homepage/woodland-entrance-open-mobile-v1.jpg') center / cover no-repeat;
	content: '';
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity var(--tww-motion-entrance) var(--tww-ease-standard);
	z-index: 0;
}

.tww-entrance > * {
	position: relative;
	z-index: 1;
}

.tww-entrance.is-opening::before {
	opacity: 1;
}

.tww-entrance__title {
	font-size: clamp(2.5rem, 8vw, 5.5rem);
	line-height: 1;
	margin-block-end: var(--tww-space-5);
}

.tww-entrance__introduction,
.tww-workshop__welcome,
.tww-featured-creations__introduction,
.tww-about__introduction {
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	line-height: 1.65;
	max-width: var(--tww-prose-max);
}

.tww-entrance__actions,
.tww-featured-creations__actions {
	gap: var(--tww-space-4);
	justify-content: center;
	margin-block-start: var(--tww-space-6);
}

.tww-button .wp-block-button__link {
	align-items: center;
	border: 2px solid transparent;
	border-radius: var(--tww-radius-control);
	display: inline-flex;
	font-family: var(--tww-font-body);
	font-weight: var(--tww-font-weight-semibold);
	justify-content: center;
	min-block-size: var(--tww-target-min);
	padding: var(--tww-space-3) var(--tww-space-5);
	text-decoration: none;
	transition:
		background-color var(--tww-motion-feedback) var(--tww-ease-standard),
		border-color var(--tww-motion-feedback) var(--tww-ease-standard),
		color var(--tww-motion-feedback) var(--tww-ease-standard),
		transform var(--tww-motion-feedback) var(--tww-ease-standard);
}

.tww-button--primary .wp-block-button__link {
	background-color: var(--tww-color-amber);
	color: var(--tww-color-ink);
}

.tww-button--secondary .wp-block-button__link {
	background-color: var(--tww-color-amber);
	border-color: var(--tww-color-brass);
	color: var(--tww-color-ink);
}

.tww-button .wp-block-button__link:hover {
	background-color: var(--tww-color-amber);
	border-color: var(--tww-color-amber);
	box-shadow: 0 0 0 2px rgb(169 223 245 / 20%), 0 0 1rem rgb(169 223 245 / 28%);
}

.tww-button .wp-block-button__link:active {
	transform: translateY(1px);
}

.tww-workshop {
	align-content: end;
	background:
		linear-gradient(180deg, rgb(11 19 43 / 10%) 42%, rgb(11 19 43 / 88%) 82%),
		url("../images/homepage/workshop-merlin-mobile-v1.jpg") center top / cover no-repeat,
		var(--tww-color-forest);
	color: var(--tww-color-parchment);
	display: grid;
	min-block-size: min(64rem, 92vh);
	text-align: center;
}

.tww-workshop__content {
	margin-inline: var(--tww-space-4);
	max-width: 38rem;
	padding: var(--tww-space-5);
	position: relative;
	text-align: center;
	z-index: 1;
}

.tww-workshop__title,
.tww-workshop__welcome {
	background-color: transparent;
	inline-size: 100%;
}

.tww-workshop__title {
	padding: var(--tww-space-5) var(--tww-space-5) 0;
}

.tww-workshop__title,
.tww-featured-creations__title,
.tww-portals__title,
.tww-about__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.1;
	margin-block-end: var(--tww-space-5);
}

.tww-workshop__title {
	margin-block-end: 0;
}

.tww-workshop__welcome {
	border-inline-start: 0;
	font-family: var(--tww-font-display);
	font-style: normal;
	margin-block-start: 0;
	padding: var(--tww-space-4) var(--tww-space-5) var(--tww-space-5);
	text-align: center;
}

.tww-return-entrance {
	align-items: center;
	background-color: rgb(11 19 43 / 88%);
	border: 2px solid var(--tww-color-brass);
	border-radius: var(--tww-radius-control);
	color: var(--tww-color-parchment);
	display: inline-flex;
	font-family: var(--tww-font-body);
	font-weight: var(--tww-font-weight-semibold);
	justify-content: center;
	justify-self: center;
	margin-block-start: var(--tww-space-5);
	min-block-size: var(--tww-target-min);
	padding: var(--tww-space-3) var(--tww-space-5);
	text-decoration: none;
	transition:
		background-color var(--tww-motion-feedback) var(--tww-ease-standard),
		border-color var(--tww-motion-feedback) var(--tww-ease-standard),
		color var(--tww-motion-feedback) var(--tww-ease-standard);
}

.tww-return-entrance:hover {
	background-color: var(--tww-color-amber);
	border-color: var(--tww-color-amber);
	color: var(--tww-color-ink);
}

.tww-featured-creations,
.tww-about {
	background-color: var(--tww-color-parchment);
	color: var(--tww-color-ink);
	text-align: center;
}

.tww-featured-creations__title {
	text-align: center;
}

.tww-featured-creations__introduction {
	margin-inline: auto;
	text-align: center;
}

.tww-about__introduction {
	margin-inline: auto;
}

.tww-featured-creations .woocommerce ul.products.columns-1 {
	margin-inline: auto;
	max-width: 40rem;
}

.tww-portals {
	background-color: var(--tww-color-midnight);
	color: var(--tww-color-parchment);
	text-align: center;
}

.tww-portals__list {
	aspect-ratio: 864 / 1821;
	background:
		linear-gradient(180deg, rgb(11 19 43 / 4%), rgb(11 19 43 / 18%)),
		url("../images/homepage/five-portals-mobile-v1.jpg") center / cover no-repeat,
		var(--tww-color-midnight);
	border: 1px solid var(--tww-color-brass);
	border-radius: var(--tww-radius-control);
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin-block-start: var(--tww-space-7);
	overflow: hidden;
	padding: 0;
}

.tww-portal {
	background-color: var(--tww-color-midnight);
	min-block-size: 0;
	overflow: hidden;
	perspective: 50rem;
	position: relative;
}

.tww-portal::before,
.tww-portal::after {
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.tww-portal::before {
	background:
		radial-gradient(circle at 50% 48%, rgb(242 169 59 / 68%), rgb(42 95 91 / 42%) 34%, rgb(11 19 43 / 96%) 76%),
		var(--tww-color-midnight);
	box-shadow: inset 0 0 3rem rgb(242 169 59 / 28%);
	opacity: 0;
	transition: opacity var(--tww-motion-transition) var(--tww-ease-standard);
	z-index: 1;
}

.tww-portal::after {
	backface-visibility: hidden;
	background-image: url("../images/homepage/five-portals-mobile-v1.jpg");
	background-position-x: 50%;
	background-repeat: no-repeat;
	background-size: 100% 500%;
	transform: rotateY(0deg);
	transform-origin: left center;
	transition:
		transform 900ms var(--tww-ease-standard),
		opacity 900ms var(--tww-ease-standard);
	z-index: 2;
}

.tww-portal--mugs::after {
	background-position-y: 0%;
}

.tww-portal--tumblers::after {
	background-position-y: 25%;
}

.tww-portal--glassware::after {
	background-position-y: 50%;
}

.tww-portal--clothing::after {
	background-position-y: 75%;
}

.tww-portal--accessories::after {
	background-position-y: 100%;
}

.tww-portal.is-open::before {
	opacity: 1;
}

.tww-portal.is-open::after {
	opacity: 0.3;
	transform: rotateY(-105deg);
}

.tww-portal a {
	align-items: flex-end;
	background:
		linear-gradient(180deg, transparent 58%, rgb(11 19 43 / 84%));
	border-block-end: 1px solid rgb(176 141 87 / 72%);
	color: var(--tww-color-parchment);
	display: flex;
	font-family: var(--tww-font-display);
	font-size: 1.25rem;
	font-weight: var(--tww-font-weight-semibold);
	block-size: 100%;
	justify-content: center;
	min-block-size: var(--tww-target-min);
	padding: var(--tww-space-5);
	position: relative;
	text-shadow: 0 2px 4px var(--tww-color-midnight);
	text-decoration: none;
	transition: background-color var(--tww-motion-transition) var(--tww-ease-standard);
	z-index: 3;
}

.tww-portal:last-child a {
	border-block-end: 0;
}

.tww-portal a:hover,
.tww-portal a:focus-visible {
	background-color: rgb(242 169 59 / 14%);
	border-color: var(--tww-color-amber);
}

.tww-portal a:focus-visible {
	outline: 3px solid var(--tww-color-amber);
	outline-offset: -5px;
}

.tww-portal.is-open a {
	background-color: rgb(11 19 43 / 48%);
}

.tww-portal--glassware a {
	color: var(--tww-color-crystal);
}

.tww-about__link {
	font-weight: var(--tww-font-weight-semibold);
	margin-block-start: var(--tww-space-5);
}

.tww-about__link a {
	color: var(--tww-color-forest);
}

@media (min-width: 48rem) {
	.tww-workshop {
		align-content: center;
		background:
			linear-gradient(180deg, rgb(11 19 43 / 8%) 42%, rgb(11 19 43 / 88%) 82%),
			url("../images/homepage/workshop-merlin-right-desktop-v1.png") center top / cover no-repeat,
			var(--tww-color-forest);
		grid-template-columns: 1fr;
		text-align: center;
	}

	.tww-workshop__content {
		grid-column: 1;
		justify-self: center;
		margin-inline: var(--tww-space-4);
		text-align: center;
	}

	.tww-workshop__title,
	.tww-workshop__welcome {
		text-align: center;
	}

	.tww-return-entrance {
		grid-column: 1 / -1;
		justify-self: center;
	}

	.tww-entrance {
		background-image:
			linear-gradient(180deg, rgb(11 19 43 / 34%), rgb(11 19 43 / 72%)),
			url("../images/homepage/woodland-entrance-desktop-v1.jpg");
	}

	.tww-entrance::before {
		background-image:
			linear-gradient(180deg, rgb(11 19 43 / 34%), rgb(11 19 43 / 72%)),
			url('../images/homepage/woodland-entrance-open-desktop-v1.jpg');
	}

	.tww-workshop {
		background-image:
			linear-gradient(180deg, rgb(11 19 43 / 8%) 42%, rgb(11 19 43 / 88%) 82%),
			url("../images/homepage/workshop-merlin-right-desktop-v1.png");
		min-block-size: min(54rem, 90vh);
	}
}

@media (min-width: 64rem) {
	.tww-portals__list {
		aspect-ratio: 3 / 2;
		background-image:
			linear-gradient(180deg, rgb(11 19 43 / 4%), rgb(11 19 43 / 18%)),
			url("../images/homepage/five-portals-desktop-v1.jpg");
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-template-rows: 1fr;
	}

	.tww-portal::after {
		background-image: url("../images/homepage/five-portals-desktop-v1.jpg");
		background-position-y: 50%;
		background-size: 500% 100%;
	}

	.tww-portal--mugs::after { background-position-x: 0%; }
	.tww-portal--tumblers::after { background-position-x: 25%; }
	.tww-portal--glassware::after { background-position-x: 50%; }
	.tww-portal--clothing::after { background-position-x: 75%; }
	.tww-portal--accessories::after { background-position-x: 100%; }

	.tww-portal a {
		border-block-end: 0;
		border-inline-end: 1px solid rgb(176 141 87 / 72%);
	}

	.tww-portal:last-child a {
		border-inline-end: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tww-entrance::before {
		transition-duration: var(--tww-motion-reduced-fade);
	}

	.tww-button .wp-block-button__link {
		transform: none;
	}

	.tww-portal::before,
	.tww-portal::after {
		transition-duration: var(--tww-motion-reduced-fade);
	}

	.tww-portal.is-open::after {
		opacity: 0;
		transform: none;
	}
}

/* Featured creation links stay readable through hover and focus. */
.tww-featured-card a {
	border: 1px solid var(--tww-color-brass);
	border-radius: var(--tww-radius-control);
	color: var(--tww-color-parchment);
	display: inline-block;
	font-weight: var(--tww-font-weight-semibold);
	padding: 0.55rem 0.85rem;
	text-decoration: none;
	transition: background-color var(--tww-motion-feedback) var(--tww-ease-standard), border-color var(--tww-motion-feedback) var(--tww-ease-standard), color var(--tww-motion-feedback) var(--tww-ease-standard), box-shadow var(--tww-motion-feedback) var(--tww-ease-standard);
}

.tww-featured-card a:hover,
.tww-featured-card a:focus-visible {
	background-color: var(--tww-color-amber);
	border-color: var(--tww-color-amber);
	box-shadow: 0 0 0 2px rgb(169 223 245 / 20%), 0 0 1rem rgb(169 223 245 / 28%);
	color: var(--tww-color-ink);
}