@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&family=Caveat:wght@500;600&display=swap");

:root {
  --bg: #fbf8f3;
  --surface: #ffffff;
  --text: #17213f;
  --muted: #526079;
  --accent: #8052c6;
  --accent-dark: #223873;
  --on-accent: #ffffff;
  --line: #e7def2;
  --soft-blue: #eaf4ff;
  --soft-purple: #f0e6fb;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.font-serif {
  font-family: "Playfair Display", serif;
}

.font-hand {
  font-family: "Caveat", cursive;
}

.hero-photo {
  background-image:
    linear-gradient(
      90deg,
      rgba(251, 248, 243, 0.97) 0%,
      rgba(251, 248, 243, 0.9) 38%,
      rgba(251, 248, 243, 0.24) 68%,
      rgba(251, 248, 243, 0.06) 100%
    ),
    url("/clients/christye/assets/banner.jpg");
  background-size: cover;
  background-position: center right;
}

.reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.soft-shadow {
  box-shadow: 0 24px 70px rgba(34, 56, 115, 0.13);
}

.btn {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(128, 82, 198, 0.25);
}

.btn:active {
  transform: translateY(0);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq.open .faq-content {
  max-height: 220px;
}

.faq.open .faq-icon {
  transform: rotate(45deg);
}

.faq-icon {
  transition: transform 0.25s ease;
}

.answer-option input:checked + span {
  border-color: rgba(128, 82, 198, 0.75);
  background: linear-gradient(135deg, #f0e6fb, #eaf4ff);
  color: var(--text);
}

.answer-option span {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.answer-option:hover span {
  transform: translateY(-1px);
  border-color: rgba(128, 82, 198, 0.45);
}

.test-progress-fill {
  transition: width 0.25s ease;
}

.test-page.test-intro-mode .test-shell {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: center;
  padding-top: 7rem;
  padding-bottom: 2rem;
}

.test-page.test-intro-mode #test-form,
.test-page.test-intro-mode #loading-state,
.test-page.test-intro-mode #result-section,
.test-page.test-intro-mode [data-progress] {
  display: none;
}

.test-page.test-intro-mode aside {
  display: none;
}

.test-page.test-intro-mode [data-test-title] {
  max-width: 56rem;
}

.wheel-slider {
  border-left: 4px solid var(--wheel-color);
}

.wheel-slider input[type="range"] {
  cursor: pointer;
}

.wheel-chart {
  overflow: visible;
}

.question-card {
  animation: questionIn 0.25s ease both;
}

@keyframes questionIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .hero-photo {
    background-image:
      linear-gradient(
        180deg,
        rgba(251, 248, 243, 0.97) 0%,
        rgba(251, 248, 243, 0.88) 45%,
        rgba(251, 248, 243, 0.48) 100%
      ),
      url("/clients/christye/assets/banner.jpg");
    background-position: 66% center;
  }
}