/* ==========================================================================
   COTALITY-GRAPHICS.CSS — heyamychen.com
   Styles for embedded graphic components in cotality.html:
   Key Findings, Territories, Sitemap Options, Vision + Principles, Timeline.
   All font-size values reference design tokens from tokens.css.
   ========================================================================== */

/* =========================================================
   VISUAL SPACING — all embedded graphic components
   ========================================================= */

.findings,
.territories,
.sitemap-options,
.vision-principles {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* =========================================================
   KEY FINDINGS GRAPHIC — Cotality case study
   ========================================================= */

.findings { width: 100%; }

.findings-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grass);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}

.findings.is-visible .findings-header { opacity: 1; transform: translateY(0); }

.findings-header__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  font-weight: 400;
  text-transform: uppercase;
}

.findings-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }

.finding {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.finding:nth-child(1) { transition-delay: 0.4s; }
.finding:nth-child(2) { transition-delay: 0.55s; }
.finding:nth-child(3) { transition-delay: 0.7s; }
.findings.is-visible .finding { opacity: 1; transform: translateY(0); }

.finding__number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking);
  color: var(--color-moss);
  opacity: 0.5;
  margin-bottom: 0.75rem;
}

.finding .finding__text {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  line-height: 1.5;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-grass);
  min-height: 5.5rem;
  flex: 1;
}

.finding__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  position: relative;
}

.finding__connector-line {
  width: 1px;
  height: 100%;
  background: var(--color-grass);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.finding:nth-child(1) .finding__connector-line { transition-delay: 0.7s; }
.finding:nth-child(2) .finding__connector-line { transition-delay: 0.85s; }
.finding:nth-child(3) .finding__connector-line { transition-delay: 1.0s; }
.findings.is-visible .finding__connector-line { opacity: 1; transform: scaleY(1); }

.finding__challenge-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-moss);
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.finding .finding__challenge {
  font-family: var(--font-primary);
  font-size: var(--text-subhead);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  line-height: 1.25;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-grass);
}

@media (max-width: 768px) {
  .findings-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .finding__connector { height: 1.5rem; }
  .finding .finding__text { min-height: auto; }
}

/* =========================================================
   TERRITORIES GRAPHIC — Cotality case study
   ========================================================= */

.territories { width: 100%; }

.territories-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grass);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}

.territories.is-visible .territories-header { opacity: 1; transform: translateY(0); }

.territories-header__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  font-weight: 400;
  text-transform: uppercase;
}

.territory-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }

.territory {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.territory:nth-child(1) { transition-delay: 0.4s; }
.territory:nth-child(2) { transition-delay: 0.55s; }
.territory:nth-child(3) { transition-delay: 0.7s; }
.territories.is-visible .territory { opacity: 1; transform: translateY(0); }
.territory--muted { opacity: 0; }
.territories.is-visible .territory--muted { opacity: 0.5; }

.territory__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-moss);
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.territory__name {
  font-family: var(--font-primary);
  font-size: var(--text-body-lg);
  line-height: 1.19;
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  font-weight: 400;
  margin-bottom: 0.375rem;
}

.territory__tagline {
  font-family: var(--font-primary);
  font-size: var(--text-caption);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  line-height: 1.33;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

.territory__rule { width: 100%; height: 1px; background: var(--color-grass); margin-bottom: 0.75rem; }

.territory__desc {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  line-height: 1.5;
  opacity: 0.6;
  min-height: 5rem;
  margin-bottom: 1rem;
}

.territory__carryover {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  line-height: 1.5;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-grass);
}

@media (max-width: 768px) {
  .territory-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .territory__desc { min-height: auto; }
  .territory__name { font-size: var(--text-subhead); }
}

/* =========================================================
   SITEMAP OPTIONS GRAPHIC — Cotality case study
   ========================================================= */

.sitemap-options { width: 100%; }

.so-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grass);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}

.sitemap-options.is-visible .so-header { opacity: 1; transform: translateY(0); }

.so-header__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  font-weight: 400;
  text-transform: uppercase;
}

.so-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }

.so-option {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.so-option:nth-child(1) { transition-delay: 0.4s; }
.so-option:nth-child(2) { transition-delay: 0.55s; }
.so-option:nth-child(3) { transition-delay: 0.7s; }
.sitemap-options.is-visible .so-option { opacity: 1; transform: translateY(0); }

.so-option__number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking);
  color: var(--color-moss);
  opacity: 0.5;
  margin-bottom: 0.75rem;
}

.so-option__name {
  font-family: var(--font-primary);
  font-size: var(--text-subhead);
  line-height: 1.25;
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  font-weight: 400;
  margin-bottom: 0.5rem;
  min-height: 4rem;
}

.so-option__rule { width: 100%; height: 1px; background: var(--color-grass); margin-bottom: 0.75rem; }

.so-option .so-option__principle {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  line-height: 1.5;
  opacity: 0.6;
  min-height: 5.5rem;
  margin-bottom: 2rem;
}

.so-option__tree { margin-bottom: 1rem; }
.so-option__tree svg { display: block; width: 100%; height: auto; }

.so-option__selected {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  line-height: 1.5;
  padding-top: 0.75rem;
  margin-top: auto;
  border-top: 1px solid var(--color-grass);
}

.so-option__selected--underline {
  text-decoration: underline;
  text-decoration-color: var(--color-forest);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.so-option__consideration {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  line-height: 1.5;
  padding-top: 0.75rem;
  margin-top: auto;
  border-top: 1px solid var(--color-grass);
}

@media (max-width: 768px) {
  .so-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .so-option .so-option__principle { min-height: auto; }
  .so-option__name { min-height: auto; }
}

/* =========================================================
   VISION + PRINCIPLES GRAPHIC — Cotality case study
   ========================================================= */

.vision-principles { width: 100%; }

.vp-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grass);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}

.vision-principles.is-visible .vp-header { opacity: 1; transform: translateY(0); }

.vp-header__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  font-weight: 400;
  text-transform: uppercase;
}

.vision {
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out 0.4s, transform 0.5s ease-out 0.4s;
}

.vision-principles.is-visible .vision { opacity: 1; transform: translateY(0); }

.vision__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-moss);
  opacity: 0.5;
  margin-bottom: 0.75rem;
}

.vision .vision__statement {
  font-family: var(--font-primary);
  font-size: var(--text-tagline);
  line-height: 1.25;
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  font-weight: 400;
  max-width: 800px;
}

.principles-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-moss);
  margin-bottom: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-grass);
  opacity: 0;
  transition: opacity 0.5s ease-out 0.7s;
}

.vision-principles.is-visible .principles-label { opacity: 0.5; }

.principles-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }

.principle {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.principle:nth-child(1) { transition-delay: 0.8s; }
.principle:nth-child(2) { transition-delay: 0.95s; }
.principle:nth-child(3) { transition-delay: 1.1s; }
.vision-principles.is-visible .principle { opacity: 1; transform: translateY(0); }

.principle__name {
  font-family: var(--font-primary);
  font-size: var(--text-subhead);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.principle__rule { width: 100%; height: 1px; background: var(--color-grass); margin-bottom: 0.75rem; }

.principle .principle__desc {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-forest);
  letter-spacing: var(--tracking);
  line-height: 1.5;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .vision .vision__statement { font-size: var(--text-body-lg); }
  .principles-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Timeline styles live in case.css (shared across all case studies) */

/* =========================================================
   LEAD LAYOUT — browser at 75%, image row below
   ========================================================= */

.lead-browser-wrap {
  width: 75%;
  margin: 0 auto 1.5rem;
}

.lead-image-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
}

.lead-image-row__img {
  width: 100%;
  display: block;
}

/* Persona carousel — shows 2.67 items */
.case-carousel--persona .case-carousel__item {
  flex: 0 0 calc((100% - var(--grid-gutter) * 2) / 2.67);
}

.case-carousel--persona .case-carousel__img {
  max-height: 400px;
  width: auto;
  object-fit: unset;
}

@media (max-width: 768px) {
  .lead-browser-wrap { width: 100%; }
  .lead-image-row { grid-template-columns: 1fr; gap: 1rem; }
}

/* =========================================================
   TERRITORY PROMPT — "What if the website was a ____?"
   ========================================================= */

.territory-prompt {
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-grass);
  border-bottom: 1px solid var(--color-grass);
  margin-bottom: 1rem;
}

.territory-prompt__text {
  font-family: var(--font-primary);
  font-size: var(--text-tagline);
  line-height: 1.3;
  letter-spacing: var(--tracking);
  color: var(--color-forest);
  font-weight: 400;
}

.territory-prompt__word {
  color: var(--color-clay);
  opacity: 0;
  transition: opacity 0.25s ease;
}