/* LIL' ENGINE v2.1.0 */

:root {
  /* Lil' CSS Engine Core Vars */
  --lil-duration: 0.8s;
  --lil-delay: 0s;
  --lil-stagger: 0.03s;
  --lil-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Shared Branding Vars */
  --lil-color: #6161FF;
  --lil-color-sec: #44FC8E;
  --lil-distance: 40px;
  --lil-scale: 1.05;
  --lil-rotate: 3deg;
  --lil-shadow: 0 10px 30px -10px rgba(0,0,0,0.3);
}

/* Engine Resets & Vector Normalization */
.lil-svg-draw path, .lil-svg-draw circle, .lil-svg-draw rect, .lil-svg-draw polyline, .lil-svg-draw line,
.lil-pie-fill path, .lil-pie-fill circle, .lil-svg-trace-loop path {
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}


.lil-bg-primary { color: #6161FF; }
.lil-bg-primary-bg { background-color: #6161FF; }
.lil-bg-secondary { color: #44FC8E; }
.lil-bg-secondary-bg { background-color: #44FC8E; }
.lil-bg-text { color: #333333; }
.lil-bg-text-bg { background-color: #333333; }
.lil-bg-laci { color: #313180; }
.lil-bg-laci-bg { background-color: #313180; }
.lil-bg-goblin { color: #227E47; }
.lil-bg-goblin-bg { background-color: #227E47; }
.lil-bg-dark { color: #1A1A1A; }
.lil-bg-dark-bg { background-color: #1A1A1A; }

/* --- CORE ENGINE --- */
.lil-fade-up { opacity: 0; animation: lilFadeUp var(--lil-duration) var(--lil-ease) var(--lil-delay) forwards; }
@keyframes lilFadeUp { from { opacity: 0; translate: 0 var(--lil-distance); } to { opacity: 1; translate: 0 0; } }

.lil-blur-in { opacity: 0; filter: blur(10px); animation: lilBlurIn var(--lil-duration) var(--lil-ease) var(--lil-delay) forwards; }
@keyframes lilBlurIn { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }

.lil-text-track { animation: lilTextTrack var(--lil-duration) var(--lil-ease) var(--lil-delay) both; }
@keyframes lilTextTrack { 0% { letter-spacing: 0.5em; opacity: 0; } 100% { letter-spacing: normal; opacity: 1; } }

.lil-svg-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lilSvgDraw var(--lil-duration) var(--lil-ease) var(--lil-delay) forwards; fill: none !important; }
@keyframes lilSvgDraw { to { stroke-dashoffset: 0; } }

.lil-count-up { font-variant-numeric: tabular-nums; }
.lil-bar-fill { width: 0; animation: lilBarFill var(--lil-duration) ease-out var(--lil-delay) forwards; }
@keyframes lilBarFill { to { width: var(--target-width, 100%); } }

.lil-height-fill { height: 0; animation: lilHeightFill var(--lil-duration) ease-out var(--lil-delay) forwards; }
@keyframes lilHeightFill { from { height: 0; } to { height: 100%; } }

.lil-pie-fill { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lilPieFill var(--lil-duration) ease-out var(--lil-delay) forwards; }
@keyframes lilPieFill { to { stroke-dashoffset: calc(1 - (var(--target, 100) / 100)); } }

.lil-loop-float { animation: lilFloat 3s ease-in-out infinite; }
@keyframes lilFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -15px; } }

/* --- UTILITY OVERRIDES --- */
.lil-fast { --lil-duration: 0.5s; }
.lil-slow { --lil-duration: 1.5s; }
.lil-hover-fast { --lil-hover-duration: 0.1s; }
.lil-delay-200 { --lil-delay: 0.2s; }
.lil-delay-500 { --lil-delay: 0.5s; }
.lil-ease-back { --lil-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* --- TRANSITION ENGINE (REVERSIBLE) --- */
.lil-fade-up.lil-rev { animation: none; opacity: 0; translate: 0 var(--lil-distance); transition: all 0.5s ease-out; }
.lil-fade-up.lil-rev.view-active { opacity: 1; translate: 0 0; transition: all var(--lil-duration) var(--lil-ease); }
.lil-blur-in.lil-rev { animation: none; opacity: 0; filter: blur(10px); transition: all 0.5s ease-out; }
.lil-blur-in.lil-rev.view-active { opacity: 1; filter: blur(0); transition: all var(--lil-duration) var(--lil-ease); }
.lil-text-track.lil-rev { animation: none; letter-spacing: 0.5em; opacity: 0; transition: all 0.5s ease-out; }
.lil-text-track.lil-rev.view-active { letter-spacing: normal; opacity: 1; transition: all var(--lil-duration) var(--lil-ease); }
.lil-svg-draw.lil-rev { animation: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s ease-out; }
.lil-svg-draw.lil-rev.view-active { stroke-dashoffset: 0; transition: stroke-dashoffset var(--lil-duration) var(--lil-ease); }
.lil-bar-fill.lil-rev { animation: none; width: 0; transition: width 0.5s ease-out; }
.lil-bar-fill.lil-rev.view-active { width: var(--target-width, 100%); transition: width var(--lil-duration) ease-out; }
.lil-height-fill.lil-rev { animation: none; height: 0; transition: height 0.5s ease-out; }
.lil-height-fill.lil-rev.view-active { height: 100%; transition: height var(--lil-duration) ease-out; }
.lil-pie-fill.lil-rev { animation: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s ease-out; }
.lil-pie-fill.lil-rev.view-active { stroke-dashoffset: calc(1 - (var(--target, 100) / 100)); transition: stroke-dashoffset var(--lil-duration) ease-out; }