/* ========== MOTION SYSTEM - ELEMENT-SPECIFIC IMPLEMENTATIONS ========== */

/* Application des effets motion aux éléments existants du site Brétigny */

/* ========== HERO SECTION ========== */

.hero {
	perspective: 1200px;
	position: relative;
	overflow: hidden;
}

.hero h1 {
	animation: textureSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.hero p {
	animation: textureSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
}

.hero .cta {
	animation: textureSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
}

/* ========== SIMPLE EFFECT FOR HERO CTAS ==========
   Disable complex animations (magnétisme, glow pulse...) for buttons
   inside the hero and apply a simple, subtle hover. */
.hero .btn.simple-effect {
	/* Override complex behaviour */
	animation: none !important;
	transition: transform var(--timing-fast) var(--ease-smooth), box-shadow var(--timing-fast) var(--ease-smooth),
		opacity var(--timing-fast) var(--ease-smooth);
	will-change: transform, opacity;
}

.hero .btn.simple-effect::before {
	display: none !important;
}

.hero .btn.simple-effect:hover {
	transform: translateY(-4px) scale(1.03) !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
	opacity: 0.98;
	animation: none !important;
}

.hero .btn.simple-effect:active {
	transform: translateY(0) scale(0.98) !important;
}

/* ========== BUTTONS ========== */

.btn {
	position: relative;
	overflow: visible;
}

/* CTA buttons in hero */
.hero .btn {
	--magnetic-enabled: true;
}

.btn:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 4px;
}

/* ========== VISION CARDS ========== */

.value {
	will-change: transform, box-shadow;
	perspective: 1200px;
}

.value.stagger-item {
	opacity: 0;
}

.value.stagger-item.in-view {
	animation: textureSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.value .icon {
	transition: transform var(--timing-standard) var(--ease-elastic);
}

.value:hover .icon {
	transform: scale(1.1) rotate(5deg);
}

/* ========== PRIORITY CARDS ========== */

.card {
	will-change: transform, box-shadow;
	perspective: 1200px;
}

.card.stagger-item {
	opacity: 0;
}

.card.stagger-item.in-view {
	animation: textureSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.progress {
	overflow: hidden;
	will-change: contents;
}

.progress > span {
	will-change: width;
}

/* ========== TEAM MEMBERS ========== */

.member {
	will-change: transform, box-shadow;
	perspective: 1200px;
}

.member.stagger-item {
	opacity: 0;
}

.member.stagger-item.in-view {
	animation: textureSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.avatar {
	will-change: transform, box-shadow;
	position: relative;
	transform-origin: center;
}

.avatar img {
	display: block;
	width: 100%;
	height: 100%;
}

.member:hover .avatar {
	animation: avatarFloat 0.8s ease-in-out infinite;
}

@keyframes avatarFloat {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-4px);
	}
}

/* ========== FORM ELEMENTS ========== */

.ideas-wrap {
	will-change: auto;
	perspective: 1200px;
}

input,
textarea,
select {
	transition: all var(--timing-fast) var(--ease-smooth);
	will-change: border-color, box-shadow;
}

input:hover,
textarea:hover,
select:hover {
	border-color: var(--green);
	box-shadow: 0 4px 12px rgba(76, 46, 178, 0.08);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 4px rgba(239, 218, 85, 0.15);
}

/* Focus visible for accessibility */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

/* ========== THANKYOU MESSAGE ========== */

.thankyou {
	animation: slideInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: transform, opacity;
}

/* ========== NAVIGATION ========== */

nav a {
	position: relative;
}

nav a::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 50%;
	width: 0;
	height: 2px;
	background: var(--green);
	transform: translateX(-50%);
	transition: width var(--timing-fast) var(--ease-smooth);
}

nav a:hover::after {
	width: 80%;
}

/* Mobile nav items */
.mobile-nav a {
	transition: all var(--timing-fast) var(--ease-smooth);
}

.mobile-nav a:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateX(4px);
}

/* ========== SECTION HEADERS ========== */

.section-title {
	animation: textureSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section-sub {
	animation: textureSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s backwards;
}

/* ========== HEADER ========== */

header {
	will-change: box-shadow;
	transition: box-shadow var(--timing-fast) var(--ease-smooth);
}

/* Add shadow on scroll */
header.scrolled {
	box-shadow: 0 8px 24px rgba(76, 46, 178, 0.15);
}

/* Logo interaction */
.logo {
	cursor: pointer;
	transition: all var(--timing-fast) var(--ease-smooth);
}

.logo:hover {
	opacity: 0.8;
}

.logo .mark {
	transition: all var(--timing-fast) var(--ease-smooth);
	will-change: box-shadow, transform;
}

.logo:hover .mark {
	box-shadow: 0 6px 20px rgba(239, 218, 85, 0.35);
	transform: scale(1.05);
}

/* ========== BURGER MENU ========== */

.burger {
	transition: all var(--timing-fast) var(--ease-smooth);
}

.burger:hover {
	opacity: 0.8;
}

.burger span {
	transition: all var(--timing-fast) var(--ease-smooth);
}

/* ========== EYELINER / BADGE ========== */

.eyebrow {
	animation: textureSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s backwards;
	will-change: transform, opacity;
}

/* ========== TYPEWRITER EFFECT ========== */

.typewrite {
	animation: typewriteBlinkCursor 0.8s steps(1, end) infinite;
}

@keyframes typewriteBlinkCursor {
	0%,
	49% {
		border-right-color: var(--green);
	}
	50%,
	100% {
		border-right-color: transparent;
	}
}

/* ========== DOTS DECORATION ========== */

@keyframes dotsFloat {
	0%,
	100% {
		opacity: 0.12;
		transform: rotate(8deg) translateY(0);
	}
	50% {
		opacity: 0.16;
		transform: rotate(8deg) translateY(-10px);
	}
}

/* ========== FOOTER ========== */

footer {
	transition: all var(--timing-standard) var(--ease-smooth);
}

footer a {
	position: relative;
	transition: color var(--timing-fast) var(--ease-smooth);
}

footer a::before {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--green);
	transition: width var(--timing-fast) var(--ease-smooth);
}

footer a:hover::before {
	width: 100%;
}

/* ========== SMOOTH SCROLLING SUPPORT ========== */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 70px;
}

/* ========== REVEAL ANIMATION SYNC ========== */

.reveal {
	animation: none; /* Use JS intersection observer instead */
}

.reveal.in-view {
	animation: textureSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Staggered reveals */
.reveal:nth-child(1).in-view {
	animation-delay: 0ms;
}
.reveal:nth-child(2).in-view {
	animation-delay: 80ms;
}
.reveal:nth-child(3).in-view {
	animation-delay: 160ms;
}
.reveal:nth-child(4).in-view {
	animation-delay: 240ms;
}
.reveal:nth-child(5).in-view {
	animation-delay: 320ms;
}
.reveal:nth-child(n + 6).in-view {
	animation-delay: calc((n - 6) * 80ms);
}

/* ========== MICRO-INTERACTIONS ========== */

/* Input active state */
input::-webkit-input-placeholder {
	transition: color var(--timing-fast) var(--ease-smooth);
}

input:focus::-webkit-input-placeholder {
	color: var(--muted);
}

/* Select dropdown */
select {
	cursor: pointer;
}

select:hover {
	border-color: var(--green);
}

/* ========== INTERSECTION OBSERVER DEBUGGING ========== */

.motion-debug.in-view {
	outline-color: rgba(239, 218, 85, 1);
}

/* ========== ACTIVE STATES FOR TOUCH ========== */

@media (hover: none) and (pointer: coarse) {
	.btn:active,
	.card:active,
	.value:active,
	.member:active {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
}

/* ========== DARK MODE SPECIFIC ========== */

@media (prefers-color-scheme: dark) {
	.section-title {
		color: #e0e0e0;
	}

	.card,
	.value,
	.member {
		background: #1e1e1e;
		border: 1px solid #333;
	}

	.card:hover,
	.value:hover,
	.member:hover {
		border-color: var(--green);
	}

	input,
	textarea,
	select {
		background: #1e1e1e;
		border-color: #333;
		color: #e0e0e0;
	}

	input:focus,
	textarea:focus,
	select:focus {
		border-color: var(--green);
		background: #252525;
	}
}

/* ========== PRINT STYLES ========== */

@media print {
	.btn,
	.card,
	.value,
	.member {
		box-shadow: none;
		border: 1px solid #ddd;
	}

	.burger,
	.mobile-nav {
		display: none;
	}

	header {
		position: static;
	}

	main {
		padding-top: 0;
	}
}

/* ========== REDUCED MOTION FALLBACK ========== */

@media (prefers-reduced-motion: reduce) {
	.hero h1,
	.hero p,
	.hero .cta,
	.section-title,
	.section-sub,
	.reveal,
	.stagger-item {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.avatar:hover {
		animation: none;
	}

	input,
	textarea,
	select,
	.btn,
	.card,
	.value,
	.member {
		transition: none !important;
	}
}