/* DB_INTERACTIONS_CSS_START
   Purpose: subtle, professional microinteractions + scroll reveal
   CSP-safe: external stylesheet only
*/

:root{
  --db-ease: cubic-bezier(.2,.8,.2,1);
  --db-dur-fast: 140ms;
  --db-dur: 260ms;
  --db-shadow-soft: 0 10px 30px rgba(0,0,0,.10);
  --db-shadow-hover: 0 18px 46px rgba(0,0,0,.16);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Buttons: hover + press */
.btn-login, .btn-secondary, .btn-compact, button, .db-btn{
  transition: transform var(--db-dur-fast) var(--db-ease), box-shadow var(--db-dur-fast) var(--db-ease), filter var(--db-dur-fast) var(--db-ease);
  will-change: transform;
}
.btn-login:hover, .btn-secondary:hover, .btn-compact:hover, button:hover, .db-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.btn-login:active, .btn-secondary:active, .btn-compact:active, button:active, .db-btn:active{
  transform: translateY(0px) scale(0.99);
}

/* Cards / features: lift on hover */
.card, .feature, .panel-card, .db-login-card{
  transition: transform var(--db-dur) var(--db-ease), box-shadow var(--db-dur) var(--db-ease);
}
.card:hover, .feature:hover, .panel-card:hover, .db-login-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--db-shadow-hover);
}

/* Scroll reveal base */
.db-reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--db-ease), transform 520ms var(--db-ease);
}
.db-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Optional: subtle focus ring for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid rgba(48,79,254,.55);
  outline-offset: 2px;
}

/* Optional: active section link (if nav anchors exist) */
a.db-active-section{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* DB_INTERACTIONS_CSS_END */