/* assets/css/bio-popup.css — Bio popup with radiesthetic graph styling */

/* ===== Bio popup overlay ===== */
.bio-popup {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(46, 31, 74, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s var(--ease-standard);
}

.bio-popup[hidden] {
  display: none;
}

.bio-popup.visible {
  opacity: 1;
}

/* ===== Semicircular card — Bovis/Belizal style ===== */
.bio-popup__card {
  position: relative;
  background: var(--bg-card);
  border-radius: 200px 200px 16px 16px;
  width: min(400px, 90vw);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  box-shadow:
    0 4px 24px rgba(46, 31, 74, 0.12),
    0 16px 64px rgba(46, 31, 74, 0.18),
    0 0 0 1px rgba(139, 107, 191, 0.12);
  transform: scale(0);
  opacity: 0;
  transition:
    transform 0.5s var(--ease-bounce),
    opacity 0.3s var(--ease-standard);
  text-align: center;
  overflow: hidden;
}

.bio-popup.visible .bio-popup__card {
  transform: scale(1);
  opacity: 1;
}

/* ===== Radial lines (conic gradient — graph graduation marks) ===== */
.bio-popup__radial-lines {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 200px;
  background: conic-gradient(
    from 180deg at 50% 100%,
    transparent 0deg,
    rgba(139, 107, 191, 0.05) 1deg,
    transparent 2deg,
    transparent 10deg,
    rgba(139, 107, 191, 0.05) 11deg,
    transparent 12deg,
    transparent 20deg,
    rgba(139, 107, 191, 0.05) 21deg,
    transparent 22deg,
    transparent 30deg,
    rgba(139, 107, 191, 0.05) 31deg,
    transparent 32deg,
    transparent 40deg,
    rgba(139, 107, 191, 0.05) 41deg,
    transparent 42deg,
    transparent 50deg,
    rgba(139, 107, 191, 0.08) 51deg,
    transparent 52deg,
    transparent 60deg,
    rgba(139, 107, 191, 0.05) 61deg,
    transparent 62deg,
    transparent 70deg,
    rgba(139, 107, 191, 0.05) 71deg,
    transparent 72deg,
    transparent 80deg,
    rgba(139, 107, 191, 0.05) 81deg,
    transparent 82deg,
    transparent 90deg,
    rgba(139, 107, 191, 0.08) 91deg,
    transparent 92deg,
    transparent 100deg,
    rgba(139, 107, 191, 0.05) 101deg,
    transparent 102deg,
    transparent 110deg,
    rgba(139, 107, 191, 0.05) 111deg,
    transparent 112deg,
    transparent 120deg,
    rgba(139, 107, 191, 0.05) 121deg,
    transparent 122deg,
    transparent 130deg,
    rgba(139, 107, 191, 0.05) 131deg,
    transparent 132deg,
    transparent 140deg,
    rgba(139, 107, 191, 0.08) 141deg,
    transparent 142deg,
    transparent 150deg,
    rgba(139, 107, 191, 0.05) 151deg,
    transparent 152deg,
    transparent 160deg,
    rgba(139, 107, 191, 0.05) 161deg,
    transparent 162deg,
    transparent 170deg,
    rgba(139, 107, 191, 0.05) 171deg,
    transparent 172deg,
    transparent 180deg
  );
  pointer-events: none;
  border-radius: 200px 200px 0 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease-standard) 0.2s;
}

.bio-popup.visible .bio-popup__radial-lines {
  opacity: 1;
}

/* ===== Golden arc at the top ===== */
.bio-popup__arc {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 16px);
  height: 200px;
  border-radius: 200px 200px 0 0;
  border: 1px solid transparent;
  border-top-color: rgba(212, 162, 84, 0.35);
  border-left-color: rgba(212, 162, 84, 0.2);
  border-right-color: rgba(212, 162, 84, 0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-standard) 0.3s;
}

/* Second inner arc for depth */
.bio-popup__arc::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 200px 200px 0 0;
  border: 1px solid transparent;
  border-top-color: rgba(212, 162, 84, 0.15);
  border-left-color: rgba(212, 162, 84, 0.08);
  border-right-color: rgba(212, 162, 84, 0.08);
}

.bio-popup.visible .bio-popup__arc {
  opacity: 1;
}

/* ===== Close button ===== */
.bio-popup__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 5;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purpura-light);
  transition:
    background 0.2s var(--ease-standard),
    border-color 0.2s var(--ease-standard),
    color 0.2s var(--ease-standard);
}

.bio-popup__close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

.bio-popup__close:hover {
  background: var(--nevoa-deep);
  border-color: var(--border-strong);
  color: var(--purpura);
}

.bio-popup__close:focus-visible {
  outline: 2px solid var(--purpura);
  outline-offset: 3px;
}

/* ===== Content area ===== */
.bio-popup__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== Photo ===== */
.bio-popup__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--purpura-pale);
  object-fit: cover;
  margin-bottom: var(--space-md);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.4s var(--ease-standard) 0.15s,
    transform 0.4s var(--ease-bounce) 0.15s;
  background: var(--purpura-pale);
}

.bio-popup.visible .bio-popup__photo {
  opacity: 1;
  transform: scale(1);
}

/* ===== Name ===== */
.bio-popup__name {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-h3);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

/* ===== Dates ===== */
.bio-popup__dates {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-body-sm);
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

/* ===== Description ===== */
.bio-popup__desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: 1.75;
  text-align: left;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

/* ===== Work (nationality shown here) ===== */
.bio-popup__work {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-caption);
  color: var(--purpura-text-safe);
  margin-bottom: var(--space-md);
  text-align: center;
}

/* ===== "Conhecer mais" button ===== */
.bio-popup__expand-btn {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--text-body-sm);
  color: var(--dourado-text-safe);
  background: none;
  border: 1px solid var(--dourado-light);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  margin-top: var(--space-sm);
  transition:
    background 0.2s var(--ease-standard),
    border-color 0.2s var(--ease-standard),
    color 0.2s var(--ease-standard);
}

.bio-popup__expand-btn:hover {
  background: rgba(212, 162, 84, 0.08);
  border-color: var(--dourado);
  color: var(--dourado-dark);
}

.bio-popup__expand-btn:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
}

/* ===== Full profile overlay ===== */
.full-profile {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(46, 31, 74, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s var(--ease-standard);
}

.full-profile[hidden] {
  display: none;
}

.full-profile.active {
  opacity: 1;
}

/* ===== Full profile card ===== */
.full-profile__card {
  position: relative;
  background: var(--bg-card);
  border-radius: 24px;
  width: min(85vw, 700px);
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  box-shadow:
    0 8px 32px rgba(46, 31, 74, 0.2),
    0 32px 80px rgba(46, 31, 74, 0.18);
  transform: scale(0);
  opacity: 0;
  transition:
    transform 0.5s var(--ease-bounce),
    opacity 0.3s var(--ease-standard);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.full-profile__card::-webkit-scrollbar {
  width: 6px;
}

.full-profile__card::-webkit-scrollbar-track {
  background: transparent;
}

.full-profile__card::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.full-profile.active .full-profile__card {
  transform: scale(1);
  opacity: 1;
}

/* ===== Full profile close button ===== */
.full-profile__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 5;
  width: 44px;
  height: 44px;
  background: var(--nevoa-deep);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition:
    background 0.2s var(--ease-standard),
    border-color 0.2s var(--ease-standard);
}

.full-profile__close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
}

.full-profile__close:hover {
  background: var(--purpura-pale);
  border-color: var(--border-strong);
}

.full-profile__close:focus-visible {
  outline: 2px solid var(--purpura);
  outline-offset: 3px;
}

/* ===== Full profile body inner content ===== */
.full-profile__body {
  text-align: center;
}

/* ===== Full profile large photo ===== */
.fp-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 3px solid var(--dourado-light);
  object-fit: cover;
  margin: 0 auto var(--space-md);
  display: block;
  background: var(--purpura-pale);
}

/* ===== Full profile header ===== */
.fp-name {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-h2);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

.fp-meta {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-body-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}

/* ===== Full profile timeline ===== */
.fp-timeline {
  list-style: none;
  padding: 0 0 0 var(--space-lg);
  margin: 0 0 var(--space-lg);
  border-left: 2px solid var(--dourado-light);
  text-align: left;
}

.fp-timeline li {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
}

.fp-timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dourado);
  border: 2px solid var(--bg-card);
}

.fp-timeline .tl-year {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-overline);
  color: var(--dourado-medium);
  margin-bottom: 2px;
}

.fp-timeline .tl-event {
  display: block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

/* ===== Full profile contribution ===== */
.fp-contribution {
  text-align: left;
  margin-bottom: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.fp-contribution-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.fp-contribution p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: 1.75;
}

/* ===== Full profile works ===== */
.fp-works {
  text-align: left;
  margin-bottom: var(--space-lg);
}

.fp-works-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.fp-works ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.fp-works li {
  font-family: var(--mono);
  font-size: var(--text-caption);
  color: var(--purpura);
  padding-left: var(--space-md);
  position: relative;
}

.fp-works li::before {
  content: "◦";
  position: absolute;
  left: 0;
  color: var(--dourado);
}

/* ===== Full profile sources ===== */
.fp-sources {
  text-align: left;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.fp-sources-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}

.fp-sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.fp-sources li {
  font-family: var(--mono);
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  line-height: 1.6;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .bio-popup {
    padding: 0;
    align-items: flex-end;
  }

  .bio-popup__card {
    width: 100vw;
    max-width: 100vw;
    border-radius: 24px 24px 0 0;
    max-height: 85dvh;
    overflow-y: auto;
  }

  /* No semicircle on mobile */
  .bio-popup__radial-lines,
  .bio-popup__arc {
    height: 120px;
  }

  .full-profile {
    padding: 0;
    align-items: flex-start;
  }

  .full-profile__card {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    padding-top: calc(var(--space-xl) + 12px);
  }

  .fp-photo {
    width: 120px;
    height: 120px;
  }
}