/* Axori Projects page — builds on home.css (tokens, dock, menu, settings, themes) */

.pj-app > .brand,
.pj-app > .pj-head,
.pj-app > .pj-rail,
.pj-app > .pj-stat,
.pj-app > .axi-foot,
.pj-app > .axi-dock,
.pj-app > .axi-gear,
.pj-app > .axi-settings { z-index: 30; }

/* brand + footer sit on the page (no glass panel here) */
.pj-brand { position: fixed !important; top: 32px; left: 40px; }
.pj-foot { position: fixed !important; left: 40px; bottom: 32px; }

/* ---------- header: breadcrumb + big title ---------- */
.pj-head {
	position: fixed;
	top: 22px;
	right: 40px;
	text-align: right;
	pointer-events: auto;
}
.pj-crumb {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-family: var(--mono);
	font-size: 12px;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.4);
}
.pj-crumb a { position: relative; letter-spacing: 0.05em; transition: color 0.3s; }
.pj-crumb a::after { content: ''; position: absolute; inset: -13px -6px; }
.pj-crumb a:hover { color: rgb(var(--acc-l)); }
.pj-crumb .sep { color: rgb(var(--acc-l) / 0.2); }
.pj-crumb .cur { font-weight: 700; letter-spacing: 0.05em; color: rgb(var(--acc-l) / 0.8); }
.pj-title {
	margin: 0;
	font-family: var(--display);
	font-size: calc(96px * var(--s-title, 1));
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	color: rgb(var(--acc-l));
}

/* ---------- left rail: index + altitude gauge ---------- */
.pj-rail {
	position: fixed;
	left: 2.5rem;
	top: 50%;
	display: none;
	max-width: 15rem;
	transform: translateY(-50%);
}
.pj-rail.rv { transform: translateY(calc(-50% + 14px)); }
.axi-entered .pj-rail.rv { transform: translateY(-50%); }
@media (min-width: 1280px) { .pj-rail { display: block; } }
.pj-rail-k {
	display: block;
	margin-bottom: 1.1rem;
	padding-left: 2.1rem;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.28);
}
.pj-rail-body { display: flex; align-items: stretch; gap: 1.4rem; }
.pj-index { margin: 0; padding: 0; list-style: none; display: grid; align-content: center; gap: 0.15rem; }
.pj-index button {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	width: 100%;
	padding: 0.34rem 0;
	border: 0;
	background: none;
	text-align: left;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.26);
	transition: color 0.45s var(--ease);
}
.pj-index .n { flex: none; font-weight: 700; }
/* the titles only fit beside the cards once the window is wide enough;
   below that the rail falls back to bare numbers */
.pj-index .t { display: none; }
@media (min-width: 1600px) { .pj-index .t { display: block; } }
.pj-index .t {
	overflow: hidden;
	max-width: 9rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: transform 0.45s var(--ease);
}
.pj-index button:hover { color: rgb(var(--acc-l) / 0.7); }
.pj-index li.on button { color: rgb(var(--acc-l) / 0.95); }
.pj-index li.on .n { color: rgb(var(--acc)); }
.pj-index li.on .t { transform: translateX(3px); }

/* ---------- altitude gauge (scroll position) ---------- */
.pj-gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	pointer-events: none !important;
}
.g-lbl { font-family: ui-monospace, Consolas, monospace; font-size: 8px; letter-spacing: 0.14em; color: rgb(var(--acc-l) / 0.2); }
.g-track { position: relative; flex: 1; width: 1px; min-height: clamp(150px, 26vh, 300px); background: rgb(var(--acc-l) / 0.05); }
.g-mark { position: absolute; left: 50%; width: 7px; height: 1px; background: rgb(var(--acc-l) / 0.1); transform: translateX(-50%); }
.g-pointer {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 6px;
	height: 32px;
	border-radius: 99px;
	background: rgb(var(--acc-l));
	box-shadow: 0 0 10px rgb(var(--acc-l) / 0.55);
	transform: translate(-50%, -50%);
}

/* ---------- readout: the project under the centre of the drum ---------- */
.pj-stat {
	position: fixed;
	right: 40px;
	top: 50%;
	display: none;
	width: 13rem;
	text-align: right;
	transform: translateY(-50%);
	pointer-events: none !important;
}
.pj-stat.rv { transform: translateY(calc(-50% + 14px)); }
.axi-entered .pj-stat.rv { transform: translateY(-50%); }
@media (min-width: 1280px) { .pj-stat { display: block; } }
.pj-stat-n {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.3rem;
	font-family: var(--display);
	font-size: 64px;
	line-height: 0.9;
	font-weight: 700;
	color: rgb(var(--acc-l) / 0.9);
}
.pj-stat-n em { font-family: var(--mono); font-size: 14px; font-style: normal; color: rgb(var(--acc-l) / 0.22); }
.pj-stat-t {
	margin: 0.9rem 0 0 !important;
	padding-top: 0.9rem;
	border-top: 1px solid rgb(var(--acc-l) / 0.1);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.75);
}
.pj-stat-k {
	margin: 0.4rem 0 0 !important;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgb(var(--acc) / 0.8);
}
.pj-scrollhint {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 2.25rem;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.25);
}
.pj-scrollhint i { position: relative; width: 34px; height: 1px; overflow: hidden; background: rgb(var(--acc-l) / 0.12); }
.pj-scrollhint i::after {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 12px;
	background: rgb(var(--acc));
	animation: pj-hint 2.4s var(--ease) infinite;
}
@keyframes pj-hint { 0% { transform: translateX(-14px); } 100% { transform: translateX(36px); } }

/* faint rules marking the column the list runs in */
.pj-guides { position: fixed; inset: 0; z-index: 0; display: none; pointer-events: none !important; }
@media (min-width: 1280px) { .pj-guides { display: block; } }
.pj-guides .gl { position: absolute; top: 0; width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, rgb(var(--acc-l) / 0.07) 18%, rgb(var(--acc-l) / 0.07) 82%, transparent); }
.pj-guides .gl-1 { left: 15%; }
.pj-guides .gl-2 { left: 73%; }

/* ---------- list ---------- */
.pj-wrap {
	position: fixed;
	inset: 0;
	z-index: 1;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	filter: blur(14px);
	opacity: 0.3;
	transition: filter 1.2s var(--ease), opacity 1.2s var(--ease);
}
.pj-wrap::-webkit-scrollbar { display: none; }
.axi-entered .pj-wrap { filter: none; opacity: 1; }
.pj-wrap.pj-infinite { overflow: hidden; }

.pj-list {
	position: relative;
	margin: 0;
	padding: 10rem 1.25rem 8rem;
	list-style: none;
}
.pj-infinite .pj-list { height: 100%; padding: 0; }
.pj-infinite .pj-item { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }

.pj-card {
	position: relative;
	display: block;
	margin-top: -1px;
	padding: 2rem 0;
	border-top: 1px solid rgb(var(--acc-l) / 0.1);
	border-bottom: 1px solid rgb(var(--acc-l) / 0.1);
	color: rgb(var(--acc-l));
	transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s;
}
/* lines that sweep across the top and bottom on hover */
.pj-card::before,
.pj-card::after {
	content: '';
	position: absolute;
	left: 0;
	z-index: 5;
	width: 0;
	transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.pj-card::before { top: -1px; height: 1.5px; background: rgb(var(--acc)); }
.pj-card::after { bottom: -1px; height: 1px; background: rgb(var(--acc-l) / 0.3); }
.pj-card:hover::before,
.pj-card:hover::after { width: 100%; }

/* entrance: rows rise in, staggered (--k set by projects.js) */
.pj-row {
	position: relative;
	display: block;
	font-family: var(--display);
	text-transform: uppercase;
	letter-spacing: 0.025em;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.9s var(--ease), transform 1s var(--ease);
	transition-delay: calc(250ms + var(--k, 0) * 70ms);
}
.axi-entered .pj-row { opacity: 1; transform: none; }
/* a faint wash lights the row from the left edge as the pointer arrives */
.pj-row::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: -1.5rem -1.75rem;
	background: linear-gradient(90deg, rgb(var(--acc) / 0.07), rgb(var(--acc) / 0.02) 38%, transparent 68%);
	opacity: 0;
	transition: opacity 0.55s var(--ease);
	pointer-events: none;
}
.pj-card:hover .pj-row::before { opacity: 1; }

/* index + kicker share one line above the title */
.pj-top {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	margin-bottom: 0.7rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid rgb(var(--acc-l) / 0.08);
	transition: border-color 0.5s;
}
.pj-card:hover .pj-top { border-color: rgb(var(--acc) / 0.45); }
.pj-num {
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: rgb(var(--acc));
	transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pj-kick {
	overflow: hidden;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgb(var(--acc-l) / 0.42);
}

.pj-meta { min-width: 0; }
.pj-name {
	width: fit-content;
	margin: 0;
	font-family: var(--display);
	font-size: 30px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: 0.025em;
	color: rgb(var(--acc-l));
	transition: transform 0.6s var(--ease);
}
.pj-card:hover .pj-name { transform: translateX(6px); }
/* tags and the affordance close the card off on one baseline */
.pj-foot-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
}
.pj-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
.pj-tag {
	white-space: nowrap;
	padding: 0.3rem 0.6rem;
	border: 1px solid rgb(var(--acc-l) / 0.16);
	border-radius: 99px;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgb(var(--acc-l) / 0.6);
	transition: border-color 0.5s, color 0.5s;
}
.pj-card:hover .pj-tag { border-color: rgb(var(--acc-l) / 0.32); color: rgb(var(--acc-l) / 0.85); }
.pj-go {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex: none;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgb(var(--acc-l) / 0.3);
	transition: color 0.5s;
}
.pj-go i { font-style: normal; transition: transform 0.5s var(--ease); }
.pj-card:hover .pj-go { color: rgb(var(--acc)); }
.pj-card:hover .pj-go i { transform: translateX(5px); }
.pj-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.75rem !important;
	font-family: var(--sans);
	font-size: calc(14px * var(--s-text, 1));
	line-height: 1.65;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgb(var(--acc-l) / 0.5);
}

/* thumbnail: a small plate with register marks at the corners, in the same
   instrument language as the rail and the HUD */
.pj-media { position: relative; flex: none; margin-bottom: 1.5rem; }
.pj-media::before,
.pj-media::after {
	content: '';
	position: absolute;
	width: 9px;
	height: 9px;
	opacity: 0;
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
	pointer-events: none;
}
.pj-media::before {
	top: -5px;
	left: -5px;
	border-top: 1px solid rgb(var(--acc));
	border-left: 1px solid rgb(var(--acc));
	transform: translate(4px, 4px);
}
.pj-media::after {
	right: -5px;
	bottom: -5px;
	border-right: 1px solid rgb(var(--acc));
	border-bottom: 1px solid rgb(var(--acc));
	transform: translate(-4px, -4px);
}
.pj-card:hover .pj-media::before,
.pj-card:hover .pj-media::after,
.pj-item.is-focus .pj-media::before,
.pj-item.is-focus .pj-media::after { opacity: 1; transform: none; }
.pj-item.is-focus .pj-media::before,
.pj-item.is-focus .pj-media::after { opacity: 0.45; }
.pj-frame {
	position: relative;
	overflow: hidden;
	border: 1px solid rgb(var(--acc-l) / 0.1);
	border-radius: 3px;
	transition: border-color 0.5s, box-shadow 0.5s;
}
.pj-card:hover .pj-frame { border-color: rgb(var(--acc-l) / 0.3); box-shadow: 0 0 30px rgb(255 255 255 / 0.05); }
.pj-zoom { position: relative; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.pj-card:hover .pj-zoom { transform: scale(1.05); }
/* the shots sit in black and white until the row is hovered, matching the
   treatment on the case-study pages */
.pj-img,
.pj-ph {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05) brightness(0.86);
	transition: opacity 0.5s, filter 0.6s var(--ease);
}
.pj-card:hover .pj-img { filter: none; }
.pj-ph {
	position: relative;
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(0deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 14px),
		radial-gradient(circle at 30% 30%, hsl(var(--h) 70% 45% / 0.45), transparent 60%),
		linear-gradient(135deg, hsl(var(--h) 30% 14%), #050505);
}
.pj-ph span { padding: 0 10px; font-family: var(--display); font-size: 15px; font-weight: 700; text-align: center; color: rgb(255 255 255 / 0.75); }
.pj-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.pj-card.has-video:hover .pj-img,
.pj-card.has-video:hover .pj-ph { opacity: 0; }
.pj-card.has-video:hover .pj-video { opacity: 1; }

.pj-scan {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 1px;
	background: rgb(var(--acc-l) / 0.3);
	box-shadow: 0 0 8px rgb(255 255 255 / 0.2);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}
.pj-card:hover .pj-scan { opacity: 1; animation: pj-scan 8s linear infinite; }
@keyframes pj-scan {
	0% { top: -10%; opacity: 0; }
	5% { opacity: 1; }
	95% { opacity: 1; }
	100% { top: 110%; opacity: 0; }
}

.pj-hud {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0.5rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}
.pj-card:hover .pj-hud { opacity: 1; }
.pj-hud .h-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pj-hud .h-lbl,
.pj-hud .h-st {
	overflow: hidden;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 7px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgb(var(--acc-l) / 0.4);
}
.pj-hud .h-st { color: rgb(34 197 94 / 0.6); animation: pj-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pj-pulse { 50% { opacity: 0.5; } }

/* the row sitting at the centre of the drum is picked out, so the list always
   has a subject even before the pointer touches it */
.pj-item.is-focus .pj-img { filter: grayscale(0.45) contrast(1.05) brightness(0.96); }
.pj-item.is-focus .pj-num { color: rgb(var(--acc)); text-shadow: 0 0 14px rgb(var(--acc) / 0.45); }
.pj-item.is-focus .pj-top { border-color: rgb(var(--acc-l) / 0.2); }
.pj-item.is-focus .pj-go { color: rgb(var(--acc-l) / 0.55); }

/* other rows dim while one is hovered; hover effects pause while scrolling */
.pj-wrap:not(.is-scrolling) .pj-list:has(.pj-card:hover) .pj-card:not(:hover) { opacity: 0.6; }
.pj-wrap.is-scrolling .pj-card { opacity: 1 !important; pointer-events: none !important; }
.pj-wrap.is-scrolling .pj-hud,
.pj-wrap.is-scrolling .pj-scan,
.pj-wrap.is-scrolling .pj-card::before,
.pj-wrap.is-scrolling .pj-card::after { opacity: 0 !important; }

/* top / bottom fade into the background */
.pj-fade { position: fixed; left: 0; z-index: 10; width: 100%; height: 10rem; pointer-events: none !important; }
.pj-fade-top { top: 0; background: linear-gradient(to bottom, var(--bg), transparent); }
.pj-fade-bottom { bottom: 0; background: linear-gradient(to top, var(--bg), transparent); }

/* "VIEW PROJECT" pill that follows the cursor over a row */
.pj-view {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
	width: 8rem;
	padding: 0.5rem 0;
	border: 1px solid rgb(var(--acc-l) / 0.2);
	border-radius: 0.5rem;
	background: rgb(var(--acc-l) / 0.1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	color: rgb(var(--acc-l));
	opacity: 0;
	pointer-events: none !important;
	transition: opacity 0.3s;
	will-change: transform;
}
.pj-view.on { opacity: 1; }

/* custom cursor: blend-mode dot + faint crosshair */
.pj-cursor,
.pj-cross { display: none; }
@media (pointer: fine) {
	body.axi-pj,
	body.axi-pj a,
	body.axi-pj button { cursor: none !important; }
	.pj-cursor {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 1.5rem;
		height: 1.5rem;
		margin: -0.75rem 0 0 -0.75rem;
		border: 1px solid rgb(var(--acc-l));
		border-radius: 50%;
		background: #fff;
		mix-blend-mode: difference;
		pointer-events: none;
		transition: width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), opacity 0.3s;
		will-change: transform;
	}
	.pj-cursor.big { width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; }
	.pj-cursor.hide { opacity: 0; }
	.pj-cross { display: block; position: fixed; z-index: 2; pointer-events: none; overflow: visible; will-change: transform; }
	.pj-cross line { stroke: rgb(var(--acc-l) / 0.1); stroke-width: 1px; }
	.pj-cross-h { top: -10px; left: 0; width: 100%; height: 20px; }
	.pj-cross-v { top: 0; left: -10px; width: 20px; height: 100%; }
}

/* ---------- breakpoints (match the reference) ---------- */
@media (min-width: 640px) {
	.pj-list { padding: 6rem 2.5rem; }
	/* the shot leads and the writing sits beside it */
	/* a small square plate, set like a stamp beside the writing */
	.pj-card { min-height: 200px; display: flex; align-items: center; }
	.pj-row { display: flex; align-items: center; gap: 1.75rem; width: 100%; }
	.pj-meta { flex: 1; }
	.pj-media { margin-bottom: 0; }
	.pj-frame { width: 8rem; }
	.pj-img,
	.pj-ph { aspect-ratio: 1; }
}
@media (min-width: 768px) {
	.pj-row { gap: 2.25rem; }
	.pj-frame { width: 9rem; }
	.pj-name { font-size: 40px; line-height: 1; }
}
@media (min-width: 1024px) {
	.pj-card { min-height: 214px; }
	.pj-frame { width: 10rem; }
	.pj-name { font-size: 44px; }
}
@media (min-width: 1280px) {
	.pj-list { margin-left: 13%; width: 54%; padding-left: 0; padding-right: 0; }
	.pj-infinite .pj-list { padding: 0; }
	.pj-card { min-height: 208px; }
}
@media (min-width: 1536px) {
	.pj-list { margin-left: 15%; width: 52%; }
	.pj-guides .gl-1 { left: 15%; }
	.pj-guides .gl-2 { left: 67%; }
	.pj-frame { width: 11rem; }
	.pj-name { font-size: 50px; }
	.pj-fade { height: 8rem; }
}
@media (max-width: 767px) {
	.pj-gauge { display: none; }
	.pj-brand { top: 16px; left: 16px; }
	.pj-head { top: 14px; right: 16px; }
	.pj-title { font-size: calc(56px * var(--s-title, 1)); }
	.pj-list { padding-top: 9rem; padding-bottom: 7rem; }
	.pj-media { margin-bottom: 1.25rem; }
	.pj-name { font-size: 26px; }
	.pj-foot-row { flex-wrap: wrap; gap: 0.75rem; }
}