/**
 * Home page hero: "the dove and the gift".
 *
 * Two scenes cut from the owner's PDFs, stacked in one stage that keeps the
 * proportions of the design's page (595.5 × 842.25 points). Every image is
 * placed with its own coordinates on that page, given in points as --x, --y,
 * --w and --h, so the scene stays exactly as designed at any width.
 *
 * Inside the stage, cqi is a hundredth of the stage's width; around it, a
 * hundredth of the hero's. The only breakpoint is a container query that puts
 * the sentence beside the stage once the hero is wide enough.
 *
 * Stacking: the stage is the one stacking context. The first scene's images
 * sit in it directly (their wrapper makes no context of its own until the
 * camera dives), so the dove can fly behind the wreath (z 5) or in front of
 * everything (z 30). The second scene is a context of its own, above the
 * first; the flash covers both.
 *
 * Only transforms and opacity move. Nothing moves while the hero is off
 * screen, and whoever asks for less motion gets the medallion, still.
 */

/* Cairo, self-hosted (SIL Open Font License). */
@font-face {
	font-family: "HT Cairo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/cairo-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "HT Cairo";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/cairo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lalezar, self-hosted (SIL Open Font License): the display face. */
@font-face {
	font-family: "HT Lalezar";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lalezar-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "HT Lalezar";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lalezar-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The price badge's serif, as on the offer cards: Liberation Serif Bold, cut to Latin letters and digits (OFL-PriceSerif.txt). */
@font-face {
	font-family: "HT Price Serif";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/price-serif.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0;
}

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

.ht-hero {
	--hth-font: "HT Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--hth-display: "HT Lalezar", "HT Cairo", system-ui, sans-serif;
	--hth-cream: #fffaf2;
	--hth-ink: #3b2a17;
	--hth-muted: rgb(59 42 23 / 70%);
	--hth-gold: #c4962f;
	--hth-gold-lit: #f1d48a;
	--hth-orange: #ff751f;
	--hth-dove: #ff8a41;

	position: relative;
	container: hth-hero / inline-size;
	isolation: isolate;
	overflow: hidden;
	color: var(--hth-ink);
	background:
		radial-gradient(ellipse 70% 55% at 50% 38%, #fff 0%, rgb(255 255 255 / 0%) 70%),
		var(--hth-cream);
	font-family: var(--hth-font);
}

/*
 * Full width, whatever container the page builder wraps it in. The attribute
 * raises specificity above Spectra's "> * { margin: 0 }", which would otherwise
 * cancel the break-out and leave a strip on one side.
 */
.ht-hero[data-ht-hero] {
	inline-size: 100vw;
	max-inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block: 0 clamp(14px, 3vw, 28px);
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.ht-hero__inner {
	display: grid;
	grid-template-areas:
		"art"
		"say";
	grid-template-columns: minmax(0, 1fr);
	gap: 2.4cqi;
	padding: 2cqi 4cqi 4.5cqi;
}

.ht-hero__say {
	grid-area: say;
	text-align: center;
}

@container hth-hero (min-width: 700px) {
	.ht-hero__inner {
		grid-template-areas: "say art";
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 5cqi;
		padding: 1.6cqi 8cqi 0.6cqi;
	}

	.ht-hero__say {
		text-align: start;
	}
}

/* ------------------------------------------------------------------ */
/* The stage                                                           */
/* ------------------------------------------------------------------ */

/* The design's page. Inside it, 1cqi is a hundredth of its width. */
.ht-hero__stage {
	position: relative;
	grid-area: art;
	container-type: inline-size;
	isolation: isolate;
	overflow: hidden;
	inline-size: 80cqi;
	aspect-ratio: 595.5 / 842.25;
	margin-inline: auto;
	border-radius: 1.2cqi;
	background: var(--hth-cream);
	box-shadow: 0 0.6cqi 3cqi rgb(120 80 20 / 14%);
	direction: ltr;
}

@container hth-hero (min-width: 700px) {
	.ht-hero__stage {
		inline-size: min(31cqi, 52svh);
	}
}

/* Any image or drawing at its place on the page, in points. */
.ht-hero .ht-hero__layer {
	position: absolute;
	top: calc(var(--y) * 100% / 842.25);
	left: calc(var(--x) * 100% / 595.5);
	display: block;
	inline-size: calc(var(--w) * 100% / 595.5);
	max-inline-size: none;
	block-size: calc(var(--h) * 100% / 842.25);
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
}

/* ---------- Scene one: «هدية» ---------- */

/* No transform, opacity or z-index here, so its images share the stage's context with the dove. */
.ht-hero__one {
	position: absolute;
	inset: 0;
	transform-origin: 51.05% 51.9%;
}

.ht-hero__layer--backdrop {
	z-index: 1;
}

.ht-hero__layer--branch {
	z-index: 2;
	transform-origin: 13% 14%;
	animation: hth-sway 7s ease-in-out infinite alternate;
}

.ht-hero__layer--roses {
	z-index: 3;
	transform-origin: 85% 96%;
	animation: hth-sway 6s ease-in-out -2s infinite alternate-reverse;
}

.ht-hero__layer--sparkles {
	z-index: 4;
	animation: hth-twinkle 2.4s ease-in-out infinite alternate;
}

/* The wreath turns very slowly, as in a music box. */
.ht-hero__layer--wreath {
	z-index: 6;
	animation: hth-turn 140s linear infinite;
}

.ht-hero__layer--label,
.ht-hero__layer--word {
	z-index: 7;
}

.ht-hero__label-word {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* Any other word than the designed one, set in the display face. */
.ht-hero__label-text {
	display: grid;
	place-items: center;
	color: var(--hth-orange);
	font: 400 min(10cqi, calc(42cqi / var(--n))) / 1 var(--hth-display);
	white-space: nowrap;
	direction: rtl;
}

/* The label turning into a door of light as the camera dives. */
.ht-hero .ht-hero__glow {
	z-index: 7;
	background: radial-gradient(ellipse 34% 20% at 50% 52%, #fff 0%, rgb(255 246 214 / 90%) 45%, rgb(255 238 196 / 0%) 100%);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.ht-hero__layer--star {
	z-index: 8;
	transform-origin: 50% 0;
	animation: hth-swing 3.6s ease-in-out infinite alternate;
}

.ht-hero.is-portal .ht-hero__one {
	transform: scale(3.8);
	transition: transform 0.95s cubic-bezier(0.55, 0, 0.85, 0.35);
}

.ht-hero.is-portal .ht-hero__glow {
	opacity: 1;
}

/* ---------- Scene two: the medallion ---------- */

.ht-hero__two {
	position: absolute;
	inset: 0;
	z-index: 10;
	visibility: hidden;
	background: radial-gradient(ellipse 58% 42% at 50% 46%, #fff8e8 0%, rgb(255 250 242 / 0%) 100%), var(--hth-cream);
	opacity: 0;
}

.ht-hero.is-two .ht-hero__two {
	visibility: visible;
	opacity: 1;
}

.ht-hero.is-two .ht-hero__one {
	visibility: hidden;
}

.ht-hero.is-two .ht-hero__one * {
	animation: none;
}

/* Arriving through the label: the second scene settles from close up. */
.ht-hero.is-arrive .ht-hero__two {
	animation: hth-arrive 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.ht-hero__layer--cartouche {
	z-index: 1;
}

/* The medallion: a coin with two faces, turned by the script. */
.ht-hero .ht-hero__medal {
	z-index: 2;
	perspective: 170cqi;
}

.ht-hero__coin {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.ht-hero__coin.is-link {
	cursor: pointer;
	pointer-events: auto;
}

.ht-hero__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	transform: rotateY(0deg);
}

.ht-hero__face--back {
	transform: rotateY(180deg);
}

/* What the medallion shows, inside its inner oval. */
.ht-hero__window {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1cqi;
	padding: 16% 17%;
	clip-path: ellipse(37.6% 48.2% at 50% 50%);
	background: radial-gradient(ellipse 70% 60% at 50% 44%, #fffdf8 0%, #fdf3e0 55%, #f3ddb2 100%);
	text-align: center;
	direction: rtl;
}

/* The dove's portrait: a sky of light behind it. */
.ht-hero__window.is-portrait {
	background: radial-gradient(circle at 50% 46%, #fff 0%, #fff4d6 32%, #f9dfa8 72%, #eec57a 100%);
}

.ht-hero .ht-hero__ring {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	margin: 0;
}

/* The light the dove flies into, and its burst. */
.ht-hero__layer--flare {
	z-index: 3;
	opacity: 0;
	transform: scale(0.25);
}

.ht-hero.is-charge .ht-hero__layer--flare {
	opacity: 1;
	transform: scale(1) rotate(20deg);
	transition: opacity 0.6s ease, transform 1.5s cubic-bezier(0.3, 0.6, 0.4, 1);
}

.ht-hero__layer--flare.is-glint {
	animation: hth-glint 0.95s ease-out both;
}

.ht-hero__layer--burst {
	z-index: 4;
	opacity: 0;
}

.ht-hero.is-burst .ht-hero__layer--burst {
	animation: hth-burst 1.1s ease-out both;
}

.ht-hero.is-burst .ht-hero__layer--flare {
	opacity: 0;
	transform: scale(1.4) rotate(50deg);
	transition: opacity 0.5s ease, transform 0.6s ease-out;
}

/* ---------- The cards the medallion turns to ---------- */

.ht-hero__deck,
.ht-hero__deck[hidden] {
	display: none;
}

.ht-hero__item {
	display: contents;
}

.ht-hero .ht-hero__pimg {
	display: block;
	inline-size: 27cqi;
	max-inline-size: none;
	block-size: 27cqi;
	margin: 0;
	border-radius: 2cqi;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ht-hero__pname {
	display: -webkit-box;
	overflow: hidden;
	max-inline-size: 31cqi;
	color: var(--hth-ink);
	font: 700 3.7cqi / 1.35 var(--hth-font);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ht-hero__price {
	color: #b4470d;
	font: 800 4.3cqi / 1.2 var(--hth-font);
}

.ht-hero__price del {
	color: var(--hth-muted);
	font-size: 0.78em;
	font-weight: 600;
}

.ht-hero__price ins {
	text-decoration: none;
}

.ht-hero__gift-ico {
	inline-size: 10cqi;
	aspect-ratio: 1;
	fill: none;
	stroke: var(--hth-gold);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ht-hero__gift {
	max-inline-size: 32cqi;
	color: var(--hth-orange);
	font: 400 6.4cqi / 1.3 var(--hth-display);
	text-wrap: balance;
}

/* ---------- The dove ---------- */

/*
 * Three tenths of the page wide, moved by the script: its anchor (the middle of
 * the body) is put on the point of the path, then it banks, turns and grows.
 */
.ht-hero__bird {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 30;
	inline-size: 30%;
	aspect-ratio: 596 / 472;
	opacity: 0;
	transform-origin: 50% 55%;
	pointer-events: none;
	will-change: transform, opacity;
}

.ht-hero__bird.is-behind {
	z-index: 5;
}

.ht-hero .ht-hero__dove {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	animation: hth-bob 0.56s infinite;
}

/* A fast, strong downstroke and a slower recovery, about two beats a second. */
.ht-hero__wing--front {
	transform-origin: 300px 316px;
	animation: hth-wing-front 0.56s infinite;
}

.ht-hero__wing--back {
	transform-origin: 336px 238px;
	animation: hth-wing-back 0.56s infinite;
}

/* Wings held up, gliding. */
.ht-hero__bird.is-glide .ht-hero__dove,
.ht-hero__bird.is-glide .ht-hero__wing {
	animation: none;
}

/* Hovering in its picture: slower beats. */
.ht-hero__bird.is-hover .ht-hero__dove,
.ht-hero__bird.is-hover .ht-hero__wing {
	animation-duration: 0.9s;
}

/* ---------- Feathers and the flash ---------- */

.ht-hero__plumes {
	position: absolute;
	inset: 0;
	z-index: 25;
	pointer-events: none;
}

.ht-hero .ht-hero__plume {
	--d: 1;

	position: absolute;
	top: calc(var(--fy, 400) * 100% / 842.25);
	left: calc((var(--fx, 300) + (var(--i) - 3) * 21) * 100% / 595.5);
	inline-size: 5%;
	max-inline-size: none;
	block-size: auto;
	margin: 0;
	opacity: 0;
}

.ht-hero.is-plumes .ht-hero__plume {
	animation: hth-plume 2.8s cubic-bezier(0.3, 0.2, 0.6, 1) calc(var(--i) * 0.13s) both;
}

.ht-hero .ht-hero__plume:nth-child(2n) {
	--d: -1;

	inline-size: 3.8%;
}

.ht-hero__flash {
	position: absolute;
	inset: 0;
	z-index: 40;
	background: radial-gradient(circle at 51% 52%, #fff 0%, #fffaf0 55%, rgb(255 250 240 / 0%) 100%);
	opacity: 0;
	transition: opacity 0.7s ease-out;
	pointer-events: none;
}

.ht-hero.is-flash .ht-hero__flash {
	opacity: 1;
	transition: opacity 0.35s ease-in;
}

/* ------------------------------------------------------------------ */
/* The words                                                           */
/* ------------------------------------------------------------------ */

/* The extra class beats the theme's ".entry-content p" and list margins. */
.ht-hero .ht-hero__title,
.ht-hero .ht-hero__trust,
.ht-hero .ht-hero__pledge {
	margin: 0;
}

.ht-hero__title {
	color: var(--hth-ink);
	font: 400 clamp(19px, 5.6cqi, 44px) / 1.35 var(--hth-display);
	text-wrap: balance;
}

.ht-hero__word {
	display: inline-block;
	opacity: 0;
	transform: translateY(1.4cqi);
	animation: hth-word 0.6s ease calc(0.2s + var(--i) * 0.06s) both;
}

/* The main button, and the small one beside it. */
.ht-hero__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.2cqi;
	margin-block-start: 2.4cqi;
}

.ht-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 52cqi;
	padding: 1.3cqi 5.5cqi;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--hth-dove), var(--hth-orange));
	box-shadow: 0 0.9cqi 2.6cqi rgb(255 117 31 / 32%);
	color: #fff;
	font: 400 clamp(15px, 4.4cqi, 22px) / 1.5 var(--hth-display);
	text-decoration: none;
	opacity: 0;
	animation: hth-word 0.7s ease 0.6s both;
}

.ht-hero__cta[hidden] {
	display: none;
}

.ht-hero__cta:hover,
.ht-hero__cta:focus-visible {
	color: #fff;
	filter: brightness(1.06);
}

.ht-hero__cta.is-swap span {
	animation: hth-swap 0.5s ease both;
}

.ht-hero .ht-hero__trust {
	margin-block-start: 2.2cqi;
	padding: 0;
}

.ht-hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1cqi 4cqi;
	list-style: none;
	opacity: 0;
	animation: hth-word 0.7s ease 0.8s both;
}

.ht-hero__pledge {
	display: flex;
	align-items: center;
	gap: 0.9cqi;
	color: var(--hth-ink);
	font: 700 clamp(12px, 3.3cqi, 17px) / 1.4 var(--hth-font);
	list-style: none;
}

.ht-hero__ico {
	inline-size: 1.6em;
	aspect-ratio: 1;
	fill: none;
	stroke: var(--hth-gold);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ht-hero__replay {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	inline-size: 11.5cqi;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 1px solid rgb(196 150 47 / 55%);
	border-radius: 999px;
	background: #fff;
	color: var(--hth-muted);
	font: 600 clamp(12px, 3cqi, 15px) / 1.4 var(--hth-font);
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	animation: hth-word 0.6s ease 0.9s both;
}

/* It does nothing without the script, so it shows only with it. */
.ht-hero.is-js .ht-hero__replay {
	visibility: visible;
}

.ht-hero__replay:hover,
.ht-hero__replay:focus-visible {
	border-color: var(--hth-gold);
	background: #fff8e8;
	color: var(--hth-ink);
}

.ht-hero__replay .ht-hero__ico {
	inline-size: 1.5em;
}

/* Forward, in a right-to-left page, points left. */
.ht-hero__ico--skip {
	transform: scaleX(-1);
}

.ht-hero__ico--again,
.ht-hero.is-told .ht-hero__ico--skip {
	display: none;
}

.ht-hero.is-told .ht-hero__ico--again {
	display: block;
}

/* On a phone the button is a round icon; its words stay for screen readers. */
.ht-hero__replay-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* On a phone the products themselves show under the hero, so no arrow there. */
.ht-hero__down {
	display: none;
}

@container hth-hero (min-width: 700px) {
	.ht-hero__title {
		font-size: clamp(26px, 3.8cqi, 52px);
	}

	.ht-hero__pledge {
		font-size: clamp(13px, 1.4cqi, 18px);
	}

	.ht-hero__trust {
		justify-content: flex-start;
	}

	.ht-hero__cta {
		min-inline-size: 0;
		padding: 1cqi 3.2cqi;
		font-size: clamp(16px, 1.8cqi, 24px);
	}

	.ht-hero__actions {
		justify-content: flex-start;
		gap: 1.4cqi;
	}

	.ht-hero__replay {
		inline-size: auto;
		aspect-ratio: auto;
		padding: 0.55em 1.1em;
		font-size: clamp(12px, 1.1cqi, 15px);
	}

	.ht-hero__replay-text {
		position: static;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
		clip-path: none;
	}

	.ht-hero__down {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.3cqi;
		inline-size: 100%;
		margin: 0;
		padding: 0.6cqi 0 1.2cqi;
		border: 0;
		background: none;
		color: var(--hth-muted);
		font: 600 clamp(11px, 1.1cqi, 15px) / 1.4 var(--hth-font);
		cursor: pointer;
		opacity: 0;
		animation: hth-word 0.8s ease 1.2s both;
	}
}

.ht-hero__down .ht-hero__ico {
	inline-size: 2em;
	animation: hth-nudge 2.6s ease-in-out 2.4s infinite;
}

/* ------------------------------------------------------------------ */
/* The phone: as wide as the screen                                    */
/* ------------------------------------------------------------------ */

/*
 * The scene grows to the phone's width, in its own proportions, and the
 * spaces around the words shrink a little to keep the height in check.
 * Both shapes of the settings share this; shape two adds its buttons on the
 * scene (.is-layout-wide, above). A wide screen keeps the scene beside the
 * words.
 */
@container hth-hero (max-width: 699.98px) {
	.ht-hero .ht-hero__inner {
		gap: 1.6cqi;
		padding: 1.2cqi 4cqi 3cqi;
	}

	.ht-hero .ht-hero__stage {
		inline-size: 92cqi;
	}

	.ht-hero .ht-hero__actions {
		margin-block-start: 1.8cqi;
	}

	.ht-hero .ht-hero__trust {
		margin-block-start: 1.6cqi;
	}
}

/* ------------------------------------------------------------------ */
/* Shape two: the medallion in the visitor's hands                     */
/* ------------------------------------------------------------------ */

/*
 * The product's picture fills the inner oval, under the owner's frame,
 * which stays on top as drawn; the name sits on a cream band low in the
 * oval, and the price goes on the badge. The buttons on the scene are
 * placed like its pictures, in points of the design's page: a box by its
 * corner and size, a round button by its middle. They come with the second
 * scene, below the dove and the feathers.
 */
.ht-hero.is-layout-wide .ht-hero__item--full .ht-hero__pimg {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 0;
	object-fit: cover;
	mix-blend-mode: normal;
	-webkit-user-drag: none;
	user-select: none;
}

.ht-hero.is-layout-wide .ht-hero__item--full .ht-hero__pname {
	position: absolute;
	inset-inline: 23%;
	bottom: 12.5%;
	max-inline-size: none;
	padding: 0.9cqi 2cqi 1.1cqi;
	border-radius: 2cqi;
	background: rgb(255 250 242 / 88%);
	box-shadow: 0 0.4cqi 1.6cqi rgb(120 80 20 / 18%);
	font-size: 3.2cqi;
}

.ht-hero__hud {
	position: absolute;
	inset: 0;
	z-index: 20;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.ht-hero.is-two .ht-hero__hud {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.6s ease 0.3s;
}

.ht-hero__hud > * {
	position: absolute;
	pointer-events: auto;
}

.ht-hero .ht-hero__hud > [hidden] {
	display: none;
}

.ht-hero .ht-hero__buy,
.ht-hero .ht-hero__plaque,
.ht-hero .ht-hero__pad {
	top: calc(var(--y) * 100% / 842.25);
	left: calc(var(--x) * 100% / 595.5);
	inline-size: calc(var(--w) * 100% / 595.5);
	block-size: calc(var(--h) * 100% / 842.25);
}

/* Where the finger turns the medallion: sideways it is ours, up and down scrolls the page. */
.ht-hero .ht-hero__pad {
	visibility: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ht-hero.is-card .ht-hero__pad {
	visibility: visible;
}

.ht-hero.is-dragging .ht-hero__pad {
	cursor: grabbing;
}

/* ---------- The price badge: the offer cards' own, its price the product's ---------- */

.ht-hero .ht-hero__buy {
	display: block;
	background: url("../images/hero/price-badge.webp") center / 100% 100% no-repeat;
	color: #fff;
	font: 700 6.8cqi / 1 "HT Price Serif", var(--hth-display);
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s ease;
}

.ht-hero .ht-hero__buy bdi {
	position: absolute;
	top: 52.3%;
	left: 46.1%;
	transform: translate(-50%, -50%);
}

.ht-hero .ht-hero__buy.is-m {
	font-size: 5.3cqi;
}

.ht-hero .ht-hero__buy.is-s {
	font-size: 4.15cqi;
}

.ht-hero .ht-hero__buy.is-xs {
	font-size: 3.3cqi;
}

.ht-hero .ht-hero__buy:is(:hover, :focus-visible) {
	color: #fff;
	transform: scale(1.04);
}

/* The shine stays inside the badge's own shape. */
.ht-hero .ht-hero__buy::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 60%) 50%, transparent 60%) 150% 0 / 250% 100% no-repeat;
	content: "";
	-webkit-mask: url("../images/hero/price-badge.webp") center / 100% 100% no-repeat;
	mask: url("../images/hero/price-badge.webp") center / 100% 100% no-repeat;
	animation: hth-shine 4.5s ease-in-out 2.2s infinite;
}

.ht-hero .ht-hero__buy.is-stamp {
	animation: hth-stamp 0.55s cubic-bezier(0.3, 1.3, 0.5, 1) backwards;
}

/* ---------- The owner's plaque: the footer's golden plaque ---------- */

.ht-hero .ht-hero__plaque {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0;
	padding: 0 0 1.7cqi;
	border: 0;
	border-radius: 0;
	background: url("../images/footer/plaque.webp") center / 100% 100% no-repeat;
	box-shadow: none;
	color: #6b4510;
	font: 400 3.1cqi / 1.2 var(--hth-display);
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.ht-hero .ht-hero__plaque span {
	overflow: hidden;
	max-inline-size: 80%;
	text-overflow: ellipsis;
}

.ht-hero .ht-hero__plaque:is(:hover, :focus-visible) {
	background: url("../images/footer/plaque.webp") center / 100% 100% no-repeat;
	color: #4a2f08;
	transform: scale(1.05);
}

.ht-hero .ht-hero__plaque::after {
	position: absolute;
	inset-block: 6% 18%;
	left: 0;
	inline-size: 30%;
	background: linear-gradient(100deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 75%), rgb(255 255 255 / 0%));
	content: "";
	transform: translateX(-260%) skewX(-18deg);
	pointer-events: none;
}

.ht-hero .ht-hero__plaque:hover::after {
	animation: hth-gleam 1.1s ease-in-out both;
}

/* ---------- The arrows and the zoom button: the product page's own ---------- */

.ht-hero .ht-hero__nav,
.ht-hero .ht-hero__zoom {
	top: calc(var(--cy) * 100% / 842.25);
	left: calc(var(--cx) * 100% / 595.5);
	display: grid;
	place-items: center;
	inline-size: max(34px, 7.5cqi);
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	background: rgb(255 255 255 / 85%);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 1px 6px rgb(0 0 0 / 15%);
	color: #e2803f;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease;
}

.ht-hero .ht-hero__nav:is(:hover, :focus-visible),
.ht-hero .ht-hero__zoom:is(:hover, :focus-visible) {
	background: #fff;
	color: #e2803f;
}

.ht-hero .ht-hero__nav {
	visibility: hidden;
	opacity: 0;
}

.ht-hero.is-deck .ht-hero__nav {
	visibility: visible;
	opacity: 1;
}

.ht-hero__nav::before {
	content: "";
	inline-size: 32%;
	aspect-ratio: 1;
	border: solid currentColor;
	border-width: 0 0 3px 3px;
	translate: 15% 0;
	rotate: 45deg;
}

.ht-hero__nav--next::before {
	translate: -15% 0;
	rotate: -135deg;
}

.ht-hero .ht-hero__zoom {
	cursor: zoom-in;
}

.ht-hero__zoom svg {
	inline-size: 52%;
	block-size: 52%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

/* ---------- Full-screen viewer: the product page's own (built by hero-viewer.js) ---------- */

.ht-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	background: rgb(12 12 12 / 96%);
	overscroll-behavior: contain;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.ht-viewer[hidden] {
	display: none;
}

.ht-viewer__track {
	display: flex;
	block-size: 100%;
	will-change: transform;
}

.ht-viewer__track.is-animating {
	transition: transform 0.28s ease;
}

/* Flex, not grid: the image's max-block-size needs the slide's definite height. */
.ht-viewer__slide {
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ht-viewer .ht-viewer__img {
	display: block;
	flex: none;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 100%;
	margin: 0;
	object-fit: contain;
	transform-origin: center;
	-webkit-user-drag: none;
}

.ht-viewer__img.is-animating {
	transition: transform 0.25s ease;
}

/* Two classes: Astra's button:focus / button:hover rules must not paint these. */
.ht-viewer .ht-viewer__btn {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	background: rgb(255 255 255 / 14%);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ht-viewer .ht-viewer__btn:is(:hover, :focus-visible) {
	background: rgb(255 255 255 / 28%);
	color: #fff;
}

.ht-viewer__btn svg {
	inline-size: 22px;
	block-size: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ht-viewer .ht-viewer__close {
	inset-block-start: max(12px, env(safe-area-inset-top));
	right: 12px;
}

.ht-viewer .ht-viewer__prev,
.ht-viewer .ht-viewer__next {
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.ht-viewer .ht-viewer__prev {
	right: 12px;
}

.ht-viewer .ht-viewer__next {
	left: 12px;
}

.ht-viewer .ht-viewer__btn[disabled] {
	opacity: 0;
	pointer-events: none;
}

.ht-viewer__count {
	position: absolute;
	inset-block-start: max(22px, calc(env(safe-area-inset-top) + 10px));
	left: 50%;
	margin: 0;
	color: #fff;
	font: 600 15px / 1 var(--ht-font, system-ui);
	text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
	transform: translateX(-50%);
	direction: ltr;
}

/* Phones swipe; the side arrows are for mouse users. */
@media (hover: none) {
	.ht-viewer .ht-viewer__prev,
	.ht-viewer .ht-viewer__next {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ht-viewer__track.is-animating,
	.ht-viewer__img.is-animating {
		transition: none;
	}
}

/* Nothing moves while the hero is off screen. */
.ht-hero.is-away *,
.ht-hero.is-away *::before,
.ht-hero.is-away *::after {
	animation-play-state: paused !important;
}

/* A small device, or a visitor saving data: fewer feathers. */
.ht-hero.is-lite .ht-hero__plume:nth-child(2n) {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Keyframes                                                           */
/* ------------------------------------------------------------------ */

@keyframes hth-stamp {
	0% {
		opacity: 0;
		transform: rotate(-10deg) scale(2.2);
	}

	60% {
		opacity: 1;
		transform: rotate(2deg) scale(0.94);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes hth-shine {
	0%,
	70% {
		background-position: 150% 0;
	}

	100% {
		background-position: -50% 0;
	}
}

@keyframes hth-gleam {
	from {
		transform: translateX(-260%) skewX(-18deg);
	}

	to {
		transform: translateX(380%) skewX(-18deg);
	}
}

@keyframes hth-word {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hth-swap {
	from {
		opacity: 0;
		transform: translateY(0.5em);
	}
}

@keyframes hth-nudge {
	0%,
	100% {
		transform: none;
	}

	50% {
		transform: translateY(0.25em);
	}
}

@keyframes hth-sway {
	from {
		transform: rotate(-1.2deg);
	}

	to {
		transform: rotate(1.2deg);
	}
}

@keyframes hth-twinkle {
	from {
		opacity: 0.45;
		transform: scale(0.92);
	}

	to {
		opacity: 1;
		transform: scale(1.06);
	}
}

@keyframes hth-turn {
	to {
		transform: rotate(1turn);
	}
}

@keyframes hth-swing {
	from {
		transform: rotate(-3.5deg);
	}

	to {
		transform: rotate(3.5deg);
	}
}

@keyframes hth-arrive {
	from {
		transform: scale(1.22);
	}
}

@keyframes hth-glint {
	0% {
		opacity: 0;
		transform: scale(0.45) rotate(0deg);
	}

	35% {
		opacity: 0.95;
	}

	100% {
		opacity: 0;
		transform: scale(1.05) rotate(40deg);
	}
}

@keyframes hth-burst {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}

	22% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(1.5) rotate(18deg);
	}
}

@keyframes hth-plume {
	0% {
		opacity: 0;
		transform: translate(0, 0) rotate(calc((var(--i) - 3) * 14deg));
	}

	12% {
		opacity: 1;
	}

	50% {
		transform: translate(calc(var(--d) * 4.5cqi), 24cqi) rotate(calc((3 - var(--i)) * 10deg + var(--d) * 30deg));
	}

	85% {
		opacity: 0.9;
	}

	100% {
		opacity: 0;
		transform: translate(calc(var(--d) * -3cqi), 52cqi) rotate(calc((var(--i) - 3) * 12deg - var(--d) * 20deg));
	}
}

/* The body lifts on every downstroke. */
@keyframes hth-bob {
	0%,
	100% {
		transform: translateY(1.3%);
	}

	36% {
		transform: translateY(-1.7%);
	}
}

/* Each wing folds along its own axis, squeezed across it, from the shoulder. */
@keyframes hth-wing-front {
	0% {
		transform: rotate(-18deg) scaleY(1) rotate(18deg);
		animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.4);
	}

	36% {
		transform: rotate(-18deg) scaleY(-0.3) rotate(18deg);
		animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1);
	}

	100% {
		transform: rotate(-18deg) scaleY(1) rotate(18deg);
	}
}

@keyframes hth-wing-back {
	0% {
		transform: rotate(-30deg) scaleY(1) rotate(30deg);
		animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.4);
	}

	38% {
		transform: rotate(-30deg) scaleY(0.12) rotate(30deg);
		animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1);
	}

	100% {
		transform: rotate(-30deg) scaleY(1) rotate(30deg);
	}
}

/* ------------------------------------------------------------------ */
/* Less motion                                                         */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.ht-hero *,
	.ht-hero *::before,
	.ht-hero *::after {
		animation: none !important;
		transition: none !important;
	}

	.ht-hero .ht-hero__word,
	.ht-hero .ht-hero__cta,
	.ht-hero .ht-hero__trust,
	.ht-hero .ht-hero__down {
		opacity: 1;
		transform: none;
	}

	/* No story to skip or watch again. */
	.ht-hero .ht-hero__replay {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* French and English pages (v76): left to right                       */
/* ------------------------------------------------------------------ */

/* The words in the scene read left to right; the scene itself stays as drawn. */
:root:not([dir="rtl"]) .ht-hero__label-text,
:root:not([dir="rtl"]) .ht-hero__window {
	direction: ltr;
}

/* In the viewer, «previous» is on the left and points left. */
:root:not([dir="rtl"]) .ht-viewer .ht-viewer__prev {
	right: auto;
	left: 12px;
}

:root:not([dir="rtl"]) .ht-viewer .ht-viewer__next {
	right: 12px;
	left: auto;
}

:root:not([dir="rtl"]) .ht-viewer :is(.ht-viewer__prev, .ht-viewer__next) svg {
	transform: scaleX(-1);
}