/**
 * CALIGO — fondations partagées par les blocs.
 * Les couleurs et typographies proviennent du thème (theme.json), avec des valeurs de secours.
 */

/* Nuit (par défaut) — et zones qui restent nocturnes en mode Jour : ouverture, visuels, lecteur. */
:root,
html[data-theme="day"] :is(.c-hero, .c-frame, .c-lightbox, .c-header.is-on-dark) {
	--cg-ink: #0a0a0a;
	--cg-ink-2: #131211;
	--cg-ivory: #ede7dc;
	--cg-bark: #8a8378;
	--cg-amber: #c2955a;
	--cg-ink-rgb: 10, 10, 10;
	--cg-ivory-rgb: 237, 231, 220;
	--cg-line: rgba(237, 231, 220, 0.14);
}

/* Jour : lin chaud, encre brun-gris douce (pas de noir pur), ambre cuivré. */
html[data-theme="day"] {
	--cg-ink: #e0d9cd;
	--cg-ink-2: #d4ccbe;
	--cg-ivory: #4a4239;
	--cg-bark: #665d51;
	--cg-amber: #85602f;
	--cg-ink-rgb: 224, 217, 205;
	--cg-ivory-rgb: 74, 66, 57;
	--cg-line: rgba(74, 66, 57, 0.18);
	/* Les couleurs du thème suivent, pour les pages de contenu et les liens. */
	--wp--preset--color--ink: #e0d9cd;
	--wp--preset--color--ink-soft: #d4ccbe;
	--wp--preset--color--ivory: #4a4239;
	--wp--preset--color--bark: #665d51;
	--wp--preset--color--amber: #85602f;
	color-scheme: light;
}

/* Sur fond clair, les textes courants gagnent un peu de corps (la graisse fine se lit mal) et
   les textes secondaires restent nets au lieu d'être pâlis par la transparence. */
html[data-theme="day"] :is(.c-lead, .c-faq__a p, .c-manifesto__body .is-style-caligo-lead, .c-work__featured-excerpt, .c-consent, .c-field__input, .c-field__label, .c-page__content) {
	font-weight: 400;
	color: var(--cg-ivory);
}

html[data-theme="day"] :is(.c-section__head, .c-work__format, .c-work__client, .c-work__year, .c-footer__bottom, .c-hero__bar) {
	font-weight: 500;
}

html[data-theme="day"] :is(.c-hero, .c-frame, .c-lightbox, .c-header.is-on-dark) {
	color-scheme: dark;
}

/* Passage d'un mode à l'autre : un iris s'ouvre depuis le bouton (piloté en JavaScript). */
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

:root {
	--cg-serif: var(--wp--preset--font-family--bodoni-moda, "Bodoni Moda", "Bodoni 72", Didot, "Bodoni MT", Georgia, serif);
	--cg-sans: var(--wp--preset--font-family--jost, Jost, Futura, "Century Gothic", system-ui, sans-serif);
	--cg-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--cg-ease-wing: cubic-bezier(0.76, 0, 0.24, 1);
	--cg-gutter: clamp(20px, 4.5vw, 72px);
}

/* ---------- Sections ---------- */

.c-section {
	position: relative;
	padding: clamp(112px, 20vh, 240px) var(--cg-gutter);
	background: var(--cg-ink);
	color: var(--cg-ivory);
}

.c-section__head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0 0 clamp(40px, 8vh, 96px);
	font-family: var(--cg-sans);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--cg-bark);
}

.c-section__num {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	color: var(--cg-amber);
	font-variant-numeric: tabular-nums;
}

.c-section__num::after {
	content: "";
	width: 48px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

.c-display {
	margin: 0;
	font-family: var(--cg-serif);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.012em;
	font-variation-settings: "opsz" 96;
	text-wrap: balance;
}

.c-display em,
.c-section em {
	font-style: italic;
}

.c-lead {
	margin: 0;
	font-family: var(--cg-sans);
	font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
	font-weight: 300;
	line-height: 1.75;
	color: rgba(var(--cg-ivory-rgb), 0.74);
	text-wrap: pretty;
}

/* ---------- Révélations ---------- */

.has-js [data-reveal="fade"] {
	opacity: 0;
	transition: opacity 1.4s var(--cg-ease);
}

.has-js [data-reveal="up"] {
	opacity: 0;
	transform: translate3d(0, 48px, 0);
	transition: opacity 1.2s var(--cg-ease), transform 1.6s var(--cg-ease);
}

/* Ouverture symétrique depuis l'axe central, comme deux ailes qui se déploient. */
.has-js [data-reveal="wings"] {
	clip-path: inset(0 50% 0 50%);
	transition: clip-path 1.8s var(--cg-ease-wing);
}

.has-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
}

.c-w {
	display: inline-block;
	overflow: hidden;
	padding: 0.06em 0.04em 0.12em 0;
	margin: -0.06em -0.04em -0.12em 0;
	vertical-align: top;
}

.c-w > span {
	display: inline-block;
}

.has-js [data-reveal="lines"] .c-w > span {
	transform: translate3d(0, 110%, 0);
	transition: transform 1.3s var(--cg-ease);
	transition-delay: calc(var(--i, 0) * 45ms);
}

.has-js [data-reveal="lines"].is-in .c-w > span {
	transform: none;
}

.has-js [data-reveal="letters"] > span {
	display: inline-block;
	transform: translate3d(0, 105%, 0);
	transition: transform 1.6s var(--cg-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.has-js [data-reveal="letters"].is-in > span {
	transform: none;
}

/* ---------- Médias ---------- */

.c-frame {
	position: relative;
	overflow: hidden;
	background: var(--cg-ink-2);
}

.c-frame > img,
.c-frame > video,
.c-frame > .c-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-frame > video {
	opacity: 0;
	transition: opacity 1.2s var(--cg-ease);
}

.c-frame > video.is-playing {
	opacity: 1;
}

/* ---------- Visuels provisoires (en attendant les vraies images) ---------- */

.c-placeholder {
	--pa: #24345e;
	--pb: #c2955a;
	position: relative;
	overflow: hidden;
	background: #0d0d0d;
	color: var(--cg-ivory);
}

.c-placeholder[data-tone="2"] { --pa: #4a3925; --pb: #8a8378; }
.c-placeholder[data-tone="3"] { --pa: #c2955a; --pb: #5b2a1a; }
.c-placeholder[data-tone="4"] { --pa: #3b2a62; --pb: #17505e; }
.c-placeholder[data-tone="5"] { --pa: #3a3833; --pb: #a39a8a; }

.c-placeholder::before {
	content: "";
	position: absolute;
	inset: -25%;
	background:
		radial-gradient(circle at 32% 38%, var(--pa) 0, transparent 42%),
		radial-gradient(circle at 70% 66%, var(--pb) 0, transparent 46%);
	filter: blur(48px);
	opacity: 0.55;
	animation: cg-drift 22s ease-in-out infinite alternate;
}

.c-placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 30%, rgba(var(--cg-ink-rgb), 0.75) 100%);
}

.c-placeholder__ocelle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: min(38%, 52vh);
	height: auto;
	opacity: 0.22;
	transform: translate(-50%, -50%);
	animation: cg-orbit 140s linear infinite;
}

@keyframes cg-orbit {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

.c-ocelle__ring {
	stroke: var(--cg-amber);
}

@keyframes cg-drift {
	0% { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
	100% { transform: translate3d(4%, 3%, 0) rotate(12deg); }
}

@keyframes cg-spin {
	to { rotate: 360deg; }
}

/* ---------- Curseur ---------- */

.c-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.c-cursor.is-visible {
	opacity: 1;
}

.c-cursor__dot,
.c-cursor__ring,
.c-cursor__label {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
}

.c-cursor__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cg-ivory);
	transition: background 0.4s ease, width 0.4s var(--cg-ease), height 0.4s var(--cg-ease);
}

.c-cursor__ring {
	width: 34px;
	height: 34px;
	border: 1px solid rgba(var(--cg-ivory-rgb), 0.35);
	border-radius: 50%;
	transition: width 0.7s var(--cg-ease), height 0.7s var(--cg-ease), border-color 0.5s ease, background 0.5s ease;
}

.c-cursor__label {
	font-family: var(--cg-sans);
	font-size: 0.66rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--cg-ivory);
	white-space: nowrap;
	margin-top: 22px;
	opacity: 0;
	transition: opacity 0.4s ease, margin 0.6s var(--cg-ease);
}

.c-cursor.is-link .c-cursor__ring {
	width: 52px;
	height: 52px;
	border-color: var(--cg-amber);
}

.c-cursor.is-link .c-cursor__dot {
	background: var(--cg-amber);
}

.c-cursor.is-view .c-cursor__ring,
.c-cursor.is-play .c-cursor__ring {
	width: 104px;
	height: 104px;
	border-color: rgba(var(--cg-ivory-rgb), 0.7);
	background: rgba(var(--cg-ink-rgb), 0.28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: inset 0 0 0 10px rgba(var(--cg-ink-rgb), 0.12), inset 0 0 0 11px rgba(194, 149, 90, 0.55);
}

.c-cursor.is-view .c-cursor__dot,
.c-cursor.is-play .c-cursor__dot {
	background: var(--cg-amber);
}

.c-cursor.is-view .c-cursor__label,
.c-cursor.is-play .c-cursor__label {
	opacity: 1;
	margin-top: 22px;
}

.c-cursor.is-text {
	opacity: 0;
}

.c-cursor.is-down .c-cursor__ring {
	width: 24px;
	height: 24px;
}

.has-cursor,
.has-cursor * {
	cursor: none !important;
}

.has-cursor input,
.has-cursor textarea,
.has-cursor select {
	cursor: text !important;
}

/* ---------- Accessibilité ---------- */

.c-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.has-js [data-reveal],
	.has-js [data-reveal] .c-w > span,
	.has-js [data-reveal] > span {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.c-placeholder::before,
	.c-placeholder__ocelle {
		animation: none;
	}
}