/* ============================================================
   MODERNE UI-MICRO-INTERAKTIONEN
   ============================================================ */

/* Tool-Buttons: Sanftes Hineingleiten + Hover-Aktivierung */
.tool-btn {
  position: relative; overflow: hidden;
}
.tool-btn::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--brand); transform: scaleY(0);
  transform-origin: bottom; transition: transform .2s ease;
  border-radius: 0 2px 2px 0;
}
.tool-btn.active::after { transform: scaleY(1); }
.tool-btn:not(.active)::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(249,115,22,0.08), transparent 60%);
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.tool-btn:hover::before { opacity: 1; }

/* Lib-Sidebar: Slide-in beim aktivieren */
.lib-side-btn {
  position: relative;
  overflow: hidden;
}
.lib-side-btn::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; background: var(--brand);
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.lib-side-btn.active::before { width: 3px; }

/* Header-Logo: dezente Pulse-Animation */
.header-logo .logo-icon {
  position: relative;
}
.header-logo .logo-icon::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: var(--r-md);
  border: 2px solid var(--brand);
  opacity: 0; pointer-events: none;
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { opacity: 0; transform: scale(.95); }
  50%      { opacity: 0.4; transform: scale(1.1); }
}

/* Buttons: Generischer Click-Ripple */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute;
  top: var(--ry, 50%); left: var(--rx, 50%);
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.45);
  border-radius: 50%;
  pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(1);
}
.btn.btn-rippling::after {
  animation: btnRipple .55s ease-out;
}
@keyframes btnRipple {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(80); }
}

/* Play-Card: Sanftes Anheben beim Hover */
.play-card {
  transition: transform .18s ease, box-shadow .18s, border-color .18s;
}
.play-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-glow);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* Toolbar: subtle slide-in beim ersten Render */
#toolbar { animation: toolbarIn .35s ease backwards; }
@keyframes toolbarIn { from { transform: translateX(-12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

#props-panel { animation: propsIn .35s ease backwards; animation-delay: .05s; }
@keyframes propsIn { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

#routelib-strip { animation: stripIn .35s ease backwards; animation-delay: .03s; }
@keyframes stripIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Field: subtle fade-in */
#field-svg { animation: fieldIn .45s ease backwards; animation-delay: .1s; }
@keyframes fieldIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

/* Input focus glow */
.input-text:focus, #play-name-input:focus,
input[type="number"]:focus, input[type="text"]:focus,
textarea:focus, select:focus {
  box-shadow: 0 0 0 2px var(--brand-glow);
}

/* Toast: subtler bounce-in */
#toast-container > div, .toast {
  animation: toastIn .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toastIn {
  from { transform: translateY(20px) scale(.95); opacity: 0; }
  to   { transform: translateY(0)     scale(1);   opacity: 1; }
}

/* Lib-Page-Card: stagger-in via animation-delay (gesetzt im HTML) */

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}