@use "sass:color" as sass-color;
@use "@styles/color";
@use "@styles/var";

/* Everything on a page is a multiple of one ruled line.
 *
 * `--book-line` is the height of that line and the single source of truth for
 * the ruling, the text leading, the stamp positions and the caret. JS reads its
 * resolved pixel value back with getComputedStyle to paginate, and writes
 * `--book-lines` once it knows how many whole lines fit in the page body - so
 * the paper never ends on half a rule. */
.book {
	--book-line: #{var.$line-fallback};
	--book-lines: 12;

	flex: 1 1 auto;
	display: flex;
	//Stretch, not centre: the pages have to inherit a definite height, since
	//how many ruled lines fit on one is measured from it.
	align-items: stretch;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	position: relative;
	outline: 0;
}

/* The closed shell: the covers and the block of pages the spread sits on top of */
.book__shell {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-width: var.$book-max-width;
	border-radius: var.$book-radius;
	background-color: color.$paper-edge;
	box-shadow: var.$shadow-page;

	//The page block: a few stacked cut edges peeking out below and to the sides
	&::before {
		content: "";
		position: absolute;
		inset: -0.35rem -0.5rem -0.55rem;
		z-index: -1;
		border-radius: calc(var.$book-radius + 2px);
		background-image: linear-gradient(
			to bottom,
			color.$paper-deep 0,
			color.$paper-edge 22%,
			color.$paper-deep 40%,
			color.$paper-edge 62%,
			color.$paper-deep 100%
		);
		box-shadow: 0 0.9rem 1.6rem color.$shadow-deep;
	}
}

.book__spread {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	min-height: 0;
	position: relative;
	border-radius: var.$book-radius;
	overflow: hidden;
	background-color: color.$paper;

	//Depth for the turning leaf. Long, because a book seen from a chair is
	//nearly flat on - a short perspective makes the page fan out like a card
	//trick rather than lift off the gutter.
	perspective: 2600px;
	perspective-origin: 50% 45%;
}

/* The gutter. Two paper surfaces meeting is the one place the book needs real
 * shading: without it the spread reads as a single flat sheet. */
.book__spine {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var.$spine-width;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 3;
	background-image: linear-gradient(
		to right,
		rgba(120, 96, 62, 0) 0%,
		rgba(120, 96, 62, 0.1) 32%,
		rgba(96, 74, 46, 0.3) 47%,
		rgba(72, 54, 32, 0.42) 50%,
		rgba(96, 74, 46, 0.3) 53%,
		rgba(120, 96, 62, 0.1) 68%,
		rgba(120, 96, 62, 0) 100%
	);
}

/* A single page */
.page {
	flex: 1 1 50%;
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var.$page-padding clamp(1rem, 2.2vw, 2.25rem);

	//Paper, lit from the outside edge and darkening into the gutter
	background-color: color.$paper;
	background-image:
		radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 55%),
		repeating-linear-gradient(
			117deg,
			rgba(120, 96, 62, 0.012) 0 2px,
			rgba(255, 255, 255, 0.02) 2px 5px
		);
}

.page--left {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.45), transparent 30%),
		linear-gradient(to right, transparent 70%, rgba(140, 112, 74, 0.09) 100%),
		repeating-linear-gradient(
			117deg,
			rgba(120, 96, 62, 0.012) 0 2px,
			rgba(255, 255, 255, 0.02) 2px 5px
		);
	box-shadow: inset -1px 0 0 rgba(140, 112, 74, 0.12);
}

.page--right {
	background-image:
		linear-gradient(to left, rgba(255, 255, 255, 0.45), transparent 30%),
		linear-gradient(to left, transparent 70%, rgba(140, 112, 74, 0.09) 100%),
		repeating-linear-gradient(
			117deg,
			rgba(120, 96, 62, 0.012) 0 2px,
			rgba(255, 255, 255, 0.02) 2px 5px
		);
}

/* The page body: margin column, then the ruled text column */
.page__body {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	gap: 0;
	min-height: 0;
	position: relative;
}

.page__margin {
	flex: 0 0 var.$page-margin-width;
	position: relative;
	height: calc(var(--book-lines) * var(--book-line));
	padding-right: 0.7rem;

	//The red margin rule every school notebook has
	border-right: 1px solid color.$rule-margin;
}

/* Where an entry begins, the margin says when it was written */
.page__stamp {
	position: absolute;
	right: 0.7rem;
	width: calc(100% - 0.7rem);
	text-align: right;
	font-family: var.$font-hand;
	line-height: 1.05;
	color: color.$ink-soft;
	pointer-events: none;
}

.page__stamp-date {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	white-space: nowrap;
}

.page__stamp-time {
	display: block;
	font-size: 0.95rem;
	color: color.$ink-faint;
}

/* The text column. Height is an exact number of rules, so the ruling always
 * ends flush with the bottom of the column. */
.page__column {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	height: calc(var(--book-lines) * var(--book-line));
	padding-left: 0.9rem;

	//The ruling. Each rule sits at the bottom of its line's band.
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(var(--book-line) - 1px),
		color.$rule calc(var(--book-line) - 1px),
		color.$rule var(--book-line)
	);
}

/* Shared text metrics.
 *
 * The rendered lines, the hidden measurer and the input all have to wrap
 * identically - the measurer is what decides where the breaks are, the lines
 * are what the reader sees, and the input is what the arrow keys move through.
 * Any drift between the three shows up as a caret in the wrong place, so the
 * three of them take their typography from exactly one place: here. */
@mixin page-text-metrics {
	font-family: var.$font-hand;
	font-size: calc(var(--book-line) * 0.82);
	line-height: var(--book-line);
	letter-spacing: 0.005em;
	word-spacing: 0.02em;
	font-variant-ligatures: none;
	tab-size: 4;
}

.page__lines {
	@include page-text-metrics;

	position: relative;
	z-index: 1;
	color: color.$ink;
}

/* One visual line, already broken by the paginator - so it must never re-wrap */
.page__line {
	display: block;
	height: var(--book-line);
	white-space: pre;
	overflow: hidden;
}

/* An entry that was closed reads as past writing: same hand, a touch lighter */
.page__line--closed {
	color: sass-color.mix(color.$ink, color.$paper, 88%);
}

/* The hidden element the paginator measures in.
 *
 * Book.vue owns it and positions it inline over the real text column, at that
 * column's measured width - so it wraps at exactly the width the finished lines
 * will have, while staying one stable element across page turns. */
.page__measure {
	@include page-text-metrics;

	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	pointer-events: none;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	z-index: -1;
}

/* The writing surface.
 *
 * A textarea cannot flow from the left page onto the right one, so it is not
 * what you look at: it is only where the keystrokes, the selection and the
 * arrow keys live. Its text is transparent and the book draws the glyphs, the
 * caret and the selection itself. It is sized and styled exactly like a page
 * column, which means its own soft wrapping matches the paginator's - so Up and
 * Down still move by the visual lines the reader can actually see. */
.page__input {
	@include page-text-metrics;

	//Placed inline by Book.vue over whichever column the caret is on, so the
	//element itself survives every page turn and keeps its focus and selection.
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;

	margin: 0;
	padding: 0;
	border: 0;
	resize: none;
	overflow: hidden;
	background: transparent;
	color: transparent;
	caret-color: transparent;

	//Clicks are handled by the page, which maps them to a character offset and
	//moves the real caret there.
	pointer-events: none;

	&::selection {
		background: transparent;
	}

	&:focus {
		outline: 0;
	}
}

/* The caret the book draws for itself */
.page__caret {
	position: absolute;
	width: 2px;
	height: calc(var(--book-line) * 0.66);
	margin-top: calc(var(--book-line) * 0.16);
	background-color: color.$ribbon;
	z-index: 4;
	pointer-events: none;
	animation: caret-blink 1.1s steps(1, end) infinite;
}

@keyframes caret-blink {
	0%,
	45% {
		opacity: 1;
	}

	50%,
	95% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* Selection, drawn per visual line since the native one is invisible */
.page__selection {
	position: absolute;
	height: calc(var(--book-line) * 0.86);
	margin-top: calc(var(--book-line) * 0.07);
	background-color: rgba(180, 126, 65, 0.3);
	z-index: 0;
	pointer-events: none;
	border-radius: 2px;
}

/* Clicking anywhere on the writing page puts the caret there */
.page--writable {
	cursor: text;
}

/* Page furniture */
.page__foot {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var.$elem-spacing;
	padding-top: 0.6rem;
	font-size: 0.72rem;
	color: color.$ink-faint;
	min-height: 1.6rem;
}

.page__number {
	font-family: var.$font-hand;
	font-size: 1rem;
	color: color.$ink-faint;
}

.page--left .page__foot {
	flex-direction: row-reverse;
}

.page__hint {
	font-family: var.$font-hand;
	font-size: 1.05rem;
	color: color.$ink-faint;
}

/* The placeholder, shown on a page with nothing written on it yet */
.page__placeholder {
	@include page-text-metrics;

	position: absolute;
	left: 0;
	right: 0;
	color: color.$ink-ghost;
	white-space: pre;
	pointer-events: none;
	z-index: 1;
}

/* Turning.
 *
 * A real leaf, hinged on the gutter. Going forward it is the right-hand page
 * that lifts and swings left - the direction your hand actually moves - and it
 * carries the next left-hand page on its back, so what lands is what you then
 * read. Going back is the mirror.
 *
 * The spread underneath shows a mix while this runs (see visiblePages): the
 * side the leaf lifted from keeps its old page until the leaf covers it.
 */
.book__leaf {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	z-index: 7;
	pointer-events: none;
	transform-style: preserve-3d;
	will-change: transform;
}

.book__leaf--forward {
	left: 50%;
	transform-origin: left center;
	animation: leaf-forward var.$trans-slow cubic-bezier(0.4, 0.06, 0.3, 0.96) forwards;
}

.book__leaf--back {
	left: 0;
	transform-origin: right center;
	animation: leaf-back var.$trans-slow cubic-bezier(0.4, 0.06, 0.3, 0.96) forwards;
}

//Right page sweeping left across the gutter
@keyframes leaf-forward {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(-180deg);
	}
}

//Left page sweeping right across the gutter
@keyframes leaf-back {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(180deg);
	}
}

.book__leaf-face {
	position: absolute;
	inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
	background-color: color.$paper;
	box-shadow: 0 0 2rem rgba(20, 14, 9, 0.35);

	//The page fills the leaf rather than half a spread
	.page {
		width: 100%;
		height: 100%;
	}
}

//The back of a leaf is only seen once it has swung past upright
.book__leaf-face--back {
	transform: rotateY(180deg);
}

/* Paper catches the light as it lifts and loses it as it lands. Two passes of
 * the same shade, offset by half the turn, is what sells the leaf as solid. */
.book__leaf-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.book__leaf-face--front .book__leaf-shade {
	background-image: linear-gradient(to left, rgba(20, 14, 9, 0.42), rgba(20, 14, 9, 0.04) 45%, transparent 75%);
	animation: leaf-shade-out var.$trans-slow ease-in forwards;
}

.book__leaf-face--back .book__leaf-shade {
	background-image: linear-gradient(to right, rgba(20, 14, 9, 0.46), rgba(20, 14, 9, 0.06) 45%, transparent 75%);
	animation: leaf-shade-in var.$trans-slow ease-out forwards;
}

@keyframes leaf-shade-out {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes leaf-shade-in {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

/* The gutter darkens under a leaf that is standing up over it */
.book__turning .book__spine {
	animation: gutter-deepen var.$trans-slow ease-in-out;
}

@keyframes gutter-deepen {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.45;
	}
}

/* One page per view has no gutter to hinge on, so the page is dealt off the
 * pile in the direction of travel instead of pretending to be bound. */
.book__spread--single.book__turning--forward .page {
	animation: page-in-from-right var.$trans-mid ease-out;
}

.book__spread--single.book__turning--back .page {
	animation: page-in-from-left var.$trans-mid ease-out;
}

@keyframes page-in-from-right {
	from {
		transform: translateX(14%);
		opacity: 0.2;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes page-in-from-left {
	from {
		transform: translateX(-14%);
		opacity: 0.2;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Turn controls, tucked into the outer edge of each page */
.book__turner {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 3.4rem;
	color: color.$ink-faint;
	border-radius: var.$block-radius;
	transition: color var.$trans-quick, background-color var.$trans-quick;

	&:hover:not(:disabled) {
		color: color.$ribbon;
		background-color: rgba(140, 112, 74, 0.08);
	}

	&:disabled {
		opacity: 0.25;
		cursor: default;
	}
}

.book__turner--back {
	left: 0.1rem;
}

.book__turner--forward {
	right: 0.1rem;
}

/* The ribbon, hanging out of the gutter. Marks the page being written on. */
.book__ribbon {
	position: absolute;
	top: 0;
	left: calc(50% - 0.55rem);
	width: 1.1rem;
	z-index: 4;
	pointer-events: none;
	background-image: linear-gradient(to right, color.$ribbon-deep, color.$ribbon 45%, color.$ribbon-deep);
	box-shadow: 0 0 0.4rem rgba(20, 14, 9, 0.3);
	transition: height var.$trans-mid ease-out, opacity var.$trans-quick;

	&::after {
		content: "";
		position: absolute;
		bottom: -0.7rem;
		left: 0;
		width: 100%;
		height: 0.75rem;
		background-color: color.$ribbon;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 55%, 0 100%);
	}
}