/*
 * Griffon Movers · motion layer
 * Aman / Bottega / Studio Triple register · slow, restraint, never bouncy.
 * Toutes les animations respectent prefers-reduced-motion.
 */

/* =============================================================
 * Tokens
 * ============================================================= */
:root {
	--motion-ease:      cubic-bezier(.22, .61, .36, 1);
	--motion-ease-out:  cubic-bezier(.16, 1, .3, 1);
	--motion-fast:      300ms;
	--motion-base:      600ms;
	--motion-slow:      1200ms;
	--motion-cinema:    1800ms;
}

/* =============================================================
 * Treatment éditorial uniforme sur les photos en cards
 * (les patterns full-bleed comme galerie gèrent leur propre filter)
 * ============================================================= */
.griffon-chantiers__secondary img,
.griffon-chantier-featured img,
.griffon-discipline__photo img,
.griffon-maison__images img {
	filter: contrast(1.06) saturate(0.88) brightness(0.96);
	transition: filter 800ms ease;
}
.griffon-chantier-featured a:hover img,
.griffon-chantiers__secondary article a:hover img,
.griffon-discipline:hover .griffon-discipline__photo img {
	filter: contrast(1.06) saturate(0.96) brightness(1.0);
}

/* =============================================================
 * 1 · Hero load reveal
 * Image se révèle verticalement (mask), texte fade-up stagger.
 * ============================================================= */
.griffon-hero-diptyque__photo picture,
.griffon-hero-diptyque__photo img {
	animation: griffon-mask-reveal var(--motion-cinema) var(--motion-ease-out) both;
	will-change: clip-path;
}
@keyframes griffon-mask-reveal {
	from { clip-path: inset(0 0 100% 0); }
	to   { clip-path: inset(0 0 0 0); }
}

.griffon-hero-diptyque__caption .eyebrow,
.griffon-hero-diptyque__line,
.griffon-hero-diptyque__source {
	opacity: 0;
	transform: translateY(28px);
	animation: griffon-fade-up var(--motion-base) var(--motion-ease-out) both;
}
.griffon-hero-diptyque__caption .eyebrow { animation-delay: 700ms; }
.griffon-hero-diptyque__line              { animation-delay: 900ms; }
.griffon-hero-diptyque__source            { animation-delay: 1100ms; }

@keyframes griffon-fade-up {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

.griffon-hero-diptyque__cue {
	opacity: 0;
	animation: griffon-fade-in var(--motion-base) var(--motion-ease-out) 1500ms both,
	           griffon-cue-pulse 2400ms var(--motion-ease) 2200ms infinite;
}
@keyframes griffon-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes griffon-cue-pulse {
	0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.62; }
	50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* =============================================================
 * 2 · Ken Burns continu sur l'image hero
 * ============================================================= */
.griffon-hero-diptyque__photo img {
	animation:
		griffon-mask-reveal var(--motion-cinema) var(--motion-ease-out) both,
		griffon-ken-burns 32s var(--motion-ease) 1800ms infinite alternate;
	transform-origin: center 65%;
}
@keyframes griffon-ken-burns {
	from { transform: scale(1); }
	to   { transform: scale(1.04); }
}

/* =============================================================
 * 3 · Scroll reveal universel
 * Classe .reveal · fade-up à l'entrée dans le viewport.
 * Activé par IntersectionObserver (motion.js).
 * ============================================================= */
.reveal {
	opacity: 0;
	transform: translateY(36px);
	transition:
		opacity var(--motion-slow) var(--motion-ease-out),
		transform var(--motion-slow) var(--motion-ease-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Variantes pour stagger explicite */
.reveal--late { transition-delay: 200ms; }
.reveal--later { transition-delay: 400ms; }

/* =============================================================
 * 4 · Curseur custom
 * Petit point central + cercle externe qui suit avec léger lag.
 * mix-blend-difference pour traverser fonds clairs et sombres.
 * Désactivé sur touch / reduced-motion.
 * ============================================================= */
.griffon-cursor,
.griffon-cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9999;
	mix-blend-mode: difference;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	will-change: transform, width, height;
}
.griffon-cursor-dot {
	width: 6px;
	height: 6px;
	background: #ffffff;
	transition: width var(--motion-fast) var(--motion-ease),
	            height var(--motion-fast) var(--motion-ease);
}
.griffon-cursor {
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255,255,255,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #ffffff;
	transition: width var(--motion-fast) var(--motion-ease),
	            height var(--motion-fast) var(--motion-ease),
	            border-color var(--motion-fast) var(--motion-ease),
	            opacity var(--motion-fast) var(--motion-ease);
}
.griffon-cursor::before {
	content: attr(data-label);
	opacity: 0;
	transition: opacity var(--motion-fast) var(--motion-ease);
}
.griffon-cursor.is-link {
	width: 88px;
	height: 88px;
	border-color: rgba(255,255,255,0.95);
}
.griffon-cursor.is-link::before { opacity: 1; }
.griffon-cursor.is-link ~ .griffon-cursor-dot,
.griffon-cursor-dot.is-link {
	width: 0;
	height: 0;
}
@media (hover: none), (pointer: coarse) {
	.griffon-cursor, .griffon-cursor-dot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.griffon-cursor, .griffon-cursor-dot { display: none; }
}
html.has-griffon-cursor,
html.has-griffon-cursor body,
html.has-griffon-cursor a,
html.has-griffon-cursor button {
	cursor: none;
}

/* =============================================================
 * 5 · Hover image scale (disciplines, projets, maison)
 * Scale doux 1.04 sur 1.2s ease-out · uniquement sur les figures
 * englobées dans un <a> ou marquées .griffon-photo.
 * ============================================================= */
.griffon-discipline__photo .griffon-photo,
.griffon-chantiers__secondary article .griffon-photo,
.griffon-chantier-featured .griffon-photo,
.griffon-maison__images .griffon-photo {
	overflow: hidden;
}
.griffon-discipline__photo .griffon-photo img,
.griffon-chantiers__secondary article .griffon-photo img,
.griffon-chantier-featured .griffon-photo img,
.griffon-maison__images .griffon-photo img {
	transition: transform var(--motion-slow) var(--motion-ease-out);
	will-change: transform;
}
.griffon-discipline__photo:hover .griffon-photo img,
.griffon-chantiers__secondary article a:hover .griffon-photo img,
.griffon-chantier-featured a:hover .griffon-photo img,
.griffon-maison__images .griffon-photo:hover img {
	transform: scale(1.04);
}

/* =============================================================
 * 6 · Lien hover · trait qui se trace de gauche à droite
 * Pour .discover, footer links, et liens internes en body.
 * ============================================================= */
.discover {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
}
.discover::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform-origin: left center;
	transform: scaleX(1);
	transition: transform var(--motion-base) var(--motion-ease-out);
}
.discover:hover::after {
	transform-origin: right center;
	transform: scaleX(0);
}
.discover::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform-origin: right center;
	transform: scaleX(0);
	transition: transform var(--motion-base) var(--motion-ease-out) 80ms;
}
.discover:hover::before {
	transform-origin: left center;
	transform: scaleX(1);
}

/* =============================================================
 * 7 · Reduced motion · everything tame
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
	.griffon-hero-diptyque__photo picture,
	.griffon-hero-diptyque__photo img,
	.griffon-hero-diptyque__caption .eyebrow,
	.griffon-hero-diptyque__line,
	.griffon-hero-diptyque__source,
	.griffon-hero-diptyque__cue {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
	.reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.griffon-discipline__photo .griffon-photo img,
	.griffon-chantiers__secondary article .griffon-photo img,
	.griffon-chantier-featured .griffon-photo img,
	.griffon-maison__images .griffon-photo img {
		transition: none !important;
	}
}