/* ==========================================================================
   Six Pillars Widget — base structural styles
   All colors/typography/sizes are controlled by Elementor-generated CSS.
   This file only handles layout mechanics, positioning math, and states
   that Elementor's control system can't express (responsive stacking,
   SVG connectors, reduced motion, stagger animation hooks).
   Every selector is scoped under .scp-outer to avoid leaking into the
   rest of the page ("no generic selectors" requirement).
   ========================================================================== */

.scp-outer {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.scp-outer * {
	box-sizing: border-box;
}

.scp-wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
	.scp-wrapper {
		height: 0;
		padding-top: 100%;
	}
}

.scp-orbit-scale {
	position: absolute;
	inset: 0;
	transition: transform 0.3s ease;
}

/* ---------------- Connector lines (SVG) ---------------- */

.scp-connectors-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.scp-connector {
	fill: none;
	stroke: #a9e0ea;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

/* Show/hide per breakpoint (matches Elementor's default 3 device tiers). */
.scp-lines-none .scp-connectors-svg,
.scp-lines-desktop-off .scp-connectors-svg {
	display: none;
}

@media (max-width: 1024px) {
	.scp-lines-tablet-off .scp-connectors-svg {
		display: none;
	}
	.scp-lines-tablet-on .scp-connectors-svg {
		display: block;
	}
}

@media (max-width: 767px) {
	.scp-lines-mobile-off .scp-connectors-svg {
		display: none;
	}
}

/* Optional animated "draw in" effect for connector lines.
   Held at the starting (undrawn) state until the widget scrolls into view;
   the animation itself only fires once .scp-in-view is added, so the line
   draw is part of the same cinematic sequence as the circles/text instead
   of firing the instant the page paints. */
.scp-wrapper[data-scp-animate-lines] .scp-connector {
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
}

.scp-wrapper[data-scp-animate-lines].scp-in-view .scp-connector {
	animation: scp-draw-line linear forwards;
	animation-duration: var(--scp-line-duration, 900ms);
	animation-delay: var(--scp-line-delay, 120ms);
}

@keyframes scp-draw-line {
	to {
		stroke-dashoffset: 0;
	}
}

/* ---------------- Center circle ---------------- */

.scp-center {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	text-decoration: none;
	color: inherit;
	transition-property: background-color, box-shadow, border-color, transform;
	transition-timing-function: ease;
}

.scp-center-inner {
	width: 100%;
	overflow: hidden;
}

.scp-center-title,
.scp-center-subtitle {
	margin: 0;
}

/* ---------------- Pillar circles ---------------- */

.scp-pillar {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 2;
	text-decoration: none;
	color: inherit;
	display: block;
}

.scp-pillar-circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: var(--scp-circle-bg-image, none);
	background-size: cover;
	transition-property: background-color, border-color, box-shadow, transform;
}

.scp-pillar-inner {
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}

.scp-pillar-title,
.scp-pillar-subtitle,
.scp-pillar-description {
	margin: 0;
}

.scp-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.scp-icon-circle svg {
	display: block;
}

/* ---------------- Accessibility ---------------- */

.scp-pillar:focus-visible,
.scp-center:focus-visible {
	outline: 2px solid #3a8dbf;
	outline-offset: 3px;
}

/* ---------------- Stagger entrance animation ---------------- */

.scp-wrapper[data-scp-stagger] .scp-pillar {
	opacity: 0;
}

.scp-wrapper[data-scp-stagger][data-scp-stagger-type="fade-scale"] .scp-pillar {
	transform: translate(-50%, -50%) scale(0.85);
}

.scp-wrapper[data-scp-stagger][data-scp-stagger-type="fade-slide"] .scp-pillar {
	transform: translate(-50%, -50%) translateY(16px);
}

.scp-wrapper[data-scp-stagger].scp-in-view .scp-pillar {
	opacity: 1;
	transform: translate(-50%, -50%);
	transition-property: opacity, transform;
}

/* ---------------- Cinematic entrance: center pop + cascading text reveal ----------------
   Runs as its own keyframe animation (not the transition used for hover states) so it
   never fights the user's configured hover-transition speed on the same element. */

.scp-wrapper[data-scp-stagger] .scp-center {
	opacity: 0;
}

.scp-wrapper[data-scp-stagger].scp-in-view .scp-center {
	animation-name: scp-center-pop;
	animation-duration: var(--scp-center-duration, 550ms);
	animation-timing-function: var(--scp-center-easing, ease-out);
	animation-delay: var(--scp-center-delay, 0ms);
	animation-fill-mode: both;
}

@keyframes scp-center-pop {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.86);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.scp-wrapper[data-scp-stagger] .scp-center-title,
.scp-wrapper[data-scp-stagger] .scp-center-subtitle,
.scp-wrapper[data-scp-stagger] .scp-pillar-title,
.scp-wrapper[data-scp-stagger] .scp-pillar-subtitle,
.scp-wrapper[data-scp-stagger] .scp-pillar-description {
	opacity: 0;
	transform: translateY(10px);
	transition-property: opacity, transform;
	transition-timing-function: ease-out;
}

.scp-wrapper[data-scp-stagger].scp-in-view .scp-center-title,
.scp-wrapper[data-scp-stagger].scp-in-view .scp-center-subtitle,
.scp-wrapper[data-scp-stagger].scp-in-view .scp-pillar-title,
.scp-wrapper[data-scp-stagger].scp-in-view .scp-pillar-subtitle,
.scp-wrapper[data-scp-stagger].scp-in-view .scp-pillar-description {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------- Responsive: mobile vertical stack ---------------- */

@media (max-width: 767px) {
	.scp-wrapper {
		aspect-ratio: auto;
		height: auto;
		padding-top: 0;
	}

	.scp-orbit-scale {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		transform: none !important;
	}

	.scp-center,
	.scp-pillar {
		position: static;
		transform: none !important;
		width: auto;
		max-width: 320px;
		margin: 0 auto;
	}

	.scp-wrapper[data-scp-stagger] .scp-pillar {
		opacity: 1;
		transform: none !important;
	}

	.scp-wrapper[data-scp-stagger] .scp-center {
		opacity: 1;
		animation: none !important;
	}

	.scp-wrapper[data-scp-stagger] .scp-center-title,
	.scp-wrapper[data-scp-stagger] .scp-center-subtitle,
	.scp-wrapper[data-scp-stagger] .scp-pillar-title,
	.scp-wrapper[data-scp-stagger] .scp-pillar-subtitle,
	.scp-wrapper[data-scp-stagger] .scp-pillar-description {
		opacity: 1;
		transform: none !important;
	}
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
	.scp-orbit-scale,
	.scp-center,
	.scp-pillar,
	.scp-pillar-circle,
	.scp-center-title,
	.scp-center-subtitle,
	.scp-pillar-title,
	.scp-pillar-subtitle,
	.scp-pillar-description {
		transition: none !important;
		animation: none !important;
	}

	.scp-wrapper[data-scp-stagger] .scp-pillar {
		opacity: 1 !important;
		transform: translate(-50%, -50%) !important;
	}

	.scp-wrapper[data-scp-stagger] .scp-center,
	.scp-wrapper[data-scp-stagger] .scp-center-title,
	.scp-wrapper[data-scp-stagger] .scp-center-subtitle,
	.scp-wrapper[data-scp-stagger] .scp-pillar-title,
	.scp-wrapper[data-scp-stagger] .scp-pillar-subtitle,
	.scp-wrapper[data-scp-stagger] .scp-pillar-description {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}

	.scp-connector {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		animation: none !important;
	}
}