/*
 * N6ACX Gallery v2 - visual design.
 *
 * Concept: a cinematic travel journal. Deep warm-black backdrop (photos
 * read best surrounded by near-black, standard photography-portfolio
 * convention), a quiet gold accent, an editorial serif for names/titles
 * against a clean sans for UI chrome, and full-bleed square tiles with
 * gradient-scrim overlay captions instead of the old grey caption bars.
 */

:root {
	--bg: #0b0a0d;
	--bg-raised: #151318;
	--bg-raised-2: #1c1a20;
	--border: rgba(255, 255, 255, 0.08);
	--border-strong: rgba(255, 255, 255, 0.14);
	--text: #ece7e0;
	--text-dim: #9c968d;
	--accent: #d8a95c;
	--accent-soft: rgba(216, 169, 92, 0.16);
	--shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
	--shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.65);
	--radius: 16px;
	--serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
	--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* iOS Safari holds its own tap-highlight/:active overlay on a button after a
   touch ends, independent of our own classList state, until some other
   interaction forces a repaint - looks exactly like a toggle "stuck" on.
   Disabling the native overlay avoids it fighting with our own active state. */
.n6-tile, .n6-pill, .n6-lb-nav, .n6-crumb, .n6-wordmark { -webkit-tap-highlight-color: transparent; }

html, body {
	margin: 0;
	padding: 0;
	background: radial-gradient(ellipse at top, #16141a 0%, var(--bg) 55%);
	color: var(--text);
	font-family: var(--sans);
	min-height: 100%;
}

body.n6-noscroll { overflow: hidden; }

/* Faint film grain over the whole page - a fine-art/editorial-print texture
   cue rather than a flat digital dark mode. Fixed + pointer-events:none so it
   never intercepts clicks or scrolls with content. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(216, 169, 92, 0.35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(216, 169, 92, 0.55); }
* { scrollbar-color: rgba(216, 169, 92, 0.35) transparent; scrollbar-width: thin; }

/* ---- Top bar ------------------------------------------------------ */

.n6-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 22px clamp(20px, 4vw, 56px);
	background: rgba(11, 10, 13, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
}

.n6-wordmark {
	font-family: var(--serif);
	font-size: 22px;
	letter-spacing: 0.04em;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
}
.n6-wordmark:hover { color: var(--accent); }

.n6-crumbs {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--text-dim);
	overflow: hidden;
}
.n6-crumb {
	color: var(--text-dim);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s var(--ease);
}
.n6-crumb:hover, .n6-crumb:last-child { color: var(--accent); }
.n6-crumb-sep { opacity: 0.4; }

/* ---- Grid ------------------------------------------------------ */

.n6-main { padding: clamp(20px, 4vw, 56px); max-width: 1800px; margin: 0 auto; }

.n6-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(14px, 2vw, 26px);
	transition: opacity 0.25s var(--ease);
}
.n6-grid.n6-loading { opacity: 0.35; pointer-events: none; }

/* A dimmed grid alone reads as "did my click even register?" - an explicit
   spinner makes it unambiguous that the site is working, not stuck. Delayed
   briefly so a fast (now-common, post metadata-deferral) navigation doesn't
   flash it pointlessly. */
.n6-page-spinner {
	position: fixed;
	top: 50%; left: 50%;
	width: 40px; height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.12);
	border-top-color: var(--accent);
	opacity: 0;
	visibility: hidden;
	z-index: 30;
	transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}
.n6-page-spinner.n6-spinner-show {
	opacity: 1;
	visibility: visible;
	animation: n6-spin 0.8s linear infinite;
	transition: opacity 0.2s var(--ease) 0.3s;
}

.n6-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 80px 20px;
	color: var(--text-dim);
	font-family: var(--serif);
	font-size: 18px;
}

.n6-tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--shadow);
	transform: translateY(0) scale(1);
	transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
	animation: n6-tile-in 0.5s var(--ease) backwards;
}
.n6-tile:hover {
	transform: translateY(-6px) scale(1.015);
	box-shadow: var(--shadow-lift);
	border-color: var(--border-strong);
	z-index: 2;
}
.n6-tile:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
/* Staggered entrance on load/navigation - only the first couple of rows get
   a visible delay, since anything further down is offscreen anyway. */
@keyframes n6-tile-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.n6-grid .n6-tile:nth-child(1) { animation-delay: 0.02s; }
.n6-grid .n6-tile:nth-child(2) { animation-delay: 0.05s; }
.n6-grid .n6-tile:nth-child(3) { animation-delay: 0.08s; }
.n6-grid .n6-tile:nth-child(4) { animation-delay: 0.11s; }
.n6-grid .n6-tile:nth-child(5) { animation-delay: 0.14s; }
.n6-grid .n6-tile:nth-child(6) { animation-delay: 0.17s; }
.n6-grid .n6-tile:nth-child(n+7) { animation-delay: 0.2s; }

.n6-tile-media {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, var(--bg-raised) 30%, var(--bg-raised-2) 50%, var(--bg-raised) 70%);
	background-size: 250% 100%;
	animation: n6-shimmer 1.6s ease-in-out infinite;
}
@keyframes n6-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.n6-tile-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: transform 0.6s var(--ease), opacity 0.35s var(--ease);
}
.n6-tile-media img.n6-loaded { opacity: 1; }
/* Once the real image is in, the shimmer would otherwise keep cycling
   invisibly behind it forever - stop it so it can't ever show through a
   transparent PNG or a slow-to-paint frame. */
.n6-tile-media:has(img.n6-loaded) { animation: none; background: var(--bg-raised); }
.n6-tile:hover .n6-tile-media img { transform: scale(1.09); }

.n6-tile-placeholder, .n6-tile-file-icon {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--bg-raised-2), var(--bg-raised));
	font-size: 40px;
	color: var(--text-dim);
}

/* Directory / file tiles: gradient scrim + overlay caption on the image */
.n6-tile-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 70%);
	pointer-events: none;
}
.n6-tile-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.n6-tile-title {
	font-family: var(--serif);
	font-size: 18px;
	letter-spacing: 0.01em;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.n6-tile-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.72);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Plain photo tiles inside an album: no caption, image only, clean grid */
.n6-tile-img { background: var(--bg-raised); }

.n6-play-badge {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(11, 10, 13, 0.55);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.35);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-size: 18px;
	padding-left: 3px;
}

/* ---- Lightbox --------------------------------------------------- */

.n6-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.n6-lightbox.n6-open { opacity: 1; visibility: visible; }

.n6-lb-backdrop {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, #17151b 0%, #08070a 100%);
}

.n6-lb-stage {
	position: absolute;
	top: 0; bottom: 152px; left: 0; right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px clamp(20px, 8vw, 120px);
	transition: right 0.4s var(--ease);
	overflow: hidden;
}
/* Info panel sits on top of the stage's right edge - shift the stage (and
   its nav arrows) left so the open panel never covers the Next button. */
.n6-lightbox.n6-info-open .n6-lb-stage,
.n6-lightbox.n6-info-open .n6-lb-filmstrip { right: 320px; }
@media (max-width: 640px) {
	.n6-lightbox.n6-info-open .n6-lb-stage { right: 0; }
}

/* Full-bleed blurred copy of the current photo/poster, sitting behind the
   centered image - fills the letterboxed space around non-square media with
   a soft, colour-matched glow instead of flat black, and (since it's usually
   already warm from the grid's own thumb request) paints immediately as a
   placeholder while the full-resolution original is still loading. */
.n6-lb-blur-bg {
	position: absolute;
	inset: -20px;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(50px) brightness(0.5) saturate(1.15);
	opacity: 0;
	transition: opacity 0.7s var(--ease);
}
.n6-lb-blur-bg.n6-fs-show { opacity: 1; }

.n6-lb-media { position: relative; z-index: 1; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.n6-lb-media.n6-media-in .n6-lb-img,
.n6-lb-media.n6-media-in .n6-lb-video { opacity: 1; transform: scale(1); }
.n6-lb-img, .n6-lb-video {
	max-width: 100%;
	max-height: calc(100vh - 190px);
	border-radius: 8px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.n6-lb-media.n6-media-in .n6-lb-img.n6-ken-burns { animation: n6-ken-burns 4.5s var(--ease) forwards; }
@keyframes n6-ken-burns { from { transform: scale(1); } to { transform: scale(1.06); } }

.n6-lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border);
	color: var(--text);
	width: 48px; height: 48px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	backdrop-filter: blur(6px);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.n6-lb-nav:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.n6-lb-prev { left: clamp(10px, 3vw, 40px); }
.n6-lb-next { right: clamp(10px, 3vw, 40px); }

.n6-lb-spinner {
	position: absolute;
	top: 50%; left: 50%;
	width: 34px; height: 34px;
	margin: -17px 0 0 -17px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-top-color: var(--accent);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}
.n6-lb-spinner.n6-spinner-show {
	opacity: 1;
	visibility: visible;
	animation: n6-spin 0.8s linear infinite;
	transition: opacity 0.2s var(--ease) 0.15s;
}
@keyframes n6-spin { to { transform: rotate(360deg); } }

/* Jump-to-any-photo rail - see buildFilmstrip() in app.js. Hidden on narrow
   viewports (app.js skips building it there too, so this is belt-and-
   suspenders against a flash of an empty bar before JS runs). */
.n6-lb-filmstrip {
	position: absolute;
	left: 0; right: 0; bottom: 64px;
	height: 88px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px clamp(16px, 3vw, 40px);
	overflow-x: auto;
	overflow-y: hidden;
	background: rgba(11, 10, 13, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--border);
	transition: right 0.4s var(--ease);
}
.n6-fs-item {
	position: relative;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	border: 2px solid transparent;
	transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.n6-fs-item:hover { opacity: 0.85; }
.n6-fs-item.n6-fs-active { opacity: 1; border-color: var(--accent); transform: scale(1.06); }
.n6-fs-item img { width: 100%; height: 100%; object-fit: cover; }
.n6-fs-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 11px;
}

.n6-lb-bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 clamp(16px, 3vw, 40px);
	background: rgba(11, 10, 13, 0.75);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--border);
}
.n6-lb-name { font-family: var(--serif); font-size: 15px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.n6-lb-counter { font-size: 12px; color: var(--accent); letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0; }
.n6-lb-actions { display: flex; gap: 8px; flex-shrink: 0; }

.n6-pill {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-family: var(--sans);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.n6-pill:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* Deliberately more emphatic than :hover (solid fill vs. soft tint) - a
   toggled-on control must stay visually distinct from the cursor merely
   resting on it, or turning it off while still hovering reads as "stuck". */
.n6-pill-active { background: var(--accent); border-color: var(--accent); color: #1a1408; font-weight: 600; }
.n6-pill-active:hover { background: var(--accent); border-color: var(--accent); color: #1a1408; }

.n6-lb-info {
	position: absolute;
	top: 0; bottom: 64px; right: 0;
	width: 320px;
	max-width: 85vw;
	background: rgba(21, 19, 24, 0.9);
	backdrop-filter: blur(14px);
	border-left: 1px solid var(--border);
	padding: 90px 26px 26px;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
/* visibility:hidden (not just an offscreen transform) guarantees the closed
   panel can never intercept taps/clicks on whatever sits behind it - a
   transform alone moves the box visually but its hit-test area can still
   overlap other controls if the offscreen distance is ever miscalculated
   (this bit us on mobile: see the height:60vh override below). */
.n6-lightbox.n6-info-open .n6-lb-info {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.4s var(--ease);
}

.n6-info-loading { color: var(--text-dim); font-size: 13.5px; font-style: italic; }

.n6-info-heading {
	font-family: var(--serif);
	color: var(--accent);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 24px 0 10px;
	font-weight: normal;
}
.n6-info-heading:first-child { margin-top: 0; }
.n6-info-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13.5px;
}
.n6-info-row .n6-info-label { color: var(--text-dim); }
.n6-info-link { color: var(--accent); }

/* ---- Responsive --------------------------------------------------- */

@media (max-width: 640px) {
	.n6-topbar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; }
	.n6-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
	.n6-tile-title { font-size: 15px; }
	.n6-lb-stage { padding: 30px 16px; bottom: 120px; }
	.n6-lb-filmstrip { display: none; }
	.n6-lb-bar { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px; }
	.n6-lb-actions { flex-wrap: wrap; }
	/* bottom:64px (inherited from the base rule) + height:60vh means the
	   panel's own box isn't tall enough for translateY(100%) - "one panel
	   height down" - to actually clear the viewport; translateY(150%)
	   guarantees it fully leaves the screen regardless of viewport height. */
	.n6-lb-info { top: auto; height: 60vh; width: 100%; max-width: 100%; border-left: none; border-top: 1px solid var(--border); transform: translateY(150%); }
	.n6-lightbox.n6-info-open .n6-lb-info { transform: translateY(0); }
	.n6-lb-nav { width: 40px; height: 40px; }
}