/* =========================================================================
 *  ARYAN COLOR — frontend styles
 *  Sab animations sirf transform/opacity par (GPU). Layout thrash zero.
 *  Colors CSS variables se aati hain (PHP inline set karta hai):
 *  --ac-base --ac-c1 --ac-c2 --ac-c3 --ac-speed --ac-op --ac-blur --ac-angle
 * ========================================================================= */

.aryancolor-fx {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--ac-base, #050505);
}

/* Layers wrapper — JS ya PHP inject karta hai */
.aryancolor-layers {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	display: block;
}

.aryancolor-layer {
	position: absolute;
	inset: -40%;
	display: block;
	border-radius: 50%;
	opacity: var(--ac-op, 0.65);
	filter: blur(var(--ac-blur, 40px));
	will-change: transform, opacity;
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* Canvas engine host */
.aryancolor-canvas-host { background-color: var(--ac-base, #050505); }
.aryancolor-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
}

/* Content hamesha layers/canvas ke upar */
.aryancolor-fx > .aryancolor-content,
.aryancolor-fx > *:not(.aryancolor-layers):not(.aryancolor-canvas) {
	position: relative;
	z-index: 2;
}

/* Paused (off-screen ya reduced-motion) */
.aryancolor-paused .aryancolor-layer { animation-play-state: paused !important; }

/* =========================================================================
 *  PRESET 1 — SWIRL  (reference wala red smoke / 3D nebula)
 *  3 conic layers alag speed + direction, radial mask se center dark.
 * ========================================================================= */
.aryancolor-anim-swirl {
	perspective: 800px;
}
.aryancolor-anim-swirl .aryancolor-layer {
	mix-blend-mode: screen;
	-webkit-mask-image: radial-gradient(circle at 42% 50%, transparent 8%, #000 46%, #000 100%);
	        mask-image: radial-gradient(circle at 42% 50%, transparent 8%, #000 46%, #000 100%);
}
.aryancolor-anim-swirl .aryancolor-layer-1 {
	background: conic-gradient(from 0deg,
		transparent 0deg, var(--ac-c1) 55deg, transparent 150deg,
		transparent 210deg, var(--ac-c2) 300deg, transparent 360deg);
	animation: aryancolor-spin-cw var(--ac-speed, 18s) linear infinite;
}
.aryancolor-anim-swirl .aryancolor-layer-2 {
	background: conic-gradient(from 120deg,
		transparent 0deg, var(--ac-c2) 70deg, transparent 160deg,
		transparent 250deg, var(--ac-c3) 330deg, transparent 360deg);
	animation: aryancolor-spin-ccw calc(var(--ac-speed, 18s) * 1.6) linear infinite;
	opacity: calc(var(--ac-op, 0.65) * 0.8);
}
.aryancolor-anim-swirl .aryancolor-layer-3 {
	background: conic-gradient(from 240deg,
		transparent 0deg, var(--ac-c1) 40deg, transparent 120deg, transparent 360deg);
	animation: aryancolor-swirl3 calc(var(--ac-speed, 18s) * 2.2) linear infinite;
	opacity: calc(var(--ac-op, 0.65) * 0.55);
}

/* =========================================================================
 *  PRESET 2 — NEBULA  (soft drifting mesh blobs)
 * ========================================================================= */
.aryancolor-anim-nebula .aryancolor-layer {
	inset: -20%;
	mix-blend-mode: screen;
}
.aryancolor-anim-nebula .aryancolor-layer-1 {
	background: radial-gradient(closest-side, var(--ac-c1), transparent 70%);
	animation: aryancolor-drift-a calc(var(--ac-speed,18s) * 1.4) ease-in-out infinite alternate;
}
.aryancolor-anim-nebula .aryancolor-layer-2 {
	background: radial-gradient(closest-side, var(--ac-c2), transparent 70%);
	animation: aryancolor-drift-b calc(var(--ac-speed,18s) * 1.9) ease-in-out infinite alternate;
}
.aryancolor-anim-nebula .aryancolor-layer-3 {
	background: radial-gradient(closest-side, var(--ac-c3), transparent 70%);
	animation: aryancolor-drift-c calc(var(--ac-speed,18s) * 2.4) ease-in-out infinite alternate;
}

/* =========================================================================
 *  PRESET 3 — ORBIT  (glowing orb circle mein)
 * ========================================================================= */
.aryancolor-anim-orbit .aryancolor-layer { inset: 0; border-radius: 0; mix-blend-mode: screen; }
.aryancolor-anim-orbit .aryancolor-layer-1 {
	background: radial-gradient(220px 220px at 50% 50%, var(--ac-c1), transparent 60%);
	animation: aryancolor-orbit var(--ac-speed,18s) linear infinite;
}
.aryancolor-anim-orbit .aryancolor-layer-2 {
	background: radial-gradient(180px 180px at 50% 50%, var(--ac-c2), transparent 60%);
	animation: aryancolor-orbit calc(var(--ac-speed,18s) * 1.3) linear infinite reverse;
	opacity: calc(var(--ac-op,.65) * .8);
}
.aryancolor-anim-orbit .aryancolor-layer-3 {
	background: radial-gradient(120px 120px at 50% 50%, var(--ac-c3), transparent 60%);
	animation: aryancolor-orbit calc(var(--ac-speed,18s) * 0.7) linear infinite;
	opacity: calc(var(--ac-op,.65) * .6);
}

/* =========================================================================
 *  PRESET 4 — AURORA  (vertical bands shift) — single element ok
 * ========================================================================= */
.aryancolor-anim-aurora {
	background-image:
		linear-gradient(115deg, transparent 20%, var(--ac-c1) 40%, transparent 60%),
		linear-gradient(245deg, transparent 30%, var(--ac-c2) 55%, transparent 75%),
		linear-gradient(180deg, var(--ac-c3), transparent 60%);
	background-size: 200% 200%, 200% 200%, 100% 100%;
	animation: aryancolor-aurora calc(var(--ac-speed,18s)) ease-in-out infinite;
	opacity: 1;
}
.aryancolor-anim-aurora::after {
	content:""; position:absolute; inset:0; background: var(--ac-base); opacity: calc(1 - var(--ac-op,.65)); z-index:1;
}

/* =========================================================================
 *  PRESET 5 — PULSE  (radial glow saans)
 * ========================================================================= */
.aryancolor-anim-pulse::before {
	content:""; position:absolute; inset:0; z-index:0;
	background: radial-gradient(circle at 50% 50%, var(--ac-c1), var(--ac-c2) 45%, var(--ac-base) 80%);
	opacity: var(--ac-op,.65);
	animation: aryancolor-pulse var(--ac-speed,18s) ease-in-out infinite;
	will-change: transform, opacity;
}

/* =========================================================================
 *  PRESET 6 — WAVE  (diagonal gradient slide)
 * ========================================================================= */
.aryancolor-anim-wave {
	background-image: linear-gradient(60deg, var(--ac-base) 0%, var(--ac-c2) 30%, var(--ac-c1) 50%, var(--ac-c2) 70%, var(--ac-base) 100%);
	background-size: 300% 300%;
	animation: aryancolor-wave var(--ac-speed,18s) linear infinite;
}

/* =========================================================================
 *  PRESET 7 — CONIC  (pura conic rotate)
 * ========================================================================= */
.aryancolor-anim-conic::before {
	content:""; position:absolute; inset:-30%; z-index:0;
	background: conic-gradient(from var(--ac-angle,0deg), var(--ac-c1), var(--ac-c2), var(--ac-c3), var(--ac-c1));
	opacity: var(--ac-op,.65);
	filter: blur(var(--ac-blur,40px));
	animation: aryancolor-spin-cw var(--ac-speed,18s) linear infinite;
	will-change: transform;
}

/* =========================================================================
 *  PRESET 8 — MESH  (blobs move alag path)
 * ========================================================================= */
.aryancolor-anim-mesh .aryancolor-layer { inset:-10%; mix-blend-mode: screen; }
.aryancolor-anim-mesh .aryancolor-layer-1 { background: radial-gradient(closest-side, var(--ac-c1), transparent 65%); animation: aryancolor-mesh1 var(--ac-speed,18s) ease-in-out infinite; }
.aryancolor-anim-mesh .aryancolor-layer-2 { background: radial-gradient(closest-side, var(--ac-c2), transparent 65%); animation: aryancolor-mesh2 calc(var(--ac-speed,18s)*1.5) ease-in-out infinite; }
.aryancolor-anim-mesh .aryancolor-layer-3 { background: radial-gradient(closest-side, var(--ac-c3), transparent 65%); animation: aryancolor-mesh3 calc(var(--ac-speed,18s)*1.2) ease-in-out infinite; }

/* =========================================================================
 *  PRESET 9 — RIPPLE  (concentric rings)
 * ========================================================================= */
.aryancolor-anim-ripple .aryancolor-layer {
	inset:0; border-radius:50%;
	border: 2px solid var(--ac-c1);
	background: transparent; filter:none;
	left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; inset:auto;
	mix-blend-mode: screen;
}
.aryancolor-anim-ripple .aryancolor-layer-1 { animation: aryancolor-ripple var(--ac-speed,18s) ease-out infinite; }
.aryancolor-anim-ripple .aryancolor-layer-2 { border-color: var(--ac-c2); animation: aryancolor-ripple var(--ac-speed,18s) ease-out infinite; animation-delay: calc(var(--ac-speed,18s) / -3); }
.aryancolor-anim-ripple .aryancolor-layer-3 { border-color: var(--ac-c3); animation: aryancolor-ripple var(--ac-speed,18s) ease-out infinite; animation-delay: calc(var(--ac-speed,18s) / -1.5); }

/* =========================================================================
 *  KEYFRAMES
 * ========================================================================= */
@keyframes aryancolor-spin-cw  { to { transform: rotate(360deg); } }
@keyframes aryancolor-spin-ccw { to { transform: rotate(-360deg); } }
@keyframes aryancolor-swirl3 {
	0%   { transform: rotate(0deg) scale(1); }
	50%  { transform: rotate(180deg) scale(1.12); }
	100% { transform: rotate(360deg) scale(1); }
}
@keyframes aryancolor-drift-a { 0%{transform:translate(-15%,-10%) scale(1)} 100%{transform:translate(20%,15%) scale(1.25)} }
@keyframes aryancolor-drift-b { 0%{transform:translate(25%,-5%) scale(1.1)} 100%{transform:translate(-15%,20%) scale(1)} }
@keyframes aryancolor-drift-c { 0%{transform:translate(0%,20%) scale(1)}    100%{transform:translate(-20%,-15%) scale(1.2)} }
@keyframes aryancolor-orbit {
	from { transform: rotate(0deg) translateX(22%) rotate(0deg); }
	to   { transform: rotate(360deg) translateX(22%) rotate(-360deg); }
}
@keyframes aryancolor-aurora {
	0%,100% { background-position: 0% 50%, 100% 50%, 0 0; }
	50%     { background-position: 100% 50%, 0% 50%, 0 0; }
}
@keyframes aryancolor-pulse {
	0%,100% { transform: scale(1);    opacity: calc(var(--ac-op,.65) * .7); }
	50%     { transform: scale(1.15); opacity: var(--ac-op,.65); }
}
@keyframes aryancolor-wave { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes aryancolor-mesh1 { 0%,100%{transform:translate(-10%,0)} 33%{transform:translate(20%,15%)} 66%{transform:translate(5%,-15%)} }
@keyframes aryancolor-mesh2 { 0%,100%{transform:translate(15%,10%)} 33%{transform:translate(-15%,-5%)} 66%{transform:translate(10%,20%)} }
@keyframes aryancolor-mesh3 { 0%,100%{transform:translate(0,-15%)} 33%{transform:translate(-20%,10%)} 66%{transform:translate(15%,-10%)} }
@keyframes aryancolor-ripple {
	0%   { transform: scale(0.2); opacity: var(--ac-op,.65); }
	100% { transform: scale(28);  opacity: 0; }
}

/* =========================================================================
 *  PERFORMANCE / ACCESSIBILITY — reduced motion pe sab freeze
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.aryancolor-layer,
	.aryancolor-anim-aurora,
	.aryancolor-anim-wave,
	.aryancolor-anim-pulse::before,
	.aryancolor-anim-conic::before { animation: none !important; }
}

/* =========================================================================
 *  ADMIN mini + live preview boxes
 * ========================================================================= */
.aryancolor-mini {
	width: 150px; height: 70px; border-radius: 8px; overflow: hidden;
	position: relative; isolation: isolate; background-color: var(--ac-base, #050505);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}