/*
 * Sounds Amazing - Experiences page (Figma "experience" 419:1750, 1920px
 * frame).
 *
 * Loads on top of shop.css (.sa-shop supplies the tokens, breadcrumb strip
 * and trust strip). Sizes interpolate from the 1024px value to the 1920px
 * design value like the other layers; tablet and mobile rules are at the end.
 *
 * The Arrive / Immerse / Restore band is an art-directed composition in the
 * design (photos, numbers and dotted connectors scattered across the width),
 * so it is laid out as one 1744 x 583 canvas with every piece positioned in
 * percentages and type scaled with the viewport; under 1025px it becomes a
 * plain three-column grid without the connectors.
 */

/* ------------------------------------------------------------ shared */

.sa-exp-title {
	margin: 0;
	font: 400 var(--display) / calc(var(--display-lh) + 8px) var(--serif);
	letter-spacing: -0.0092em;
	color: var(--ink);
	text-align: center;
}

.sa-exp-wave {
	display: block;
	height: auto;
	width: min(1104px, 80%);
	margin: 8px auto 0;
}

.sa-exp-cta {
	margin: 0;
	display: flex;
}

/* 217 x 55 pill from the design (the same one the Musical Mushroom page uses). */
.sa-shop .sa-btn--lg {
	height: 55px;
	min-width: 217px;
	padding: 0 22px;
	font-size: 11.199px;
	letter-spacing: 0.14em;
}

.sa-shop .sa-btn--wide {
	min-width: 246px;
}

/* -------------------------------------------------------------- hero */

.sa-exp-hero {
	position: relative;
	overflow: hidden;
	background: #221327;
	color: #fff;
	min-height: clamp(300px, calc(330px + 183 * (100vw - 1024px) / 896), 513px);
	display: flex;
	align-items: center;
}

/* Figma "Rectangle 56": gong-and-bowls photo covering the band, then a
   right-to-left wash from 55% to solid #221327 near the left edge. */
.sa-exp-hero__bg {
	position: absolute;
	inset: 0;
	background: url(../img/experiences/hero-bg.jpg) center 18% / cover no-repeat;
}

.sa-exp-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(270deg, rgba(34, 19, 39, 0.55) 0%, rgba(34, 19, 39, 0.9) 58.879%, #221327 96.171%);
}

.sa-exp-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--content);
	margin: 0 auto;
	padding: 64px var(--gutter);
}

.sa-exp-hero__title {
	margin: 0;
	max-width: 878px;
	font: 400 var(--display) / var(--display-lh) var(--serif);
	letter-spacing: -0.0115em;
	color: var(--cream);
}

.sa-exp-hero__wave {
	width: min(379px, 70%);
	margin: 16px 0 0;
}

.sa-exp-hero__lead {
	margin: 33px 0 0;
	max-width: 658px;
	font: 700 var(--body) / var(--body-lh) var(--sans);
	letter-spacing: var(--track);
	color: var(--cream);
}

/* ------------------------------------------------------------ journey */

.sa-exp-journey {
	padding: clamp(72px, calc(80px + 42 * (100vw - 1024px) / 896), 122px) var(--gutter) clamp(96px, calc(100px + 51 * (100vw - 1024px) / 896), 151px);
}

/* The 1744 x 583 canvas (page x 88..1832, y 1097..1680). */
.sa-exp-steps {
	list-style: none;
	position: relative;
	max-width: var(--content);
	margin: 41px auto 0;
	padding: 0;
	aspect-ratio: 1744 / 583;
}

.sa-jstep {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
}

.sa-jstep > * {
	position: absolute;
	margin: 0;
	pointer-events: auto;
}

.sa-jstep__photo {
	width: 15.94%;
	aspect-ratio: 278 / 250;
	border: 1.5px solid var(--gold);
	border-radius: clamp(28px, 2.6vw, 50px);
	box-shadow: 0 0 7px rgba(83, 53, 105, 0.4);
	overflow: hidden;
}

.sa-jstep__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.sa-jstep__num {
	width: 3.922%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 0.66px solid var(--gold);
	background: radial-gradient(circle closest-side, #5f3f77 0%, #4e305e 50%, #3c2146 100%);
	color: #fff;
	font: 700 clamp(15px, 1.425vw, 27.36px) / 1 var(--sans);
	display: grid;
	place-items: center;
}

.sa-jstep__title {
	transform: translateX(-50%);
	font: 400 clamp(19px, 1.6667vw, 32px) / 1.19 var(--serif);
	color: var(--ink);
	white-space: nowrap;
}

.sa-jstep__text {
	font: 500 clamp(10px, 0.8425vw, 16.176px) / 1.5 var(--sans);
	letter-spacing: 0.093em;
	color: var(--ink);
	text-align: center;
}

/* Dotted connectors: the design places a rotated bitmap inside a bounding
   box; the box is positioned, the bitmap sits centred inside it and turns. */
.sa-jstep__deco {
	pointer-events: none;
}

.sa-jstep__deco > span {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	overflow: hidden;
}

.sa-jstep__deco img {
	position: absolute;
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Arrive (Frame 59 at 93,1102) */
.sa-jstep--arrive .sa-jstep__photo { left: 0.287%; top: 30.36%; }
.sa-jstep--arrive .sa-jstep__num { left: 18.81%; top: 0.86%; }
.sa-jstep--arrive .sa-jstep__title { left: 20.79%; top: 15.61%; }
.sa-jstep--arrive .sa-jstep__text { left: 15.2%; top: 23.5%; width: 11.18%; }
.sa-jstep--arrive .sa-jstep__deco { left: 6.08%; top: 10.12%; width: 13.94%; height: 21.2%; }
.sa-jstep--arrive .sa-jstep__deco > span { width: 95.5%; aspect-ratio: 232.164 / 77.388; transform: translate(-50%, -50%) rotate(-11.9deg); opacity: 0.7; }

/* Immerse (Frame 57 at 742,1207) */
.sa-jstep--immerse .sa-jstep__photo { left: 47.71%; top: 57.12%; }
.sa-jstep--immerse .sa-jstep__num { left: 42.03%; top: 22.13%; }
.sa-jstep--immerse .sa-jstep__title { left: 43.98%; top: 36.88%; }
.sa-jstep--immerse .sa-jstep__text { left: 37.1%; top: 44.77%; width: 13.76%; }
.sa-jstep--immerse .sa-jstep__deco { left: 22.31%; top: 0; width: 20.38%; height: 28.95%; }
.sa-jstep--immerse .sa-jstep__deco > span { width: 96%; aspect-ratio: 341.366 / 113.379; transform: translate(-50%, -50%) rotate(-170.39deg); opacity: 0.7; }
.sa-jstep--immerse .sa-jstep__deco img { width: 99.64%; height: 160.68%; left: -0.21%; top: -30.34%; }

/* Restore (Frame 58 at 1389,1139) */
.sa-jstep--restore .sa-jstep__photo { left: 84%; top: 45.63%; }
.sa-jstep--restore .sa-jstep__num { left: 79.07%; top: 10.29%; }
.sa-jstep--restore .sa-jstep__title { left: 81.02%; top: 25.04%; }
.sa-jstep--restore .sa-jstep__text { left: 74.2%; top: 32.93%; width: 13.76%; }
.sa-jstep--restore .sa-jstep__deco { left: 59.48%; top: 12.8%; width: 22.34%; height: 48.42%; }
.sa-jstep--restore .sa-jstep__deco > span { width: 91.2%; aspect-ratio: 355.364 / 160.156; transform: translate(-50%, -50%) rotate(157.86deg); opacity: 0.8; }
.sa-jstep--restore .sa-jstep__deco img { width: 113.42%; height: 83.89%; left: -3.35%; top: 6.34%; }

/* --------------------------------------------------------------- play */

/* Photo 907 | purple panel 1013, 1009 tall (the home page's own section). */
.sa-exp-play {
	display: grid;
	grid-template-columns: minmax(0, 907fr) minmax(0, 1013fr);
}

.sa-exp-play__photo {
	min-height: 100%;
}

.sa-exp-play__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The template sets the background image (uploads/bg-play-panel.jpg, the
   purple radial with the 8% waveform texture already in it). */
.sa-exp-play__panel {
	position: relative;
	overflow: hidden;
	background: #3c2146 center / cover no-repeat;
	color: var(--cream);
	padding: clamp(72px, calc(80px + 48 * (100vw - 1024px) / 896), 128px) clamp(32px, calc(40px + 24 * (100vw - 1024px) / 896), 64px) clamp(80px, calc(88px + 49 * (100vw - 1024px) / 896), 137px) clamp(56px, calc(72px + 91 * (100vw - 1024px) / 896), 163px);
}

.sa-exp-play__inner {
	position: relative;
}

/* The 444 x 28 wave stood on end along the heading's left edge. */
.sa-exp-play__divider {
	position: absolute;
	left: 0;
	top: 309px;
	width: 28px;
	height: 444px;
}

.sa-exp-play__divider img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 444px;
	height: 28px;
	max-width: none;
	transform: translate(-50%, -50%) rotate(90deg);
}

.sa-exp-play__title {
	margin: 0;
	max-width: 625px;
	font: 400 var(--display) / var(--display-lh) var(--serif);
	letter-spacing: -0.0115em;
	color: #fff;
}

.sa-exp-play__title .sa-gold {
	color: var(--gold-2);
}

.sa-exp-play__list {
	margin: clamp(36px, calc(40px + 15 * (100vw - 1024px) / 896), 55px) 0 0;
	padding-left: clamp(32px, calc(36px + 18 * (100vw - 1024px) / 896), 54px);
	display: flex;
	flex-direction: column;
	gap: clamp(20px, calc(22px + 8 * (100vw - 1024px) / 896), 30px);
}

.sa-exp-play__item dt {
	margin: 0;
	font: 400 clamp(38px, calc(42px + 18 * (100vw - 1024px) / 896), 60px) / 1.3 var(--serif);
	letter-spacing: -0.0153em;
	color: var(--gold-2);
}

.sa-exp-play__item dd {
	margin: 0;
	font: 700 var(--body) / var(--body-lh) var(--sans);
	letter-spacing: 0.14em;
	color: #fff;
}

.sa-exp-play .sa-exp-cta {
	margin-top: clamp(36px, calc(40px + 15 * (100vw - 1024px) / 896), 55px);
	padding-left: clamp(32px, calc(36px + 18 * (100vw - 1024px) / 896), 54px);
}

/* --------------------------------------------------------------- hear */

.sa-exp-hear {
	background: var(--cream) center / cover no-repeat;
}

/* Illustration 750 wide at the left, 658px right-aligned text column. */
.sa-exp-hear__inner {
	max-width: var(--content);
	margin: 0 auto;
	padding: clamp(64px, calc(72px + 38 * (100vw - 1024px) / 896), 110px) var(--gutter) clamp(48px, calc(52px + 18 * (100vw - 1024px) / 896), 70px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 658px);
	column-gap: clamp(32px, calc(40px + 260 * (100vw - 1024px) / 896), 300px);
	align-items: start;
}

.sa-exp-hear__art {
	position: relative;
	width: min(750px, 100%);
	aspect-ratio: 750 / 853;
	margin-left: 17px;
}

.sa-exp-hear__art > img {
	position: absolute;
	display: block;
	height: auto;
}

/* Blurred glows under the bowls (SVGs carry their own blur bleed). */
.sa-exp-hear__glow--a { left: 40.03%; top: 83.14%; width: 48.88%; }
.sa-exp-hear__glow--b { left: 53.36%; top: 68.72%; width: 48.88%; }
.sa-exp-hear__glow--c { left: 72.03%; top: 84.78%; width: 26.61%; }
.sa-exp-hear__glow--d { left: -8.43%; top: 73.83%; width: 46.19%; }

.sa-exp-hear__illo {
	left: 0.67%;
	top: 0;
	width: 99.33%;
}

.sa-exp-hear__text {
	padding-top: clamp(0px, calc(0px + 39 * (100vw - 1024px) / 896), 39px);
	text-align: right;
}

.sa-exp-hear__title {
	margin: 0 0 0 auto;
	max-width: 637px;
	font: 400 var(--display) / calc(var(--display-lh) + 23px) var(--serif);
	letter-spacing: -0.0115em;
	color: #130f17;
}

.sa-exp-hear__wave {
	width: min(626px, 95%);
	margin: clamp(48px, calc(56px + 60 * (100vw - 1024px) / 896), 116px) 0 0 auto;
}

.sa-exp-hear__lead {
	margin: 45px 0 0;
	font: 700 var(--body) / var(--body-lh) var(--sans);
	letter-spacing: var(--track);
	color: var(--ink);
}

/* ----------------------------------------------------------- benefits */

.sa-exp-benefits {
	padding: clamp(96px, calc(110px + 63 * (100vw - 1024px) / 896), 173px) var(--gutter) clamp(80px, calc(88px + 37 * (100vw - 1024px) / 896), 125px);
}

/* left column 341 | divider 28 | photo 815 | divider 28 | right column 357 */
.sa-exp-benefits__grid {
	max-width: 1631px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 341fr) 28px minmax(0, 815fr) 28px minmax(0, 357fr);
	column-gap: clamp(8px, calc(10px + 6 * (100vw - 1024px) / 896), 16px);
	align-items: center;
}

.sa-exp-benefits__col {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, calc(36px + 24 * (100vw - 1024px) / 896), 60px);
}

.sa-exp-benefits__col--left {
	text-align: right;
}

.sa-benefit__title {
	margin: 0;
	font: 400 clamp(28px, calc(30px + 15 * (100vw - 1024px) / 896), 45px) / 1.18 var(--serif);
	color: var(--ink);
	white-space: nowrap;
}

.sa-benefit__text {
	margin: 0;
	font: 500 var(--body) / var(--body-lh) var(--sans);
	letter-spacing: var(--track);
	color: var(--ink);
}

.sa-exp-benefits__col--left .sa-benefit__text {
	margin-left: auto;
}

.sa-exp-benefits__divider {
	position: relative;
	width: 28px;
	height: 444px;
}

.sa-exp-benefits__divider img {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 444px;
	height: 28px;
	max-width: none;
	transform: translate(-50%, -50%) rotate(90deg);
}

.sa-exp-benefits__photo {
	aspect-ratio: 815 / 702;
}

.sa-exp-benefits__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* ============================================================== tablet */

@media (max-width: 1024px) {
	.sa-exp-hero__bg {
		background-position: 60% 18%;
	}

	.sa-exp-steps {
		aspect-ratio: auto;
		margin-top: 48px;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 24px;
	}

	.sa-jstep {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		text-align: center;
	}

	.sa-jstep > * {
		position: static;
	}

	.sa-jstep__deco {
		display: none;
	}

	.sa-jstep__num {
		width: 56px;
		font-size: 22px;
	}

	.sa-jstep__title {
		transform: none;
		font-size: 28px;
	}

	.sa-jstep__text {
		width: auto !important;
		max-width: 260px;
		font-size: 15px;
	}

	.sa-jstep__photo {
		order: 10;
		width: min(278px, 100%);
		margin-top: 10px;
	}

	.sa-exp-play {
		grid-template-columns: minmax(0, 1fr);
	}

	.sa-exp-play__photo {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.sa-exp-play__divider {
		display: none;
	}

	.sa-exp-hear__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.sa-exp-hear__art {
		width: min(560px, 100%);
		margin: 0 auto;
	}

	.sa-exp-hear__text {
		text-align: left;
	}

	.sa-exp-hear__title,
	.sa-exp-hear__wave {
		margin-left: 0;
	}

	.sa-exp-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 40px;
		align-items: start;
	}

	.sa-exp-benefits__photo {
		grid-column: 1 / -1;
		order: -1;
		max-width: 640px;
		width: 100%;
		margin: 0 auto;
	}

	.sa-exp-benefits__divider {
		display: none;
	}

	.sa-exp-benefits__col--left {
		text-align: left;
	}

	.sa-exp-benefits__col--left .sa-benefit__text {
		margin-left: 0;
	}
}

/* ============================================================== mobile */

@media (max-width: 767px) {
	.sa-exp-hero {
		min-height: 320px;
	}

	.sa-exp-hero__bg::after {
		background: linear-gradient(270deg, rgba(34, 19, 39, 0.75) 0%, rgba(34, 19, 39, 0.92) 50%, #221327 100%);
	}

	.sa-exp-hero__lead {
		margin-top: 20px;
	}

	.sa-exp-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.sa-exp-play__panel {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}

	.sa-exp-play__list,
	.sa-exp-play .sa-exp-cta {
		padding-left: 0;
	}

	.sa-exp-hear__title {
		line-height: 1.1;
	}

	.sa-exp-benefits__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sa-benefit__title {
		white-space: normal;
	}
}