/* ============================================
   TEYMENSEL WHITEBOARD — ANIMATIONS
   ============================================ */

/* ── Fade In ── */
@keyframes tw-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes tw-fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Slide In ── */
@keyframes tw-slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

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

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

/* ── Scale ── */
@keyframes tw-scaleIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes tw-popIn {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Bounce ── */
@keyframes tw-bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -20px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, -3px, 0);
  }
}

/* ── Shake (Timer alarm) ── */
@keyframes tw-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ── Ripple ── */
@keyframes tw-ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* ── Laser Pointer Fade ── */
@keyframes tw-laserFade {
  0% { opacity: 1; stroke-width: 3; }
  70% { opacity: 0.5; stroke-width: 2; }
  100% { opacity: 0; stroke-width: 0; }
}

/* ── Cursor Pulse (Collaboration) ── */
@keyframes tw-cursorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Rotate (Loading) ── */
@keyframes tw-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Glow Pulse ── */
@keyframes tw-glowPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(108, 92, 231, 0.3); }
  50% { box-shadow: 0 0 20px rgba(108, 92, 231, 0.6); }
}

/* ── Toast Notification ── */
@keyframes tw-toastIn {
  from {
    transform: translateX(100%) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes tw-toastOut {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(100%) scale(0.9);
    opacity: 0;
  }
}

/* ── Sticky Note Drop ── */
@keyframes tw-stickyDrop {
  0% {
    transform: scale(0.3) rotate(-5deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.05) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ── Rainbow Pen Hue Cycle ── */
@keyframes tw-rainbowCycle {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ── Utility Classes ── */
.tw-anim-fadeIn { animation: tw-fadeIn var(--tw-transition-normal) forwards; }
.tw-anim-fadeInUp { animation: tw-fadeInUp var(--tw-transition-normal) forwards; }
.tw-anim-fadeInDown { animation: tw-fadeInDown var(--tw-transition-normal) forwards; }
.tw-anim-fadeInScale { animation: tw-fadeInScale var(--tw-transition-normal) forwards; }
.tw-anim-popIn { animation: tw-popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.tw-anim-slideInRight { animation: tw-slideInRight var(--tw-transition-slow) forwards; }
.tw-anim-slideInBottom { animation: tw-slideInBottom var(--tw-transition-slow) forwards; }
.tw-anim-bounce { animation: tw-bounce 0.8s; }
.tw-anim-shake { animation: tw-shake 0.6s ease-in-out; }
.tw-anim-stickyDrop { animation: tw-stickyDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.tw-anim-glowPulse { animation: tw-glowPulse 2s ease-in-out infinite; }

/* ── Ripple Effect ── */
.tw-ripple {
  position: relative;
  overflow: hidden;
}

.tw-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
}

.tw-ripple:active::after {
  animation: tw-ripple 0.4s ease-out;
}

/* ── Hover Scale ── */
.tw-hover-scale {
  transition: transform var(--tw-transition-fast);
}

.tw-hover-scale:hover {
  transform: scale(1.05);
}

/* ── Hover Lift ── */
.tw-hover-lift {
  transition: transform var(--tw-transition-normal), box-shadow var(--tw-transition-normal);
}

.tw-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--tw-shadow-lg);
}

/* ── Transition Helpers ── */
.tw-transition-all {
  transition: all var(--tw-transition-normal);
}

.tw-transition-fast {
  transition: all var(--tw-transition-fast);
}

/* ── Reduce Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}