/* ========================================= */
/* DROPPLY HERO ANIMATION */
/* Visual demonstration of thought capture and organization */
/* ========================================= */

/* Main animation container */
.dropply-visual-animation {
  position: relative;
  width: 100%;
  max-width: 500px;
  min-height: 600px;
  margin: 0 auto;
  padding: var(--space-xl);
  background: var(--paper);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-paper-lg);
  overflow: hidden;
}

/* ========================================= */
/* SCENE 1: FOCUSED ON TASK */
/* ========================================= */

.scene-focus {
  position: relative;
  margin-bottom: var(--space-lg);
  opacity: 1;
}

.task-card {
  background: linear-gradient(135deg, var(--primary-subtle) 0%, var(--background-pure) 100%);
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.task-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
}

.task-title {
  font-size: var(--font-base);
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.focus-indicator {
  height: 8px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.focus-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-full);
  width: 100%;
  animation: focusBarDrain 14s ease-in-out infinite;
}

/* ========================================= */
/* DROPPLY CONTAINER - Wraps around thoughts */
/* ========================================= */

.dropply-status {
  position: relative;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-paper-md);
  margin-bottom: var(--space-lg);
}

/* Dropply header - always visible */
.dropply-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.status-icon {
  font-size: 1.5rem;
  display: inline-block;
  animation: statusIconSpin 14s ease-in-out infinite;
}

.status-icon::before {
  animation: statusIconChange 14s step-end infinite;
}

.status-text {
  font-size: var(--font-sm);
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
}

.status-text::before {
  content: "ready to capture thoughts";
  animation: statusTextChange 14s step-end infinite;
}

.status-text::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  margin-left: var(--space-xs);
  opacity: 0;
  animation: statusDotPulse 14s ease-in-out infinite;
}

/* ========================================= */
/* THOUGHTS CONTAINER - Inside Dropply */
/* ========================================= */

.thoughts-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 200px;
  padding: var(--space-sm);
  /*background: rgba(255, 255, 255, 0.1);*/
  border-radius: var(--radius-md);
}

.thought-item {
  position: relative;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  opacity: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  overflow: hidden;
}

/* Processing shimmer effect */
.thought-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: thoughtShimmer 14s ease-in-out infinite;
  pointer-events: none;
}

/* Thought 1 Animation */
.thought-1 {
  animation: thought1States 14s ease-in-out infinite;
}

.thought-1 .thought-icon::before {
  content: "💭";
  animation: thought1Icon 14s step-end infinite;
}

.thought-1 .thought-status::before {
  animation: thought1Status 14s step-end infinite;
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.thought-1 .thought-action-preview {
  animation: thought1ActionPreview 14s ease-in-out infinite;
}

/* Thought 2 Animation */
.thought-2 {
  animation: thought2States 14s ease-in-out infinite;
}

.thought-2 .thought-icon::before {
  content: "💭";
  animation: thought2Icon 14s step-end infinite;
}

.thought-2 .thought-status::before {
  animation: thought2Status 14s step-end infinite;
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.thought-2 .thought-action-preview {
  animation: thought2ActionPreview 14s ease-in-out infinite;
}

/* Thought 3 Animation */
.thought-3 {
  animation: thought3States 14s ease-in-out infinite;
}

.thought-3 .thought-icon::before {
  content: "💭";
  animation: thought3Icon 14s step-end infinite;
}

.thought-3 .thought-status::before {
  animation: thought3Status 14s step-end infinite;
  font-size: var(--font-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.thought-3 .thought-action-preview {
  animation: thought3ActionPreview 14s ease-in-out infinite;
}

.thought-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.thought-icon {
  font-size: var(--font-lg);
  flex-shrink: 0;
}

.thought-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.thought-text {
  font-size: var(--font-sm);
  color: var(--text-primary);
  font-weight: 600;
}

.thought-action-preview {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.3;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease-out;
}

.thought-status {
  font-size: var(--font-xs);
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Add mini action indicator */
.thought-status::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: transparent;
}

/* ========================================= */
/* RESULT MESSAGE */
/* ========================================= */

.result-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--success) 0%, #6B9561 100%);
  border-radius: var(--radius-lg);
  color: white;
  opacity: 0;
  animation: resultMessageShow 14s ease-in-out infinite;
  box-shadow: var(--shadow-paper-md);
}

.result-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.result-text {
  font-size: var(--font-sm);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

/* ========================================= */
/* KEYFRAME ANIMATIONS */
/* Total Duration: 14 seconds */
/* ========================================= */

/* Focus Bar Drains When Distracted */
@keyframes focusBarDrain {
  0%, 7% {
    width: 100%;
  }
  14%, 78% {
    width: 20%;
  }
  85%, 100% {
    width: 100%;
  }
}

/* ===== DROPPLY STATUS CHANGES ===== */

/* Status icon changes */
@keyframes statusIconChange {
  0%, 6% { content: "📥"; }
  7%, 20% { content: "📥"; }
  21%, 49% { content: "🤖"; }
  50%, 84% { content: "✨"; }
  85%, 100% { content: "📥"; }
}

/* Spin the icon during processing */
@keyframes statusIconSpin {
  0%, 20% {
    transform: rotate(0deg);
  }
  21%, 49% {
    transform: rotate(360deg);
    animation-timing-function: linear;
  }
  50%, 100% {
    transform: rotate(0deg);
  }
}

/* Status text changes */
@keyframes statusTextChange {
  0%, 6% {
    content: "ready to capture thoughts";
  }
  7%, 20% {
    content: "capturing thoughts";
  }
  21%, 29% {
    content: "AI analyzing...";
  }
  30%, 39% {
    content: "creating action plan...";
  }
  40%, 49% {
    content: "setting reminders...";
  }
  50%, 84% {
    content: "all organized ✨";
  }
  85%, 100% {
    content: "ready to capture thoughts";
  }
}

/* Pulsing dot only shows during processing */
@keyframes statusDotPulse {
  0%, 20% {
    opacity: 0;
  }
  21%, 49% {
    animation: dotPulse 1.5s ease-in-out infinite;
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes dotPulse {
  0%, 50% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  25% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ===== THOUGHT 1 STATE CHANGES ===== */

@keyframes thought1States {
  0% {
    opacity: 0;
    background: transparent;
    border: 2px solid transparent;
  }
  /* INVASIVE STATE (Red) */
  7% {
    opacity: 1;
    background: #FFE5E5;
    border: 2px solid #EF5350;
  }
  7%, 21% {
    opacity: 1;
    background: #FFE5E5;
    border: 2px solid #EF5350;
  }
  /* CAPTURED STATE (Blue) */
  21.5%, 50% {
    opacity: 1;
    background: #E3F2FD;
    border: 2px solid #64B5F6;
  }
  /* ORGANIZED STATE (Green) */
  50.5%, 85% {
    opacity: 1;
    background: #E8F5E9;
    border: 2px solid #66BB6A;
  }
  92%, 100% {
    opacity: 0;
    background: transparent;
    border: 2px solid transparent;
  }
}

@keyframes thought1Icon {
  0%, 50% { content: "💭"; }
  50.5%, 100% { content: "🛒"; }
}

@keyframes thought1Status {
  0%, 50% {
    content: "";
    background: transparent;
    color: transparent;
  }
  50.5%, 100% {
    content: "✓ Planned";
    background: white;
    color: #66BB6A;
  }
}

@keyframes thought1ActionPreview {
  0%, 50% {
    content: "";
    opacity: 0;
    max-height: 0;
  }
  52%, 85% {
    content: "📋 Created shopping list with 8 items";
    opacity: 1;
    max-height: 40px;
  }
  92%, 100% {
    content: "";
    opacity: 0;
    max-height: 0;
  }
}

/* ===== THOUGHT 2 STATE CHANGES ===== */

@keyframes thought2States {
  0%, 5% {
    opacity: 0;
    background: transparent;
    border: 2px solid transparent;
  }
  /* INVASIVE STATE (Red) */
  9% {
    opacity: 1;
    background: #FFE5E5;
    border: 2px solid #EF5350;
  }
  9%, 21% {
    opacity: 1;
    background: #FFE5E5;
    border: 2px solid #EF5350;
  }
  /* CAPTURED STATE (Blue) */
  21.5%, 52% {
    opacity: 1;
    background: #E3F2FD;
    border: 2px solid #64B5F6;
  }
  /* ORGANIZED STATE (Green) */
  52.5%, 85% {
    opacity: 1;
    background: #E8F5E9;
    border: 2px solid #66BB6A;
  }
  92%, 100% {
    opacity: 0;
    background: transparent;
    border: 2px solid transparent;
  }
}

@keyframes thought2Icon {
  0%, 52% { content: "💭"; }
  52.5%, 100% { content: "🦷"; }
}

@keyframes thought2Status {
  0%, 52% {
    content: "";
    background: transparent;
    color: transparent;
  }
  52.5%, 100% {
    content: "✓ Reminder Set";
    background: white;
    color: #66BB6A;
  }
}

@keyframes thought2ActionPreview {
  0%, 52% {
    content: "";
    opacity: 0;
    max-height: 0;
  }
  54%, 85% {
    content: "⏰ Tomorrow 9 AM · Added to calendar";
    opacity: 1;
    max-height: 40px;
  }
  92%, 100% {
    content: "";
    opacity: 0;
    max-height: 0;
  }
}

/* ===== THOUGHT 3 STATE CHANGES ===== */

@keyframes thought3States {
  0%, 7% {
    opacity: 0;
    background: transparent;
    border: 2px solid transparent;
  }
  /* INVASIVE STATE (Red) */
  11% {
    opacity: 1;
    background: #FFE5E5;
    border: 2px solid #EF5350;
  }
  11%, 21% {
    opacity: 1;
    background: #FFE5E5;
    border: 2px solid #EF5350;
  }
  /* CAPTURED STATE (Blue) */
  21.5%, 54% {
    opacity: 1;
    background: #E3F2FD;
    border: 2px solid #64B5F6;
  }
  /* ORGANIZED STATE (Green) */
  54.5%, 85% {
    opacity: 1;
    background: #E8F5E9;
    border: 2px solid #66BB6A;
  }
  92%, 100% {
    opacity: 0;
    background: transparent;
    border: 2px solid transparent;
  }
}

@keyframes thought3Icon {
  0%, 54% { content: "💭"; }
  54.5%, 100% { content: "🏖️"; }
}

@keyframes thought3Status {
  0%, 54% {
    content: "";
    background: transparent;
    color: transparent;
  }
  54.5%, 100% {
    content: "✓ Research Plan";
    background: white;
    color: #66BB6A;
  }
}

@keyframes thought3ActionPreview {
  0%, 54% {
    content: "";
    opacity: 0;
    max-height: 0;
  }
  56%, 85% {
    content: "🔍 3 destinations researched · Budget saved";
    opacity: 1;
    max-height: 40px;
  }
  92%, 100% {
    content: "";
    opacity: 0;
    max-height: 0;
  }
}

/* ===== RESULT MESSAGE ===== */

@keyframes resultMessageShow {
  0%, 80% {
    opacity: 0;
    transform: scale(0.92);
  }
  84%, 92% {
    opacity: 1;
    transform: scale(1);
  }
  96%, 100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Shimmer effect during processing phase */
@keyframes thoughtShimmer {
  0%, 20% {
    left: -100%;
  }
  21% {
    left: -100%;
  }
  25%, 30% {
    left: 100%;
  }
  35% {
    left: -100%;
  }
  38%, 43% {
    left: 100%;
  }
  48% {
    left: -100%;
  }
  49%, 100% {
    left: -100%;
  }
}