/* Screen Transitions & Animations */

/* ──────────────────────────────────────
   Screen slide transitions
────────────────────────────────────── */

.screen {
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  transform: translateX(0);
}

/* Entering from right */
.screen.enter-from-right {
  animation: slideInRight var(--transition-slow) forwards;
}

/* Entering from left */
.screen.enter-from-left {
  animation: slideInLeft var(--transition-slow) forwards;
}

/* Exiting to left */
.screen.exit-to-left {
  animation: slideOutLeft var(--transition-slow) forwards;
}

/* Exiting to right */
.screen.exit-to-right {
  animation: slideOutRight var(--transition-slow) forwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* ──────────────────────────────────────
   Fade in for content
────────────────────────────────────── */

.fade-in {
  animation: fadeIn var(--transition-slow) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────
   Onboarding question transitions
────────────────────────────────────── */

.question-enter {
  animation: questionSlideIn 280ms ease-out forwards;
}

.question-exit {
  animation: questionSlideOut 200ms ease-in forwards;
}

@keyframes questionSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes questionSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-20px); }
}

/* ──────────────────────────────────────
   Toast enter / exit
────────────────────────────────────── */

.toast {
  animation: toastIn 200ms ease-out forwards;
}

.toast.exiting {
  animation: toastOut 200ms ease-in forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
}

/* ──────────────────────────────────────
   Content screen: iframe / card reveal
────────────────────────────────────── */

.content-reveal {
  animation: contentReveal 350ms ease-out forwards;
}

@keyframes contentReveal {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ──────────────────────────────────────
   Wander button pulse (triggered on click)
────────────────────────────────────── */

.wander-btn.fired {
  animation: wanderFire 250ms ease-out forwards;
}

@keyframes wanderFire {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}

/* ──────────────────────────────────────
   Toolbar slide up on screen transition
────────────────────────────────────── */

.toolbar {
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.toolbar.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────
   Tag pill pop animation
────────────────────────────────────── */

.tag-pill.just-added {
  animation: tagPop 250ms var(--transition-bounce) forwards;
}

@keyframes tagPop {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ──────────────────────────────────────
   Like / save button burst
────────────────────────────────────── */

.icon-btn.burst {
  animation: iconBurst 300ms var(--transition-bounce) forwards;
}

@keyframes iconBurst {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ──────────────────────────────────────
   Skeleton shimmer (loading states)
────────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-alt) 25%,
    var(--color-bg) 50%,
    var(--color-bg-alt) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius-sm);
}

@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}