/* Presentation typography and navigation UI only. The particle stage geometry,
   scene transitions, transforms and progress values remain owned by its rig. */
.page-about-particle-v3 .particle-v3-stage {
  --about-heading-size: clamp(2.25rem, 3.5vw, 3.5rem);
  --about-body-size: clamp(1rem, 1.1vw, 1.0625rem);
  --about-copy-top: max(146px, 23%);
  --about-copy-bottom: max(38px, 5.5vh);
  --about-list-gap: 20px;
  --color-heading-reveal: var(--color-heading-reveal-on-dark);
}

.page-about-particle-v3 .particle-v3-copy .particle-v3-copy__heading {
  top: calc(var(--about-copy-top) - 34px);
}

.page-about-particle-v3 #ana-icerik .particle-v3-copy h2 {
  color: var(--color-white);
  font-size: var(--about-heading-size);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.page-about-particle-v3 #ana-icerik .particle-v3-copy h2 > span:not(.heading-reveal__word) {
  color: var(--color-heading-reveal-on-dark);
  font: inherit;
  letter-spacing: inherit;
}

/* Legacy accent selectors also match the shared animation's nested spans. */
.page-about-particle-v3 #ana-icerik .particle-v3-copy h2 .heading-reveal__base {
  color: inherit;
}

.page-about-particle-v3 .particle-v3-copy .particle-v3-copy__body {
  top: auto;
  right: var(--page-gutter, 4vw);
  bottom: var(--about-copy-bottom);
  max-width: 440px;
  text-align: left;
}

.page-about-particle-v3 .particle-v3-copy .particle-v3-copy__body > p { max-width: none; }

.page-about-particle-v3 .particle-v3-copy__signals,
.page-about-particle-v3 .particle-v3-copy__branches {
  justify-content: flex-start;
}

.page-about-particle-v3 :is(.particle-v3-copy__signals, .particle-v3-copy__branches, .particle-v3-copy__services) {
  border-top: 1px solid var(--color-header-separator);
  margin-top: var(--about-list-gap);
  padding-top: var(--about-list-gap);
}

.page-about-particle-v3 .particle-v2-caption {
  top: calc(var(--about-copy-top) - 34px);
  right: var(--site-gutter, clamp(28px, 6.7vw, 130px));
  bottom: auto;
  left: auto;
  width: auto;
  text-align: right;
}

.page-about-cinematic.page-about-particle-v3 #ana-icerik .particle-v3-copy .particle-v3-copy__body > p,
.page-about-cinematic.page-about-particle-v3 #ana-icerik .particle-v3-copy .particle-v3-copy__services p {
  color: var(--color-on-dark-muted);
  font-size: var(--about-body-size);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0;
}

.page-about-particle-v3 .particle-v3-copy__body > p + p { margin-top: 16px; }

.page-about-cinematic.page-about-particle-v3 #ana-icerik .particle-v3-copy .particle-v3-copy__services p {
  font-size: calc(var(--about-body-size) - 2px);
  grid-template-columns: 13px minmax(0, 1fr);
  column-gap: 5px;
}

.page-about-particle-v3 .particle-v3-copy__signals span,
.page-about-particle-v3 .particle-v3-copy__branches :is(span, button) {
  color: var(--color-on-dark-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .04em;
}

.page-about-particle-v3 .particle-v3-copy__signals span::before,
.page-about-particle-v3 .particle-v3-copy__branches span::before { background: var(--color-primary); }

.page-about-cinematic.page-about-particle-v3 #ana-icerik .particle-v2-stage p.particle-v2-kicker {
  position: static;
  margin: 0 0 20px;
  gap: 12px;
  color: var(--color-white);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
}

.page-about-particle-v3 .particle-v2-kicker__star {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  opacity: 1;
}

.page-about-particle-v3 .particle-v2-caption [data-particle-v2-index] {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
}

.page-about-particle-v3 .particle-v2-caption strong {
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* The existing active slide class supplies the heading's resting coordinate. */
.page-about-particle-v3 .particle-v3-stage:has(.particle-v3-copy--hand.is-active),
.page-about-particle-v3 .particle-v3-stage:has(.particle-v3-copy--map.is-active) {
  --about-copy-top: max(146px, 20%);
}

.page-about-particle-v3 .particle-v2-status {
  display: block;
  top: auto;
  right: auto;
  bottom: var(--about-copy-bottom);
  left: var(--site-gutter, clamp(28px, 6.7vw, 130px));
  color: var(--color-on-dark-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
}

.page-about-particle-v3 .particle-v2-status .particle-v2-ui-content {
  display: grid;
  grid-template-columns: minmax(12.5px, 1.25vw) auto;
  align-items: center;
  gap: 16px;
}

/* Match the hero's white-to-green text sweep; keep the line independent. */
.page-about-particle-v3 [data-particle-v2-state] {
  color: var(--color-white);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .page-about-particle-v3 [data-particle-v2-state] {
    color: transparent;
    background: linear-gradient(100deg,
      var(--color-white) 0% 25%,
      var(--color-primary) 42%,
      var(--color-hero-progress-light) 50%,
      var(--color-primary) 58%,
      var(--color-white) 75% 100%);
    background-size: 400% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: about-status-sweep 2s linear infinite paused;
  }
}

.page-about-particle-v3 .is-copy-ui-visible [data-particle-v2-state].is-motion-visible {
  animation-play-state: running;
}

@keyframes about-status-sweep {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* The outer layer follows the rig immediately; only the inner entrance waits. */
.page-about-particle-v3 .has-copy-ui-motion :is(.particle-v2-caption, .particle-v2-status) {
  opacity: var(--particle-v3-copy-opacity, 1);
}

.page-about-particle-v3 .has-copy-ui-motion .particle-v2-caption {
  transform: translate3d(0, clamp(-24px, var(--particle-v3-title-y, 0px), 24px), 0);
}

.page-about-particle-v3 .has-copy-ui-motion .particle-v2-status {
  transform: translate3d(0, clamp(-24px, var(--particle-v3-body-y, 0px), 24px), 0);
}

.page-about-particle-v3 .has-copy-ui-motion .particle-v2-ui-content {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: none;
}

.page-about-particle-v3 .has-copy-ui-motion.is-copy-ui-visible .particle-v2-ui-content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 320ms ease-out, transform 400ms cubic-bezier(.22, 1, .36, 1);
}

.page-about-particle-v3 .particle-v2-status__line {
  width: 100%;
  height: 1px;
  background: var(--color-white);
  opacity: .5;
}

.page-about-particle-v3 .particle-v2-status__line::after {
  content: none;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .page-about-particle-v3 .particle-v3-stage:has(.particle-v3-copy--map.is-active) {
    --about-copy-top: 146px;
  }
}

@media (max-width: 760px) {
  .page-about-particle-v3 .particle-v3-stage,
  .page-about-particle-v3 .particle-v3-stage:has(.particle-v3-copy.is-active) {
    --about-copy-top: 186px;
    --about-copy-bottom: 24px;
    --about-list-gap: 12px;
  }

  /* Keep the full two-line heading column clear on a narrow screen. */
  .page-about-particle-v3 .particle-v2-caption {
    right: 24px;
  }
  .page-about-particle-v3 .particle-v2-caption strong { margin-top: 4px; }
  .page-about-particle-v3 .particle-v2-status {
    left: 24px;
  }
  .page-about-particle-v3 .particle-v2-status .particle-v2-ui-content {
    grid-template-columns: 8px auto;
    gap: 10px;
  }
  .page-about-particle-v3 .particle-v2-status span { font-size: 10px; }
  .page-about-particle-v3 .particle-v3-copy .particle-v3-copy__body {
    right: 24px;
    bottom: calc(var(--about-copy-bottom) + 62px);
  }
}

@media (max-width: 360px) and (max-height: 650px) {
  .page-about-particle-v3 .particle-v3-stage { --about-heading-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-about-particle-v3 [data-particle-v2-state] {
    animation: none;
    background: none;
    color: var(--color-white);
  }

  .page-about-particle-v3 .has-copy-ui-motion :is(.particle-v2-caption, .particle-v2-status, .particle-v2-ui-content),
  .page-about-particle-v3 .has-copy-ui-motion.is-copy-ui-visible .particle-v2-ui-content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}