/* ============================================================
   GOD'S EYE DESIGN SYSTEM v3.0 — Animation System
   Complete keyframes, utility classes, transitions, hover
   effects, scroll-triggered animations, component animations,
   and motion accessibility.

   Timing Scale (standardized):
     --ge-duration-instant:  50ms
     --ge-duration-faster:  100ms
     --ge-duration-fast:    150ms   (fast)
     --ge-duration-normal:  200ms   (normal)
     --ge-duration-slow:    500ms   (slow)
     --ge-duration-emphasis:500ms   (emphasis)
     --ge-duration-slower:  750ms
     --ge-duration-slowest: 1000ms
     --ge-duration-glacial: 2000ms

   Easing Scale (standardized):
     --ge-ease-default:  cubic-bezier(0.4, 0, 0.2, 1)   (standard)
     --ge-ease-in:       cubic-bezier(0.4, 0, 1, 1)
     --ge-ease-out:      cubic-bezier(0, 0, 0.2, 1)
     --ge-ease-in-out:   cubic-bezier(0.42, 0, 0.58, 1)
     --ge-ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55)
     --ge-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1)
   ============================================================ */


/* ============================================================
   1. KEYFRAME DEFINITIONS
   ============================================================ */

/* --- Fade --- */

@keyframes ge-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ge-fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes ge-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ge-fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ge-fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ge-fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ge-fadeOutUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}

@keyframes ge-fadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}

@keyframes ge-fadeOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-20px); }
}

@keyframes ge-fadeOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* --- Slide --- */

@keyframes ge-slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes ge-slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes ge-slideLeft {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes ge-slideRight {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes ge-slideOutUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

@keyframes ge-slideOutDown {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

@keyframes ge-slideOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes ge-slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes ge-slideInFromBottom {
  from { transform: translateY(100vh); }
  to   { transform: translateY(0); }
}

@keyframes ge-slideOutToBottom {
  from { transform: translateY(0); }
  to   { transform: translateY(100vh); }
}

/* --- Scale --- */

@keyframes ge-scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ge-scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.8); }
}

@keyframes ge-scaleUp {
  from { transform: scale(0.95); }
  to   { transform: scale(1); }
}

@keyframes ge-scaleBounce {
  0%   { transform: scale(0.9); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* --- Component-specific: Dialog --- */

@keyframes ge-dialogIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ge-dialogOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
}

/* --- Component-specific: Drawer --- */

@keyframes ge-drawerInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes ge-drawerOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes ge-drawerInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes ge-drawerOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes ge-drawerInTop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes ge-drawerOutTop {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

@keyframes ge-drawerInBottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes ge-drawerOutBottom {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* --- Component-specific: Toast --- */

@keyframes ge-toastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ge-toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
}

/* --- Component-specific: Dropdown --- */

@keyframes ge-dropdownIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ge-dropdownOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
}

/* --- Component-specific: Accordion --- */

@keyframes ge-accordionOpen {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: var(--ge-accordion-max-height, 1000px);
    opacity: 1;
  }
}

@keyframes ge-accordionClose {
  from {
    max-height: var(--ge-accordion-max-height, 1000px);
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

/* --- Rotation --- */

/* ge-rotate keyframes removed — identical to ge-spin (see below) */

@keyframes ge-rotateIn {
  from { opacity: 0; transform: rotate(-180deg); }
  to   { opacity: 1; transform: rotate(0deg); }
}

@keyframes ge-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Ping / Pulse / Bounce --- */

@keyframes ge-ping {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes ge-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes ge-pulseSoft {
  0%   { opacity: 1; }
  50%  { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes ge-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-10px); }
  60%      { transform: translateY(-5px); }
}

@keyframes ge-bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* --- Shake / Wiggle / Float / Swing --- */

@keyframes ge-shake {
  0%, 100% { transform: translateX(0); }
  10%      { transform: translateX(-5px); }
  20%      { transform: translateX(5px); }
  30%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  50%      { transform: translateX(-3px); }
  60%      { transform: translateX(3px); }
  70%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
  90%      { transform: translateX(-1px); }
}

@keyframes ge-wiggle {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(2deg); }
  30%      { transform: rotate(-2deg); }
  45%      { transform: rotate(1.5deg); }
  60%      { transform: rotate(-1.5deg); }
  75%      { transform: rotate(1deg); }
  90%      { transform: rotate(-0.5deg); }
}

@keyframes ge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes ge-swing {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(12deg); }
  40%  { transform: rotate(-8deg); }
  60%  { transform: rotate(4deg); }
  80%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

/* --- Glitch --- */

@keyframes ge-glitch {
  0% {
    clip-path: inset(40% 0 61% 0);
    transform: translate(0);
  }
  10% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(-2px, 2px);
  }
  20% {
    clip-path: inset(80% 0 1% 0);
    transform: translate(2px, -1px);
  }
  30% {
    clip-path: inset(25% 0 58% 0);
    transform: translate(-1px, 1px);
  }
  40% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(1px, -2px);
  }
  50% {
    clip-path: inset(15% 0 70% 0);
    transform: translate(-3px, 0);
  }
  60% {
    clip-path: inset(65% 0 10% 0);
    transform: translate(3px, 1px);
  }
  70% {
    clip-path: inset(35% 0 45% 0);
    transform: translate(-1px, -1px);
  }
  80% {
    clip-path: inset(5% 0 90% 0);
    transform: translate(2px, 2px);
  }
  90% {
    clip-path: inset(70% 0 15% 0);
    transform: translate(-2px, -2px);
  }
  100% {
    clip-path: inset(40% 0 61% 0);
    transform: translate(0);
  }
}

@keyframes ge-glitchBefore {
  0%   { clip-path: inset(0 0 80% 0); transform: translate(-3px, 0); }
  10%  { clip-path: inset(20% 0 60% 0); transform: translate(3px, 0); }
  20%  { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 0); }
  30%  { clip-path: inset(10% 0 70% 0); transform: translate(2px, 0); }
  40%  { clip-path: inset(70% 0 10% 0); transform: translate(-1px, 0); }
  50%  { clip-path: inset(30% 0 50% 0); transform: translate(1px, 0); }
  60%  { clip-path: inset(60% 0 20% 0); transform: translate(-3px, 0); }
  70%  { clip-path: inset(5% 0 85% 0); transform: translate(3px, 0); }
  80%  { clip-path: inset(45% 0 35% 0); transform: translate(-2px, 0); }
  90%  { clip-path: inset(85% 0 5% 0); transform: translate(2px, 0); }
  100% { clip-path: inset(0 0 80% 0); transform: translate(-3px, 0); }
}

@keyframes ge-glitchAfter {
  0%   { clip-path: inset(80% 0 0 0); transform: translate(3px, 0); }
  10%  { clip-path: inset(60% 0 20% 0); transform: translate(-3px, 0); }
  20%  { clip-path: inset(30% 0 50% 0); transform: translate(2px, 0); }
  30%  { clip-path: inset(70% 0 10% 0); transform: translate(-2px, 0); }
  40%  { clip-path: inset(10% 0 70% 0); transform: translate(1px, 0); }
  50%  { clip-path: inset(50% 0 30% 0); transform: translate(-1px, 0); }
  60%  { clip-path: inset(20% 0 60% 0); transform: translate(3px, 0); }
  70%  { clip-path: inset(85% 0 5% 0); transform: translate(-3px, 0); }
  80%  { clip-path: inset(35% 0 45% 0); transform: translate(2px, 0); }
  90%  { clip-path: inset(5% 0 85% 0); transform: translate(-2px, 0); }
  100% { clip-path: inset(80% 0 0 0); transform: translate(3px, 0); }
}

/* --- Glow --- */

@keyframes ge-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.3),
                0 0 10px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.6),
                0 0 30px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.3);
  }
}

@keyframes ge-glowMagenta {
  0%, 100% {
    box-shadow: 0 0 5px rgba(var(--ge-accent-magenta-rgb, 255, 0, 170), 0.3),
                0 0 10px rgba(var(--ge-accent-magenta-rgb, 255, 0, 170), 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(var(--ge-accent-magenta-rgb, 255, 0, 170), 0.6),
                0 0 30px rgba(var(--ge-accent-magenta-rgb, 255, 0, 170), 0.3);
  }
}

@keyframes ge-glowYellow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 230, 0, 0.3),
                0 0 10px rgba(255, 230, 0, 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 230, 0, 0.6),
                0 0 30px rgba(255, 230, 0, 0.3);
  }
}

@keyframes ge-borderGlow {
  0%, 100% {
    border-color: rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.3);
  }
  50% {
    border-color: rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.9);
  }
}

@keyframes ge-borderGlowMagenta {
  0%, 100% {
    border-color: rgba(var(--ge-accent-magenta-rgb, 255, 0, 170), 0.3);
  }
  50% {
    border-color: rgba(var(--ge-accent-magenta-rgb, 255, 0, 170), 0.9);
  }
}

/* --- Data / Scan / UI --- */

@keyframes ge-dataScan {
  from { background-position: 0 0; }
  to   { background-position: 0 100%; }
}

@keyframes ge-scanline {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}

@keyframes ge-typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes ge-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@keyframes ge-shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

@keyframes ge-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes ge-ripple {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(4); opacity: 0; }
}

@keyframes ge-morphBg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ge-countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Expand / Collapse --- */

@keyframes ge-expand {
  from { max-height: 0; opacity: 0; overflow: hidden; }
  to   { max-height: 500px; opacity: 1; overflow: hidden; }
}

@keyframes ge-collapse {
  from { max-height: 500px; opacity: 1; overflow: hidden; }
  to   { max-height: 0; opacity: 0; overflow: hidden; }
}

/* --- Progress / Skeleton / Ring / Breathe --- */

@keyframes ge-progressIndeterminate {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes ge-skeleton {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes ge-pulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.5);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0);
  }
}

@keyframes ge-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* --- Overlay backdrop --- */

@keyframes ge-overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ge-overlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- Tooltip --- */

@keyframes ge-tooltipIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ge-tooltipOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(2px);
  }
}

/* --- Tab switch --- */

@keyframes ge-tabIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ge-tabOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}


/* ============================================================
   2. ANIMATION UTILITY CLASSES
   ============================================================ */

/* --- Fade --- */

.ge-animate-fade-in {
  animation: ge-fadeIn var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ge-animate-fade-out {
  animation: ge-fadeOut var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

.ge-animate-fade-in-up {
  animation: ge-fadeInUp var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-fade-in-down {
  animation: ge-fadeInDown var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-fade-in-left {
  animation: ge-fadeInLeft var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-fade-in-right {
  animation: ge-fadeInRight var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-fade-out-up {
  animation: ge-fadeOutUp var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

.ge-animate-fade-out-down {
  animation: ge-fadeOutDown var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

.ge-animate-fade-out-left {
  animation: ge-fadeOutLeft var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

.ge-animate-fade-out-right {
  animation: ge-fadeOutRight var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Slide --- */

.ge-animate-slide-up {
  animation: ge-slideUp var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-slide-down {
  animation: ge-slideDown var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-slide-left {
  animation: ge-slideLeft var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-slide-right {
  animation: ge-slideRight var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-slide-out-up {
  animation: ge-slideOutUp var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

.ge-animate-slide-out-down {
  animation: ge-slideOutDown var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

.ge-animate-slide-out-left {
  animation: ge-slideOutLeft var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

.ge-animate-slide-out-right {
  animation: ge-slideOutRight var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Scale --- */

.ge-animate-scale-in {
  animation: ge-scaleIn var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-scale-out {
  animation: ge-scaleOut var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

.ge-animate-bounce-in {
  animation: ge-bounceIn var(--ge-duration-emphasis, 500ms) cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

/* --- Rotation (continuous) --- */

.ge-animate-rotate {
  animation: ge-spin var(--ge-duration-slowest, 1000ms) linear infinite;
  will-change: transform;
}

.ge-animate-spin {
  animation: ge-spin var(--ge-duration-slowest, 1000ms) linear infinite;
  will-change: transform;
}

/* --- Ping / Pulse / Bounce (continuous) --- */

.ge-animate-ping {
  animation: ge-ping var(--ge-duration-slowest, 1000ms) cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ge-animate-pulse {
  animation: ge-pulse var(--ge-duration-glacial, 2000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: opacity;
}

.ge-animate-pulse-soft {
  animation: ge-pulseSoft var(--ge-duration-glacial, 2000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ge-animate-bounce {
  animation: ge-bounce var(--ge-duration-slowest, 1000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* --- Shake / Wiggle / Float / Swing --- */

.ge-animate-shake {
  animation: ge-shake var(--ge-duration-emphasis, 500ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ge-animate-wiggle {
  animation: ge-wiggle var(--ge-duration-emphasis, 500ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ge-animate-float {
  animation: ge-float var(--ge-duration-glacial, 2000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}

.ge-animate-swing {
  animation: ge-swing var(--ge-duration-slower, 750ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* --- Glitch (continuous) --- */

.ge-animate-glitch {
  position: relative;
  animation: ge-glitch var(--ge-duration-glacial, 2000ms) linear infinite;
}

.ge-animate-glitch::before,
.ge-animate-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ge-animate-glitch::before {
  color: var(--ge-cyan, #00f0ff);
  animation: ge-glitchBefore var(--ge-duration-glacial, 2000ms) linear infinite;
  z-index: -1;
}

.ge-animate-glitch::after {
  color: var(--ge-magenta, #ff00aa);
  animation: ge-glitchAfter var(--ge-duration-glacial, 2000ms) linear infinite;
  z-index: -1;
}

/* --- Glow (continuous) --- */

.ge-animate-glow {
  animation: ge-glow var(--ge-duration-glacial, 2000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: box-shadow;
}

.ge-animate-glow-magenta {
  animation: ge-glowMagenta var(--ge-duration-glacial, 2000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ge-animate-glow-yellow {
  animation: ge-glowYellow var(--ge-duration-glacial, 2000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* --- Border Glow (continuous) --- */

.ge-animate-border-glow {
  animation: ge-borderGlow var(--ge-duration-glacial, 2000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ge-animate-border-glow-magenta {
  animation: ge-borderGlowMagenta var(--ge-duration-glacial, 2000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* --- Shimmer (continuous) --- */

.ge-animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: ge-shimmer var(--ge-duration-glacial, 2000ms) linear infinite;
  will-change: background-position;
}

/* --- Breathe (continuous) --- */

.ge-animate-breathe {
  animation: ge-breathe var(--ge-duration-glacial, 2000ms) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* --- Marquee (continuous) --- */

.ge-animate-marquee {
  animation: ge-marquee 10s linear infinite;
}


/* ============================================================
   3. COMPONENT ENTER/EXIT ANIMATIONS
   ============================================================ */

/* --- Dialog --- */

.ge-animate-dialog-in {
  animation: ge-dialogIn var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-dialog-out {
  animation: ge-dialogOut var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Drawer from right --- */

.ge-animate-drawer-in-right {
  animation: ge-drawerInRight var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-drawer-out-right {
  animation: ge-drawerOutRight var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Drawer from left --- */

.ge-animate-drawer-in-left {
  animation: ge-drawerInLeft var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-drawer-out-left {
  animation: ge-drawerOutLeft var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Drawer from top --- */

.ge-animate-drawer-in-top {
  animation: ge-drawerInTop var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-drawer-out-top {
  animation: ge-drawerOutTop var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Drawer from bottom --- */

.ge-animate-drawer-in-bottom {
  animation: ge-drawerInBottom var(--ge-duration-slow, 500ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-drawer-out-bottom {
  animation: ge-drawerOutBottom var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Toast --- */

.ge-animate-toast-in {
  animation: ge-toastIn var(--ge-duration-slow, 500ms) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ge-animate-toast-out {
  animation: ge-toastOut var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Dropdown --- */

.ge-animate-dropdown-in {
  animation: ge-dropdownIn var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1) both;
  transform-origin: top center;
}

.ge-animate-dropdown-out {
  animation: ge-dropdownOut var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 1, 1) both;
  transform-origin: top center;
}

/* --- Accordion --- */

.ge-animate-accordion-open {
  animation: ge-accordionOpen var(--ge-duration-slow, 500ms) cubic-bezier(0.4, 0, 0.2, 1) both;
  overflow: hidden;
}

.ge-animate-accordion-close {
  animation: ge-accordionClose var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
  overflow: hidden;
}

/* --- Overlay / Backdrop --- */

.ge-animate-overlay-in {
  animation: ge-overlayIn var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ge-animate-overlay-out {
  animation: ge-overlayOut var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Tooltip --- */

.ge-animate-tooltip-in {
  animation: ge-tooltipIn var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1) both;
}

.ge-animate-tooltip-out {
  animation: ge-tooltipOut var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 1, 1) both;
}

/* --- Tab switch --- */

.ge-animate-tab-in {
  animation: ge-tabIn var(--ge-duration-normal, 200ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ge-animate-tab-out {
  animation: ge-tabOut var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 1, 1) both;
}


/* ============================================================
   4. STAGGERED DELAYS
   ============================================================ */

.ge-delay-0  { animation-delay: 0ms; }
.ge-delay-1  { animation-delay: 50ms; }
.ge-delay-2  { animation-delay: 100ms; }
.ge-delay-3  { animation-delay: 150ms; }
.ge-delay-4  { animation-delay: 200ms; }
.ge-delay-5  { animation-delay: 300ms; }
.ge-delay-6  { animation-delay: 400ms; }
.ge-delay-7  { animation-delay: 500ms; }
.ge-delay-8  { animation-delay: 600ms; }
.ge-delay-9  { animation-delay: 800ms; }
.ge-delay-10 { animation-delay: 1000ms; }
.ge-delay-15 { animation-delay: 1500ms; }
.ge-delay-20 { animation-delay: 2000ms; }

/* Stagger children: auto-increment delay per child */

.ge-stagger-children > :nth-child(1)  { animation-delay: 0ms; }
.ge-stagger-children > :nth-child(2)  { animation-delay: 50ms; }
.ge-stagger-children > :nth-child(3)  { animation-delay: 100ms; }
.ge-stagger-children > :nth-child(4)  { animation-delay: 150ms; }
.ge-stagger-children > :nth-child(5)  { animation-delay: 200ms; }
.ge-stagger-children > :nth-child(6)  { animation-delay: 250ms; }
.ge-stagger-children > :nth-child(7)  { animation-delay: 300ms; }
.ge-stagger-children > :nth-child(8)  { animation-delay: 350ms; }
.ge-stagger-children > :nth-child(9)  { animation-delay: 400ms; }
.ge-stagger-children > :nth-child(10) { animation-delay: 450ms; }
.ge-stagger-children > :nth-child(11) { animation-delay: 500ms; }
.ge-stagger-children > :nth-child(12) { animation-delay: 550ms; }

/* Stagger children: slower increment (75ms per child) */

.ge-stagger-children-slow > :nth-child(1)  { animation-delay: 0ms; }
.ge-stagger-children-slow > :nth-child(2)  { animation-delay: 75ms; }
.ge-stagger-children-slow > :nth-child(3)  { animation-delay: 150ms; }
.ge-stagger-children-slow > :nth-child(4)  { animation-delay: 225ms; }
.ge-stagger-children-slow > :nth-child(5)  { animation-delay: 300ms; }
.ge-stagger-children-slow > :nth-child(6)  { animation-delay: 375ms; }
.ge-stagger-children-slow > :nth-child(7)  { animation-delay: 450ms; }
.ge-stagger-children-slow > :nth-child(8)  { animation-delay: 525ms; }
.ge-stagger-children-slow > :nth-child(9)  { animation-delay: 600ms; }
.ge-stagger-children-slow > :nth-child(10) { animation-delay: 675ms; }

/* Stagger children: fast increment (30ms per child) */

.ge-stagger-children-fast > :nth-child(1)  { animation-delay: 0ms; }
.ge-stagger-children-fast > :nth-child(2)  { animation-delay: 30ms; }
.ge-stagger-children-fast > :nth-child(3)  { animation-delay: 60ms; }
.ge-stagger-children-fast > :nth-child(4)  { animation-delay: 90ms; }
.ge-stagger-children-fast > :nth-child(5)  { animation-delay: 120ms; }
.ge-stagger-children-fast > :nth-child(6)  { animation-delay: 150ms; }
.ge-stagger-children-fast > :nth-child(7)  { animation-delay: 180ms; }
.ge-stagger-children-fast > :nth-child(8)  { animation-delay: 210ms; }
.ge-stagger-children-fast > :nth-child(9)  { animation-delay: 240ms; }
.ge-stagger-children-fast > :nth-child(10) { animation-delay: 270ms; }


/* ============================================================
   5. ANIMATION DURATION OVERRIDES
   ============================================================ */

.ge-duration-instant  { animation-duration: var(--ge-duration-instant, 50ms) !important; }
.ge-duration-faster   { animation-duration: var(--ge-duration-faster, 100ms) !important; }
.ge-duration-fast     { animation-duration: var(--ge-duration-fast, 150ms) !important; }
.ge-duration-normal   { animation-duration: var(--ge-duration-normal, 200ms) !important; }
.ge-duration-slow     { animation-duration: var(--ge-duration-slow, 500ms) !important; }
.ge-duration-emphasis { animation-duration: var(--ge-duration-emphasis, 500ms) !important; }
.ge-duration-slower   { animation-duration: var(--ge-duration-slower, 750ms) !important; }
.ge-duration-slowest  { animation-duration: var(--ge-duration-slowest, 1000ms) !important; }
.ge-duration-glacial  { animation-duration: var(--ge-duration-glacial, 2000ms) !important; }


/* ============================================================
   6. ANIMATION ITERATION
   ============================================================ */

.ge-animate-once     { animation-iteration-count: 1 !important; }
.ge-animate-twice    { animation-iteration-count: 2 !important; }
.ge-animate-thrice   { animation-iteration-count: 3 !important; }
.ge-animate-infinite { animation-iteration-count: infinite !important; }


/* ============================================================
   7. ANIMATION FILL MODE
   ============================================================ */

.ge-animate-fill-none      { animation-fill-mode: none !important; }
.ge-animate-fill-forwards  { animation-fill-mode: forwards !important; }
.ge-animate-fill-backwards { animation-fill-mode: backwards !important; }
.ge-animate-fill-both      { animation-fill-mode: both !important; }


/* ============================================================
   8. ANIMATION PLAY STATE
   ============================================================ */

.ge-animate-running { animation-play-state: running !important; }
.ge-animate-paused  { animation-play-state: paused !important; }


/* ============================================================
   9. ANIMATION DIRECTION
   ============================================================ */

.ge-animate-normal    { animation-direction: normal !important; }
.ge-animate-reverse   { animation-direction: reverse !important; }
.ge-animate-alternate { animation-direction: alternate !important; }


/* ============================================================
   10. ANIMATION EASING OVERRIDES
   ============================================================ */

.ge-ease-default { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }
.ge-ease-in      { animation-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; }
.ge-ease-out     { animation-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; }
.ge-ease-in-out  { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) !important; }
.ge-ease-linear  { animation-timing-function: linear !important; }
.ge-ease-bounce  { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; }
.ge-ease-spring  { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important; }


/* ============================================================
   11. SCROLL-TRIGGERED ANIMATIONS (data attributes)
   ============================================================ */

/* Base: hidden state for all scroll-triggered elements */
[data-ge-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--ge-duration-emphasis, 500ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

/* Per-type initial transforms */
[data-ge-animate="fade-in"] {
  /* opacity only, no transform offset */
}

[data-ge-animate="fade-in-up"] {
  transform: translateY(24px);
}

[data-ge-animate="fade-in-down"] {
  transform: translateY(-24px);
}

[data-ge-animate="fade-in-left"] {
  transform: translateX(-24px);
}

[data-ge-animate="fade-in-right"] {
  transform: translateX(24px);
}

[data-ge-animate="scale-in"] {
  transform: scale(0.92);
}

[data-ge-animate="zoom-in"] {
  transform: scale(0.85);
}

[data-ge-animate="slide-up"] {
  transform: translateY(40px);
}

[data-ge-animate="slide-down"] {
  transform: translateY(-40px);
}

[data-ge-animate="slide-left"] {
  transform: translateX(-40px);
}

[data-ge-animate="slide-right"] {
  transform: translateX(40px);
}

/* Visible state: triggered by IntersectionObserver / JS */
[data-ge-animate].ge-visible {
  opacity: 1;
  transform: none;
}

/* Once-only: element remains visible after first intersection */
[data-ge-animate][data-ge-once].ge-visible {
  opacity: 1;
  transform: none;
}

/* Scroll-triggered delay overrides via data attributes */
[data-ge-animate][data-ge-delay="100"] { transition-delay: 100ms; }
[data-ge-animate][data-ge-delay="200"] { transition-delay: 200ms; }
[data-ge-animate][data-ge-delay="300"] { transition-delay: 300ms; }
[data-ge-animate][data-ge-delay="400"] { transition-delay: 400ms; }
[data-ge-animate][data-ge-delay="500"] { transition-delay: 500ms; }
[data-ge-animate][data-ge-delay="600"] { transition-delay: 600ms; }
[data-ge-animate][data-ge-delay="800"] { transition-delay: 800ms; }
[data-ge-animate][data-ge-delay="1000"] { transition-delay: 1000ms; }

/* Scroll-triggered duration overrides */
[data-ge-animate][data-ge-duration="fast"] {
  transition-duration: var(--ge-duration-fast, 150ms);
}
[data-ge-animate][data-ge-duration="normal"] {
  transition-duration: var(--ge-duration-normal, 200ms);
}
[data-ge-animate][data-ge-duration="slow"] {
  transition-duration: var(--ge-duration-slow, 500ms);
}
[data-ge-animate][data-ge-duration="emphasis"] {
  transition-duration: var(--ge-duration-emphasis, 500ms);
}
[data-ge-animate][data-ge-duration="slower"] {
  transition-duration: var(--ge-duration-slower, 750ms);
}


/* ============================================================
   12. TRANSITION UTILITIES
   ============================================================ */

.ge-transition {
  transition-property: all;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-transition-none {
  transition: none !important;
}

.ge-transition-fast {
  transition-property: all;
  transition-duration: var(--ge-duration-fast, 150ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-transition-slow {
  transition-property: all;
  transition-duration: var(--ge-duration-slow, 500ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-transition-emphasis {
  transition-property: all;
  transition-duration: var(--ge-duration-emphasis, 500ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-transition-colors {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-transition-opacity {
  transition-property: opacity;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-transition-transform {
  transition-property: transform;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-transition-shadow {
  transition-property: box-shadow;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Explicit all — intentionally identical to .ge-transition (base utility).
   Use .ge-transition-all when you want to be explicit about transition-property: all. */
.ge-transition-all {
  transition-property: all;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-transition-width {
  transition-property: width;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
}

.ge-transition-height {
  transition-property: height;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: height;
}

.ge-transition-size {
  transition-property: width, height, max-width, max-height;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width, height;
}

.ge-transition-spacing {
  transition-property: padding, margin, gap;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-transition-border {
  transition-property: border-color, border-width, outline-color;
  transition-duration: var(--ge-duration-normal, 200ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   13. HOVER EFFECT UTILITIES
   ============================================================ */

/* --- Lift (subtle defaults, -2px base) --- */

.ge-hover-lift {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-lift:hover,
.ge-hover-lift:focus-visible {
  transform: translateY(-2px);
}

.ge-hover-lift-sm {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-lift-sm:hover,
.ge-hover-lift-sm:focus-visible {
  transform: translateY(-1px);
}

.ge-hover-lift-lg {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-lift-lg:hover,
.ge-hover-lift-lg:focus-visible {
  transform: translateY(-4px);
}

/* --- Scale (subtle defaults, 1.02 base) --- */

.ge-hover-scale {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-scale:hover,
.ge-hover-scale:focus-visible {
  transform: scale(1.02);
}

.ge-hover-scale-sm {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-scale-sm:hover,
.ge-hover-scale-sm:focus-visible {
  transform: scale(1.01);
}

.ge-hover-scale-lg {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-scale-lg:hover,
.ge-hover-scale-lg:focus-visible {
  transform: scale(1.04);
}

/* --- Shrink (press effect) --- */

.ge-hover-shrink {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-shrink:hover,
.ge-hover-shrink:focus-visible {
  transform: scale(0.98);
}

.ge-hover-shrink:active {
  transform: scale(0.96);
}

/* --- Glow --- */

.ge-hover-glow {
  transition: box-shadow var(--ge-duration-normal, 200ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-glow:hover,
.ge-hover-glow:focus-visible {
  box-shadow: 0 0 8px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.35),
              0 0 20px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.15);
}

.ge-hover-glow-magenta {
  transition: box-shadow var(--ge-duration-normal, 200ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-glow-magenta:hover,
.ge-hover-glow-magenta:focus-visible {
  box-shadow: 0 0 8px rgba(var(--ge-accent-magenta-rgb, 255, 0, 170), 0.35),
              0 0 20px rgba(var(--ge-accent-magenta-rgb, 255, 0, 170), 0.15);
}

.ge-hover-glow-yellow {
  transition: box-shadow var(--ge-duration-normal, 200ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-glow-yellow:hover,
.ge-hover-glow-yellow:focus-visible {
  box-shadow: 0 0 8px rgba(255, 230, 0, 0.35),
              0 0 20px rgba(255, 230, 0, 0.15);
}

/* --- Brightness --- */

.ge-hover-bright {
  transition: filter var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-hover-bright:hover,
.ge-hover-bright:focus-visible {
  filter: brightness(1.1);
}

.ge-hover-dim {
  transition: filter var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-hover-dim:hover,
.ge-hover-dim:focus-visible {
  filter: brightness(0.85);
}

/* --- Rotate (subtle, 1.5deg) --- */

.ge-hover-rotate {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-rotate:hover,
.ge-hover-rotate:focus-visible {
  transform: rotate(1.5deg);
}

.ge-hover-rotate-lg {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-rotate-lg:hover,
.ge-hover-rotate-lg:focus-visible {
  transform: rotate(3deg);
}

/* --- Border accent --- */

.ge-hover-border-accent {
  transition: border-color var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-hover-border-accent:hover,
.ge-hover-border-accent:focus-visible {
  border-color: var(--ge-cyan, #00f0ff);
}

.ge-hover-border-magenta {
  transition: border-color var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-hover-border-magenta:hover,
.ge-hover-border-magenta:focus-visible {
  border-color: var(--ge-magenta, #ff00aa);
}

/* --- Text color --- */

.ge-hover-text-cyan {
  transition: color var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-hover-text-cyan:hover,
.ge-hover-text-cyan:focus-visible {
  color: var(--ge-cyan, #00f0ff);
}

.ge-hover-text-magenta {
  transition: color var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-hover-text-magenta:hover,
.ge-hover-text-magenta:focus-visible {
  color: var(--ge-magenta, #ff00aa);
}

/* --- Background --- */

.ge-hover-bg-subtle {
  transition: background-color var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-hover-bg-subtle:hover,
.ge-hover-bg-subtle:focus-visible {
  background-color: rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.05);
}

.ge-hover-bg-medium {
  transition: background-color var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-hover-bg-medium:hover,
.ge-hover-bg-medium:focus-visible {
  background-color: rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.1);
}

/* --- Combined lift + glow --- */

.ge-hover-lift-glow {
  transition:
    transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1),
    box-shadow var(--ge-duration-normal, 200ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-lift-glow:hover,
.ge-hover-lift-glow:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.2),
              0 0 8px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.1);
}

/* --- Combined scale + glow --- */

.ge-hover-scale-glow {
  transition:
    transform var(--ge-duration-fast, 150ms) cubic-bezier(0, 0, 0.2, 1),
    box-shadow var(--ge-duration-normal, 200ms) cubic-bezier(0, 0, 0.2, 1);
}
.ge-hover-scale-glow:hover,
.ge-hover-scale-glow:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 0 8px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.25),
              0 0 20px rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.1);
}

/* --- Focus-visible ring (keyboard a11y) --- */

.ge-focus-ring:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: 2px;
  transition: outline-offset var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.ge-focus-ring-inset:focus-visible {
  outline: 2px solid var(--ge-cyan, #00f0ff);
  outline-offset: -2px;
}


/* ============================================================
   14. ACTIVE / PRESSED STATE UTILITIES
   ============================================================ */

.ge-active-press {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-active-press:active {
  transform: scale(0.97);
}

.ge-active-press-sm {
  transition: transform var(--ge-duration-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-active-press-sm:active {
  transform: scale(0.99);
}


/* ============================================================
   15. SKELETON LOADER UTILITIES
   ============================================================ */

.ge-skeleton {
  background: linear-gradient(
    90deg,
    rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.04) 25%,
    rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.08) 50%,
    rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.04) 75%
  );
  background-size: 200% 100%;
  animation: ge-skeleton 1.5s linear infinite;
  border-radius: var(--ge-radius-sm, 4px);
}

.ge-skeleton-text {
  height: 1em;
  border-radius: var(--ge-radius-xs, 2px);
}

.ge-skeleton-circle {
  border-radius: 50%;
}

.ge-skeleton-rect {
  border-radius: var(--ge-radius-md, 8px);
}


/* ============================================================
   16. LOADING SPINNER UTILITIES
   ============================================================ */

.ge-spinner {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border: 2px solid rgba(var(--ge-accent-cyan-rgb, 0, 240, 255), 0.2);
  border-top-color: var(--ge-cyan, #00f0ff);
  border-radius: 50%;
  animation: ge-spin 750ms linear infinite;
}

.ge-spinner-sm {
  width: 1em;
  height: 1em;
  border-width: 1.5px;
}

.ge-spinner-lg {
  width: 2em;
  height: 2em;
  border-width: 3px;
}


/* ============================================================
   17. PREFERS-REDUCED-MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* Global kill switch for animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reset scroll-triggered elements to visible */
  [data-ge-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-ge-animate].ge-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable hover transforms */
  .ge-hover-lift:hover,
  .ge-hover-lift-sm:hover,
  .ge-hover-lift-lg:hover,
  .ge-hover-scale:hover,
  .ge-hover-scale-sm:hover,
  .ge-hover-scale-lg:hover,
  .ge-hover-shrink:hover,
  .ge-hover-rotate:hover,
  .ge-hover-rotate-lg:hover,
  .ge-hover-lift-glow:hover,
  .ge-hover-scale-glow:hover {
    transform: none !important;
  }

  /* Disable active presses */
  .ge-active-press:active,
  .ge-active-press-sm:active {
    transform: none !important;
  }

  /* Disable continuous animations explicitly */
  .ge-animate-spin,
  .ge-animate-rotate,
  .ge-animate-ping,
  .ge-animate-pulse,
  .ge-animate-pulse-soft,
  .ge-animate-bounce,
  .ge-animate-float,
  .ge-animate-glow,
  .ge-animate-glow-magenta,
  .ge-animate-glow-yellow,
  .ge-animate-border-glow,
  .ge-animate-border-glow-magenta,
  .ge-animate-shimmer,
  .ge-animate-breathe,
  .ge-animate-marquee,
  .ge-animate-glitch {
    animation: none !important;
  }

  /* Disable component animations */
  .ge-animate-dialog-in,
  .ge-animate-dialog-out,
  .ge-animate-drawer-in-right,
  .ge-animate-drawer-out-right,
  .ge-animate-drawer-in-left,
  .ge-animate-drawer-out-left,
  .ge-animate-drawer-in-top,
  .ge-animate-drawer-out-top,
  .ge-animate-drawer-in-bottom,
  .ge-animate-drawer-out-bottom,
  .ge-animate-toast-in,
  .ge-animate-toast-out,
  .ge-animate-dropdown-in,
  .ge-animate-dropdown-out,
  .ge-animate-accordion-open,
  .ge-animate-accordion-close,
  .ge-animate-overlay-in,
  .ge-animate-overlay-out,
  .ge-animate-tooltip-in,
  .ge-animate-tooltip-out,
  .ge-animate-tab-in,
  .ge-animate-tab-out {
    animation-duration: 0.01ms !important;
    animation-fill-mode: both !important;
  }

  /* Skeleton loaders: stop shimmer but keep static bg */
  .ge-skeleton {
    animation: none !important;
    background-size: 100% 100% !important;
  }

  /* Spinner: reduce to opacity pulse */
  .ge-spinner {
    animation: none !important;
    opacity: 0.6;
  }

  /* Disable hover brightness/filter */
  .ge-hover-bright:hover,
  .ge-hover-dim:hover {
    filter: none !important;
  }
}