/* ACE 360 — 3D + motion layer (pure CSS/Canvas, no libraries).
   Applies on both theme-rendered and Elementor-rendered pages.
   Everything here is additive and respects reduced-motion / mobile. */

.hero, .page-hero { position: relative; }
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 2; }

/* particle constellation canvas injected by ace-3d.js */
.ace-field {
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none; opacity: .9;
}

/* hero copy + visual get smooth parallax/tilt */
.hero-copy { transition: transform .25s cubic-bezier(.22,1,.36,1); transform-style: preserve-3d; }
.hero-visual { transition: transform .35s cubic-bezier(.22,1,.36,1); transform-style: preserve-3d; position: relative; }
.hero-visual img { position: relative; z-index: 2; }

/* 3D orbit rings injected around the hero visual */
.ace-orbit { position: absolute; inset: -6%; pointer-events: none; transform-style: preserve-3d; z-index: 1; }
.ace-ring {
	position: absolute; top: 50%; left: 50%; border-radius: 50%;
	border: 1.5px solid rgba(251,169,31,.45); transform-style: preserve-3d;
}
.ace-ring::after {
	content: ""; position: absolute; top: -5px; left: calc(50% - 5px);
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--gold, #FBA91F); box-shadow: 0 0 16px var(--gold, #FBA91F);
}
.ace-ring.r1 { width: 78%; height: 78%; margin: -39% 0 0 -39%; transform: rotateX(72deg); animation: aceSpin1 20s linear infinite; }
.ace-ring.r2 { width: 96%; height: 96%; margin: -48% 0 0 -48%; border-color: rgba(255,193,90,.35); transform: rotateX(64deg) rotateY(22deg); animation: aceSpin2 28s linear infinite; }
.ace-ring.r3 { width: 116%; height: 116%; margin: -58% 0 0 -58%; border-color: rgba(124,92,255,.3); transform: rotateX(80deg) rotateY(-18deg); animation: aceSpin3 36s linear infinite; }
.ace-ring.r3::after { background: #9d86ff; box-shadow: 0 0 16px #7c5cff; }
@keyframes aceSpin1 { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes aceSpin2 { to { transform: rotateX(64deg) rotateY(22deg) rotateZ(-360deg); } }
@keyframes aceSpin3 { to { transform: rotateX(80deg) rotateY(-18deg) rotateZ(360deg); } }

/* 3D tilt on cards */
.cards, .portfolio-grid, .team-grid, .feat-grid, .quotes, .ace-slider-track { perspective: 1100px; }
.ace-tilt { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; transform-style: preserve-3d; will-change: transform; }
.ace-tilt > * { transform: translateZ(20px); }

/* scroll parallax on media frames */
.frame, .split-media { transform: translateY(var(--py, 0)); transition: transform .1s linear; }

/* subtle depth glow behind sections */
.bg-navy { position: relative; }

/* motion + device guards */
@media (max-width: 860px) {
	.ace-orbit { display: none; }
	.ace-field { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
	.ace-ring { animation: none !important; }
	.hero-copy, .hero-visual, .ace-tilt, .frame, .split-media { transition: none !important; transform: none !important; }
}

/* ---------------- section 3D floating backdrops (homepage) ---------------- */
.ace-has-bg { position: relative; }
.ace-has-bg > .wrap { position: relative; z-index: 1; }
.ace-sbg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ace-shape { position: absolute; will-change: transform; }
.ace-shape.orb  { border-radius: 50%; background: currentColor; opacity: .14; filter: blur(52px); }
.ace-shape.ring { border-radius: 50%; border: 1.5px solid currentColor; opacity: .26; }
.ace-shape.poly { border: 1.5px solid currentColor; opacity: .2; border-radius: 16px; }
.ace-shape.dot  { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .5; box-shadow: 0 0 14px currentColor; }
.ace-c-gold   { color: var(--gold, #FBA91F); }
.ace-c-violet { color: #7c5cff; }
.ace-c-gold2  { color: var(--gold-2, #FFC15A); }
@keyframes aceFloatA { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(16px,-28px,0) rotate(140deg); } }
@keyframes aceFloatB { 0%,100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(-20px,22px,0) rotate(-120deg); } }
@keyframes aceDrift  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }
@media (max-width: 860px) { .ace-sbg .ring, .ace-sbg .poly { display: none; } .ace-shape.orb { opacity: .1; } }
@media (prefers-reduced-motion: reduce) { .ace-shape { animation: none !important; } }