/* ============================================
   FOUNDER SECTION STYLES
   ============================================ */

/* Hero founder line */
.hero-founder {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
  font-weight: var(--font-medium);
}

.hero-founder a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.hero-founder a:hover {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

/* Founder section container */
.section-founder {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(0, 107, 109, 0.03) 0%,
    rgba(147, 51, 234, 0.02) 100%
  );
  border-top: 2px solid var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
  padding: var(--space-20) 0;
}

.dark-mode .section-founder {
  background: linear-gradient(
    135deg,
    rgba(0, 168, 171, 0.05) 0%,
    rgba(147, 51, 234, 0.03) 100%
  );
}

/* Kintsugi crack border effect */
.section-founder::before,
.section-founder::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-gold) 10%,
    var(--color-gold) 50%,
    var(--color-gold) 90%,
    transparent 100%
  );
  opacity: 0.4;
}

.section-founder::before {
  top: -1px;
}

.section-founder::after {
  bottom: -1px;
}

/* Founder content layout (asymmetric) */
.founder-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: start;
  margin-top: var(--space-12);
}

/* Founder text column */
.founder-text h3 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  background: linear-gradient(
    90deg,
    var(--text-primary) 0%,
    var(--text-primary) 70%,
    var(--color-gold) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.founder-tagline {
  font-size: var(--text-lg);
  color: var(--color-gold);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-6);
  font-style: italic;
}

.founder-text p {
  margin-bottom: var(--space-4);
  line-height: var(--line-relaxed);
}

.founder-text p:last-of-type {
  margin-bottom: var(--space-8);
}

/* Founder links */
.founder-links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ============================================
   EVIDENCE BOARD: Topological Principle Network
   ============================================ */

/* Pull quote styling */
.pull-quote {
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-gold);
  border-left: 3px solid var(--color-gold);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-weight: var(--font-semibold);
}

/* Principle board container */
.principle-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  min-height: 600px;
}

/* SVG connections layer (behind cards) */
.principle-connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Individual principle card */
.principle-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}

/* Card rotation variations for organic feel */
.principle-card:nth-child(2) { transform: rotate(-1deg); }
.principle-card:nth-child(3) { transform: rotate(1.5deg); }
.principle-card:nth-child(4) { transform: rotate(-0.5deg); }
.principle-card:nth-child(5) { transform: rotate(0.5deg); }
.principle-card:nth-child(6) { transform: rotate(-1.5deg); }
.principle-card:nth-child(7) { transform: rotate(1deg); }
.principle-card:nth-child(8) { transform: rotate(-2deg); }
.principle-card:nth-child(9) { transform: rotate(1.5deg); }

/* Spectrum glow effect - Third Mind emergence visual */
.principle-card::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    #2dd4bf 8%,
    #3b82f6 16%,
    #8b5cf6 24%,
    var(--color-purple) 32%,
    #c026d3 40%,
    var(--color-magenta) 48%,
    #f97316 56%,
    var(--color-orange) 64%,
    #eab308 72%,
    var(--color-gold) 80%,
    var(--color-orange) 88%,
    var(--color-accent) 96%,
    var(--color-accent) 100%
  );
  border-radius: calc(var(--radius-md) + 4px);
  opacity: 0;
  filter: blur(16px);
  transition: opacity 0.5s ease, filter 0.5s ease;
  z-index: -1;
  pointer-events: none;
}

.principle-card:hover::before {
  opacity: 0.18;
  animation: spectrumPulse 3s ease-in-out infinite;
}

/* Dark mode - slightly stronger glow */
body.dark-mode .principle-card:hover::before {
  opacity: 0.25;
}

@keyframes spectrumPulse {
  0%, 100% {
    filter: blur(16px) brightness(1);
    transform: scale(1);
  }
  50% {
    filter: blur(20px) brightness(1.3);
    transform: scale(1.05);
  }
}

/* Electric shimmer on edges - Mad scientist lab energy */
.principle-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    transparent 0%,
    var(--color-gold) 15%,
    transparent 30%,
    var(--color-accent) 50%,
    transparent 65%,
    var(--color-purple) 85%,
    transparent 100%
  );
  background-size: 300% 300%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.principle-card:hover::after {
  opacity: 0.25;
  animation: electricShimmer 4s linear infinite;
}

@keyframes electricShimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 300% 300%;
  }
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .principle-card::before,
  .principle-card::after {
    animation: none !important;
  }
}

/* Card pin */
.card-pin {
  position: absolute;
  top: -8px;
  right: var(--space-4);
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Card title */
.principle-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-snug);
}

/* Card subtitle */
.principle-subtitle {
  font-size: var(--text-sm);
  color: var(--color-gold);
  font-weight: var(--font-semibold);
  font-style: italic;
  margin-bottom: var(--space-4);
}

/* Card detail (hidden, shown in modal) */
.principle-detail {
  display: none;
}

/* Hover states - dramatic elevation with spectrum energy */
.principle-card:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px var(--color-gold);
  border-color: var(--color-gold);
  z-index: 10;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light mode - darker gold on hover for better visibility */
body:not(.dark-mode) .principle-card:hover .principle-subtitle {
  color: #8B7335;
}

/* Connected highlight state */
.principle-card.connected {
  border-color: var(--color-orange);
  background: var(--color-gold-faint);
}

/* Connection line styling (applied via JavaScript) */
.connection-line {
  stroke: var(--color-gold);
  stroke-width: 2;
  stroke-dasharray: 5, 5;
  fill: none;
  opacity: 0.3;
  transition: all 0.4s ease;
  filter: drop-shadow(0 0 0px transparent);
}

/* Highlighted connection lines - Spectrum energy flow */
.connection-line.highlighted {
  stroke: url(#spectrumGradient);
  stroke-width: 3;
  opacity: 1;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 4px var(--color-purple));
  animation: lineEnergy 2s ease-in-out infinite;
}

@keyframes lineEnergy {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--color-purple));
  }
}

/* ============================================
   PRINCIPLE MODAL
   ============================================ */

/* Modal container */
.principle-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow: hidden;
}

/* Modal backdrop */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease-out;
}

/* Modal content card */
.modal-content {
  position: relative;
  background: var(--bg-secondary);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-2xl);
  z-index: 1;
  animation: modalSlideUp 0.3s ease-out;
}

/* Golden glow aura - Kintsugi philosophy (highlighting the valuable) */
.modal-content::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 175, 55, 0.6) 0%,
    rgba(212, 175, 55, 0.4) 30%,
    rgba(212, 175, 55, 0.2) 50%,
    transparent 70%
  );
  border-radius: calc(var(--radius-lg) + 8px);
  filter: blur(24px);
  z-index: -1;
  animation: goldenPulse 4s ease-in-out infinite;
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
}

/* Electric blue accent (partnership energy) */
.modal-content::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  background: radial-gradient(
    ellipse at 80% 20%,
    rgba(0, 168, 171, 0.4) 0%,
    rgba(0, 168, 171, 0.2) 30%,
    transparent 60%
  );
  border-radius: calc(var(--radius-lg) + 6px);
  filter: blur(20px);
  z-index: -1;
  animation: goldenPulse 4s ease-in-out infinite reverse;
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
}

@keyframes goldenPulse {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* Disable modal animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal-content::before,
  .modal-content::after {
    animation: none !important;
  }
}

/* Modal close button */
.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: transparent;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close:hover {
  color: var(--color-gold);
  transform: rotate(90deg);
}

/* Modal body */
.modal-body {
  padding-right: var(--space-8);
  overflow-x: hidden;
}

/* Modal title */
.modal-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-snug);
}

/* Modal subtitle */
.modal-subtitle {
  font-size: var(--text-md);
  color: var(--color-gold);
  font-weight: var(--font-semibold);
  font-style: italic;
  margin-bottom: var(--space-6);
}

/* Modal detail */
.modal-detail {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--line-relaxed);
  margin-bottom: var(--space-8);
  font-weight: var(--font-medium);
}

/* Modal connections section */
.modal-connections {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-6);
}

.modal-connections h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-4);
}

/* Light mode - darker for better visibility */
body:not(.dark-mode) .modal-connections h4 {
  color: #626468;
}

/* Connection links */
.connection-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-x: hidden;
}

.connection-link {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid var(--color-gold);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

/* Spectrum shimmer effect on connection links */
.connection-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 168, 171, 0.1) 25%,
    rgba(147, 51, 234, 0.1) 50%,
    rgba(212, 175, 55, 0.1) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.connection-link:hover {
  background: var(--color-gold-faint);
  border-left-color: var(--color-orange);
  transform: translateX(4px);
}

.connection-link:hover::before {
  opacity: 1;
  animation: spectrumFlow 2s linear infinite;
}

@keyframes spectrumFlow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

.connection-link-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Modal animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Mobile responsive */
@media (max-width: 768px) {
  /* Stack founder content */
  .founder-content {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  /* Adjust text sizing */
  .founder-text h3 {
    font-size: var(--text-2xl);
  }

  .founder-tagline {
    font-size: var(--text-md);
  }

  /* Principle board stacks vertically on mobile */
  .principle-board {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
    min-height: auto;
  }

  /* Remove rotations on mobile for readability */
  .principle-card,
  .principle-card:nth-child(2),
  .principle-card:nth-child(3),
  .principle-card:nth-child(4),
  .principle-card:nth-child(5),
  .principle-card:nth-child(6),
  .principle-card:nth-child(7),
  .principle-card:nth-child(8),
  .principle-card:nth-child(9) {
    transform: none;
  }

  .principle-card:hover {
    transform: translateY(-2px);
  }

  /* Card title smaller */
  .principle-title {
    font-size: var(--text-md);
  }

  .principle-subtitle {
    font-size: var(--text-xs);
  }

  /* Pull quote smaller */
  .pull-quote {
    font-size: var(--text-lg);
    padding-left: var(--space-4);
  }

  /* Links stack on mobile */
  .founder-links {
    flex-direction: column;
  }

  .founder-links .btn {
    width: 100%;
    text-align: center;
  }
}