:root {
    --primary-color: #3467d7;
    --primary-hover: #2a49ad;
    --text-dark: #5b5b5b;
    --text-muted: #6b7280;
    --border-color: #d3d3d3;
    --box-bg: #ffffffc4;
	/* grid */
	--gutter: 10px;
	--columns: 3;
	--max-height: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.expired-box {
	color: var(--text-dark);
	text-align: center;
}
.expired-box h1 {
	font-size: 1.3em;
	margin-bottom: 10px;
	margin: 0 auto;
	width: 230px;
	padding-bottom: 10px;
}
.expired-box p {
	font-size: 1em;
	margin-bottom: 20px;
	width: 360px;
	margin: 0 auto;
	padding: 10px 0 0px 0;
	text-align: left;
	
}
.expired-box p:last-of-type {
	padding: 10px 0 30px 0;
}
.expired-box a {
	text-decoration: none;
	color: var(--text-dark);
	font-weight: bold;
}
.expired-box a:hover {
	text-decoration: underline;
}
html {
	scrollbar-gutter: stable;
}
body {
    font-family: "Muli", sans-serif;
    min-height: 100vh;
    overflow-y: auto;
	overflow-x: hidden;
    position: relative;
    background-color: #000000;
}
/* slideshow *******************************************************************************/
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
body > header {
	height: 65px;
	width: 100%;
	background: #232323;
	display: flex;
	align-items: center;
	position: fixed;
	transform: translateY(-65px); /* Initial hidden state */
	transition: transform 0.5s cubic-bezier(0.01, 0.02, 0.22, 1.03) !important;
	z-index: 5;
}
.slide-in-from-top {
	transform: translateY(0px) !important;
}

.logo {
	width: 425px;
	margin-left: 40px;
}
.logotipo {
	width: 188px;
	height: 24px;
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background: url(https://www.danielsian.com/wp-content/themes/danielsian/img/logo_danielsian.png) no-repeat center center;
	float: left;
}
.nav-toggle, .nav-toggle-close {
	margin-left: 25px;
	display: none;
	cursor: pointer;
}
.openSidebar {
	left: 0 !important;
}
.tagline {
	text-align: center;
	margin-top: 11px;
	display: block;
	font-size: 0.6em;
	letter-spacing: 1px;
	color: #FFF;
}
.badge {
	right: 10px !important;
	right: 0;
	left: auto !important;
	position: absolute;
	display: block;
	width: 150px;
	height: 150px;
	background: url(/img/200best_DA7_logo.jpg) no-repeat center center;
	background: url(/img/200best_DA7_logo_circle_02.png) no-repeat center center;
	background-size: contain;
	background-color: unset !important;
	z-index: 10;
	bottom: 0 !important;
	top: 15px !important;
	margin: 6px;
	padding: 0 !important;
	animation: slideInFromLeft 2s cubic-bezier(0.21, 0.42, 0.23, 1);
}
.badge a {
	display: block;
	height: 100%;
}
.hidden {
	display: none !important;
}
.project-details {
	position: absolute;
	text-align: right;
	top: 77px;
	right: 186px;
	color: white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	line-height: 20px;
	opacity: 0.8;
}
.project-details span {
	display: block;
}
.project-details a {
	color: white;
	text-decoration: none;
}
.proj-title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 6px;
}
.proj-type, .proj-description1, .proj-description2, .proj-description3 {
	font-size: 15px;
	font-style: italic;
}
#slideshow-root {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2; /* Below the noise and download box, but above default background */
	opacity: 0; /* Initial state for fade-in */
	transition: opacity var(--proj-fadeIn-transition-duration) cubic-bezier(0.25, 0, 0.32, 0.98);
}
.fade-out {
	transition: opacity var(--proj-fadeOut-transition-duration) cubic-bezier(0.82, 0.01, 0.93, 0.81) !important;
}
.slideshow-wrapper {
	position: absolute; /* Relative to #slideshow-root */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.background-image-container { /* This is the div that will hold the <img> and receive animations */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--fade-transition-duration) ease-in-out; /* For cross-fade between images */
	transform: scale(var(--base-scale)); /* Initial scale for animations */
	transform-origin: center center;
	will-change: transform, opacity;
}
.background-image-container.active {
	opacity: 1;
}
.background-image-container img { /* The actual image element inside the container */
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.video-wrapper {
	position: absolute; /* Relative to #slideshow-root */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex; /* To center the video if needed */
	justify-content: center;
	align-items: center;
	overflow: hidden; /* Prevent video from spilling */
}
.video-wrapper video.video-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* Animation specific transformations - remain unchanged as they work on transform */
.zoom-in {
    animation: zoomIn var(--animation-duration) linear forwards;
}
.zoom-out {
    animation: zoomOut var(--animation-duration) linear forwards;
}
.pan-left {
    animation: panLeft var(--animation-duration) linear forwards;
}
.pan-right {
    animation: panRight var(--animation-duration) linear forwards;
}

/* Keyframes for animations, using CSS Custom Properties */
@keyframes zoomIn {
    0% { transform: scale(var(--base-scale)); }
    100% { transform: scale(var(--zoom-in-end-scale)); }
}
@keyframes zoomOut {
    0% { transform: scale(var(--zoom-out-start-scale)); }
    100% { transform: scale(var(--base-scale)); }
}

@keyframes panLeft {
    0% { transform: scale(var(--base-scale)) translateX(0); }
    100% { transform: scale(var(--base-scale)) translateX(var(--pan-horizontal-distance)); }
}
@keyframes panRight {
    0% { transform: scale(var(--base-scale)) translateX(0); }
    100% { transform: scale(var(--base-scale)) translateX(calc(-1 * var(--pan-horizontal-distance))); } /* Negative for right pan visually */
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideInFromTop {
	0% {
        transform: translateY(-65px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animated_noise {
	position: absolute; /* Positioned relative to its parent (.background) */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* Allows clicks to pass through to elements beneath it */
	/* This div itself doesn't need a z-index if its ::after handles the visual */
	/* But if you put content directly here, its z-index would be relative to .background's background-image */
}

.animated_noise::after {
    content: "";
    pointer-events: none;
    background-image: url("https://www.danielsian.com/wp-content/themes/danielsian/img/1k_Dissolve_Noise_Texture.jpg");
    background-size: auto;
    position: fixed;
    top: -100%;
    left: -100%;
    height: 300%;
    width: 300%;
    background-repeat: repeat;
    opacity: 0.1;
    z-index: -1;
    animation: animateGrain 8s steps(10) infinite;
}
.animated_noise.paused::after {
    animation-play-state: paused;
}

@keyframes animateGrain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, -20%); }
    30% { transform: translate(-5%, -10%); }
    40% { transform: translate(-15%, -20%); }
    50% { transform: translate(-5%, -10%); }
    60% { transform: translate(-15%, -20%); }
    70% { transform: translate(-5%, -10%); }
    80% { transform: translate(-15%, -20%); }
    90% { transform: translate(-5%, -10%); }
    100% { transform: translate(-15%, -20%); }
}

.video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
/* END slideshow ******************************************************************************/

.container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    /*padding: 2rem;*/
}
.grid-view {
	background-color: unset !important;
	box-shadow: unset !important;
	max-width: none !important;
	height: 100%;
	padding: 171px 0 0!important;
	width: 100%;
	position: relative;
	z-index: 2;
	transition: opacity 0.5s;
	left: 0 !important;
	margin-left: 240px;
}

.lightbox {
	filter: blur(3px);
	opacity: 0.15;
}

.grid {
	display: flex;
	flex-wrap: wrap;
	width: 75%;
	margin: 0 auto;
	max-width: 1600px;
}

/***********************************************************************************/
/* Fancybox - IMAGE GRID */
/***********************************************************************************/


/* Tile width = container width minus (columns - 1) gutters, divided by columns. Spacing in BOTH directions comes from Packery's gutter option (driven by .gutter-sizer) — bidirectional, unlike Masonry's horizontal-only gutter. So no margins on the items at all. */
.grid-item,
.grid-sizer {
	max-width: calc((100% - (var(--columns) - 1) * var(--gutter)) / var(--columns));
	box-sizing: border-box; /* Ensure padding/borders don’t increase width */
	overflow: hidden; /* Clip transformed content */
}

/* Empty div Packery measures to get the column unit. Position absolute takes the sizer out of flex flow, so its % width resolves against .grid's padding box — exactly like the items do. Without this, flex layout shrinks the sizer's % base by one gutter, and items end up ~3px wider than the column unit, eating into the visible gap. */
.grid-sizer {
	width: 100%;
	position: absolute;
	top: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Empty div Packery measures to get the horizontal gutter. Width is the only thing Packery reads from it — the element itself stays invisible (empty, zero height). */
.gutter-sizer {
	width: var(--gutter);
}

.grid-item:hover {
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/***********************************************************************************/
/* GRID ITEM — DRAG AFFORDANCE & STATE */
/***********************************************************************************/

/* Grab cursor on hover; grabbing while a drag is actually in progress. Draggabilly toggles .is-dragging once movement passes its threshold (~4px), so the cursor only flips once the gesture has committed to being a drag. */
.grid-item,
.grid-item a {
	cursor: grab;
}
.grid-item.is-dragging {
	cursor: grabbing;
	z-index: 10; /* lift above neighbours during drag so the moving tile isn't clipped under them */
}

/* Drag hint — small grip icon in the top-right corner, fades in on hover. Decorative only; the whole tile is the drag handle. Inline SVG kept in the data URI so there's no extra HTTP request and no DOM addition per tile. */
.grid-item::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><circle cx='9' cy='6' r='1.5'/><circle cx='15' cy='6' r='1.5'/><circle cx='9' cy='12' r='1.5'/><circle cx='15' cy='12' r='1.5'/><circle cx='9' cy='18' r='1.5'/><circle cx='15' cy='18' r='1.5'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
	z-index: 5;
}
.grid-item:hover::after {
	opacity: 0.75;
}
.grid-item img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease, filter 0.3s ease;
}
.grid-item:hover img {
	transform: scale(1.01);
	filter: brightness(1.1);
}
.grid-clip {
	width: 100%;
	height: 100%;
	overflow: hidden; /* Now this can clip the image */
	max-height: var(--max-height);
	display: flex;
	align-items: center;     /* Vertical center */
	justify-content: center;  /* Horizontal center */
}

/* MUTED THUMB **************/
.grid-clip.muted {
	filter: grayscale(100%);
	/*max-height: 100px;*/
	background-color: #121212;
	transition: opacity 0.3s ease, filter 0.3s ease, max-height 0.3s ease;
}

.grid-clip.muted img {
  opacity: 0.25;
}

.grid-clip.muted::after {
  content: "PREVIOUS VERSION";
  position: absolute;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.grid-clip.muted:hover {
  filter: grayscale(30%);
}

.grid-clip.natural-maxheight {
	max-height: 1500px;
}

.grid.natural-maxheight .grid-clip.muted {
	max-height: 1500px;
}
/* MUTED THUMB END **************/

/* Play button overlay for video thumbnails */
.grid-item[data-filename*=".mp4"] .grid-clip,
.grid-item[data-filename*=".MP4"] .grid-clip,
.grid-item[data-filename*=".mov"] .grid-clip,
.grid-item[data-filename*=".MOV"] .grid-clip,
.grid-item[data-filename*=".avi"] .grid-clip,
.grid-item[data-filename*=".webm"] .grid-clip,
.grid-item[data-filename*=".mkv"] .grid-clip {
    position: relative;
}

.grid-item[data-filename*=".mp4"] .grid-clip::after,
.grid-item[data-filename*=".MP4"] .grid-clip::after,
.grid-item[data-filename*=".mov"] .grid-clip::after,
.grid-item[data-filename*=".MOV"] .grid-clip::after,
.grid-item[data-filename*=".avi"] .grid-clip::after,
.grid-item[data-filename*=".webm"] .grid-clip::after,
.grid-item[data-filename*=".mkv"] .grid-clip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    pointer-events: none;
}

.grid-item[data-filename*=".mp4"] .grid-clip::before,
.grid-item[data-filename*=".MP4"] .grid-clip::before,
.grid-item[data-filename*=".mov"] .grid-clip::before,
.grid-item[data-filename*=".MOV"] .grid-clip::before,
.grid-item[data-filename*=".avi"] .grid-clip::before,
.grid-item[data-filename*=".webm"] .grid-clip::before,
.grid-item[data-filename*=".mkv"] .grid-clip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    width: 0;
    height: 0;
    border-left: 50px solid white;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    z-index: 1;
    pointer-events: none;
}

.latest::before {
	content: "NEW";
	position: absolute;
	top: 8px;
	left: 8px;
	background: #66869c;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 999px;
	letter-spacing: 0.5px;
	z-index: 10;
	pointer-events: none;
	animation:pulse 1.8s infinite;
}

@keyframes pulse {
	0% { transform:scale(1); box-shadow:0 0 0 0 #66869c80; }
	70% { transform:scale(1); box-shadow:0 0 0 10px #66869c00; }
	100% { transform:scale(1); box-shadow:0 0 0 0 #66869c00; }
}

.latest_OLD .image-info {
	background: #66869c;
	color: #fcfcfc;
}
.latest_OLD .extension-grid {
	color: #f1f1f1;
}
.latest_OLD .download-btn svg {
	stroke: #ffffff;
}

.image-info {
	display: flex;
	align-items: center;
	padding: 0.75rem;
	background: rgb(47 47 47 / 80%);
	color: #ccc;
	font-size: 0.8rem;
	width: 100%;
	transition: background 1s ease;
}
.download-btn {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.download-btn svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #ccc;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 1s ease;
}
.download-btn:hover svg {
  stroke: #fff;
}
.filename {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.extension-grid {
	font-size: 0.67rem;
	color: var(--text-muted);
	flex: 0 0 30px;
	text-align: right;
	margin-left: 0.5rem;
	transition: color 1s ease;
}
.filesize {
  flex: 0 0 60px;
  text-align: right;
  margin-left: 0.5rem;
}
.fancybox__container {
	--fancybox-backdrop-bg: #000000f5;
}


/***********************************************************************************/
/* END Fancybox */
/***********************************************************************************/

.download-box {
    background-color: var(--box-bg);
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    padding: 1rem;
    position: relative;
    z-index: 2;
	transition: opacity 0.5s cubic-bezier(0.25, 0, 0.32, 0.98);
	left: 2rem;
}
.left-sidebar {
	position: fixed;
	top: 0;
	background-color: #0000006e;
	width: 240px;
	border-right: solid 1px #dddddd7a;
	color: #ccc;
	height: 100vh;
	transition: opacity 0.5s cubic-bezier(0.25, 0, 0.32, 0.98);
	z-index: 4;
}
/*	┌───────────────────────────────────────────────────────────────────────────────────┐
	│  SIDEBAR PADDING WRAPPER                                                          │
	└───────────────────────────────────────────────────────────────────────────────────┘

	Holds the heading, meta list, download button, and segmented toggle. Caps its
	height at the viewport minus the 65px nav-toggle row above it, and scrolls
	inside when the content overflows.

	Why the cap:
		• On tall windows the content never reaches the cap, so the scrollbar stays
		  hidden and the sidebar looks exactly as before.
		• On short windows the cap forces overflow inside this box instead of the
		  content disappearing off the bottom of the fixed sidebar.

	Scrollbar look:
		• Thin and translucent — 6px wide, white at 25% opacity. Firefox uses the
		  scrollbar-width/scrollbar-color pair; WebKit uses the ::-webkit-scrollbar
		  pseudo-elements. Both branches included so it works across browsers.
*/
.left-sidebar-padding {
	padding: 0 20px 0 40px;
	max-height: calc(100vh - 65px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.left-sidebar-padding::-webkit-scrollbar {
	width: 6px;
}
.left-sidebar-padding::-webkit-scrollbar-track {
	background: transparent;
}
.left-sidebar-padding::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: 3px;
}

.nav-toggle-sidebar {
	height: 65px;
	width: 100%;
	display: flex;
	align-items: center;
}
.folder-meta {
	clear: both;
	font-size: 13px;
	padding: 171px 0 0 0;
	padding: clamp(20px, 5vh, 171px) 0 0 0;
	list-style: none;
}
.folder-meta .heading {
	margin-bottom: 23px;
	font-size: 13px;
	text-transform: uppercase;
	color: #b1b1b1;
	font-weight: 700;
}
.folder-meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
}

/*	┌───────────────────────────────────────────────────────────────────────────────────┐
	│  SHORT-WINDOW SIDEBAR ADJUST                                                      │
	└───────────────────────────────────────────────────────────────────────────────────┘

	Shrink the top padding on the sidebar's folder-meta list when the viewport gets
	short, so the download button and segmented toggle stay in frame.

	Trigger:
		• max-height 750px — covers laptops with the dock visible and split-screen windows.
		  Above this, the original 171px sits untouched and the desktop look is preserved.

	How:
		• clamp(20px, 5vh, 171px) — padding scales with viewport height between 200px and
		  1710px of window height. At normal heights it reads as 171px (the original). As
		  the window shrinks, it eases down toward the 20px floor.
*/
@media screen and (max-height: 750px) {
	.folder-meta {
		padding: clamp(20px, 5vh, 171px) 0 0 0;
	}
}

.sender-info {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    margin-right: 1rem;
    object-fit: cover;
}

.sender-name {
    color: var(--text-muted);
}

.folder-meta .description {
	font-style: unset;
	color: #c5a677;
	margin-bottom: 50px;
	display: block;
	line-height: 1.3;
}

.description {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.75rem 0 1.5rem;
    font-style: italic;
}

.divider {
    border-top: 1px solid #d3d3d3;
    margin: 2.5rem 0;
}

.scrollable {
    position: relative;
    max-height: 450px;
    margin-bottom: 20px;
    z-index: 2;
}

.file-list {
    list-style: none;
    margin-bottom: 0;
    z-index: 1;
}

ul.file-list li {
    display: flex;
    align-items: center;
    padding: 0.55rem;
    background-color: #fff;
    border-radius: 0.5rem;
    margin-bottom: 0.2rem;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 0;
}

ul.file-list li:hover {
    background-color: #eff6ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

ul.file-list li:active {
    background-color: #dbeafe;
}

.file-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    overflow: hidden;
}

.file-name {
    font-size: 0.75rem;
    color: var(--text-dark);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 240px;
	padding-left: 5px;
}

.file-size {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    flex-shrink: 0;
    width: 60px;
}

.extension {
    font-size: 0.67rem;
    color: var(--text-muted);
    text-align: right;
    flex-shrink: 0;
    width: 30px;
    text-transform: uppercase;
}
.download-all-button-grid {
    background-color: #77777791;
    color: #ccc;
    padding: 0.75rem;
    border: none;
    border-radius: 0.2rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s;
    height: 50px;
}

.download-all-button-grid:hover {
    background-color: #53535391;
}
.download-all-button {
    background-color: var(--primary-color);
    color: white;
    padding: 0.75rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s;
    height: 50px;
}

.download-all-button:hover {
    background-color: var(--primary-hover);
}

.download-all-button:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.download-all-button svg {
    vertical-align: middle;
}

.website {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    color: white;
    font-size: 0.875rem;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    transition: background-color 0.3s;
    z-index: 10;
}

.website:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.email a {
    font-size: 13px;
    text-decoration: none;
    color: var(--text-dark);
}

.download-scroll-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 114, 128, 0.3) transparent;
}

.download-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.download-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.download-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.3);
    border-radius: 1rem;
    transition: background 0.3s ease;
}

.download-scroll-container:hover::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.5);
}

.download-scroll-container > div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
    background: unset;
}

.download-started {
    background: #ffffffab;
    transition: background-color 0.6s ease;
    overflow: hidden;
}

.back-button {
    display: flex !important;
    padding-top: 14px !important;
}

.file-list-container {
    z-index: 1;
}

.download-started-message {
    z-index: 0;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    position: relative;
    color: var(--text-dark);
}

.message-content {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease;
}

.progress-message {
    opacity: 1;
}

.checkmark-message {
    opacity: 0;
}

.download-scroll-container.active .file-list-container {
    transform: translateX(-100%);
}

/* New Switcher Styling */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.toggle-container label {
    font-size: 0.9rem;
    color: #ccc;
    user-select: none;
}

/* The switch now uses a single scale factor for easy, proportional resizing */
.switch {
    --switch-scale-factor: 0.75; /* Adjust this value to scale the entire switch */
    --switch-width: calc(48px * var(--switch-scale-factor));
    --switch-height: calc(28px * var(--switch-scale-factor));
    position: relative;
    display: inline-block;
    width: var(--switch-width);
    height: var(--switch-height);
}

/* Hide default checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: var(--switch-height);
}

.slider:before {
    --toggle-size: calc(var(--switch-height) - calc(8px * var(--switch-scale-factor)));
    position: absolute;
    content: "";
    height: var(--toggle-size);
    width: var(--toggle-size);
    left: calc(4px * var(--switch-scale-factor));
    bottom: calc(4px * var(--switch-scale-factor));
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #007bff;
}

input:focus + .slider {
    box-shadow: 0 0 1px #007bff;
}

input:checked + .slider:before {
    transform: translateX(calc(var(--switch-width) - var(--switch-height)));
}





/********************************************************/

/* ADD THIS TO THE END OF YOUR EXISTING CSS FILE */

/* Sequential Download Progress Bar */
.progress-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 0;
    height: 6px;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Enhanced progress message styling */
.progress-message p {
    margin: 5px 0;
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.progress-message {
    text-align: center;
    padding: 10px;
}

/* Add progress container to download messages */
.download-started-message {
    position: relative;
    min-height: 120px;
}

.download-started-message .progress-container {
    margin: 15px auto;
    max-width: 300px;
}

/* Retry button styling */
.download-all-button.retry-button,
.download-all-button-grid.retry-button {
    background-color: #e74c3c;
    color: white;
}

.download-all-button.retry-button:hover,
.download-all-button-grid.retry-button:hover {
    background-color: #c0392b;
}

/* Success state improvements */
.checkmark-message svg {
    color: #27ae60;
}

/*      ┌───────────────────────────────────────────────────────────────────────────────────┐
        │  HIDE PREVIOUS VERSIONS TOGGLE                                                    │
        └───────────────────────────────────────────────────────────────────────────────────┘ */

/* Hide muted tiles when the grid is in HIDE PREVIOUS VERSIONS mode */
.grid.hide-muted .muted-item {
	display: none;
}

/* Segmented switch — two-segment pill with a sliding active background, sitting below the Download All button */
.segmented {
	display: inline-flex;
	padding: 3px;
	border-radius: 22px;
	background: rgb(0 0 0 / 25%);
	border: 1px solid rgba(255, 255, 255, 0.15);
	user-select: none;
	position: relative;
	margin: 40px 0 100px;
}

/* The sliding pill — JS sets left and width, CSS animates the move */
.segmented .seg-pill {
	position: absolute;
	top: 3px;
	left: 0;
	height: calc(100% - 6px);
	background: #34729a;
	border-radius: 18px;
	transition: left 0.28s cubic-bezier(.4,0,.2,1), width 0.28s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
	z-index: 0;
}

.segmented .seg {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 18px;
	cursor: pointer;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.2s;
	position: relative;
	z-index: 1;
}
.segmented .seg:hover { color: rgba(255, 255, 255, 0.85); }
.segmented .seg.active { color: white; }
.segmented .seg.active:hover { color: white; }

/* THUMB SIZE SLIDER — floats bottom-left of the grid area, controls --columns live */
.thumb-size-control {
	position: absolute;
	bottom: 30px;
	left: 30px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	background: rgb(47 47 47 / 80%);
	border-radius: 20px;
	color: #ccc;
	font-size: 0.75rem;
}

.thumb-size-label {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	user-select: none;
}
#thumb-size-slider {
	width: 120px;
	accent-color: #ccc;
	cursor: pointer;
	/*transform: scaleX(-1);  flip visually so drag right = bigger thumbs */
}

/* SEAMLESS loop slide — fills most of the lightbox, with the JPG repeating sideways.
	- !important beats Fancybox's default padding and white background on inline content. */
.seamless-slide {
	width: 90vw;
	height: 80vh;
	padding: 0 !important;
	background: transparent !important;
}

/* The strip the user drags. touch-action: none hands touch drags to the JS instead of page scroll. */
.seamless-strip {
	width: 100%;
	height: 100%;
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: 0 50%;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.seamless-strip:active {
	cursor: grabbing;
}

/* SEAMLESS tile in the grid — the clip becomes the frame the moving strip sits inside. */
.grid-item.seamless .grid-clip {
	position: relative;
}

/* The original thumbnail keeps the tile's height for the grid layout, but stays invisible. */
.grid-item.seamless .seamless-source {
	visibility: hidden;
}

/* The moving strip laid over the thumbnail, cropped the same way the thumbnail is so it looks identical.
	- 100% auto matches the thumbnail's full-width size, and 50% centres it vertically like the clip does.
	- pan-y lets phones still scroll the page with an up/down swipe, while a sideways swipe scrubs the loop. */
.grid-item.seamless .seamless-tile {
	position: absolute;
	inset: 0;
	background-repeat: repeat-x;
	background-size: 100% auto;
	background-position: 0 50%;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	transition: filter 0.3s ease;
}

.grid-item.seamless .seamless-tile:active {
	cursor: grabbing;
}

/* Same hover lift as the other thumbnails, without the zoom that would shift the loop. */
.grid-item.seamless:hover .seamless-tile {
	filter: brightness(1.1);
}

/* Safari and Chrome can still start a native drag from a link or an image, so turn it off in CSS too. */
.grid-item.seamless a,
.grid-item.seamless img {
	-webkit-user-drag: none;
}

/* Visitors who asked their system for less motion get a still thumbnail. */
@media (prefers-reduced-motion: reduce) {
	.grid-item.seamless .seamless-track {
		animation: none;
	}
}


@media screen and (max-width: 1400px) {
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
	.left-sidebar {
		background-color: #000 !important;
		left: -240px;
		transition: all .3s ease !important;
		z-index: 5 !important;
	}
	.grid-view {
		margin-left: 0 !important;
	}
	.nav-toggle, .nav-toggle-close {
		margin-left: 25px;
		display: inline-flex;
	}
	.badge {
		display: none !important;
	}
	.project-details {
		right: 30px !important;
	}	
	.download-all-button-grid {
		position: fixed !important;
		top: 14px !important;
		right: 30px !important;
		width: 150px !important;
		height: 36px !important;
		padding: 0.6rem !important;
	}
	.segmented {
		margin: 0 0 80px;
	}
	.thumb-size-control {
		position: relative;
		left: 0;
		display: inline-flex;
	}
}
@media screen and (max-width: 768px) {
	.download-box {
		width: 90%;
		padding: 1rem;
	}
	.logo {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-right: 180px;
	}
    .progress-message p {
        font-size: 0.85rem;
    }
    
    .download-started-message .progress-container {
        max-width: 250px;
    }
}
@media screen and (max-width: 550px) {
	.logo {
		padding-right: 0;
	}
	.download-all-button-grid {
		position: unset !important;
		top: 14px !important;
		right: 30px !important;
		width: 100% !important;
		height: 50px !important;
		padding: 0.75rem !important;
	}
	
	.segmented {
		margin: 40px 0 100px;
	}
}