/* ============================================================
   SAGE — Custom CSS (animations & utilities not in Tailwind)
   ============================================================ */

/* --- Material Symbols Config --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* --- Background Dots Pattern --- */
.bg-dots {
  background-image: radial-gradient(#4d6150 1px, transparent 1px);
  background-size: 40px 40px;
}

/* --- View Management --- */
.view {
  min-height: 100dvh;
}

.view[style*="display:none"],
.view[style*="display: none"] {
  display: none !important;
}

/* --- Soft Elevation --- */
.soft-elevation {
  box-shadow: 0 8px 32px rgba(44, 46, 44, 0.04);
}

/* --- Question Transitions --- */
.question-transition {
  animation: questionIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.question-exit {
  animation: questionOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

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

/* --- Option Card Interactions --- */
.option-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.option-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #4d6150;
  opacity: 0;
  transition: opacity 0.15s ease;
  border-radius: inherit;
  pointer-events: none;
}

.option-card:hover {
  background-color: #4d6150;
  color: #ffffff;
  border-color: #4d6150;
}

.option-card:hover .option-label {
  color: #ffffff;
}

.option-card:hover .option-icon {
  color: #ffffff;
  transform: scale(1.1);
}

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

.option-card:active::after {
  opacity: 1;
}

.option-card.selected {
  background-color: #4d6150;
  color: #ffffff;
  border-color: #4d6150;
}

.option-card.selected .option-label {
  color: #ffffff;
}

.option-card.selected .option-icon {
  color: #ffffff;
}

/* Staggered option entry */
.option-card:nth-child(1) { animation-delay: 0.05s; }
.option-card:nth-child(2) { animation-delay: 0.1s; }
.option-card:nth-child(3) { animation-delay: 0.15s; }
.option-card:nth-child(4) { animation-delay: 0.2s; }

.option-enter {
  animation: optionIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

/* --- Processing Animations --- */
.processing-ring {
  animation: ringPulse 2s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% {
    border-color: rgba(77, 97, 80, 0.15);
    transform: scale(1);
  }
  50% {
    border-color: rgba(77, 97, 80, 0.35);
    transform: scale(1.05);
  }
}

.processing-icon-pulse {
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.processing-step.active span:first-child {
  color: #4d6150;
  animation: stepActive 0.4s ease forwards;
}

.processing-step.active span:last-child {
  color: #434843;
}

.processing-step.complete .step-icon {
  color: #4d6150;
  font-variation-settings: 'FILL' 1;
}

.processing-step.complete span:last-child {
  color: #4d6150;
}

@keyframes stepActive {
  from { transform: scale(0.8); opacity: 0.5; }
  to { transform: scale(1); opacity: 1; }
}

/* --- Results Animations --- */
.result-fade-in {
  animation: resultReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.profile-card {
  opacity: 0;
  animation: cardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.profile-card:nth-child(1) { animation-delay: 0.2s; }
.profile-card:nth-child(2) { animation-delay: 0.35s; }
.profile-card:nth-child(3) { animation-delay: 0.5s; }
.profile-card:nth-child(4) { animation-delay: 0.65s; }

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

/* --- Score Bar Animation --- */
.score-bar-fill {
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--bar-delay, 0s);
}

.score-bar-row {
  opacity: 0;
  animation: barRowIn 0.3s ease forwards;
  animation-delay: var(--bar-delay, 0s);
}

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

/* --- Agreement Scale --- */
.agreement-option {
  transition: all 0.25s ease;
  cursor: pointer;
  border: 1px solid rgba(195, 200, 192, 0.3);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  text-align: center;
}

.agreement-option:hover {
  background-color: rgba(77, 97, 80, 0.06);
  border-color: rgba(77, 97, 80, 0.3);
}

.agreement-option.selected {
  background-color: #4d6150;
  color: #ffffff;
  border-color: #4d6150;
}

/* --- Parallax Background --- */
.parallax-bg {
  transition: transform 0.3s ease-out;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .option-card {
    padding: 1.25rem;
  }
}

/* --- Body Min Height --- */
body {
  min-height: max(884px, 100dvh);
}

/* --- Alignment Map --- */
.alignment-row {
  opacity: 0;
  animation: alignmentRowIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* --- Confidence Badges --- */
.confidence-high {
  background-color: rgba(77, 97, 80, 0.1);
  color: #4d6150;
  border: 1px solid rgba(77, 97, 80, 0.2);
}

.confidence-confident {
  background-color: rgba(77, 97, 80, 0.08);
  color: #4d6150;
  border: 1px solid rgba(77, 97, 80, 0.15);
}

.confidence-dual {
  background-color: rgba(217, 119, 6, 0.08);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.confidence-misaligned {
  background-color: rgba(186, 26, 26, 0.06);
  color: #93000a;
  border: 1px solid rgba(186, 26, 26, 0.15);
}

/* --- Insight Card --- */
#insight-card > div {
  opacity: 0;
  animation: insightIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.6s;
}

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

/* --- Validation Statement (Phase 3) --- */
.validation-statement {
  font-family: 'Libre Caslon Text', serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
}

/* --- Scale Options --- */
.scale-container {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.scale-option {
  flex: 1 1 0;
  min-width: 100px;
  padding: 0.875rem 0.5rem;
  border: 1px solid rgba(195, 200, 192, 0.3);
  border-radius: 0.25rem;
  background: transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

.scale-option:hover {
  background-color: rgba(77, 97, 80, 0.06);
  border-color: rgba(77, 97, 80, 0.3);
}

.scale-option:active {
  transform: scale(0.97);
}

.scale-option.selected {
  background-color: #4d6150;
  color: #ffffff;
  border-color: #4d6150;
}

.scale-option.selected .scale-label {
  color: #ffffff;
}

.scale-label {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #434843;
  line-height: 1.3;
}

/* --- Purchase Emotion Card (Results) --- */
.purchase-emotion-card {
  opacity: 0;
  animation: cardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.3s;
}

/* --- Responsive: Scale Options Stack on Mobile --- */
@media (max-width: 640px) {
  .scale-container {
    flex-direction: column;
    gap: 0.375rem;
  }

  .scale-option {
    min-width: unset;
    padding: 0.75rem 1rem;
  }
}

/* --- Capture Form --- */
.capture-fade-in {
  animation: captureIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.capture-input:focus {
  box-shadow: 0 0 0 3px rgba(77, 97, 80, 0.08);
}

.capture-input.input-error {
  border-color: #ba1a1a;
}

.capture-input.input-error:focus {
  border-color: #ba1a1a;
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.08);
}

.capture-error {
  transition: all 0.2s ease;
}

.capture-error.visible {
  display: block;
}