/* =====================================================================
   Contact page — premium 3D layer (js/contact3d.js)
   Everything is scoped under html.contact-3d, which the script only adds
   when the visitor hasn't asked for reduced motion.
   ===================================================================== */

/* ---- 1. Orbiting contact icons: see "Orbiting network" in motion3d.css ---- */

/* ---- 2. Depth stage ---- */
.contact-3d .contact-stage {
	transform-style: preserve-3d;
	transform: perspective(1800px) rotateX(var(--stage-rx, 0deg)) rotateY(var(--stage-ry, 0deg));
}

/* Info panel sits further back, the form floats forward. "translate"
   composes with the reveal animation's transform instead of replacing it. */
.contact-3d .contact-stage .contact-info-panel {
	translate: 0 0 -24px;
}

.contact-3d .contact-stage .contact-form-panel {
	translate: 0 0 18px;
	box-shadow: 0 40px 80px rgba(17, 24, 39, 0.12), 0 12px 24px rgba(17, 24, 39, 0.06);
}

html[data-theme="dark"].contact-3d .contact-stage .contact-form-panel {
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.12);
}

/* Soft light that follows the cursor across both panels. */
.stage-sheen {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	background: radial-gradient(520px circle at var(--sheen-x, 50%) var(--sheen-y, 50%), rgba(96, 165, 250, 0.14), transparent 60%);
	transition: opacity 0.4s ease;
}

.contact-stage:hover .stage-sheen {
	opacity: 1;
}

.contact-form-panel > *:not(.stage-sheen) {
	position: relative;
	z-index: 1;
}

/* ---- 3D form fields: the active field lifts toward the visitor ---- */
.contact-3d .contact-form-panel .form-row {
	transition: transform 0.35s var(--ease-premium, ease), filter 0.35s ease;
	transform-origin: 50% 100%;
}

.contact-3d .contact-form-panel .form-row:focus-within {
	transform: perspective(700px) translateZ(22px) translateY(-2px);
}

.contact-3d .contact-form-panel .form-row:focus-within :is(input, select, textarea) {
	box-shadow: 0 14px 30px rgba(37, 99, 235, 0.16), 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.contact-3d .contact-form-panel .form-row:focus-within .form-label {
	color: #2563eb;
}

html[data-theme="dark"].contact-3d .contact-form-panel .form-row:focus-within .form-label {
	color: #60a5fa;
}

/* Contact detail icons flip around in 3D on hover. */
.contact-3d .contact-detail-icon {
	transition: transform 0.8s var(--ease-premium, ease);
	transform-style: preserve-3d;
}

.contact-3d .contact-detail-item:hover .contact-detail-icon {
	transform: perspective(300px) rotateY(360deg) translateZ(10px);
}

/* ---- 3. Send button states + paper plane ---- */
.contact-submit-btn {
	position: relative;
	overflow: hidden;
}

.btn-check {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	background: linear-gradient(135deg, #10b981, #06b6d4);
	border-radius: inherit;
	transition: opacity 0.3s ease;
}

.btn-check svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: #ffffff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
}

.contact-submit-btn.is-sent .btn-check {
	opacity: 1;
}

.contact-submit-btn.is-sent .btn-check svg {
	animation: btn-check-draw 0.5s 0.25s ease forwards;
}

@keyframes btn-check-draw {
	to { stroke-dashoffset: 0; }
}

.paper-plane {
	position: fixed;
	z-index: 100001;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	pointer-events: none;
	transform-style: preserve-3d;
	animation: paper-plane-fly 1.8s cubic-bezier(0.45, 0, 0.2, 1) forwards;
	filter: drop-shadow(0 10px 14px rgba(37, 99, 235, 0.35));
}

.paper-plane svg {
	width: 100%;
	height: 100%;
}

.paper-plane .pp-top { fill: #ffffff; }
.paper-plane .pp-wing { fill: #dbeafe; }
.paper-plane .pp-fold { fill: #93c5fd; }

@keyframes paper-plane-fly {
	0% {
		opacity: 0;
		transform: perspective(800px) translate3d(0, 10px, 0) rotateZ(0deg) rotateX(0deg) scale(0.4);
	}
	15% {
		opacity: 1;
		transform: perspective(800px) translate3d(-20px, -10px, 80px) rotateZ(-12deg) rotateX(20deg) scale(1.1);
	}
	45% {
		transform: perspective(800px) translate3d(-60px, -90px, 160px) rotateZ(-30deg) rotateX(-10deg) rotateY(25deg) scale(1.2);
	}
	100% {
		opacity: 0;
		transform: perspective(800px) translate3d(70vw, -70vh, -400px) rotateZ(-20deg) rotateY(60deg) scale(0.3);
	}
}

/* Error: a short 3D shake of the form card. */
.contact-form-panel.shake-3d {
	animation: contact-shake-3d 0.6s ease;
}

@keyframes contact-shake-3d {
	0%, 100% { transform: none; }
	20% { transform: perspective(900px) rotateY(-6deg) translateX(-8px); }
	40% { transform: perspective(900px) rotateY(5deg) translateX(7px); }
	60% { transform: perspective(900px) rotateY(-3deg) translateX(-4px); }
	80% { transform: perspective(900px) rotateY(2deg) translateX(2px); }
}

/* ---- 4. Map: table-top tilt that flattens on scroll ---- */
.contact-3d .map-wrapper.map-3d {
	transform: perspective(1400px) rotateX(var(--map-tilt, 0deg)) scale(var(--map-scale, 1));
	transform-origin: 50% 100%;
	box-shadow: 0 calc(20px + 30px * var(--map-lift, 1)) calc(40px + 50px * var(--map-lift, 1)) rgba(17, 24, 39, calc(0.06 + 0.1 * var(--map-lift, 1)));
	will-change: transform;
}

.contact-3d .map-3d .map-contact-card {
	transform: translateY(calc(12px - 12px * var(--map-lift, 1)));
	opacity: calc(0.3 + 0.7 * var(--map-lift, 1));
	box-shadow: 0 calc(10px + 20px * var(--map-lift, 1)) calc(30px + 30px * var(--map-lift, 1)) rgba(0, 0, 0, 0.18);
	transition: transform 0.2s linear;
}

/* Small screens: keep the depth, drop the effects that crowd the layout. */
@media (max-width: 991px) {
	.contact-3d .contact-stage {
		transform: none;
	}

	.contact-3d .contact-stage .contact-info-panel,
	.contact-3d .contact-stage .contact-form-panel {
		translate: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.paper-plane,
	.contact-form-panel.shake-3d {
		animation: none !important;
	}
}