/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gentleFloat {
  0%, 100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(10px, -15px);
  }
  66% {
    transform: translate(-8px, 10px);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s ease-out both;
}

.animate-float {
  animation: gentleFloat 6s ease-in-out infinite;
}

.animate-breathe {
  animation: breathe 8s ease-in-out infinite;
}

.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

.animation-delay-600 {
  animation-delay: 600ms;
}

.animation-delay-800 {
  animation-delay: 800ms;
}

.animation-delay-1000 {
  animation-delay: 1000ms;
}

/* Onboarding Components */
.onboarding-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.125rem;
  border-radius: 9999px;
  border: 1.5px solid oklch(from var(--color-taupe) l c h / 0.25);
  background: var(--color-cream);
  color: var(--color-warm-brown);
  font-size: 0.875rem;
  font-weight: 450;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.onboarding-chip:hover {
  border-color: oklch(from var(--color-terracotta) l c h / 0.4);
}

.onboarding-chip[data-selected="true"] {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: white;
  box-shadow: 0 2px 8px oklch(from var(--color-terracotta) l c h / 0.2);
}

.onboarding-chip[data-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.onboarding-card {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.25rem;
  border-radius: 0.875rem;
  border: 1.5px solid oklch(from var(--color-taupe) l c h / 0.18);
  background: white;
  color: var(--color-warm-brown);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.onboarding-card:hover {
  border-color: oklch(from var(--color-terracotta) l c h / 0.35);
  background: oklch(from var(--color-terracotta) l c h / 0.02);
}

.onboarding-card[data-selected="true"] {
  border-color: var(--color-terracotta);
  background: oklch(from var(--color-terracotta) l c h / 0.04);
  box-shadow: inset 3px 0 0 var(--color-terracotta);
}

.onboarding-card[data-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.onboarding-radio-card {
  padding: 1rem 1.25rem;
  border-radius: 0.875rem;
  border: 1.5px solid oklch(from var(--color-taupe) l c h / 0.18);
  background: white;
  color: var(--color-warm-brown);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.onboarding-radio-card:hover {
  border-color: oklch(from var(--color-terracotta) l c h / 0.35);
}

.onboarding-radio-card[data-selected="true"] {
  border-color: var(--color-terracotta);
  background: oklch(from var(--color-terracotta) l c h / 0.04);
}

.onboarding-radio-card[data-selected="true"] .onboarding-radio-dot {
  border-color: var(--color-terracotta);
  background: var(--color-terracotta);
  box-shadow: inset 0 0 0 3px white;
}

.onboarding-radio-dot {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  border: 2px solid oklch(from var(--color-taupe) l c h / 0.35);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.onboarding-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 3rem;
  cursor: pointer;
  background: var(--color-terracotta);
  color: white;
  font-weight: 500;
  font-size: 0.9375rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px oklch(from var(--color-terracotta) l c h / 0.15);
}

.onboarding-btn:hover:not(:disabled) {
  background: var(--color-terracotta-dark);
  box-shadow: 0 4px 12px oklch(from var(--color-terracotta) l c h / 0.2);
}

.onboarding-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.onboarding-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Check-in Components */
.checkin-rating-card {
  display: flex;
  align-items: center;
  padding: 1.125rem 1.5rem;
  border-radius: 1rem;
  border: 1.5px solid oklch(from var(--color-taupe) l c h / 0.15);
  background: white;
  color: var(--color-warm-brown);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.checkin-rating-card:hover {
  border-color: oklch(from var(--color-terracotta) l c h / 0.3);
  background: oklch(from var(--color-terracotta) l c h / 0.02);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(from var(--color-charcoal) l c h / 0.04);
}

.checkin-rating-card:active {
  transform: scale(0.98);
}

/* Strategy checkbox styling */
.onboarding-card[data-selected="true"] .check-box {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
}

.onboarding-card[data-selected="true"] .check-icon {
  opacity: 1;
}

/* Thinking dots animation */
@keyframes thinkingPulse {
  0%, 80%, 100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.thinking-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--color-terracotta);
  opacity: 0.25;
  animation: thinkingPulse 1.4s ease-in-out infinite;
}

.thinking-dot.animation-delay-0 {
  animation-delay: 0ms;
}

.thinking-dot.animation-delay-200 {
  animation-delay: 200ms;
}

.thinking-dot.animation-delay-400 {
  animation-delay: 400ms;
}