/* =====================================================================
   About Us — premium 3D layer (js/about3d.js)
   Scoped under html.about-3d (added only when motion is allowed).
   The scroll effects use the standalone rotate / translate / opacity
   properties, so they stack with the existing reveal and hover-tilt
   transforms instead of replacing them.
   ===================================================================== */

/* ---- Hero network: nodes at different depths + data packets ---- */
.about-3d #techNetwork .tech-node.n1 { translate: 0 0 70px; }
.about-3d #techNetwork .tech-node.n2 { translate: 0 0 -40px; }
.about-3d #techNetwork .tech-node.n3 { translate: 0 0 40px; }
.about-3d #techNetwork .tech-node.n4 { translate: 0 0 -70px; }
.about-3d #techNetwork .tech-node.n5 { translate: 0 0 100px; }
.about-3d #techNetwork .tech-node.n6 { translate: 0 0 -20px; }

.data-packet {
	position: absolute;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 6px #67e8f9, 0 0 14px #2563eb;
	pointer-events: none;
	animation: data-packet-travel 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
	transform: translateZ(30px);
}

@keyframes data-packet-travel {
	0% { left: var(--x1); top: var(--y1); opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: var(--x2); top: var(--y2); opacity: 0; }
}

/* ---- Our Story: 3D swing-in + glowing progress line ---- */
.about-3d .story-timeline {
	perspective: 1300px;
}

.about-3d .story-timeline .story-item {
	rotate: y var(--story-ry, 0deg);
	translate: 0 0 var(--story-z, 0px);
	opacity: var(--story-o, 1);
	transform-origin: 0 50%;
}

.story-progress-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 23px;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, #67e8f9, #2563eb, #c084fc);
	box-shadow: 0 0 12px rgba(56, 189, 248, 0.8), 0 0 24px rgba(37, 99, 235, 0.5);
	transform-origin: top;
	transform: scaleY(0);
	pointer-events: none;
	/* Behind the milestones (the timeline's perspective makes it its own
	   stacking context, so -1 stays above the section background). */
	z-index: -1;
}

.about-3d .story-item-marker {
	z-index: 1;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

.about-3d .story-item.is-reached .story-item-marker {
	transform: perspective(300px) translateZ(20px) rotateY(360deg) scale(1.08);
	box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.18), 0 0 26px rgba(56, 189, 248, 0.7), 0 15px 30px rgba(37, 99, 235, 0.35);
}

/* ---- Mission & Vision: book opening from the centre hinge ---- */
.about-3d .mv-grid {
	perspective: 1600px;
}

.about-3d .mv-grid .mv-card {
	rotate: y var(--book-ry, 0deg);
	opacity: var(--book-o, 1);
}

.about-3d .mv-grid .mv-card:first-child {
	transform-origin: 100% 50%;
}

.about-3d .mv-grid .mv-card:last-child {
	transform-origin: 0% 50%;
}

/* ---- Seeku in Numbers: tiles flip up ---- */
.about-3d .stats-showcase {
	perspective: 1000px;
}

.about-3d .stats-showcase .count-box {
	rotate: x var(--tile-rx, 0deg);
	opacity: var(--tile-o, 1);
	transform-origin: 50% 100%;
}

/* Stacked layouts: the side hinge would swing cards off-screen. */
@media (max-width: 767px) {
	.about-3d .mv-grid .mv-card {
		transform-origin: 50% 100%;
		rotate: x calc(var(--book-ry, 0deg) * 0.6);
	}
}