/*
 * .brtr — Section 3: Interactive Prototype
 * Three-step org-structure → tagging → confirmation flow.
 * CSS file: section-prototype.css | HTML: <section class="s3"> in index.html
 * Shared frame chrome (sidebar, border, top bar) lives in shared-frame.css.
 */

.s3 {
  position: relative;
  z-index: 1;
  padding: 180px 0 120px;
}

.s3-wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}


/* ================================================================
   SCROLL-HIGHLIGHT TEXT
   Sentences light up black or gold as user scrolls.
   JS: scroll-highlight.js with config in config.js
   ================================================================ */
.s3-scroll-text {
  font-family: var(--heading);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 1000px;
  padding-left: 32px;
}

.s3-scroll-text .s3-line {
  color: var(--text-4);
  transition: color 0.4s ease;
}

.s3-scroll-text .s3-line.lit {
  color: var(--text-1);
}

.s3-scroll-text .s3-line.lit-gold {
  color: var(--copper);
}


/* ================================================================
   PROTOTYPE STEPS
   Three-step flow: org → tags → confirmation.
   Step visibility toggled via .proto-step--active class.
   ================================================================ */
.proto-step {
  display: none;
}

.proto-step--active {
  display: block;
  animation: protoFade 0.35s cubic-bezier(0.22,1,0.36,1);
}

.proto-step__head {
  margin-bottom: 28px;
}

.proto-step__title {
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.proto-step__sub {
  font-size: 13px;
  color: var(--text-3);
}


/* ================================================================
   STEP 1: ORG STRUCTURE — Team cards
   Two-column grid of team cards with member avatars.
   ================================================================ */
.proto-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.proto-team {
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--bg-white);
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  position: relative;
  overflow: hidden;
}

.proto-team__divider {
  height: 1px;
  background: rgba(0,0,0,0.04);
  margin: 14px 0;
}

/* Team card layout */
.proto-team__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.proto-team__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.proto-team__avatars {
  display: flex;
  gap: -4px;
}

.proto-team__q {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 10px;
}

.proto-team__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.proto-team__count {
  font-size: 11px;
  color: var(--text-4);
}

.proto-team__members {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Stagger entrance animation for team cards */
.proto-team--stagger {
  opacity: 0;
  animation: teamLoad 0.5s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 0.15s + 0.2s) forwards;
}


/* ================================================================
   TEAM MEMBERS
   Individual member rows within team cards.
   ================================================================ */
.proto-member {
  display: flex;
  align-items: center;
  gap: 10px;
}

.proto-member--stagger {
  opacity: 0;
  animation: memberLoad 0.4s cubic-bezier(0.22,1,0.36,1) calc(var(--i) * 0.1s + 0.4s) forwards;
}

.proto-member__info {
  display: flex;
  flex-direction: column;
}

.proto-member__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}

.proto-member__role {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 1px;
}


/* ================================================================
   EXPAND / COLLAPSE — Individual tagging per team member
   ================================================================ */
.proto-expand {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--copper);
  background: none;
  border: none;
  padding: 0;
  margin-top: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.proto-expand:hover { opacity: 1; }

.proto-expand__chevron {
  font-size: 8px;
  transition: transform 0.3s;
}

.proto-expand--open .proto-expand__chevron {
  transform: rotate(180deg);
}

/* Individual tagging rows (hidden by default) */
.proto-indiv {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.04);
  animation: protoFade 0.3s cubic-bezier(0.22,1,0.36,1);
}

.proto-indiv--open {
  display: flex;
}

.proto-indiv__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proto-indiv__name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  width: 48px;
  flex-shrink: 0;
}


/* ================================================================
   STEP 2: TAGS — Format selection pills
   Large tag pills (team-level) + small tag pills (individual-level).
   ================================================================ */

/* Large tags */
.proto-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.proto-tag {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 100px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
}

.proto-tag:hover {
  border-color: rgba(160,104,48,0.2);
  color: var(--text-2);
  transform: scale(1.03);
}

.proto-tag:active {
  transform: scale(0.97);
}

.proto-tag--on {
  background: var(--highlight-bg);
  border-color: var(--highlight-border);
  color: var(--gold-text);
  font-weight: 600;
  box-shadow: var(--highlight-shadow);
}

/* Small tags (per-member) */
.proto-tags-sm {
  display: flex;
  gap: 4px;
}

.proto-tag-sm {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-4);
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 100px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.proto-tag-sm:hover {
  border-color: rgba(160,104,48,0.15);
  color: var(--text-3);
}

.proto-tag-sm--on {
  background: rgba(184,146,46,0.08);
  border-color: rgba(184,146,46,0.2);
  color: var(--gold-text);
  font-weight: 600;
}

/* Action row (holds "Next" button) */
.proto-action {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

/* Next step button — uses CTA gradient */
.proto-next {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--cta-gradient);
  border: 1px solid var(--cta-border);
  border-radius: 8px;
  padding: 10px 24px;
  cursor: pointer;
  box-shadow: var(--cta-shadow);
  text-shadow: var(--cta-text-shadow);
  transition: box-shadow 0.2s, transform 0.15s, filter 0.2s;
}

.proto-next:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: var(--cta-shadow-hover);
}


/* ================================================================
   STEP 3: DONE — Confirmation receipt
   Centered icon + summary receipt rows.
   ================================================================ */
.proto-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
}

.proto-done__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--highlight-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  animation: doneCheck 0.5s cubic-bezier(0.22,1,0.36,1);
}

.proto-done__title {
  font-family: var(--heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.proto-done__sub {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 24px;
}

.proto-done__receipt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 280px;
}

.proto-done__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.04);
  font-size: 12px;
  color: var(--text-2);
}

.proto-done__val {
  font-weight: 600;
  color: var(--gold-text);
  font-size: 11px;
}


/* ================================================================
   INTERACTIVITY HINTS
   Pulsing ring animations to signal clickable elements.
   Removed automatically once the user interacts.
   ================================================================ */

/* Tag pill hint */
.proto-tag--hint {
  animation: tagHint 2s ease-in-out infinite;
}

.proto-tag--hint.proto-tag--on {
  animation: none;
}

/* Expand link hint */
.proto-expand--hint {
  animation: expandHint 2s ease-in-out infinite;
}