/**
 * Animated greeting cards (assets/js/greeting-anim.js, inc/greeting-anim.php), beside greeting-card.css which stays as
 * it is: the « Animations et effets » panel, the preview, the openings (carte 3D, cadeau, enveloppe), the effects, the
 * organiser's message and the recipient's buttons. Durations come from --gca-d (Réglages > Cartes de vœux, speed).
 */

/* ---------- Panel « Animations et effets » (creation form) ---------- */

#wrapper .rd-gca-panel {
	margin-top: 24px;
	margin-bottom: 24px;
}

#wrapper .rd-gca-panel .rd-title {
	margin: 0 0 18px;
}

#wrapper .rd-gca-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 28px;
	margin-bottom: 18px;
}

#wrapper .rd-gca-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

#wrapper .rd-gca-group legend {
	margin: 0 0 10px;
	padding: 0;
	color: var(--rd-plum, #320131);
	font-size: 15px;
	font-weight: 700;
}

#wrapper .rd-gca-group .rd-gc-help {
	margin: -4px 0 10px;
}

#wrapper .rd-gca-group .rd-gca-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 8px 8px 0;
	padding: 7px 14px 7px 8px;
	border: 1px solid var(--rd-line, #E8DCE3);
	border-radius: 999px;
	background: var(--rd-surface, #FFF);
	color: var(--rd-plum, #320131);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

#wrapper .rd-gca-group .rd-gca-choice[hidden] {
	display: none;
}

#wrapper .rd-gca-choice input,
#wrapper .rd-gca-pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

#wrapper .rd-gca-choice:has(input:checked),
#wrapper .rd-gca-pill:has(input:checked) {
	border-color: var(--rd-berry, #B31E6F);
	box-shadow: 0 0 0 1px var(--rd-berry, #B31E6F);
	font-weight: 700;
}

#wrapper .rd-gca-choice:has(input:focus-visible),
#wrapper .rd-gca-pill:has(input:focus-visible) {
	outline: 2px solid var(--rd-berry, #B31E6F);
	outline-offset: 2px;
}

/* Small round icons of each animation, drawn in CSS */
#wrapper .rd-gca-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--rd-pink, #FBE4EF);
	color: var(--rd-berry, #B31E6F);
	font-size: 14px;
	line-height: 1;
}

#wrapper .rd-gca-icon::before {
	content: "✦";
}

#wrapper .rd-gca-icon.is-enveloppe::before { content: "✉"; }
#wrapper .rd-gca-icon.is-carte3d::before { content: "❐"; }
#wrapper .rd-gca-icon.is-cadeau::before { content: "🎁"; font-size: 13px; }
#wrapper .rd-gca-icon.is-modele::before { content: "▶"; font-size: 11px; }
#wrapper .rd-gca-icon.is-aucune::before { content: "○"; }
#wrapper .rd-gca-icon.is-confettis::before { content: "🎉"; font-size: 13px; }
#wrapper .rd-gca-icon.is-coeurs::before { content: "♥"; }
#wrapper .rd-gca-icon.is-fleurs::before { content: "✿"; }
#wrapper .rd-gca-icon.is-neige::before { content: "❄"; }
#wrapper .rd-gca-icon.is-ballons::before { content: "🎈"; font-size: 13px; }
#wrapper .rd-gca-icon.is-papillons::before { content: "🦋"; font-size: 13px; }
#wrapper .rd-gca-icon.is-etincelles::before { content: "✧"; }
#wrapper .rd-gca-icon.is-feux::before { content: "🎆"; font-size: 13px; }
#wrapper .rd-gca-icon.is-bougies::before { content: "🕯"; font-size: 13px; }

#wrapper .rd-gca-group.is-inline .rd-gca-pill {
	display: inline-flex;
	margin: 0 6px 6px 0;
	padding: 6px 14px;
	border: 1px solid var(--rd-line, #E8DCE3);
	border-radius: 999px;
	color: var(--rd-plum, #320131);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

#wrapper .rd-gca-swatches {
	display: inline-flex;
	margin-right: 6px;
}

#wrapper .rd-gca-swatches i {
	width: 12px;
	height: 12px;
	margin-right: -3px;
	border: 2px solid #FFF;
	border-radius: 50%;
}

#wrapper .rd-gca-note {
	margin: -8px 0 18px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--rd-cream, #FBF6F3);
	color: var(--rd-plum, #320131);
	font-size: 14px;
}

#wrapper .rd-gca-note[hidden] {
	display: none;
}

#wrapper .rd-gca-warning {
	margin: 4px 0 0;
	color: #B3261E;
	font-size: 14px;
}

#wrapper .rd-gca-pair {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 0 20px;
}

#wrapper .rd-gca-field textarea {
	min-height: 120px;
	white-space: pre-wrap;
}

#wrapper .rd-gca-counter {
	margin: 4px 0 0;
	color: var(--rd-muted);
	font-size: 13px;
	text-align: right;
}

#wrapper .rd-gca-field.is-full .rd-gca-counter {
	color: var(--rd-berry, #B31E6F);
	font-weight: 700;
}

#wrapper .rd-gca-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 0;
}

@media (max-width: 700px) {
	#wrapper .rd-gca-grid,
	#wrapper .rd-gca-pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Preview window ---------- */

.rd-gca-dialog {
	width: min(860px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 22px;
	background: var(--rd-cream, #FBF6F3);
	box-shadow: 0 30px 80px -30px rgba(50, 1, 49, .6);
}

.rd-gca-dialog::backdrop {
	background: rgba(30, 6, 30, .6);
}

.rd-gca-dialog-inner {
	padding: 24px;
}

.rd-gca-dialog-close {
	margin: 0;
	padding: 0 24px 24px;
	text-align: center;
}

/* ---------- The card as received (preview, and the card's page) ---------- */

.rd-gca-card {
	position: relative;
	min-height: 420px;
}

.rd-gca-closed {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 16px;
	text-align: center;
}

.rd-gca-closed[hidden],
.rd-gca-opened[hidden],
#wrapper .rd-gca-panel [hidden] {
	display: none !important;
}

.rd-gca-closed-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 110px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--rd-pink, #FBE4EF);
	color: var(--rd-berry, #B31E6F);
	font-size: 52px;
	animation: gca-float 3s ease-in-out infinite;
}

.rd-gca-closed-icon::before { content: "✉"; }
.rd-gca-closed-icon.is-carte3d::before { content: "❐"; }
.rd-gca-closed-icon.is-cadeau::before { content: "🎁"; font-size: 48px; }
.rd-gca-closed-icon.is-modele::before,
.rd-gca-closed-icon.is-aucune::before { content: "✦"; }

.rd-gca-closed-title {
	margin: 0;
	color: var(--rd-plum, #320131);
	font-family: var(--rd-title-font);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.15;
}

.rd-gca-closed-for {
	margin: 0 0 8px;
	color: var(--rd-berry, #B31E6F);
	font-size: 18px;
	font-weight: 700;
}

.rd-gca-opened .rd-gc-face {
	margin-bottom: 18px;
}

/* The card's own page: our closed card where its envelope was */
#wrapper .rd-gca-closed.is-page {
	padding: 56px 16px;
}

/* Age on the card */
.rd-gca-face {
	position: relative;
}

.rd-gca-age {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--rd-plum, #320131);
	font-family: var(--rd-title-font);
	font-size: 18px;
	font-weight: 800;
}

.rd-gca-face.is-clickable {
	cursor: pointer;
}

/* The organiser's message and signature: a paper sheet under the card, never covered by an effect */
.rd-gca-letter {
	max-width: 680px;
	margin: 22px auto 18px;
	padding: 26px 30px;
	border-radius: 18px;
	background: var(--rd-surface, #FFF);
	box-shadow: 0 10px 30px -22px rgba(50, 1, 49, .5);
	color: var(--rd-plum, #320131);
	text-align: left;
}

.rd-gca-message {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.rd-gca-signature {
	margin: 16px 0 0;
	color: var(--rd-berry, #B31E6F);
	font-family: var(--rd-title-font);
	font-size: 18px;
	font-weight: 700;
	text-align: right;
	overflow-wrap: anywhere;
}

.rd-gca-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 18px;
}

.rd-gca-row:empty {
	display: none;
}

/* Sharing buttons (links of the created card) */
.rd-gca-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 14px;
}

.rd-gca-share-link {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--rd-line, #E8DCE3);
	border-radius: 999px;
	background: var(--rd-surface, #FFF);
	color: var(--rd-plum, #320131);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.rd-gca-share-link.is-whatsapp {
	border-color: #25D366;
	color: #128C4A;
}

.rd-gca-save-error {
	margin: 0 0 12px;
	color: #B3261E;
	font-weight: 600;
}

/* ---------- Openings: a stage over the page, played then faded out ---------- */

.rd-gca-stage {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	background: radial-gradient(circle at 50% 40%, rgba(80, 10, 70, .82), rgba(30, 6, 30, .94));
	transition: opacity .35s ease;
}

.rd-gca-stage.is-inline {
	position: absolute;
	z-index: 5;
	border-radius: 18px;
}

.rd-gca-stage.is-done {
	opacity: 0;
	pointer-events: none;
}

.rd-gca-scene {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	perspective: 1600px;
}

.rd-gca-skip.rd-btn {
	border-color: rgba(255, 255, 255, .7);
	background: transparent;
	color: #FFF;
}

/* Card 3D: the cover opens like a paper card, the card comes forward */
.rd-gca-book {
	position: relative;
	/* Open, the card is twice as wide: half the screen at most, and half the frame of a preview */
	width: min(42vw, 440px, 42%);
	aspect-ratio: 16 / 10;
	transform-style: preserve-3d;
}

.rd-gca-book-inside {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: #FFFBF7;
	color: var(--rd-berry, #B31E6F);
	font-size: 42px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

.rd-gca-book-cover {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform-style: preserve-3d;
}

.rd-gca-book-front,
.rd-gca-book-back {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	backface-visibility: hidden;
}

.rd-gca-book-front {
	background: var(--gca-img) center / cover no-repeat, var(--gca-bg);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
}

.rd-gca-book-back {
	background: linear-gradient(135deg, #FBE4EF, #FFFBF7);
	transform: rotateY(180deg);
}

.rd-gca-stage.is-playing .rd-gca-book-cover {
	animation: gca-book-open var(--gca-d) cubic-bezier(.45, .05, .25, 1) forwards;
}

.rd-gca-stage.is-playing .rd-gca-book {
	animation: gca-book-forward var(--gca-d) ease-in-out forwards;
}

@keyframes gca-book-open {
	0%, 12% { transform: rotateY(0); }
	70%, 100% { transform: rotateY(-168deg); }
}

/* The spread kept in the middle as the cover opens to the left */
@keyframes gca-book-forward {
	0% { transform: scale(.9) rotateX(8deg); }
	15% { transform: scale(1) rotateX(0); }
	70% { transform: translateX(50%); }
	100% { transform: translateX(50%) scale(1.06); opacity: .9; }
}

/* Gift: it wobbles, the lid flies off, the card rises out in a glow */
.rd-gca-gift {
	position: relative;
	width: 200px;
	height: 220px;
}

.rd-gca-gift-box,
.rd-gca-gift-lid {
	position: absolute;
	left: 50%;
	border-radius: 10px;
	background:
		linear-gradient(90deg, transparent 43%, #FFD166 43%, #FFD166 57%, transparent 57%),
		var(--rd-berry, #B31E6F);
	transform: translateX(-50%);
}

.rd-gca-gift-box {
	bottom: 0;
	width: 180px;
	height: 140px;
	box-shadow: 0 30px 50px -25px rgba(0, 0, 0, .7);
}

.rd-gca-gift-lid {
	bottom: 132px;
	z-index: 3;
	width: 200px;
	height: 44px;
}

.rd-gca-gift-bow {
	position: absolute;
	top: -30px;
	left: 50%;
	width: 60px;
	height: 34px;
	transform: translateX(-50%);
}

.rd-gca-gift-bow::before,
.rd-gca-gift-bow::after {
	content: "";
	position: absolute;
	top: 0;
	width: 30px;
	height: 30px;
	border: 7px solid #FFD166;
	border-radius: 50% 50% 0 50%;
}

.rd-gca-gift-bow::before {
	left: 0;
	transform: rotate(-20deg);
}

.rd-gca-gift-bow::after {
	right: 0;
	transform: scaleX(-1) rotate(-20deg);
}

.rd-gca-gift-card {
	position: absolute;
	bottom: 30px;
	left: 50%;
	z-index: 1;
	width: 160px;
	aspect-ratio: 16 / 10;
	border-radius: 8px;
	background: var(--gca-img) center / cover no-repeat, var(--gca-bg);
	opacity: 0;
	transform: translateX(-50%);
}

.rd-gca-gift-glow {
	position: absolute;
	top: 20%;
	left: 50%;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 220, 140, .85), transparent 65%);
	opacity: 0;
	transform: translate(-50%, -30%) scale(.3);
}

.rd-gca-stage.is-playing .rd-gca-gift { animation: gca-gift-wobble var(--gca-d) ease-in-out forwards; }
.rd-gca-stage.is-playing .rd-gca-gift-lid { animation: gca-gift-lid var(--gca-d) ease-in forwards; }
.rd-gca-stage.is-playing .rd-gca-gift-glow { animation: gca-gift-glow var(--gca-d) ease-out forwards; }
.rd-gca-stage.is-playing .rd-gca-gift-card { animation: gca-gift-card var(--gca-d) cubic-bezier(.2, .8, .3, 1) forwards; }
.rd-gca-stage.is-playing .rd-gca-gift-box { animation: gca-gift-box var(--gca-d) ease-in forwards; }

@keyframes gca-gift-wobble {
	0%, 4% { transform: rotate(0); }
	8% { transform: rotate(-6deg); }
	14% { transform: rotate(6deg); }
	20% { transform: rotate(-4deg); }
	26%, 100% { transform: rotate(0); }
}

@keyframes gca-gift-lid {
	0%, 28% { transform: translateX(-50%); opacity: 1; }
	50% { transform: translate(-90%, -180px) rotate(-35deg); opacity: 1; }
	62%, 100% { transform: translate(-110%, -240px) rotate(-50deg); opacity: 0; }
}

@keyframes gca-gift-glow {
	0%, 30% { opacity: 0; transform: translate(-50%, -30%) scale(.3); }
	60% { opacity: 1; transform: translate(-50%, -30%) scale(1); }
	100% { opacity: .4; transform: translate(-50%, -30%) scale(1.6); }
}

@keyframes gca-gift-card {
	0%, 35% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
	70% { opacity: 1; transform: translate(-50%, -150px) scale(1.4); }
	100% { opacity: 1; transform: translate(-50%, -120px) scale(2); }
}

@keyframes gca-gift-box {
	0%, 60% { opacity: 1; transform: translateX(-50%); }
	100% { opacity: 0; transform: translate(-50%, 60px); }
}

/* Envelope (replay and preview of « Enveloppe magique »): the flap opens, the card slides out */
.rd-gca-env {
	position: relative;
	width: min(70vw, 380px);
	aspect-ratio: 3 / 2;
}

.rd-gca-env-back,
.rd-gca-env-front,
.rd-gca-env-flap {
	position: absolute;
	inset: 0;
	border-radius: 10px;
}

.rd-gca-env-back {
	background: #E9D3DD;
}

.rd-gca-env-front {
	z-index: 3;
	background: #F7E7EE;
	clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
	box-shadow: 0 30px 50px -25px rgba(0, 0, 0, .7);
}

.rd-gca-env-flap {
	z-index: 4;
	background: #EBCFDB;
	clip-path: polygon(0 0, 100% 0, 50% 58%);
	transform-origin: top center;
}

.rd-gca-env-card {
	position: absolute;
	inset: 8% 7%;
	z-index: 2;
	border-radius: 8px;
	background: var(--gca-img) center / cover no-repeat, var(--gca-bg);
}

.rd-gca-stage.is-playing .rd-gca-env-flap { animation: gca-env-flap var(--gca-d) ease-in-out forwards; }
.rd-gca-stage.is-playing .rd-gca-env .rd-gca-env-card { animation: gca-env-card var(--gca-d) cubic-bezier(.2, .8, .3, 1) forwards; }

@keyframes gca-env-flap {
	0%, 10% { transform: rotateX(0); z-index: 4; }
	35% { transform: rotateX(180deg); z-index: 1; }
	100% { transform: rotateX(180deg); z-index: 1; }
}

@keyframes gca-env-card {
	0%, 35% { transform: translateY(0); z-index: 2; }
	65% { transform: translateY(-70%); z-index: 2; }
	66% { z-index: 5; }
	100% { transform: translateY(-20%) scale(1.5); z-index: 5; }
}

/* Plain: the card comes in */
.rd-gca-plain .rd-gca-env-card {
	position: relative;
	display: block;
	inset: auto;
	width: min(70vw, 460px);
	aspect-ratio: 16 / 10;
}

.rd-gca-stage.is-playing .rd-gca-plain .rd-gca-env-card {
	animation: gca-plain var(--gca-d) ease-out forwards;
}

@keyframes gca-plain {
	0% { opacity: 0; transform: scale(.8); }
	100% { opacity: 1; transform: scale(1); }
}

/* ---------- Effects: particles over the card's face ---------- */

.rd-gca-layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
}

.rd-gca-p {
	position: absolute;
	display: block;
	line-height: 1;
	animation-fill-mode: both;
	animation-timing-function: linear;
	will-change: transform, opacity;
}

.rd-gca-p.is-confettis {
	top: -6%;
	width: 8px;
	height: 12px;
	border-radius: 2px;
	animation-name: gca-fall;
}

.rd-gca-p.is-coeurs {
	bottom: -10%;
	animation-name: gca-rise;
	animation-timing-function: ease-out;
}

.rd-gca-p.is-etoiles {
	color: #FFE9A8;
	text-shadow: 0 0 8px rgba(255, 233, 168, .9);
	animation-name: gca-twinkle;
	animation-iteration-count: 3;
	animation-timing-function: ease-in-out;
}

.rd-gca-p.is-fleurs {
	text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	transform-origin: 50% 100%;
	animation-name: gca-grow;
	animation-timing-function: cubic-bezier(.3, 1.6, .5, 1);
}

/* The distance: the face's height (--gca-h, set by the script on the layer) */
@keyframes gca-fall {
	0% { opacity: 0; transform: translate(0, 0) rotate(0); }
	8% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--gca-x, 0), calc(var(--gca-h, 400px) + 20px)) rotate(var(--gca-r, 360deg)); }
}

@keyframes gca-rise {
	0% { opacity: 0; transform: translate(0, 0) scale(.6); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--gca-x, 0), calc(-1 * var(--gca-h, 400px) - 20px)) scale(1.1); }
}

@keyframes gca-twinkle {
	0%, 100% { opacity: 0; transform: scale(.3) rotate(0); }
	50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes gca-grow {
	0% { opacity: 0; transform: scale(0) rotate(-40deg); }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes gca-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* ---------- Phase 2 effects ---------- */

.rd-gca-p.is-neige {
	top: -6%;
	color: #FFF;
	text-shadow: 0 0 6px rgba(255, 255, 255, .8);
	animation-name: gca-fall;
	animation-timing-function: ease-in-out;
}

.rd-gca-p.is-neige:empty {
	width: var(--gca-s, 5px);
	height: var(--gca-s, 5px);
	border-radius: 50%;
	background: #FFF;
	box-shadow: 0 0 6px rgba(255, 255, 255, .8);
}

.rd-gca-p.is-ballons {
	bottom: -22%;
	width: var(--gca-w, 34px);
	height: calc(var(--gca-w, 34px) * 1.2);
	border-radius: 50% 50% 48% 48%;
	background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55), transparent 30%), var(--gca-c, #B31E6F);
	animation-name: gca-rise;
	animation-timing-function: ease-in;
}

.rd-gca-p.is-ballons::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 1px;
	height: 40px;
	background: rgba(255, 255, 255, .7);
}

.rd-gca-p.is-papillons {
	left: -10%;
	animation-name: gca-fly;
	animation-timing-function: ease-in-out;
}

.rd-gca-p.is-etincelles {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #FFE08A;
	box-shadow: 0 0 8px 2px rgba(255, 210, 110, .9);
	animation-name: gca-spark;
	animation-timing-function: ease-out;
}

.rd-gca-p.is-feux {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	box-shadow: 0 0 6px 1px currentColor;
	animation-name: gca-burst;
	animation-timing-function: cubic-bezier(.1, .7, .3, 1);
}

@keyframes gca-fly {
	0% { opacity: 0; transform: translate(0, 0) scaleX(1); }
	10% { opacity: 1; }
	25% { transform: translate(calc(var(--gca-wd, 640px) * .25), var(--gca-y, 0)) scaleX(.6); }
	50% { transform: translate(calc(var(--gca-wd, 640px) * .5), 0) scaleX(1); }
	75% { transform: translate(calc(var(--gca-wd, 640px) * .75), var(--gca-y, 0)) scaleX(.6); }
	90% { opacity: 1; }
	100% { opacity: 0; transform: translate(calc(var(--gca-wd, 640px) * 1.15), 0) scaleX(1); }
}

@keyframes gca-spark {
	0% { opacity: 0; transform: translate(0, 0) scale(.4); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--gca-x, 0), var(--gca-y, 0)) scale(1); }
}

@keyframes gca-burst {
	0% { opacity: 0; transform: translate(0, 0) scale(.5); }
	8% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--gca-x, 0), calc(var(--gca-y, 0px) + 30px)) scale(.6); }
}

/* Candles: lit on the card, blown out with a click */
.rd-gca-candles {
	position: absolute;
	bottom: 6%;
	left: 50%;
	z-index: 4;
	display: flex;
	gap: clamp(6px, 1.5vw, 14px);
	transform: translateX(-50%);
	cursor: pointer;
}

.rd-gca-candle {
	position: relative;
	display: block;
	width: clamp(9px, 1.4vw, 14px);
	height: clamp(34px, 6vw, 56px);
	border-radius: 3px 3px 2px 2px;
	background: repeating-linear-gradient(135deg, var(--gca-c, #B31E6F) 0 6px, #FFF 6px 10px);
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
}

.rd-gca-flame {
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 12px;
	height: 20px;
	margin-left: -6px;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: radial-gradient(circle at 50% 70%, #FFF6C8 0 25%, #FFC14D 45%, #FF7A1A 75%, transparent 80%);
	box-shadow: 0 0 18px 6px rgba(255, 180, 80, .55);
	transform-origin: 50% 100%;
	animation: gca-flicker .18s ease-in-out infinite alternate;
}

.rd-gca-candle.is-out .rd-gca-flame {
	animation: gca-blow .5s ease-out forwards;
}

.rd-gca-candle.is-out::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: rgba(220, 220, 220, .7);
	animation: gca-smoke 1.4s ease-out forwards;
}

@keyframes gca-flicker {
	from { transform: scale(1, 1) rotate(-2deg); }
	to { transform: scale(.92, 1.08) rotate(2deg); }
}

@keyframes gca-blow {
	to { opacity: 0; transform: scale(.2, .4) translateX(8px); }
}

@keyframes gca-smoke {
	0% { opacity: .8; transform: translateY(0) scale(1); }
	100% { opacity: 0; transform: translateY(-40px) scale(3); }
}

.rd-gca-blown {
	min-height: 1.4em;
	margin: 0 0 8px;
	color: var(--rd-berry, #B31E6F);
	font-family: var(--rd-title-font);
	font-size: 20px;
	font-weight: 800;
	text-align: center;
}

.rd-gca-blown:empty {
	display: none;
}

/* Message written by hand */
.rd-gca-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rd-gca-letter.is-handwriting .rd-gca-message,
.rd-gca-letter.is-handwriting .rd-gca-signature {
	font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Apple Chancery", cursive;
	font-size: 21px;
	line-height: 1.55;
}

.rd-gca-letter.is-writing {
	cursor: pointer;
}

.rd-gca-letter.is-writing .rd-gca-drawn::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	background: var(--rd-berry, #B31E6F);
	vertical-align: -2px;
	animation: gca-caret .7s steps(1) infinite;
}

@keyframes gca-caret {
	50% { opacity: 0; }
}

/* Gallery of memories: the photos come in one by one */
.rd-gca-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 820px;
	margin: 0 auto 22px;
}

.rd-gca-gallery .rd-gca-photo {
	flex: 0 1 150px;
}

.rd-gca-photo {
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
	background: #FFF;
	box-shadow: 0 10px 24px -16px rgba(50, 1, 49, .6);
	opacity: 0;
}

.rd-gca-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.rd-gca-gallery.is-shown .rd-gca-photo {
	animation: gca-photo .6s ease-out forwards;
	animation-delay: calc(var(--gca-i, 0) * .45s + .3s);
}

@keyframes gca-photo {
	0% { opacity: 0; transform: translateY(16px) rotate(-3deg) scale(.92); }
	100% { opacity: 1; transform: none; }
}

/* The organiser's text written on the picture, in place of the model's title */
.rd-gca-face.rd-gca-has-text .rd-gc-face-title,
.rd-gc-face.rd-gca-has-text .rd-gc-face-title {
	visibility: hidden;
}

.rd-gca-facetext {
	position: absolute;
	right: 6%;
	left: 6%;
	z-index: 3;
	color: #FFF;
	font-family: var(--rd-title-font);
	font-size: clamp(18px, 5vw, 52px);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
	white-space: pre-line;
	overflow-wrap: anywhere;
	text-wrap: balance;
	pointer-events: none;
}

/* Text at the top: the age goes to the bottom corner */
.rd-gc-face:has(.rd-gca-facetext.is-haut) .rd-gca-age {
	top: auto;
	bottom: 14px;
}

.rd-gc-face.is-ink-dark .rd-gca-facetext {
	color: var(--rd-plum, #320131);
	text-shadow: 0 1px 10px rgba(255, 255, 255, .7);
}

.rd-gca-facetext.is-haut { top: 8%; }
.rd-gca-facetext.is-centre { top: 50%; transform: translateY(-50%); }
.rd-gca-facetext.is-bas { bottom: 9%; }

/* ---------- « Texte sur la carte » (in « Personnalisez votre carte ») ---------- */

#wrapper .rd-gca-text {
	margin: 0 0 22px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--rd-cream, #FBF6F3);
}

#wrapper .rd-gca-text .rd-gca-group {
	margin-bottom: 8px;
}

#wrapper .rd-gca-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#wrapper .rd-gca-chip {
	padding: 7px 14px;
	border: 1px solid var(--rd-line, #E8DCE3);
	border-radius: 999px;
	background: var(--rd-surface, #FFF);
	color: var(--rd-plum, #320131);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

#wrapper .rd-gca-chip[aria-pressed="true"] {
	border-color: var(--rd-berry, #B31E6F);
	box-shadow: 0 0 0 1px var(--rd-berry, #B31E6F);
}

/* ---------- Uploads (100 % customisable card, gallery) ---------- */

#wrapper .rd-gca-upload input[type="file"] {
	width: 100%;
	padding: 10px;
	border: 1px dashed var(--rd-line, #E8DCE3);
	border-radius: 10px;
	background: var(--rd-surface, #FFF);
	font: inherit;
}

#wrapper .rd-gca-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

#wrapper .rd-gca-thumbs img {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
}

#wrapper .rd-gca-consent label,
#wrapper .rd-gca-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 6px 0 12px;
	color: var(--rd-text);
	font-size: 14px;
	font-weight: 400;
}

#wrapper .rd-gca-consent input,
#wrapper .rd-gca-check input {
	margin-top: 3px;
	accent-color: var(--rd-berry, #B31E6F);
}

/* ---------- Live preview beside the choices ---------- */

#wrapper .rd-gc-box.rd-gca-panel {
	max-width: 1120px;
}

#wrapper .rd-gca-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	align-items: start;
	gap: 32px;
}

#wrapper .rd-gca-layout .rd-gca-grid {
	grid-template-columns: minmax(0, 1fr);
}

#wrapper .rd-gca-live {
	position: sticky;
	top: 96px;
	padding: 14px;
	border-radius: 18px;
	background: var(--rd-cream, #FBF6F3);
}

#wrapper .rd-gca-live-label {
	margin: 0 0 10px;
	color: var(--rd-berry, #B31E6F);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

#wrapper .rd-gca-live-stage {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
}

#wrapper .rd-gca-live .rd-gc-face {
	max-width: none;
	margin: 0;
	border-radius: 14px;
}

#wrapper .rd-gca-live .rd-gc-face-title {
	font-size: 20px;
}

#wrapper .rd-gca-live .rd-gca-stage .rd-gca-scene {
	transform: scale(.42);
}

#wrapper .rd-gca-live .rd-gca-stage .rd-gca-skip {
	display: none;
}

#wrapper .rd-gca-live-letter .rd-gca-letter {
	margin: 12px 0 0;
	padding: 14px 16px;
}

#wrapper .rd-gca-live-letter .rd-gca-message {
	font-size: 14px;
}

#wrapper .rd-gca-live-letter .rd-gca-signature {
	margin-top: 8px;
	font-size: 15px;
}

#wrapper .rd-gca-live-letter .rd-gca-gallery {
	justify-content: flex-start;
	gap: 6px;
	margin: 10px 0 0;
}

#wrapper .rd-gca-live-letter .rd-gca-photo {
	flex-basis: 30%;
}

#wrapper .rd-gca-live .rd-gca-candles {
	transform: translateX(-50%) scale(.7);
	transform-origin: 50% 100%;
}

#wrapper .rd-gca-live .rd-gca-blown {
	font-size: 15px;
}

@media (max-width: 960px) {
	#wrapper .rd-gca-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Phones: the live preview first, so that each choice shows above */
	#wrapper .rd-gca-live {
		position: static;
		order: -1;
	}
}

/* Reduced motion: nothing moves, the card and its message at once */
@media (prefers-reduced-motion: reduce) {
	.rd-gca-closed-icon,
	.rd-gca-stage,
	.rd-gca-stage * {
		animation: none !important;
		transition: none !important;
	}

	.rd-gca-layer {
		display: none;
	}

	.rd-gca-photo {
		opacity: 1;
	}

	.rd-gca-flame,
	.rd-gca-gallery.is-shown .rd-gca-photo {
		animation: none !important;
	}
}

@media print {
	.rd-gca-row,
	.rd-gca-share,
	.rd-gca-stage {
		display: none !important;
	}
}