/* Architecture hero illustration.
   See inc/hero-illustration-architecture.php. Base styles draw the settled
   stack; all motion is inside the no-preference media query. One 9s master
   timeline: the beam descends 6–48%, pauses, returns 54–94%; each layer
   lifts and flashes as the beam passes it (generated per layer below). */

.ar-hero {
	position: absolute;
	inset: 0;
}

.ar-hero svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	font-family: var(--font-heading);
}

.ar-hero__glow { fill: var(--cyan-tint); opacity: 0.5; }

.ar-hero__ring {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 12;
}

.ar-hero__ring-dash {
	fill: none;
	stroke: var(--navy);
	stroke-width: 1.5;
	stroke-dasharray: 2 10;
	stroke-linecap: round;
	opacity: 0.35;
}

.ar-hero__bracket {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.6;
}

.ar-hero__dot--a { fill: #b9e4f7; }
.ar-hero__dot--b { fill: var(--navy); opacity: 0.4; }
.ar-hero__dot--c { fill: var(--cyan); }

.ar-hero__shadow { fill: var(--navy); opacity: 0.08; }

.ar-hero__axis {
	stroke: var(--cyan);
	stroke-width: 1.5;
	stroke-dasharray: 2 7;
	stroke-linecap: round;
	opacity: 0.55;
}

/* ---- Layers ---- */
.ar-hero__layer { filter: drop-shadow(0 8px 12px rgba(1, 36, 126, 0.12)); }

.ar-hero__top,
.ar-hero__side-l,
.ar-hero__side-r { stroke: var(--line); stroke-width: 1; stroke-linejoin: round; }

.ar-hero__layer--paper .ar-hero__top    { fill: var(--paper); }
.ar-hero__layer--paper .ar-hero__side-l { fill: #e3e8f2; }
.ar-hero__layer--paper .ar-hero__side-r { fill: #d0d8e8; }

.ar-hero__layer--tint  .ar-hero__top    { fill: var(--cyan-tint); }
.ar-hero__layer--tint  .ar-hero__side-l { fill: #bfe6f8; }
.ar-hero__layer--tint  .ar-hero__side-r { fill: #a5d9f2; }

.ar-hero__layer--navy  .ar-hero__top    { fill: var(--navy); stroke: var(--navy); }
.ar-hero__layer--navy  .ar-hero__side-l { fill: var(--navy-dark); stroke: var(--navy-dark); }
.ar-hero__layer--navy  .ar-hero__side-r { fill: #01124a; stroke: #01124a; }

.ar-hero__layer--mist  .ar-hero__top    { fill: var(--mist-dark); }
.ar-hero__layer--mist  .ar-hero__side-l { fill: #d9dfeb; }
.ar-hero__layer--mist  .ar-hero__side-r { fill: #c8d0e0; }

/* Face decoration (flat frame, isometrically mapped by the transform) */
.ar-hero__ink      { fill: var(--navy); opacity: 0.85; }
.ar-hero__ink-soft { fill: var(--navy); opacity: 0.16; }
.ar-hero__accent   { fill: var(--cyan); }
.ar-hero__disc      { fill: none; stroke: var(--paper); stroke-width: 2; opacity: 0.6; }
.ar-hero__disc-core { fill: var(--cyan); }
.ar-hero__lattice   { fill: var(--slate-light); opacity: 0.7; }
.ar-hero__layer--navy .ar-hero__ink-soft { fill: var(--paper); opacity: 0.2; }

.ar-hero__flash {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2.5;
	stroke-linejoin: round;
	opacity: 0;
}

/* Labels */
.ar-hero__leader {
	stroke: var(--slate-light);
	stroke-width: 1.2;
	stroke-dasharray: 2 4;
	stroke-linecap: round;
}

.ar-hero__label { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }

.ar-hero__pill {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1;
}

.ar-hero__label text {
	fill: var(--navy);
	font-size: 12px;
	font-weight: 600;
	text-anchor: middle;
}

/* Beam is hidden in the static state. */
.ar-hero__beam { opacity: 0; }
.ar-hero__beam-halo { fill: var(--cyan); opacity: 0.25; }
.ar-hero__beam-core {
	fill: var(--cyan);
	filter: drop-shadow(0 0 8px rgba(0, 159, 226, 0.8));
}

/* ---- Motion ---- */
.ar-hero__ring-dash { transform-box: view-box; transform-origin: 270px 260px; }

.ar-hero__flash,
.ar-hero__dot,
.ar-hero__beam-halo {
	transform-box: fill-box;
	transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
	.ar-hero__ring-dash { animation: ar-spin 90s linear infinite; }
	.ar-hero__axis      { animation: ar-flow 1.6s linear infinite; }
	.ar-hero__dot       { animation: ar-drift 7s ease-in-out infinite; }
	.ar-hero__dot--b    { animation-delay: -3s; }
	.ar-hero__dot--c    { animation-delay: -5s; }
	.ar-hero__beam      { animation: ar-beam 9s ease-in-out infinite; }
	.ar-hero__beam-halo { animation: ar-halo 1.2s ease-in-out infinite; }

	.ar-hero__layer--0 { animation: ar-lift-0 9s ease-in-out infinite; }
	.ar-hero__layer--0 .ar-hero__flash { animation: ar-flash-0 9s ease-out infinite; }
	.ar-hero__layer--0 .ar-hero__label { animation: ar-lift-0-label 9s ease-out infinite; }
	.ar-hero__layer--1 { animation: ar-lift-1 9s ease-in-out infinite; }
	.ar-hero__layer--1 .ar-hero__flash { animation: ar-flash-1 9s ease-out infinite; }
	.ar-hero__layer--1 .ar-hero__label { animation: ar-lift-1-label 9s ease-out infinite; }
	.ar-hero__layer--2 { animation: ar-lift-2 9s ease-in-out infinite; }
	.ar-hero__layer--2 .ar-hero__flash { animation: ar-flash-2 9s ease-out infinite; }
	.ar-hero__layer--2 .ar-hero__label { animation: ar-lift-2-label 9s ease-out infinite; }
	.ar-hero__layer--3 { animation: ar-lift-3 9s ease-in-out infinite; }
	.ar-hero__layer--3 .ar-hero__flash { animation: ar-flash-3 9s ease-out infinite; }
	.ar-hero__layer--3 .ar-hero__label { animation: ar-lift-3-label 9s ease-out infinite; }
	.ar-hero__layer--4 { animation: ar-lift-4 9s ease-in-out infinite; }
	.ar-hero__layer--4 .ar-hero__flash { animation: ar-flash-4 9s ease-out infinite; }
	.ar-hero__layer--4 .ar-hero__label { animation: ar-lift-4-label 9s ease-out infinite; }
}

@keyframes ar-spin  { to { transform: rotate(360deg); } }
@keyframes ar-flow  { to { stroke-dashoffset: -9; } }
@keyframes ar-halo  { 0%, 100% { transform: scale(1); opacity: 0.25; } 50% { transform: scale(1.6); opacity: 0.1; } }

@keyframes ar-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(6px, -10px); }
}

@keyframes ar-beam {
	0%, 4% { opacity: 0; transform: translateY(-40px); }
	6% { opacity: 1; transform: translateY(0); }
	48% { opacity: 1; transform: translateY(336px); }
	54% { opacity: 1; transform: translateY(336px); }
	94% { opacity: 1; transform: translateY(0); }
	97%, 100% { opacity: 0; transform: translateY(-40px); }
}

@keyframes ar-lift-0 {
	0% { transform: translateY(0); }
	5.5% { transform: translateY(0); }
	8.5% { transform: translateY(-12px); }
	12% { transform: translateY(0); }
	93.5% { transform: translateY(0); }
	96.5% { transform: translateY(-12px); }
	100% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

@keyframes ar-flash-0 {
	0% { opacity: 0; transform: scale(1); }
	5.5% { opacity: 0; transform: scale(1); }
	7% { opacity: 1; transform: scale(1); }
	13% { opacity: 0; transform: scale(1.18); }
	93.5% { opacity: 0; transform: scale(1); }
	95% { opacity: 1; transform: scale(1); }
	101% { opacity: 0; transform: scale(1.18); }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes ar-lift-0-label {
	0% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	5.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	7% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	13% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	93.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	95% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	101% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	100% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
}

@keyframes ar-lift-1 {
	0% { transform: translateY(0); }
	16% { transform: translateY(0); }
	19% { transform: translateY(-12px); }
	22.5% { transform: translateY(0); }
	83.5% { transform: translateY(0); }
	86.5% { transform: translateY(-12px); }
	90% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

@keyframes ar-flash-1 {
	0% { opacity: 0; transform: scale(1); }
	16% { opacity: 0; transform: scale(1); }
	17.5% { opacity: 1; transform: scale(1); }
	23.5% { opacity: 0; transform: scale(1.18); }
	83.5% { opacity: 0; transform: scale(1); }
	85% { opacity: 1; transform: scale(1); }
	91% { opacity: 0; transform: scale(1.18); }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes ar-lift-1-label {
	0% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	16% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	17.5% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	23.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	83.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	85% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	91% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	100% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
}

@keyframes ar-lift-2 {
	0% { transform: translateY(0); }
	26.5% { transform: translateY(0); }
	29.5% { transform: translateY(-12px); }
	33% { transform: translateY(0); }
	73.5% { transform: translateY(0); }
	76.5% { transform: translateY(-12px); }
	80% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

@keyframes ar-flash-2 {
	0% { opacity: 0; transform: scale(1); }
	26.5% { opacity: 0; transform: scale(1); }
	28% { opacity: 1; transform: scale(1); }
	34% { opacity: 0; transform: scale(1.18); }
	73.5% { opacity: 0; transform: scale(1); }
	75% { opacity: 1; transform: scale(1); }
	81% { opacity: 0; transform: scale(1.18); }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes ar-lift-2-label {
	0% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	26.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	28% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	34% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	73.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	75% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	81% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	100% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
}

@keyframes ar-lift-3 {
	0% { transform: translateY(0); }
	37% { transform: translateY(0); }
	40% { transform: translateY(-12px); }
	43.5% { transform: translateY(0); }
	63.5% { transform: translateY(0); }
	66.5% { transform: translateY(-12px); }
	70% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

@keyframes ar-flash-3 {
	0% { opacity: 0; transform: scale(1); }
	37% { opacity: 0; transform: scale(1); }
	38.5% { opacity: 1; transform: scale(1); }
	44.5% { opacity: 0; transform: scale(1.18); }
	63.5% { opacity: 0; transform: scale(1); }
	65% { opacity: 1; transform: scale(1); }
	71% { opacity: 0; transform: scale(1.18); }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes ar-lift-3-label {
	0% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	37% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	38.5% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	44.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	63.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	65% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	71% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	100% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
}

@keyframes ar-lift-4 {
	0% { transform: translateY(0); }
	47.5% { transform: translateY(0); }
	50.5% { transform: translateY(-12px); }
	54% { transform: translateY(0); }
	53.5% { transform: translateY(0); }
	56.5% { transform: translateY(-12px); }
	60% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

@keyframes ar-flash-4 {
	0% { opacity: 0; transform: scale(1); }
	47.5% { opacity: 0; transform: scale(1); }
	49% { opacity: 1; transform: scale(1); }
	55% { opacity: 0; transform: scale(1.18); }
	53.5% { opacity: 0; transform: scale(1); }
	55% { opacity: 1; transform: scale(1); }
	61% { opacity: 0; transform: scale(1.18); }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes ar-lift-4-label {
	0% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	47.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	49% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	55% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	53.5% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	55% { filter: drop-shadow(0 0 10px rgba(0, 159, 226, 0.75)); }
	61% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
	100% { filter: drop-shadow(0 6px 10px rgba(1, 36, 126, 0.12)); }
}

@media (max-width: 1024px) {
	.ar-hero__axis { animation: none; }
}