/**
 * Okane Portfolio — vignettes d'aperçu au survol du menu (.okane-preview).
 *
 * Deux emplacements, un seul objet :
 *  - sous le header (.okc-preview), une carte qui glisse d'un lien à l'autre ;
 *  - de part et d'autre de la bulle (.okn-preview), deux cartes qui se relaient
 *    parce que les entrées alternent gauche / droite de haut en bas.
 *
 * Affaire de souris et de grand écran : au doigt, ouvrir une page coûte moins
 * cher qu'un aperçu, et la place manque de toute façon (voir la fin du fichier).
 */

.okane-preview {
	--okp-w: 252px;
	--okp-bg: var(--ok-surface, rgba(12, 12, 14, .82));
	--okp-ink: var(--ok-ink, #f4f2ee);
	--okp-muted: var(--ok-muted, #8b8a86);
	--okp-line: var(--ok-line, rgba(255, 255, 255, .14));
	--okp-accent: var(--ok-accent, #e9dccb);
	--okp-ease: cubic-bezier(.19, 1, .22, 1);
	position: absolute;
	z-index: 5;
	width: var(--okp-w);
	box-sizing: border-box;
	padding: 10px 10px 12px;
	border: 1px solid var(--okp-line);
	border-radius: 18px;
	background: var(--okp-bg);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 24px 60px var(--ok-shadow, rgba(0, 0, 0, .55));
	font-family: 'Space Grotesk', system-ui, sans-serif;
	color: var(--okp-ink);
	opacity: 0;
	visibility: hidden;
	/* Purement décorative : elle ne doit jamais intercepter le survol du lien. */
	pointer-events: none;
	transition: opacity .3s var(--okp-ease), transform .45s var(--okp-ease), top .45s var(--okp-ease), visibility .3s;
}
.okane-preview * { box-sizing: border-box; }
.okane-preview.is-on { opacity: 1; visibility: visible; }

/* ----- image ----- */
.okane-preview__frame {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	/* Fond tenu au chaud : c'est ce qu'on voit avant que la photo n'arrive, et
	   c'est aussi le décor des entrées sans image. */
	background: linear-gradient(148deg, #1c1b1e 0%, #2b2723 52%, #131214 100%);
	/* Filet intérieur : la photo se pose dans un cadre au lieu d'être posée là. */
	box-shadow: inset 0 0 0 1px var(--ok-line, rgba(255, 255, 255, .09));
}
/* Voile bas : la vignette rejoint le fond de la carte au lieu de s'y découper. */
.okane-preview__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 10, 11, 0) 55%, rgba(10, 10, 11, .5) 100%);
}
.okane-preview__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.07);
	transition: opacity .45s ease, transform 1.1s var(--okp-ease);
}
.okane-preview__img.is-on {
	opacity: 1;
	transform: scale(1);
}

/* Le numéro en filigrane, posé sur la photo. C'est ce que montraient les entrées
   sans image, et ça leur allait : on le garde partout, en retrait.
   z-index 1 : sinon le voile ::after du cadre, peint après lui, l'éteindrait.
   L'ombre portée lui donne de quoi tenir aussi bien sur un ciel blanc que sur
   une robe noire — l'opacité seule ne suffit pas sur une photo. */
.okane-preview__ghost {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-size: 56px;
	line-height: 1;
	color: #f4f2ee;
	opacity: .48;
	/* Une ombre serrée pour le détacher d'un ciel blanc, une large pour l'asseoir
	   dans l'image : sans les deux, il disparaît sur une photo sur trois. */
	text-shadow: 0 1px 2px rgba(10, 10, 11, .55), 0 6px 28px rgba(10, 10, 11, .85);
	transition: opacity .45s ease;
}
/* Sans photo, il n'est plus un filigrane : il est le sujet. */
.okane-preview.is-blank .okane-preview__ghost {
	opacity: .55;
	color: var(--okp-accent);
	text-shadow: none;
}
.okane-preview.is-blank .okane-preview__img { opacity: 0; }

/* ----- légende ----- */
/* Le numéro en petites capitales espacées, le nom dans la serif italique du
   site : le même contraste que les titres de l'accueil, en réduction. */
.okane-preview__meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 5px 0;
	white-space: nowrap;
}
.okane-preview__num {
	flex: none;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--okp-muted);
}
.okane-preview__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1.1;
	color: var(--okp-ink);
}
/* Flèche d'ouverture : elle dit que la vignette mène quelque part. */
.okane-preview__meta::after {
	content: "\2197";
	margin-left: auto;
	font-size: 12px;
	color: var(--okp-accent);
	opacity: .75;
}

/* ------------------------------------------------------------------ */
/* Header : une carte qui suit le lien survolé                         */
/* ------------------------------------------------------------------ */
.okc-preview {
	top: calc(100% + 13px);
	left: 0;
	transform: translate3d(var(--okc-preview-x, 0px), 8px, 0);
}
.okc-preview.is-on { transform: translate3d(var(--okc-preview-x, 0px), 0, 0); }
/* Fil qui raccroche la carte au lien : sans lui elle flotte sans origine. */
.okc-preview::before {
	content: "";
	position: absolute;
	left: var(--okc-preview-arrow, 50%);
	top: -13px;
	width: 1px;
	height: 13px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4));
}

/* ------------------------------------------------------------------ */
/* Bulle : une carte par bord, alternées de haut en bas                */
/* ------------------------------------------------------------------ */
.okn-preview {
	top: var(--okn-preview-y, 50%);
}
.okn-preview.is-left {
	right: calc(100% + 18px);
	transform: translate(12px, -50%);
}
.okn-preview.is-right {
	left: calc(100% + 18px);
	transform: translate(-12px, -50%);
}
.okn-preview.is-on { transform: translate(0, -50%); }
/* Trait de liaison vers l'entrée survolée. */
.okn-preview::before {
	content: "";
	position: absolute;
	top: 50%;
	width: 18px;
	height: 1px;
}
.okn-preview.is-left::before {
	left: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4));
}
.okn-preview.is-right::before {
	right: 100%;
	background: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4));
}

/* ------------------------------------------------------------------ */
/* Portée                                                              */
/* ------------------------------------------------------------------ */
/* Pas de survol au doigt : la vignette resterait collée après un appui. */
@media (hover: none), (pointer: coarse) {
	.okane-preview { display: none; }
}
/* Sous 861px les liens du header disparaissent au profit de la bulle. */
@media (max-width: 860px) {
	.okc-preview { display: none; }
}
/* La bulle est centrée : sous 1100px, une carte sur le côté déborderait. */
@media (max-width: 1099px) {
	.okn-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.okane-preview,
	.okane-preview__img { transition: none !important; }
}