@font-face {
	font-weight: normal;
	font-style:  normal;
	font-family: 'codropsicons';
	src: url("../fonts/codropsicons/codropsicons.eot");
	src: url("../fonts/codropsicons/codropsicons.eot?#iefix") format("embedded-opentype"),
	     url("../fonts/codropsicons/codropsicons.woff") format("woff"),
	     url("../fonts/codropsicons/codropsicons.ttf") format("truetype"),
	     url("../fonts/codropsicons/codropsicons.svg#codropsicons") format("svg");
}

@font-face {
	font-family: 'camera-icons';
	src: url('../fonts/camera-icons/camera-icons.eot?7h6q4p');
	src: url('../fonts/camera-icons/camera-icons.eot?#iefix7h6q4p') format('embedded-opentype'),
	     url('../fonts/camera-icons/camera-icons.woff?7h6q4p') format('woff'),
	     url('../fonts/camera-icons/camera-icons.ttf?7h6q4p') format('truetype'),
	     url('../fonts/camera-icons/camera-icons.svg?7h6q4p#camera-icons') format('svg');
	font-weight: normal;
	font-style:  normal;
}

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #212121;
	color: #fff;
	font-size: 1em;
	overflow: hidden;
	position: relative;
	overflow-y: scroll;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html.embedded-mode,
html.embedded-mode body {
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
}

html.embedded-mode body {
	overflow-y: auto;
	scrollbar-width: none;
	background: #151515;
}

html.embedded-mode body::-webkit-scrollbar {
	width: 0;
	height: 0;
}

a { color: #585558; text-decoration: none; outline: none; }
a:hover { color: #ef5350; }
a:hover, a:focus { outline: none; }
button:focus { outline: none; }

.container {
	position: relative;
	min-height: 100vh;
	height: 100%;
	overflow: hidden;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	padding: 0 1.5em;
	height: 60px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex: none;
	flex: none;
	-webkit-align-items: center;
	align-items: center;
	background: rgba(21, 21, 21, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255,255,255,0.05);
	z-index: 6000;
}

.site-logo {
	-webkit-flex: none;
	flex: none;
	margin-right: 0.75em;
}

.site-logo img {
	height: 42px;
	width: auto;
	display: block;
}

.site-title {
	font-size: 1em;
	font-weight: 700;
	margin: 0 auto 0 0;
	padding: 0;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.site-title span { color: #585558; }

.menu { font-size: 1em; padding: 0.5em; }
.menu__item { font-weight: bold; margin: 0 1em; }
.menu__item--current { color: #ef5350; cursor: default; }
.menu__item--quit {
  text-decoration: none; color: rgba(255,255,255,0.7);
  background: rgba(220,40,40,0.12); border: 1px solid rgba(220,40,40,0.3);
  border-radius: 999px; padding: 5px 16px; font-size: 0.82em;
  transition: background 0.2s, color 0.2s;
}
.menu__item--quit:hover { background: rgba(220,40,40,0.7); color: #fff; }

html.embedded-mode #btn-back-ibilling,
html.embedded-mode .menu__item--quit {
	display: none !important;
}

html.embedded-mode .site-header {
	right: 0;
	width: 100%;
}

html.embedded-mode .container {
	width: 100%;
	overflow-x: hidden;
}

.hero {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0; left: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.hero__back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.hero__back--static {
	background-color: #212121;
	background-image: url(../img/bg-seul.jpg);
	z-index: 1;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
	-webkit-transform-origin: 50% 60px;
	transform-origin: 50% 60px;
	-webkit-transition-timing-function: cubic-bezier(0.6,0,0.4,1);
	transition-timing-function: cubic-bezier(0.6,0,0.4,1);
}

.hero__video {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	opacity: 0;
	-webkit-transition: opacity 1.8s ease;
	transition: opacity 1.8s ease;
	pointer-events: none;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.hero__video { display: none; }
}

.hero__back--mover {
	background-image: url(../img/bg-seul.png);
	background-color: transparent;
	opacity: 1;
	z-index: 3;
	-webkit-transition: -webkit-transform 0.35s, opacity 0s 0.5s;
	transition: transform 0.35s, opacity 0s 0.5s;
}

.move-items .hero__back--mover { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; }

.hero::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 48vh;
	background: -webkit-linear-gradient(top, transparent 0%, #212121 65%);
	background: linear-gradient(to bottom, transparent 0%, #212121 65%);
	pointer-events: none;
	z-index: 5;
}

.hero__front {
	position: absolute;
	top: 0; left: 50%;
	margin: 0 0 0 -391px;
	width: 782px; height: 782px;
	border-radius: 50%;
	opacity: 0;
	z-index: 4;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
	-webkit-transform-origin: 50% 60px;
	transform-origin: 50% 60px;
	-webkit-transition-timing-function: cubic-bezier(0.6,0,0.4,1);
	transition-timing-function: cubic-bezier(0.6,0,0.4,1);
}

.move-items .hero__back--static { opacity: 0; -webkit-transform: scale3d(0.15,0.15,1); transform: scale3d(0.15,0.15,1); }
.move-items .hero__front { opacity: 1; -webkit-transition-duration: 0.5s, 0s; transition-duration: 0.5s, 0s; -webkit-transform: scale3d(0.15,0.15,1); transform: scale3d(0.15,0.15,1); }

.stack-slider {
	position: absolute;
	height: 40vh;
	width: 100vw;
	top: 0;
	opacity: 0;
	z-index: 10;
	-webkit-user-select: none; user-select: none;
	-webkit-transform: translate3d(0, 60vh, 0);
	transform: translate3d(0, 60vh, 0);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.6,0,0.4,1);
	transition-timing-function: cubic-bezier(0.6,0,0.4,1);
	-webkit-animation: stack-reveal 0.5s ease 1s forwards;
	animation: stack-reveal 0.5s ease 1s forwards;
}
@-webkit-keyframes stack-reveal { to { opacity: 1; } }
@keyframes stack-reveal          { to { opacity: 1; } }

.view-init .stack-slider {
	opacity: 1;
	-webkit-animation: none;
	animation: none;
}
.move-items .stack-slider { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.view-full .flickity-viewport { overflow: visible; }

.loader { position: fixed; width: 60px; height: 15px; top: 80vh; left: 50%; margin: -7px 0 0 -30px; }
.view-init .loader { display: none; }

.stacks-wrapper { height: 100%; }

.stack {
	width: 45%;
	min-width: 300px;
	height: 100%;
	text-align: center;
}

.stack.is-selected { height: auto; }

.stack.stack-prev, .stack.stack-next {
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.6,0,0.4,1);
	transition-timing-function: cubic-bezier(0.6,0,0.4,1);
}

.move-items .stack.stack-prev, .move-items .stack.stack-next { opacity: 0; }
.move-items .stack.stack-prev { -webkit-transform: translate3d(-70px, 65vh, 0); transform: translate3d(-70px, 65vh, 0); }
.move-items .stack.stack-next { -webkit-transform: translate3d(70px, 65vh, 0); transform: translate3d(70px, 65vh, 0); }

.stack.is-selected .stack-title::before,
.stack.stack-prev  .stack-title::after,
.stack.stack-next  .stack-title::after {
	content: '';
	width: 30px; height: 30px;
	position: absolute;
	opacity: 0;
	z-index: 100;
}

.stack.is-selected .stack-title::before {
	margin: 0 0 0 -15px;
	left: 50%; top: 10px;
	background: url(../img/arrow-colored.svg) no-repeat center center;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.3s;
	transition: transform 0.5s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.6,0,0.4,1);
	transition-timing-function: cubic-bezier(0.6,0,0.4,1);
}

.stack.is-selected .stack-title::before { opacity: 1; }
.move-items .is-selected .stack-title::before { -webkit-transform: rotate3d(0,0,1,180deg); transform: rotate3d(0,0,1,180deg); }

.stack.stack-prev .stack-title::after,
.stack.stack-next .stack-title::after {
	content: '';
	top: 1.65em;
	background: url(../img/arrow-gray.svg) no-repeat center center;
}

.stack.stack-prev .stack-title::after { right: 0; -webkit-transform: rotate3d(0,0,1,-90deg); transform: rotate3d(0,0,1,-90deg); }
.stack.stack-next .stack-title::after { left: 0;  -webkit-transform: rotate3d(0,0,1,90deg);  transform: rotate3d(0,0,1,90deg); }

.stack.stack-prev .stack-title::after,
.stack.stack-next .stack-title::after {
	opacity: 0.45;
	-webkit-animation: arrow-hint 2.2s ease-in-out infinite;
	animation: arrow-hint 2.2s ease-in-out infinite;
}

.stack.stack-prev .stack-title:hover::after,
.stack.stack-next .stack-title:hover::after { opacity: 1; animation: none; }

@keyframes arrow-hint {
	0%, 100% { opacity: 0.3; }
	50%       { opacity: 0.7; }
}

.stack-title {
	font-size: 2.25em;
	font-weight: 700;
	margin: 80px 0 30px;
	padding: 50px 40px 15px;
	text-align: center;
	display: inline-block;
	position: relative;
	cursor: pointer;
}

.stack-title a {
	display: block;
	position: relative;
	overflow: hidden;
	color: #fff;
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.stack-title a::after {
	content: attr(data-text);
	position: absolute;
	width: 100%; height: 100%;
	top: 0; left: 0;
	font-size: 0.5em;
	line-height: 2.5;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.stack-title a span {
	display: block;
	color: #595959;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.is-selected .stack-title a span { color: #ef5350; }

.stack-title a::after,
.stack-title a span {
	-webkit-transition: -webkit-transform 1s 0.15s, opacity 1s 0.15s;
	transition: transform 1s 0.15s, opacity 1s 0.15s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.stack-title a:hover { color: #fff; }

.move-items .is-selected .stack-title a::after { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.move-items .is-selected .stack-title a span   { opacity: 0; -webkit-transform: translate3d(0,-150%,0); transform: translate3d(0,-150%,0); }

.item {
	padding: 0 5% 5%;
	opacity: 0;
	width: 100%;
	position: relative;
	text-align: left;
	-webkit-transform: translate3d(0,75px,0);
	transform: translate3d(0,75px,0);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
	-webkit-transition-timing-function: cubic-bezier(0.6,0,0.4,1);
	transition-timing-function: cubic-bezier(0.6,0,0.4,1);
}

.move-items .is-selected .item { opacity: 1; }

.item:first-of-type {
	opacity: 0.28;
	cursor: pointer;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
}

.item-clickable .is-selected .item:first-of-type:hover {
	opacity: 1;
	-webkit-animation: item-bounce 0.65s ease-in-out infinite;
	animation: item-bounce 0.65s ease-in-out infinite;
}
@-webkit-keyframes item-bounce {
	0%, 100% { -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0); }
	40%       { -webkit-transform: translate3d(0, -9px, 0); transform: translate3d(0, -9px, 0); }
	70%       { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); }
}
@keyframes item-bounce {
	0%, 100% { -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0); }
	40%       { -webkit-transform: translate3d(0, -9px, 0); transform: translate3d(0, -9px, 0); }
	70%       { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); }
}

.move-items .is-selected .item {
	-webkit-transition-delay: 0.15s; transition-delay: 0.15s;
	-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);
}

.move-items .is-selected .item:first-of-type { -webkit-transition-delay: 0s; transition-delay: 0s; }

.move-items .is-selected .item:first-of-type .item__content::after  { -webkit-transform: translate3d(0,0,0) scale3d(0.95,0.95,1); transform: translate3d(0,0,0) scale3d(0.95,0.95,1); }
.move-items .is-selected .item:first-of-type .item__content::before { -webkit-transform: translate3d(0,0,0) scale3d(0.9,0.9,1);  transform: translate3d(0,0,0) scale3d(0.9,0.9,1); }

.item__content {
	position: relative;
	z-index: 100;
	max-width: 800px;
	margin: 0 auto;
}

.item:first-of-type .item__content::before,
.item:first-of-type .item__content::after {
	content: '';
	width: 100%; height: 20px;
	top: 0; left: 0;
	z-index: -1;
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.item:first-of-type .item__content::before {
	background: #b8b8b8;
	-webkit-transform: translate3d(0,-20px,0) scale3d(0.9,0.9,1);
	transform: translate3d(0,-20px,0) scale3d(0.9,0.9,1);
}

.item:first-of-type .item__content::after {
	background: #a7a7a7;
	-webkit-transform: translate3d(0,-10px,0) scale3d(0.95,0.95,1);
	transform: translate3d(0,-10px,0) scale3d(0.95,0.95,1);
}

.item img {
	width: 100%;
	display: block;
	position: relative;
	z-index: 100;
	cursor: pointer;
}

#photo-wall {
	position: fixed;
	top: 108px; right: 0; bottom: 0; left: 0;
	background: #191919;
	z-index: 5000;
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(18px);
	transform: translateY(18px);
	-webkit-transition: opacity 0.38s ease, -webkit-transform 0.38s ease, visibility 0s linear 0.38s;
	transition: opacity 0.38s ease, transform 0.38s ease, visibility 0s linear 0.38s;
}

#photo-wall.is-open {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: opacity 0.38s ease, -webkit-transform 0.38s ease, visibility 0s linear 0s;
	transition: opacity 0.38s ease, transform 0.38s ease, visibility 0s linear 0s;
}

#photo-wall-header {
	position: fixed;
	top: 60px;
	left: 0; right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	height: 48px;
	background: rgba(18, 18, 18, 0.97);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255,255,255,0.05);
	z-index: 5900;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.38s ease, visibility 0s linear 0.38s;
	transition: opacity 0.38s ease, visibility 0s linear 0.38s;
}

#photo-wall-header.is-open {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.38s ease, visibility 0s;
	transition: opacity 0.38s ease, visibility 0s;
}

/* Titre — centré absolument dans la barre, toujours au milieu exact */
#photo-wall-title {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-size: 1.1em;
	font-weight: 700;
	color: #ef5350;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-align: center;
	pointer-events: none;
	white-space: nowrap;
}

/* Compteur — pill à gauche */
#photo-wall-count {
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 20px;
	padding: 0.3em 0.9em;
	white-space: nowrap;
}

/* Bouton retour — poussé à droite */
#photo-wall-close {
	flex-shrink: 0;
	margin-left: auto;
	background: none;
	border: 1px solid #ef5350;
	color: #ef5350;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.42em 0.9em;
	border-radius: 4px;
	cursor: pointer;
	opacity: 0.75;
	text-transform: uppercase;
	-webkit-transition: opacity 0.2s, background 0.2s;
	transition: opacity 0.2s, background 0.2s;
}

#photo-wall-close:hover {
	opacity: 1;
	background: rgba(239, 83, 80, 0.12);
}

#photo-wall-header.flip-open #photo-wall-close {
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 0.22s ease;
	transition: opacity 0.22s ease;
}

#photo-wall-grid {
	display: -webkit-flex;
	display: flex;
	gap: 14px;
	padding: 14px 14px 40px;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

.masonry-col {
	-webkit-flex: 1;
	flex: 1;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.thumb {
	margin-bottom: 0;
	cursor: zoom-in;
	position: relative;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	will-change: transform;
	-webkit-transition: -webkit-transform 0.28s ease;
	transition: transform 0.28s ease;
}

.thumb:hover { -webkit-transform: translate3d(0,-3px,0); transform: translate3d(0,-3px,0); }

.thumb.viewed:hover::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 10px;
	border: 2px solid rgba(239,83,80,0.65);
	pointer-events: none;
	-webkit-animation: ripple-out 1s ease-out infinite;
	animation: ripple-out 1s ease-out infinite;
}

@keyframes ripple-out {
	0%   { -webkit-transform: scale(1);    transform: scale(1);    opacity: 0.8; }
	100% { -webkit-transform: scale(1.07); transform: scale(1.07); opacity: 0; }
}

.thumb-frame {
	background: #2b2b2b;
	border-radius: 10px;
	padding: 6px;
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow:
		0 8px 28px rgba(0,0,0,0.80),
		0 3px 8px  rgba(0,0,0,0.55);
	-webkit-transition: box-shadow 0.25s ease, border-color 0.25s ease;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.thumb:hover .thumb-frame {
	border-color: rgba(255,255,255,0.22);
	box-shadow:
		0 0 0 2px rgba(255,255,255,0.10),
		0 0 22px rgba(255,255,255,0.07),
		0 18px 48px rgba(0,0,0,0.92),
		0 6px 14px  rgba(0,0,0,0.65);
}

.thumb.viewed .thumb-frame {
	border-color: rgba(239, 83, 80, 0.40);
	box-shadow:
		0 0 0 1px rgba(239,83,80,0.18),
		0 8px 28px rgba(0,0,0,0.80),
		0 3px 8px  rgba(0,0,0,0.55);
}

.thumb-frame img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

@keyframes letter-pulse {
	0%   { opacity: 0.35; }
	10%  { opacity: 1; color: #fff; text-shadow: 0 0 12px rgba(239,83,80,0.6); }
	35%  { opacity: 0.35; }
	100% { opacity: 0.35; }
}

.title-letter {
	display: inline-block;
	opacity: 0.35;
	-webkit-animation: letter-pulse linear infinite;
	animation: letter-pulse linear infinite;
}

#flip-overlay {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0, 0, 0, 0.89);
	z-index: 5500;
	cursor: zoom-out;
}
#flip-overlay.is-open { display: block; }

#flip-card {
	display: none;
	position: fixed;
	z-index: 5800;
	-webkit-perspective: 1400px;
	perspective: 1400px;
	border-radius: 10px;
	cursor: zoom-out;
}
#flip-card.is-open { display: block; }

#flip-card-inner {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	will-change: transform;
}

#flip-card-front,
#flip-card-back {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: inherit;
	overflow: hidden;
}

#flip-card-front {
	background: #2b2b2b;
	padding: 6px;
	border: 1px solid rgba(255,255,255,0.08);
}
#flip-card-front img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}

#flip-card-back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	background: #2b2b2b;
	padding: 6px;
	border: 1px solid rgba(255,255,255,0.08);
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
#flip-card-back img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 6px;
}

@media screen and (max-width: 65em) {
	.stack { width: 60%; }
}

@media screen and (max-width: 45em) {
	.stack { width: 85%; min-width: 260px; }
	.stack-title { font-size: 1.6em; }
	.stack-title a { font-size: 1em; }
	.menu__item { display: none; }
	.site-header { padding: 0 0.75em; height: 54px; }
	.site-logo img { height: 30px; }
	.site-title { font-size: 0.82em; letter-spacing: 0.02em; }
	.stack.stack-prev .stack-title::after,
	.stack.stack-next .stack-title::after { top: 1.85em; }
	#photo-wall-header { top: 54px; height: 44px; }
	#photo-wall { top: 98px; }
	#photo-wall-title { font-size: 0.9em; }
	#photo-wall-close { font-size: 0.7rem; padding: 0.35em 0.7em; }
	#photo-wall-grid { padding: 10px 10px 30px; gap: 10px; }
	.masonry-col { gap: 10px; }
	#flip-card { max-width: 98vw !important; max-height: 88vh !important; }
}

@media screen and (max-width: 30em) {
	.stack { width: 92%; }
	#photo-wall-grid { padding: 8px 8px 24px; gap: 8px; }
	.masonry-col { gap: 8px; }
}

@media screen and (max-height: 35em) {
	.stack-slider { height: 60vh; -webkit-transform: translate3d(0, 40vh, 0); transform: translate3d(0, 40vh, 0); }
	#photo-wall-header { top: 54px; height: 40px; }
	#photo-wall { top: 94px; }
}

#video-load-bar {
	position: fixed;
	top: 0; left: 0;
	width: 0%;
	height: 3px;
	background: linear-gradient(90deg, #ef5350, #ff8a80);
	z-index: 10001;
	-webkit-transition: width .5s cubic-bezier(.4,0,.2,1), opacity .6s ease;
	transition: width .5s cubic-bezier(.4,0,.2,1), opacity .6s ease;
	opacity: 0;
	pointer-events: none;
}
#video-load-bar.is-loading { opacity: 1; }
#video-load-bar.is-done    { opacity: 0; }

#swipe-hint {
	position: fixed;
	bottom: 43vh;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 11;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,0.5);
	font-size: 0.6rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	pointer-events: none;
	-webkit-transition: opacity 0.8s ease;
	transition: opacity 0.8s ease;
	white-space: nowrap;
}
#swipe-hint.is-hidden { opacity: 0; }
.move-items #swipe-hint,
.view-full  #swipe-hint { opacity: 0 !important; }

.swipe-arrows {
	display: -webkit-flex;
	display: flex;
	gap: 3px;
	opacity: 0.7;
}
.swipe-arrows--left  { -webkit-animation: hint-left  1.5s ease-in-out infinite; animation: hint-left  1.5s ease-in-out infinite; }
.swipe-arrows--right { -webkit-animation: hint-right 1.5s ease-in-out infinite; animation: hint-right 1.5s ease-in-out infinite; }

@-webkit-keyframes hint-left  { 0%,100%{-webkit-transform:translateX(0);opacity:.7} 50%{-webkit-transform:translateX(-5px);opacity:1} }
@keyframes          hint-left  { 0%,100%{transform:translateX(0);opacity:.7}          50%{transform:translateX(-5px);opacity:1} }
@-webkit-keyframes hint-right { 0%,100%{-webkit-transform:translateX(0);opacity:.7} 50%{-webkit-transform:translateX(5px);opacity:1} }
@keyframes          hint-right { 0%,100%{transform:translateX(0);opacity:.7}          50%{transform:translateX(5px);opacity:1} }