/* Material-inspired motion & ripple */
:root {
  --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --md-elevation-2: 0 4px 8px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
  --md-elevation-3: 0 8px 16px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.12);
  --md-duration-short: 180ms;
  --md-duration-medium: 320ms;
  --md-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Elevation utilities */
.md-elevation-1 { box-shadow: var(--md-elevation-1); }
.md-elevation-2 { box-shadow: var(--md-elevation-2); }
.md-elevation-3 { box-shadow: var(--md-elevation-3); }

/* Subtle scale on hover/focus */
.md-interactive { transition: transform var(--md-duration-short) var(--md-ease), box-shadow var(--md-duration-short) var(--md-ease); }
.md-interactive:hover { transform: translateY(-2px); }
.md-interactive:focus { transform: translateY(-2px); outline: none; }

/* Ripple base */
.md-ripple-container { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.md-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,0.35); animation: md-ripple-expand var(--md-duration-medium) var(--md-ease) forwards; }
@keyframes md-ripple-expand { to { transform: scale(1); opacity: 0; } }

/* Apply to buttons and cards */
.btn, .btn-google, .room-card, .login-card, .achievement.card { position: relative; }
.btn.md-rippleable, .room-card.md-rippleable, .login-card.md-rippleable, .achievement.card.md-rippleable { overflow: hidden; }

/* Entrance animation */
@keyframes md-enter-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.md-enter { animation: md-enter-up var(--md-duration-medium) var(--md-ease) both; }
.md-enter-stagger > * { opacity: 0; transform: translateY(8px); }
.md-enter-stagger > *.md-enter { opacity: 1; transform: translateY(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .md-interactive, .md-enter, .md-elevation-1, .md-elevation-2, .md-elevation-3 { transition: none !important; animation: none !important; transform: none !important; box-shadow: none !important; }
}

/* Helper for small screens */
@media (max-width: 576px) {
  .md-interactive:hover { transform: none; }
}