/**
 * Front page: hero, universe/explore navigation, filmstrip, manifeste,
 * récits à la une, preloader.
 *
 * Adapted from sliceofcactus-astro/src/pages/index.astro and
 * sliceofcactus-astro/public/css/style.css. The generic .lightbox chrome
 * lives in assets/styles/components/lightbox.css; the custom cursor in
 * assets/styles/components/cursor.css.
 */

/* ---------- PRÉLOADEUR ---------- */

.preloader {
	position: fixed;
	z-index: 10001;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	color: var(--paper);
	transition: transform 1s var(--ease);
}

.preloader.is-done {
	transform: translateY(-100%);
}

.preloader__inner {
	text-align: center;
}

.preloader__frame {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .4rem;
	font-family: var(--font-display);
}

.preloader__count {
	color: var(--accent);
	font-family: var(--font-head);
	font-size: clamp(4rem, 18vw, 11rem);
	line-height: .9;
}

.preloader__slash {
	color: var(--paper);
	font-size: clamp(1.2rem, 4vw, 2.2rem);
	opacity: .6;
}

.preloader__label {
	margin-top: 1rem;
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .35em;
	text-transform: uppercase;
	opacity: .6;
}

/* ---------- HERO ---------- */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	padding: 8rem clamp(1.2rem, 4vw, 3rem) 4rem;
	overflow: hidden;
	background:
		radial-gradient(95% 75% at 76% 26%, rgb(255 255 255 / 18%), transparent 58%),
		radial-gradient(90% 90% at 8% 100%, var(--accent-deep), transparent 55%),
		linear-gradient(158deg, var(--accent) 12%, var(--accent-deep) 120%);
}

.hero::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 130px 130px;
	content: "";
	mix-blend-mode: soft-light;
	opacity: .72;
	pointer-events: none;
}

.hero::after {
	position: absolute;
	z-index: 0;
	inset: 0;
	box-shadow: inset 0 0 200px 50px rgb(10 8 7 / 40%);
	content: "";
	pointer-events: none;
}

.hero-viewport {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.hero-viewport .hero {
	flex: 1 1 auto;
	min-height: 0;
}

.hero__blob {
	position: absolute;
	z-index: 0;
	top: 8%;
	right: -8%;
	width: min(52vw, 680px);
	aspect-ratio: 1;
	border-radius: 47% 53% 62% 38% / 45% 48% 52% 55%;
	background: radial-gradient(circle at 35% 35%, var(--accent), var(--accent-deep));
	filter: blur(6px);
	opacity: .6;
	animation: soc-blob 16s var(--ease) infinite;
}

.hero__blob--2,
.hero__blob--3 {
	position: absolute;
	z-index: 0;
	aspect-ratio: 1;
	border-radius: 47% 53% 62% 38% / 45% 48% 52% 55%;
	filter: blur(10px);
	opacity: .5;
	animation: soc-blob 20s var(--ease) infinite;
}

.hero__blob--2 {
	bottom: -14%;
	left: -8%;
	width: min(44vw, 520px);
	background: radial-gradient(circle at 40% 40%, var(--accent), var(--accent-deep));
	animation-delay: -6s;
}

.hero__blob--3 {
	top: 26%;
	left: 34%;
	width: min(30vw, 360px);
	background: radial-gradient(circle at 50% 50%, var(--accent-deep), transparent 70%);
	opacity: .4;
	animation-delay: -12s;
}

@keyframes soc-blob {
	0%, 100% {
		border-radius: 47% 53% 62% 38% / 45% 48% 52% 55%;
		transform: rotate(0) scale(1);
	}

	50% {
		border-radius: 60% 40% 38% 62% / 58% 42% 58% 42%;
		transform: rotate(18deg) scale(1.06);
	}
}

.hero__content {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	align-items: center;
	max-width: var(--maxw);
	width: 100%;
	margin: 0 auto;
	gap: clamp(1.4rem, 4vw, 3rem);
}

.hero__intro {
	position: relative;
	z-index: 5;
	max-width: 600px;
}

.hero__kicker {
	margin-bottom: 1.4rem;
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: .76rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .85;
}

.hero__title {
	font-family: var(--font-head);
	font-size: clamp(3.6rem, 14vw, 12rem);
	line-height: .86;
	letter-spacing: .005em;
	text-transform: uppercase;
}

.hero .hero__title {
	font-size: clamp(3rem, 6.2vw, 6.4rem);
}

.hero__title span {
	display: block;
}

.hero__title .is-outline {
	color: transparent;
	-webkit-text-stroke: 2.5px var(--paper);
}

.hero__lead {
	max-width: 44ch;
	margin: 1.4rem 0 1.8rem;
	color: rgb(255 255 255 / 90%);
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	line-height: 1.55;
}

.hero__lead strong {
	color: var(--paper);
	font-weight: 700;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.hero__meta {
	position: absolute;
	z-index: 2;
	right: clamp(1.2rem, 4vw, 3rem);
	bottom: 2rem;
	display: flex;
	align-items: center;
	gap: .9rem;
	color: rgb(255 255 255 / 72%);
	font-family: var(--font-mono);
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hero__meta-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--flash);
}

.hero__scroll {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 1.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .45rem;
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: .62rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .82;
	transition: opacity .3s;
	transform: translateX(-50%);
}

.hero__scroll:hover {
	opacity: 1;
}

.hero__scroll svg {
	width: 26px;
	height: 26px;
	animation: soc-hero-scroll 1.8s var(--ease) infinite;
}

@keyframes soc-hero-scroll {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(6px);
	}
}

/* ---------- POLAROIDS ---------- */

.polas {
	position: relative;
	z-index: 3;
	width: 100%;
	height: clamp(500px, 64vh, 680px);
}

.pola {
	position: absolute;
	z-index: var(--z, 1);
	width: calc(var(--w, 1) * clamp(140px, 13vw, 196px));
	padding: 9px 9px 0;
	border-radius: 3px;
	background: #fbf8f2;
	box-shadow: 0 18px 30px -14px rgb(10 8 7 / 60%);
	color: var(--ink);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
	transform: rotate(var(--r, 0deg));
}

.pola img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	background: #ddd;
	object-fit: cover;
	filter: grayscale(.12) contrast(1.03);
}

.pola__cap {
	display: block;
	overflow: hidden;
	padding: .45rem .15rem .55rem;
	color: #5a5248;
	font-family: var(--font-mono);
	font-size: .56rem;
	letter-spacing: .1em;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-transform: uppercase;
}

.pola:hover {
	z-index: 60;
	box-shadow: 0 34px 54px -18px rgb(10 8 7 / 72%);
	transform: rotate(0deg) scale(1.1) translateY(-10px);
}

/* ---------- BOUTONS ---------- */

/* .btn/.btn--fill/.btn--line now live in
   assets/styles/components/buttons.css — also used by page-a-propos.php's
   "Trois façons d'entrer". */

/* ---------- TYPEWRITER ---------- */

.typewriter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: calc(1.7rem + 2rem + 6px);
	padding: 1rem clamp(1.2rem, 4vw, 3rem);
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: clamp(.6rem, 2.1vw, .8rem);
	letter-spacing: .88rem;
	text-align: center;
	text-transform: uppercase;
}

.typewriter__caret {
	display: inline-block;
	width: 2px;
	height: 1.15em;
	background: var(--accent);
	vertical-align: -0.14em;
	animation: soc-tw-blink .9s steps(1) infinite;
}

@keyframes soc-tw-blink {
	50% {
		opacity: 0;
	}
}

/* ---------- SECTION HEAD ---------- */

/*
 * .section-head itself, and the "univers" panels below (.universe,
 * .upanel*), now live in assets/styles/components/panels.css — shared with
 * page-a-propos.php's "Trois formes". This override stays here: it's
 * specific to this page's own .explore/.home-recits section wrappers.
 */
.explore > .section-head,
.home-recits > .section-head {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---------- EXPLORER AUTREMENT ---------- */

.explore {
	width: 100vw;
	padding: 9rem max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
	/*background: var(--accent-color-your-life);*/
}

.explore__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	grid-auto-rows: 1fr;
	height: clamp(440px, 58vh, 600px);
	margin-top: 1.6rem;
	gap: 1.1rem;
}

.xtile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.4rem, 2.4vw, 2rem);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 22px 44px -26px rgb(20 18 16 / 70%);
	color: #fff;
	transition: transform .5s var(--ease);
}

.xtile--lead {
	grid-row: span 2;
}

.xtile:hover,
.xtile:focus-visible {
	transform: translateY(-3px);
}

.xtile__bg {
	position: absolute;
	z-index: -2;
	inset: 0;
	background: var(--img) center / cover no-repeat;
	filter: grayscale(.4) brightness(.7);
	transition: transform 1.1s var(--ease), filter .6s var(--ease);
	transform: scale(1.06);
}

.xtile::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(150deg, color-mix(in srgb, var(--c) 60%, transparent), rgb(10 8 7 / 78%) 85%);
	content: "";
	transition: opacity .6s;
}

.xtile:hover .xtile__bg,
.xtile:focus-visible .xtile__bg {
	filter: grayscale(0) brightness(.86);
	transform: scale(1);
}

.xtile__k {
	align-self: flex-start;
	margin-bottom: auto;
	padding: .35rem .65rem;
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: 40px;
	font-family: var(--font-mono);
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	backdrop-filter: blur(3px);
}

.xtile__go {
	position: absolute;
	top: clamp(1.4rem, 2.4vw, 2rem);
	right: clamp(1.4rem, 2.4vw, 2rem);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1.5px solid rgb(255 255 255 / 55%);
	border-radius: 50%;
	font-size: 1.15rem;
	line-height: 1;
	transition: background .4s var(--ease), border-color .4s, transform .5s var(--ease), color .4s;
}

.xtile:hover .xtile__go,
.xtile:focus-visible .xtile__go {
	border-color: var(--c);
	background: var(--c);
	transform: rotate(-45deg);
}

.xtile__t {
	font-family: var(--font-head);
	font-size: clamp(1.9rem, 3vw, 2.8rem);
	letter-spacing: .01em;
	line-height: .92;
	text-transform: uppercase;
}

.xtile--lead .xtile__t {
	font-size: clamp(2.6rem, 4.6vw, 4.4rem);
}

.xtile__d {
	max-width: 34ch;
	margin-top: .45rem;
	color: rgb(255 255 255 / 90%);
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.45;
}

.xtile__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	background: var(--c);
	transition: transform .6s var(--ease);
	transform: scaleX(0);
	transform-origin: left;
}

.xtile:hover .xtile__bar,
.xtile:focus-visible .xtile__bar {
	transform: scaleX(1);
}

/* ---------- SÉRIE / PELLICULE ---------- */

.serie {
	position: relative;
	padding: 7rem 0;
	background: var(--ink);
	/*background: var(--accent-photo);*/
	color: var(--paper);
}

.serie .section-head__num {
	color: var(--accent);
}

.serie .section-head__sub {
	color: #b8b0a5;
}

.filmstrip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 3rem clamp(1.2rem, 4vw, 3rem);
	scrollbar-color: var(--accent) transparent;
	scrollbar-width: thin;
	scroll-snap-type: x mandatory;
}

.filmstrip::-webkit-scrollbar {
	height: 8px;
}

.filmstrip::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: var(--accent);
}

.frame {
	position: relative;
	flex: 0 0 auto;
	width: 230px;
	padding: 26px 10px;
	border-radius: 4px;
	background: #0c0b0a;
	transition: transform .4s var(--ease);
	scroll-snap-align: center;
}

.frame:hover {
	transform: scale(1.04);
}

.frame::before,
.frame::after {
	position: absolute;
	left: 6px;
	right: 6px;
	height: 12px;
	background-image:
		radial-gradient(circle, transparent 42%, #0c0b0a 44%),
		repeating-linear-gradient(90deg, var(--paper) 0 8px, transparent 8px 20px);
	background-size: 20px 12px;
	content: "";
}

.frame::before {
	top: 6px;
}

.frame::after {
	bottom: 6px;
}

.frame__img {
	aspect-ratio: 3 / 2;
	border-radius: 2px;
	overflow: hidden;
}

.frame__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter .4s;
	filter: sepia(.15) contrast(1.05);
}

.frame:hover .frame__img img {
	filter: sepia(0) contrast(1.08);
}

.frame__num {
	position: absolute;
	z-index: 2;
	top: 8px;
	right: 14px;
	color: var(--flash);
	font-family: var(--font-display);
	font-size: .8rem;
}

.serie__hint {
	margin-top: 1rem;
	color: #b8b0a5;
	font-size: .9rem;
	text-align: center;
}

/* ---------- MANIFESTE ---------- */

.manifeste {
	position: relative;
	padding: 8rem 0;
	overflow: hidden;
	/*background: var(--accent-apropos);*/
}

.manifeste__blob {
	position: absolute;
	z-index: 0;
	left: -10%;
	bottom: -20%;
	width: min(50vw, 560px);
	aspect-ratio: 1;
	border-radius: 60% 40% 50% 50% / 55% 45% 55% 45%;
	background: radial-gradient(circle at 60% 40%, var(--accent-apropos), var(--accent-deep-apropos));
	filter: blur(4px);
	opacity: .18;
	animation: soc-blob 20s var(--ease) infinite reverse;
}

.manifeste__text {
	position: relative;
	z-index: 2;
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem clamp(1.2rem, 4vw, 3rem) 0;
}

.manifeste__text p {
	margin-bottom: 1.6rem;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	line-height: 1.35;
	font-weight: 400;
}

.manifeste__text .drop {
	float: left;
	padding: .1em .12em 0 0;
	color: var(--paper);
	font-size: 5.5rem;
	line-height: .8;
	font-weight: 600;
}

.manifeste__sign {
	color: rgb(255 255 255 / 80%);
	font-size: 1.1rem !important;
	font-style: italic;
}

.manifeste__sign strong {
	color: var(--paper);
}

/* ---------- RÉCITS À LA UNE ---------- */

.home-recits {
	width: 100vw;
	padding: 9rem max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
	/*background: var(--accent-recit);*/
}

.home-recits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 1.4rem;
	gap: 1.6rem;
}

.hr-card {
	display: block;
	padding-top: .9rem;
	border-top: 2px solid rgb(255 255 255 / 42%);
	color: var(--paper);
	text-decoration: none;
}

.hr-card__k {
	color: rgb(255 255 255 / 70%);
	font-family: var(--font-mono);
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hr-card__t {
	margin: .3rem 0;
	color: var(--paper);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.8rem;
	line-height: 1.1;
}

.hr-card__ex {
	color: rgb(255 255 255 / 85%);
	font-family: var(--font-display);
	font-size: 1.3rem;
	line-height: 1.3;
}

.hr-card:hover .hr-card__t {
	color: var(--flash);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 860px) {
	.hero__content {
		grid-template-columns: 1fr;
	}

	.polas {
		height: clamp(360px, 84vw, 520px);
		margin-top: 1rem;
	}
}

@media (max-width: 760px) {
	.explore__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		height: auto;
	}

	.xtile {
		min-height: 56vw;
	}

	.xtile--lead {
		grid-row: auto;
	}

	.xtile__bg {
		filter: grayscale(0) brightness(.8);
		transform: scale(1);
	}

	.xtile__bar {
		transform: scaleX(1);
	}

	.home-recits__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.hero__meta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__blob,
	.hero__blob--2,
	.hero__blob--3,
	.manifeste__blob,
	.hero__scroll svg,
	.typewriter__caret {
		animation: none;
	}

	.pola,
	.xtile,
	.xtile__bg,
	.xtile__bar,
	.xtile__go,
	.frame,
	.hr-card__t {
		transition-duration: .01ms;
	}
}