/* About page — page-specific styles, built on top of case-study.css */

:root {
  /* align with styles.css so About's text matches home and play */
  --foreground: #16151a;
  /* text-safe pink: clears WCAG AA (4.5:1) at small sizes, where the
     brighter #e8264a used for the cursor and hero dots falls short */
  --cs-about-pink: #d81f45;
}

body {
  font-weight: 300;
}

.cs-about {
  width: 900px;
  max-width: calc(100% - 4rem);
  margin: 0 auto;
  padding: 4rem 0 6rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.cs-nav-links a.active {
  opacity: 1;
}

/* Intro */
.cs-about-intro {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
}

@media (min-width: 720px) {
  .cs-about-intro {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
}

.cs-about-photo {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.cs-about-intro-copy {
  max-width: 38rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cs-about-intro-copy .cs-body {
  margin: 0;
}

.cs-about-greeting {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--cs-about-pink, #e8264a);
  margin: 0;
}

.cs-about-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: cs-about-wave-shake 0.5s ease 2;
}

.cs-about-wave:hover {
  animation: cs-about-wave-shake 0.5s ease infinite;
}

@keyframes cs-about-wave-shake {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(12deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(8deg);
  }
}

.cs-about-companies {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--foreground);
}

.cs-about-companies > span:first-child {
  margin-right: 0;
  white-space: nowrap;
}

.cs-about-logo {
  position: relative;
  display: block;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
}

.cs-about-logo + .cs-about-logo {
  margin-left: -1px;
}

.cs-about-logo img {
  position: absolute;
  max-width: none;
}

.cs-about-logo--adcellerant {
  width: 116px;
}

.cs-about-logo--adcellerant img {
  width: 100.15%;
  height: 205.26%;
  left: -0.08%;
  top: -52.63%;
  object-fit: contain;
}

.cs-about-logo--dewey {
  width: 98px;
  border-radius: 5px;
}

.cs-about-logo--dewey img {
  position: absolute;
  inset: 9% 8%;
  width: 84%;
  height: 82%;
  object-fit: contain;
}

.cs-about-logo--callison {
  width: 122px;
}

.cs-about-logo--callison img {
  width: 104.05%;
  height: 286%;
  left: -2.01%;
  top: -92.75%;
  object-fit: contain;
}

.cs-about-logo--alibaba {
  width: 105px;
}

.cs-about-logo--alibaba img {
  width: 100%;
  height: 198.96%;
  left: 0;
  top: -52.26%;
  object-fit: contain;
}

.cs-about-resume-btn {
  position: relative;
  display: inline-block;
  width: 134px;
  height: 42px;
  margin-bottom: 6px;
  text-decoration: none;
}

.cs-about-resume-btn::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1.5px #222327;
  border-radius: 8px;
}

.cs-about-resume-btn span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #222327;
  color: #ffffff;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  transition: transform 0.2s ease;
}

.cs-about-resume-btn:hover span,
.cs-about-resume-btn:active span {
  transform: translate(7px, 6px);
}

/* Section blocks */
.cs-about-block {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 56rem;
}

.cs-about-block .cs-body {
  margin: 0;
}

.cs-about-heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--foreground);
  margin: 0 0 0.5rem;
}

.cs-about-subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--foreground);
  margin: 0;
}

.cs-body:has(+ .cs-about-subhead) {
  margin-bottom: 1rem;
}

.cs-about-link {
  display: inline-block;
  /* this link is a flex item, so inline-block blockifies — shrink-wrap
     it the flex way so it matches the EPE link's hit area */
  align-self: flex-start;
  margin-top: 0.5rem;
  color: var(--cs-about-pink, #d81f45);
  font-size: 0.875rem;
  text-decoration: underline;
}

.cs-about-link-arrow {
  display: inline-block;
  text-decoration: none;
}

.cs-about-link:hover .cs-about-link-arrow {
  animation: cs-about-link-bounce 0.6s ease infinite;
}

@keyframes cs-about-link-bounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

/* Notion templates */
.cs-about-notion {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}

@media (min-width: 720px) {
  .cs-about-notion {
    flex-direction: row;
    align-items: flex-start;
  }
}

.cs-about-notion-copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 26rem;
}

/* flex-basis resolves against the main axis, so `flex: 1` in the phone's
   column layout zeroed the height and both absolute images collapsed.
   Only take the flex sizing once the row layout kicks in. */
.cs-about-notion-images {
  position: relative;
  flex: none;
  width: 100%;
  height: 295px;
}

@media (min-width: 720px) {
  .cs-about-notion-images {
    flex: 1 0 0;
  }
}

.cs-about-notion-img {
  position: absolute;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px -20px rgba(20, 30, 60, 0.25);
  width: 75%;
  object-fit: cover;
}

.cs-about-notion-img--back {
  top: 0;
  left: 0;
  height: 81%;
}

.cs-about-notion-img--front {
  top: 21%;
  left: 28%;
  height: 79%;
}

/* Inspired photo marquee */
.cs-about-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

/* held at the first frame until the strip scrolls into view (marquee.js),
   so the loop always starts from the beginning rather than mid-run */
.cs-about-marquee-track {
  display: flex;
  width: max-content;
  animation: cs-about-marquee-scroll 28s linear infinite;
  animation-play-state: paused;
}

.cs-about-marquee.is-running .cs-about-marquee-track {
  animation-play-state: running;
}

.cs-about-marquee.is-running:hover .cs-about-marquee-track {
  animation-play-state: paused;
}

@keyframes cs-about-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-about-marquee-track {
    animation: none;
  }
}

.cs-about-photo-grid {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
}

.cs-about-photo-grid figure {
  position: relative;
  margin: 0;
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.cs-about-photo-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
}

.cs-about-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.cs-about-photo-grid figure:hover img {
  transform: scale(1.1);
}

.cs-about-photo-grid figcaption {
  font-size: 0.85rem;
  color: var(--foreground);
  text-align: center;
  white-space: nowrap;
}

.cs-about-block--last {
  margin-bottom: 1rem;
}

/* Footer */
.cs-about-footer {
  background: #fffbf8;
}

.cs-about-footer-links {
  display: flex;
  gap: 2rem;
}

.cs-about-footer-links a {
  color: var(--foreground);
  text-decoration: underline;
}

/* Phone layout: these rows were nowrap, so the intro column inherited a
   568px min-content width and the page panned sideways. */
@media (max-width: 720px) {
  .cs-about-intro-copy {
    max-width: 100%;
    min-width: 0;
  }

  .cs-about-companies {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }
}

@media (max-width: 640px) {
  .cs-about-greeting {
    font-size: 1.625rem;
  }
}

/* body copy steps down with the rest of the phone type scale */
@media (max-width: 640px) {
  .cs-body {
    font-size: 0.9375rem;
  }
}