/**
 * The quill's card (built by hero-card.js): the owner's design («تصميم العمل»)
 * laid over the page, where the quill writes up to six lines beside the cream
 * dove. Opened by the hero's golden plaque, and by the reels card's button
 * (class-hometech-reels-badge.php), so it lives apart from hero.css.
 *
 * Its dove flaps with keyframes of its own (htc-bob, htc-wing-*), copies of
 * the hero dove's, so this file needs nothing from hero.css.
 */

/* Playpen Sans Arabic, self-hosted (SIL Open Font License): the hand the quill
   writes the plaque's card in, the nearest free one to the design's lettering. */
@font-face {
	font-family: "HT Playpen";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/playpen-arabic-500.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 Playpen";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/playpen-latin-500.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 plaque's card (built by hero-card.js) ---------- */

/*
 * The owner's design («تصميم العمل») over the page: its gilt frame and light,
 * the cream dove, and up to six lines, each in its pink frame with a tick
 * and a garland. Inside the sheet a point of the design is --pt, a 595.5th
 * of its width; everything is placed with the design's own points.
 */
.ht-note {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 16px;
}

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

.ht-note__veil {
	position: absolute;
	inset: 0;
	background: rgb(28 18 6 / 58%);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.ht-note__sheet {
	--pt: calc(100cqi / 595.5);

	position: relative;
	overflow: hidden;
	inline-size: min(92vw, 440px, 88vh * 0.7071);
	aspect-ratio: 595.5 / 842.25;
	container-type: inline-size;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 50px rgb(0 0 0 / 35%);
	opacity: 0;
	transform: translateY(14px) scale(0.94);
	transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.12);
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

@supports (height: 1svh) {
	.ht-note__sheet {
		inline-size: min(92vw, 440px, 88svh * 0.7071);
	}
}

.ht-note.is-open .ht-note__veil {
	opacity: 1;
}

/* The sheet comes in once its frame has loaded (hero-card.js adds is-ready). */
.ht-note.is-open.is-ready .ht-note__sheet {
	opacity: 1;
	transform: none;
}

.ht-note .ht-note__frame {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
}

/* The design's light, where the frame has it, shining now and then. */
.ht-note .ht-note__light {
	position: absolute;
	top: calc(-19.96 * var(--pt));
	left: calc(-49.35 * var(--pt));
	display: block;
	inline-size: calc(294.86 * var(--pt));
	max-inline-size: none;
	block-size: calc(227.34 * var(--pt));
	opacity: 0;
	mix-blend-mode: screen;
	transform-origin: 48.5% 50%;
	animation: htc-twinkle 3.6s ease-in-out infinite;
	pointer-events: none;
}

/* The cream dove, flapping where the design puts it. */
.ht-note__bird {
	position: absolute;
	top: calc(162 * var(--pt));
	left: calc(60 * var(--pt));
	inline-size: calc(206 * var(--pt));
	block-size: calc(163 * var(--pt));
	animation: htc-float 3.2s ease-in-out infinite alternate;
}

.ht-note .ht-note__dove {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	animation: htc-bob 0.9s infinite;
}

.ht-note__wing--front {
	transform-origin: 300px 316px;
	animation: htc-wing-front 0.9s infinite;
}

.ht-note__wing--back {
	transform-origin: 336px 238px;
	animation: htc-wing-back 0.9s infinite;
}

/* The lines: each row is the design's row, 89 points tall, one every 91. */
.ht-note .ht-note__rows {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.ht-note .ht-note__row {
	position: absolute;
	top: calc((var(--top) + var(--i) * 91 * var(--s)) * var(--pt));
	left: 0;
	inline-size: calc(595.5 * var(--pt));
	block-size: calc(89 * var(--pt));
	margin: 0;
	padding: 0;
	transform: scale(var(--s));
	transform-origin: calc(334 * var(--pt)) 0;
}

.ht-note__check {
	position: absolute;
	top: calc(-2 * var(--pt));
	left: calc(104 * var(--pt));
	inline-size: calc(72 * var(--pt));
	block-size: calc(64 * var(--pt));
	background: url("../images/hero/card-check.svg") center / contain no-repeat;
}

.ht-note__pill {
	position: absolute;
	top: 0;
	left: calc(190 * var(--pt));
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: calc(300 * var(--pt));
	block-size: calc(60 * var(--pt));
	padding-inline: calc(22 * var(--pt));
}

.ht-note__pill::before {
	position: absolute;
	inset: 0;
	background: url("../images/hero/card-pill.svg") center / 100% 100% no-repeat;
	content: "";
}

.ht-note .ht-note__text {
	--fs: 32;

	position: relative;
	display: inline-block;
	color: #1f150b;
	font: 500 calc(var(--fs) * var(--pt) * var(--fit, 1)) / 1.5 "HT Playpen", "HT Cairo", sans-serif;
	white-space: nowrap;
}

/* A long line on two lines. */
.ht-note .is-two .ht-note__pill {
	flex-direction: column;
}

.ht-note .is-two .ht-note__text {
	--fs: 21;

	line-height: 1.22;
}

.ht-note__line {
	position: absolute;
	top: calc(61.5 * var(--pt));
	left: calc(164 * var(--pt));
	inline-size: calc(388 * var(--pt));
	block-size: calc(27.2 * var(--pt));
	background: url("../images/hero/card-line.webp") center / 100% 100% no-repeat;
}

/* The quill: its nib, at its foot, is where the script puts it. */
.ht-note .ht-note__pen {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	inline-size: calc(106 * var(--pt));
	block-size: calc(237.4 * var(--pt));
	transform-origin: 0 0;
	pointer-events: none;
}

.ht-note .ht-note__quill {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	transform-origin: 29.8% 100%;
	animation: htc-sway 3s ease-in-out infinite alternate;
}

.ht-note.is-writing .ht-note__quill {
	animation: htc-scribble 0.16s ease-in-out infinite alternate;
}

/* While it writes: each frame appears, the ink follows the nib (the
   script), then the tick pops and the garland opens from its middle. */
.ht-note.is-armed .ht-note__pill {
	opacity: 0;
	transition: opacity 0.35s ease;
}

.ht-note.is-armed .ht-note__pill::before {
	transform: scaleX(0.88);
	transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.ht-note.is-armed .is-in .ht-note__pill {
	opacity: 1;
}

.ht-note.is-armed .is-in .ht-note__pill::before {
	transform: none;
}

.ht-note.is-armed .ht-note__text {
	clip-path: inset(0 0 0 100%);
}

.ht-note.is-armed .ht-note__check {
	transform: scale(0);
}

.ht-note.is-armed .is-done .ht-note__check {
	animation: htc-tick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.ht-note.is-armed .ht-note__line {
	clip-path: inset(0 50%);
}

.ht-note.is-armed .is-done .ht-note__line {
	clip-path: inset(0);
	transition: clip-path 0.8s ease;
}

/* The ✕: a small gold seal in the corner. */
.ht-note .ht-note__close {
	position: absolute;
	top: calc(14 * var(--pt));
	right: calc(14 * var(--pt));
	z-index: 3;
	display: grid;
	place-items: center;
	inline-size: max(34px, calc(44 * var(--pt)));
	block-size: max(34px, calc(44 * var(--pt)));
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fbe7a6, #d4a541 55%, #9c6c18);
	box-shadow: 0 2px 6px rgb(120 80 10 / 45%), inset 0 0 0 1px rgb(255 255 255 / 45%);
	color: #fff;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.ht-note .ht-note__close:is(:hover, :focus-visible) {
	background: radial-gradient(circle at 35% 30%, #fbe7a6, #d4a541 55%, #9c6c18);
	color: #fff;
	transform: scale(1.08);
}

.ht-note .ht-note__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ht-note__close svg {
	inline-size: 52%;
	block-size: 52%;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2.6;
	stroke-linecap: round;
}

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

/* ---------- Motion ---------- */

@keyframes htc-twinkle {
	0%,
	100% {
		opacity: 0;
		transform: scale(0.85) rotate(0deg);
	}

	50% {
		opacity: 0.85;
		transform: scale(1.1) rotate(6deg);
	}
}

@keyframes htc-float {
	from {
		transform: translateY(0) rotate(-1.5deg);
	}

	to {
		transform: translateY(-3%) rotate(1.5deg);
	}
}

@keyframes htc-sway {
	from {
		transform: rotate(-3deg);
	}

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

@keyframes htc-scribble {
	from {
		transform: rotate(-2.5deg) translateY(-1.5%);
	}

	to {
		transform: rotate(1.5deg) translateY(0);
	}
}

@keyframes htc-tick {
	from {
		transform: scale(0);
	}

	60% {
		transform: scale(1.18);
	}

	to {
		transform: scale(1);
	}
}

/* The dove's body lifts on every downstroke; each wing folds along its own axis, from the shoulder. */
@keyframes htc-bob {
	0%,
	100% {
		transform: translateY(1.3%);
	}

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

@keyframes htc-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 htc-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);
	}
}

/* French and English pages (v76): the quill writes left to right (hero-card.js). */
:root:not([dir="rtl"]) .ht-note.is-armed .ht-note__text {
	clip-path: inset(0 100% 0 0);
}