/* ==========================================================================
   AI Discovery -- Custom CSS
   Tailwind v4 loaded via CDN in base.html. This file holds effects that
   cannot be expressed as utility classes.

   Brand palette sourced from Nexrizen Brand_Guidelines.md:
     Purple  #502cff  |  Blue  #4cbdf5  |  Mint  #ccfffe
     Black   #000000  |  White #ffffff  |  Off-white #fbffff
   ========================================================================== */

/* ----- 0. DESIGN TOKENS ------------------------------------------------- */
:root {
  /* Brand core (from Brand_Guidelines.md) */
  --brand-purple: #502cff;
  --brand-blue: #4cbdf5;
  --brand-mint: #ccfffe;

  /* Surfaces (from marketing site design system) */
  --surface-dark: #0B0A1A;
  --surface-raised: #13121f;

  /* Brand opacity scale (derived from --brand-purple) */
  --brand-ring: rgba(80, 44, 255, 0.10);
  --brand-border-hover: rgba(80, 44, 255, 0.16);
  --brand-glow: rgba(80, 44, 255, 0.25);

  /* Brand gradient (canonical, single source of truth) */
  --gradient-brand: linear-gradient(135deg, #502cff, #4cbdf5, #ccfffe);
}

/* ----- 1. HERO GLOW ---------------------------------------------------- */
.hero-glow {
  position: relative;
  overflow: hidden;
}

.hero-glow::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    rgba(80, 44, 255, 0.15) 0%,
    rgba(76, 189, 245, 0.08) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ----- 2. GRADIENT TEXT ------------------------------------------------- */
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ----- 3. ACCENT FONT -------------------------------------------------- */
.font-accent {
  font-family: 'Volkhov', Georgia, serif;
  font-style: italic;
}

/* ----- 4. GLASS CARD (form only) ---------------------------------------- */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.25rem;
}

@supports (backdrop-filter: blur(12px)) {
  .glass-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* ----- 5. INPUT STYLING ------------------------------------------------- */
.input-field {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-field:focus {
  border-color: var(--brand-glow);
  box-shadow: 0 0 0 3px var(--brand-ring);
  outline: none;
}

/* ----- 6. CUSTOM CHECKBOX ----------------------------------------------- */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.custom-checkbox:checked {
  border-color: var(--brand-purple);
  background: var(--brand-purple);
}

.custom-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--surface-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-ring);
  outline: none;
}

/* ----- 7. FADE-IN ANIMATION -------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.visible {
  animation: fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1.visible { animation-delay: 0.1s; }
.delay-2.visible { animation-delay: 0.2s; }
.delay-3.visible { animation-delay: 0.3s; }
.delay-4.visible { animation-delay: 0.4s; }

/* ----- 8. GRADIENT DIVIDER ---------------------------------------------- */
.gradient-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(80, 44, 255, 0.3),
    rgba(76, 189, 245, 0.3),
    transparent
  );
}

/* ----- 9. SUCCESS / ERROR ICONS ----------------------------------------- */
.icon-draw-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards;
}

.icon-draw-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.7s forwards;
}

.icon-draw-x {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: draw 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.7s forwards;
}

.icon-draw-x-2 {
  animation-delay: 0.85s;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* ----- 10. SPINNER (HTMX) ---------------------------------------------- */
.spinner {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.htmx-request .btn-text { display: none; }
.htmx-request .spinner  { display: inline-block; }
.htmx-request button[type="submit"] { opacity: 0.6; pointer-events: none; }

/* ----- 11. STEP ROW + MICRO-INTERACTION --------------------------------- */
.step-row {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-row:hover {
  transform: translateX(4px);
}

.step-row:hover .step-num {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
  color: var(--surface-dark);
}

.step-row:hover .step-title {
  color: #fff;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  transition: border-color 0.35s ease, background 0.35s ease, color 0.35s ease;
}

/* Vertical connector between steps */
.step-list {
  position: relative;
}

.step-list::before {
  content: "";
  position: absolute;
  left: calc(1rem - 0.5px);
  top: 2.5rem;
  bottom: 2.5rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(80, 44, 255, 0.2),
    rgba(76, 189, 245, 0.2),
    rgba(80, 44, 255, 0.2)
  );
}

/* ----- 12. REDUCED MOTION ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .step-row {
    opacity: 1;
    animation: none !important;
    transition: none !important;
  }
  .icon-draw-circle,
  .icon-draw-check,
  .icon-draw-x,
  .spinner {
    animation: none !important;
  }
  .icon-draw-circle { stroke-dashoffset: 0; }
  .icon-draw-check  { stroke-dashoffset: 0; }
  .icon-draw-x      { stroke-dashoffset: 0; }
}