/**
 * A card with two sides. The turn is CSS alone; the script is only there for a
 * tap and for the keyboard.
 */

.lcfc-card {
	--lcfc-duration: 600ms;
	--lcfc-depth: 1400px;

	position: relative;
	display: block;
	width: 100%;
	perspective: var(--lcfc-depth);
	cursor: pointer;
	outline-offset: 4px;
}

.lcfc-link {
	display: block;
	text-decoration: none;
}

.lcfc-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform var(--lcfc-duration) cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* With no shape set, the front picture gives the card its height and the back
   is laid over it. */
.lcfc-face {
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.lcfc-front {
	position: relative;
}

.lcfc-back {
	position: absolute;
	inset: 0;
}

.lcfc-face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A card given a shape holds it, and both sides fill it. */
.lcfc-card[style*="aspect-ratio"] .lcfc-front {
	position: absolute;
	inset: 0;
}

/* Which way round the back starts, so it is behind the front until the turn. */
.lcfc-axis-y .lcfc-back {
	transform: rotateY(180deg);
}

.lcfc-axis-x .lcfc-back {
	transform: rotateX(180deg);
}

.lcfc-axis-y.lcfc-turns-back .lcfc-back {
	transform: rotateY(-180deg);
}

.lcfc-axis-x.lcfc-turns-back .lcfc-back {
	transform: rotateX(-180deg);
}

/* The turn itself, from a tap, a click or the keyboard. */
.lcfc-card.is-turned .lcfc-inner {
	transform: rotateY(180deg);
}

.lcfc-axis-x.lcfc-card.is-turned .lcfc-inner {
	transform: rotateX(180deg);
}

.lcfc-turns-back.lcfc-card.is-turned .lcfc-inner {
	transform: rotateY(-180deg);
}

.lcfc-axis-x.lcfc-turns-back.lcfc-card.is-turned .lcfc-inner {
	transform: rotateX(-180deg);
}

/* And from the mouse, but only where there is a mouse. A phone leaves :hover
   stuck on whatever was tapped last, which held the card over until something
   else was touched. */
@media ( hover: hover ) and ( pointer: fine ) {
	.lcfc-by-hover:hover .lcfc-inner {
		transform: rotateY(180deg);
	}

	.lcfc-axis-x.lcfc-by-hover:hover .lcfc-inner {
		transform: rotateX(180deg);
	}

	.lcfc-turns-back.lcfc-by-hover:hover .lcfc-inner {
		transform: rotateY(-180deg);
	}

	.lcfc-axis-x.lcfc-turns-back.lcfc-by-hover:hover .lcfc-inner {
		transform: rotateX(-180deg);
	}
}

/* Asked for less movement, the card changes sides without the spin. */
@media ( prefers-reduced-motion: reduce ) {
	.lcfc-inner {
		transform: none !important;
		transition: none;
	}

	.lcfc-face {
		backface-visibility: visible;
		-webkit-backface-visibility: visible;
		transform: none !important;
		transition: opacity var(--lcfc-duration) ease;
	}

	.lcfc-back {
		opacity: 0;
	}

	.lcfc-card.is-turned .lcfc-back {
		opacity: 1;
	}

	@media ( hover: hover ) and ( pointer: fine ) {
		.lcfc-by-hover:hover .lcfc-back {
			opacity: 1;
		}
	}
}

/* ---------------------------------------------------------------------------
   A folded note. The picture inside is the whole sheet; folded, the note stands
   half as tall, and the flap carries the cover on its outside and the top of the
   sheet on its inside. Clicking turns the flap up around the fold.
   --------------------------------------------------------------------------- */

.lcfc-note {
	--lcfc-duration: 700ms;
	--lcfc-depth: 1600px;

	position: relative;
	width: 100%;
	padding-top: var(--lcfc-closed);
	perspective: var(--lcfc-depth);
	cursor: pointer;
	transition: padding-top var(--lcfc-duration) cubic-bezier(0.3, 0.7, 0.2, 1),
		height var(--lcfc-duration) cubic-bezier(0.3, 0.7, 0.2, 1);
	outline-offset: 4px;
}

.lcfc-note.is-open {
	padding-top: var(--lcfc-open);
}

/* Measured by the script, the note carries a height in pixels instead. A height
   worked out from a percentage of its own width leaves Elementor's container —
   which is told to be 100% of the widget — with nothing definite to measure, and
   the whole column collapses to nothing while the note spills over the section
   below it. */
.lcfc-note.lcfc-sized {
	padding-top: 0;
}

.elementor-widget-container:has( > .lcfc-note ) {
	height: auto !important;
}

/* Only the half of the sheet that is not folded over is ever shown here: the
   other half belongs to the flap, and appears as the flap turns onto it. Anything
   else and the hidden half slides into view from under the fold, which is not what
   paper does. */
.lcfc-window {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	padding-top: var(--lcfc-closed);
	overflow: hidden;
}

/* Open, the window reaches a pixel past the fold, so the rounding between the two
   halves cannot show the page through as a hairline. Folded it must not: there the
   flap covers the window exactly, and a pixel more would peek out under its edge. */
.lcfc-note.is-open .lcfc-window {
	padding-top: calc( var(--lcfc-closed) + 1px );
}

.lcfc-opens-up .lcfc-window {
	top: auto;
	bottom: 0;
}

.lcfc-sheet {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	padding-top: var(--lcfc-open);
}

.lcfc-opens-up .lcfc-sheet {
	top: auto;
	bottom: 0;
}

.lcfc-sheet img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The flap covers the folded note and turns about the fold at its top edge. */
.lcfc-flap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: var(--lcfc-closed);
	transform-origin: center top;
	transform-style: preserve-3d;
	transition: transform var(--lcfc-duration) cubic-bezier(0.3, 0.7, 0.2, 1);
	pointer-events: none;
}

.lcfc-opens-down .lcfc-flap {
	bottom: auto;
	top: 0;
	transform-origin: center bottom;
}

/* The flap falls towards the reader rather than away from them: a note opens by
   flopping forward, and going the other way puts the paper behind the page. */
.lcfc-note.is-open .lcfc-flap {
	transform: rotateX(180deg);
}

.lcfc-opens-down.lcfc-note.is-open .lcfc-flap {
	transform: rotateX(-180deg);
}

.lcfc-flap-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.lcfc-flap-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The other side of the flap is the half of the sheet it was hiding, so the
   picture is hung at twice the flap's height and pulled to the right half. */
.lcfc-flap-inside {
	transform: rotateX(-180deg);
}

.lcfc-opens-up .lcfc-flap-inside {
	transform: rotateX(180deg);
}

.lcfc-flap-inside img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 200%;
	width: 100%;
	object-fit: cover;
	display: block;
}

/* Nothing of the page should show between the flap and the sheet along the fold. */
.lcfc-flap-face {
	outline: 1px solid transparent;
}

.lcfc-opens-down .lcfc-flap-inside img {
	top: auto;
	bottom: 0;
}

/* Asked for less movement, the note opens without the turn. */
@media ( prefers-reduced-motion: reduce ) {
	.lcfc-flap {
		transition: opacity var(--lcfc-duration) ease;
	}

	.lcfc-note.is-open .lcfc-flap {
		transform: none;
		opacity: 0;
	}
}