/* KV Design System — Custom utilities that extend Tailwind CDN config */

/* ===== Gradient Text ===== */
/* Legacy name, now the Wealth Blueprint violet family (theme-aware) */
.text-gradient-gold {
  background: linear-gradient(135deg, rgb(var(--wb-glow)) 0%, rgb(var(--wb-violet)) 55%, rgb(var(--wb-violet-deep)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-right: 0.05em;
}

/* Fixed (non-flipping) variant for permanently dark surfaces — sidebars, heroes */
.text-gradient-glow {
  background: linear-gradient(135deg, #C9A6FF 0%, #9D5AEE 55%, #8F48D2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-right: 0.05em;
}

.text-gradient-navy {
  background: linear-gradient(135deg, rgb(var(--wb-ink)) 0%, rgb(var(--wb-lavender)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Radiant Gradient ===== */
/* Theme-aware hero wash: deck violet in dark, paper lavender in light */
.bg-radiant-gradient {
  background: linear-gradient(115deg, #0B0616 28%, #1F1440 70%, #442B7C 100%);
}

.wb-light .bg-radiant-gradient {
  background: linear-gradient(115deg, #E9DDFC 28%, #C9A6FF 70%, #9D5AEE 100%);
}

@media (min-width: 640px) {
  .bg-radiant-gradient {
    background: linear-gradient(145deg, #0B0616 28%, #1F1440 70%, #442B7C 100%);
  }

  .wb-light .bg-radiant-gradient {
    background: linear-gradient(145deg, #E9DDFC 28%, #C9A6FF 70%, #9D5AEE 100%);
  }
}

/* ===== Glassmorphism ===== */
.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-light {
  background: rgb(var(--wb-void) / 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== Stagger animation delays ===== */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* ===== Button Inset Highlight ===== */
.inset-highlight {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

/* Radiant secondary button — white/15 bg with inset glow */
.btn-secondary-radiant {
  position: relative;
}
.btn-secondary-radiant::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

/* ===== Gradient Backgrounds ===== */
/* Permanently dark hero wash — night surfaces do not flip with the theme */
.bg-gradient-hero {
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(157, 90, 238, 0.16), transparent),
              linear-gradient(to bottom, #181031, #050308);
}

.bg-gradient-cta {
  background: linear-gradient(135deg, #8F48D2 0%, #9D5AEE 50%, #8F48D2 100%);
}

.bg-gradient-card-dark {
  background: linear-gradient(145deg, #181031 0%, #050308 100%);
}

/* ===== Ring-based card styling ===== */
.card-ring {
  box-shadow: 0 1px 3px 0 rgb(var(--wb-ink) / 0.05), 0 0 0 1px rgb(var(--wb-ink) / 0.05);
}

@media (hover: hover) {
  .card-ring:hover {
    box-shadow: 0 4px 6px -1px rgb(var(--wb-ink) / 0.07), 0 0 0 1px rgb(var(--wb-ink) / 0.07);
  }
}

/* ===== Score bar gradient ===== */
.score-bar-gradient {
  background: linear-gradient(90deg, rgb(var(--wb-violet)), rgb(var(--wb-glow)));
  box-shadow: 0 0 10px rgb(var(--wb-violet) / 0.5);
}

/* ===== Transition Lift ===== */
.transition-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .transition-lift:hover {
    transform: translateY(-1px);
  }
}

.transition-lift:active {
  transform: translateY(0px);
}

/* ===== Testimonials horizontal scroll ===== */
.testimonials-scroll {
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(1.5rem, calc((100vw - 72rem) / 2 + 1.5rem));
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.testimonials-scroll::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  scroll-snap-align: start;
}

/* ===== Screenshot container (Radiant style) ===== */
.screenshot-container {
  --padding: 8px;
  position: relative;
  border-radius: 1.5rem;
}

.screenshot-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

.screenshot-inner {
  border-radius: calc(1.5rem - var(--padding));
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* ===== Bento card fade overlays ===== */
.bento-fade-bottom {
  position: relative;
}

.bento-fade-bottom::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgb(var(--wb-surface)) 100%);
  pointer-events: none;
}

.bento-fade-top {
  position: relative;
}

.bento-fade-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, transparent 50%, rgb(var(--wb-night-2)) 100%);
  pointer-events: none;
}

/* ===== Quiz Question Entrance ===== */

/* Question container starts hidden, JS triggers the animation */
[data-quiz-transition-target="question"] {
  opacity: 0;
  transform: translateY(8px);
}

/* Options start hidden with stagger delays — JS adds .animate-in to trigger */
[data-quiz-transition-target="option"] {
  opacity: 0;
  transform: translateY(8px);
}

[data-quiz-transition-target="option"].animate-in {
  animation: quiz-option-in 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes quiz-option-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-quiz-transition-target="question"],
  [data-quiz-transition-target="option"] {
    opacity: 1;
    transform: none;
  }
}

/* ===== Results Page Animations ===== */

/* Score ring — SVG stroke draw */
.match-ring-animate {
  animation: match-ring-draw 1.5s ease-out both;
}
@keyframes match-ring-draw {
  from { stroke-dasharray: 0 327; }
}

/* Score bar — width fill */
.match-bar-animate {
  animation: match-bar-fill 1.2s ease-out both;
}
@keyframes match-bar-fill {
  from { width: 0%; }
}

/* Stagger fade-in for card grids */
.stagger-fade-in > * {
  opacity: 0;
  transform: translateY(12px);
  animation: stagger-entry 0.5s ease-out forwards;
}
.stagger-fade-in > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-fade-in > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-fade-in > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-fade-in > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-fade-in > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-fade-in > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-fade-in > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-fade-in > *:nth-child(8) { animation-delay: 0.8s; }

@keyframes stagger-entry {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero & section fade-in */
.animate-fade-in {
  animation: fade-in 0.4s ease-out both;
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Card scale-in */
.animate-scale-in {
  animation: scale-in 0.3s ease-out both;
}
@keyframes scale-in {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* Confetti spin */
@keyframes confetti-fall {
  to { transform: translateY(100vh) rotate(720deg); }
}

/* Step check bounce */
@keyframes check-bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.animate-check-bounce {
  animation: check-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ===== PlusGrid border pattern ===== */
.plus-grid-borders {
  position: relative;
}

.plus-grid-borders::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

.plus-grid-borders::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

/* ===== Wealth Blueprint event brand (deck-derived, dark-first) =====
   See .claude/skills/wealth-blueprint-style.md
   Tokens are RGB triplets consumed by the Tailwind config as
   rgb(var(--wb-*) / <alpha-value>), so one class flip re-themes the surface.
   Dark is the default; .wb-light on <html> switches to the paper palette.
   wb-core / wb-edge are identical in both modes — the spotlight never
   changes costume. */
:root {
  --wb-void:        5 3 8;
  --wb-surface:     17 15 26;
  --wb-surface-2:   24 16 49;
  --wb-lit:         35 24 67;
  --wb-core:        49 28 90;
  --wb-edge:        68 43 124;
  --wb-violet:      157 90 238;
  --wb-violet-deep: 143 72 210;
  --wb-lavender:    169 139 255;
  --wb-glow:        201 166 255;
  --wb-ink:         253 252 255;
  --wb-body:        211 207 225;
  /* Night surfaces stay dark in both themes (footers, sidebars, heroes) */
  --wb-night:       17 15 26;
  --wb-night-2:     24 16 49;
  /* Semantic states — hue carries meaning in admin; brightness flips for contrast */
  --wb-success:     52 211 153;
  --wb-warning:     251 191 36;
  --wb-danger:      248 113 113;
  --wb-info:        96 165 250;
}

.wb-light {
  --wb-void:        252 251 254;
  --wb-surface:     245 243 250;
  --wb-surface-2:   239 234 251;
  --wb-lit:         227 217 249;
  --wb-violet:      143 72 210;
  --wb-violet-deep: 122 59 184;
  --wb-lavender:    128 64 200;
  --wb-glow:        157 90 238;
  --wb-ink:         26 18 38;
  --wb-body:        68 60 88;
  --wb-success:     4 120 87;
  --wb-warning:     161 98 7;
  --wb-danger:      185 28 28;
  --wb-info:        29 78 216;
}

/* Show/hide helpers for theme-dependent labels (e.g. the toggle button) */
.wb-when-light { display: none; }
.wb-light .wb-when-dark { display: none; }
.wb-light .wb-when-light { display: inline; }

.wb-bar-gradient {
  background: linear-gradient(90deg, #9D5AEE, #C9A6FF);
  box-shadow: 0 0 10px rgb(157 90 238 / 0.6);
}

.wb-text-glow {
  text-shadow: 0 0 30px rgb(169 139 255 / 0.45);
}

.wb-light .wb-text-glow {
  text-shadow: 0 0 30px rgb(143 72 210 / 0.28);
}

/* 1px top-edge highlight on cards — neutral resting, glow when lit */
.wb-edge-top {
  position: relative;
}
.wb-edge-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.45), transparent);
  pointer-events: none;
}
.wb-edge-top-lit::before {
  background: linear-gradient(90deg, #C9A6FF, transparent);
}

.wb-light .wb-edge-top::before {
  background: linear-gradient(90deg, rgb(26 18 38 / 0.35), transparent);
}

.wb-light .wb-edge-top-lit::before {
  background: linear-gradient(90deg, #9D5AEE, transparent);
}

/* Faint violet vignette for the projector surface — depth without a gradient wash */
.wb-stage-vignette {
  background:
    radial-gradient(80% 60% at 50% 38%, rgb(157 90 238 / 0.08), transparent 70%),
    #050308;
}

/* Deck-style stage ground: blueprint grid over the vignette */
.wb-stage-grid {
  background:
    linear-gradient(rgb(157 90 238 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(157 90 238 / 0.05) 1px, transparent 1px),
    radial-gradient(90% 70% at 50% 30%, rgb(157 90 238 / 0.12), transparent 70%),
    linear-gradient(160deg, #0A0614 0%, #050308 60%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
}

/* Bright-venue stage variant, flipped from the console */
.wb-stage-grid.wb-light {
  background:
    linear-gradient(rgb(143 72 210 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(143 72 210 / 0.07) 1px, transparent 1px),
    radial-gradient(90% 70% at 50% 30%, rgb(143 72 210 / 0.10), transparent 70%),
    linear-gradient(160deg, #F5F1FC 0%, #FCFBFE 60%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
}