animations.css

/* Islands Dark — Living Glass
   Ambient aurora light, liquid motion, breathing panels */

/* ===== Animatable Custom Properties ===== */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ===== Keyframes ===== */

/* Aurora: colored light traveling along panel borders */
@keyframes islands-aurora {
  to { --border-angle: 360deg; }
}

/* Activity bar: liquid drop funnels into the new divot */
@keyframes islands-drop-morph {
  0% {
    transform: scaleX(0.45) scaleY(2);
    opacity: 0;
    border-radius: 35%;
  }
  20% {
    opacity: 0.7;
    border-radius: 40%;
    transform: scaleX(0.5) scaleY(1.5);
  }
  50% {
    transform: scaleX(1.2) scaleY(0.8);
    opacity: 1;
    border-radius: 50%;
  }
  70% { transform: scaleX(0.92) scaleY(1.08); }
  85% { transform: scaleX(1.04) scaleY(0.96); }
  100% {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
    border-radius: 50%;
  }
}

/* Soft breathing glow on active indicator */
@keyframes islands-breathe {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(13,188,121,0)); }
  50% { filter: drop-shadow(0 0 8px rgba(13,188,121,0.3)); }
}

/* Widget entrance — lift into place */
@keyframes islands-emerge {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Notification entrance — slide + scale from right */
@keyframes islands-notify {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}


/* =============================================================
   AURORA BORDERS — Living Glass
   A subtle colored light continuously travels along panel edges,
   making the glass borders feel alive.
   ============================================================= */

.part.sidebar::after,
.part.editor::after,
.part.auxiliarybar::after,
.part.panel.bottom::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    transparent 20%,
    rgba(13,188,121,0.35) 27%,
    rgba(125,200,160,0.2) 33%,
    rgba(13,188,121,0.12) 38%,
    transparent 45%,
    transparent 100%
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  pointer-events: none !important;
  z-index: 999 !important;
  animation: islands-aurora 8s linear infinite !important;
}

/* Stagger panels so the light is out of phase */
.part.editor::after {
  animation-delay: -2s !important;
}
.part.auxiliarybar::after {
  animation-delay: -4s !important;
}
.part.panel.bottom::after {
  animation-delay: -6s !important;
}


/* =============================================================
   ACTIVITY BAR — Liquid Motion
   ============================================================= */

/* Drop morph when switching, then settle into a breathing glow */
.part.activitybar .action-item.checked .action-label {
  animation:
    islands-drop-morph 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    islands-breathe 4s ease-in-out 0.5s infinite !important;
}

/* Hover glow on all activity bar icons */
.part.activitybar .action-item .action-label {
  transition: filter 0.3s ease !important;
}
.part.activitybar .action-item:hover .action-label {
  filter: drop-shadow(0 0 5px rgba(13,188,121,0.25)) !important;
}


/* =============================================================
   WIDGET ENTRANCES
   ============================================================= */

/* Command palette — lifts into view */
.quick-input-widget {
  animation: islands-emerge 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Notifications — slide from right with scale */
.notification-toast {
  animation: islands-notify 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Dialog boxes */
.monaco-dialog-box {
  animation: islands-emerge 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hover tooltips */
.monaco-hover {
  animation: islands-emerge 0.15s ease-out !important;
}

/* Autocomplete */
.editor-widget.suggest-widget {
  animation: islands-emerge 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Notification center */
.notifications-center {
  animation: islands-emerge 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}