/* ==========================================================================
   zejneba.com — Home page sections below the hero
   --------------------------------------------------------------------------
   Uses tokens.css. Values come from the Figma frame "Screen 5 - version 3.4".

   1. Logo strip ("Some of the teams I worked with")
   2. Proof ("Trusted by teams building serious products")
   3. Selected projects
   (4. Services moved to css/sections.css, it is shared with how-i-work.html)
   (6. Testimonials moved to css/sections.css, it is shared with how-i-work.html)
   8. Responsive
   ========================================================================== */


/* 1. Logo strip
   --------------------------------------------------------------------------
   Logos sit on a light strip, grey and faded. home.js copies the list to
   fill the screen and starts the loop (.is-running). Speed → LOGO_SPEED
   in js/home.js. The logo files have white backgrounds; multiply makes
   that white disappear into the strip.
   ========================================================================== */

.logos {
  --logos-bg: #fcfcfc;
  --logos-gap: 95px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 32px 0;
  background: var(--logos-bg);
}

.logos__title {
  padding: 0 16px;
  color: var(--neutral-subtle);
  text-align: center;
}

.logos__viewport {
  width: 100%;
  overflow: hidden;
  /* Logos fade in and out at the edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logos__track {
  display: flex;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  background: var(--logos-bg); /* needed so multiply blends against the strip */
}

.logos__track.is-running {
  justify-content: flex-start;
}

.logos__list {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--logos-gap);
  height: 50px;               /* tallest logo, so the strip never jumps */
  margin: 0;
  padding: 0 var(--logos-gap) 0 0; /* same space between the last and the next first logo */
  list-style: none;
}

.logos__track:not(.is-running) .logos__list {
  padding-left: var(--logos-gap);
}

.logos__list img {
  width: auto;
  max-width: none;
  height: var(--h, 30px);
  opacity: 0.4;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

/* Each logo links to the company's site (new tab). On hover the logo turns
   fully black, lifts a little and a small ↗ arrow shows next to it. */
.logos__link {
  position: relative;
  display: block;
  cursor: pointer;
}

.logos__link::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -16px;
  width: 12px;
  height: 12px;
  background: #000;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4 3h5v5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4 3h5v5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  pointer-events: none;
}

.logos__link:hover img,
.logos__link:focus-visible img {
  opacity: 1;
  transform: translateY(-2px);
}

.logos__link:hover::after,
.logos__link:focus-visible::after {
  opacity: 1;
  transform: none;
}

/* Some files have more empty space around the logo than others.
   These heights make them all look the same size (as in Figma). */
.logo--qred   { --h: 50px; }

/* The whole track moves by one list width (--logos-shift, set in js/home.js) */
.logos__track.is-running {
  animation: logos-loop var(--logos-duration, 40s) linear infinite;
}

/* Hovering the strip pauses the loop */
@media (hover: hover) {
  .logos__viewport:hover .logos__track {
    animation-play-state: paused;
  }
}

@keyframes logos-loop {
  to { translate: calc(-1 * var(--logos-shift, 0px)) 0; }
}


/* 2. Proof
   --------------------------------------------------------------------------
   Left: two stats. Middle: a work screen. Right: three highlight cards.
   ========================================================================== */

.proof {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(1106px + var(--content-extra), 100% - 48px);
  margin: 0 auto;
  padding: 150px 0 120px;
}

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

.proof__intro {
  max-width: 1000px;
  color: var(--neutral-muted);
}

.proof__grid {
  display: grid;
  grid-template-columns: 263fr 283fr 538fr;
  gap: 11px;
}

.proof__stats {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.proof__highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 236fr 197fr;
  gap: 20px 12px;
}

/* -- Cards -- */

.proof-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 76px 20px 16px;
  border-radius: 15px;
}

.proof-card--wide {
  grid-column: 1 / -1;
}

.proof-card--grey {
  background: var(--neutral-grey-50);
  color: var(--base-black-card);
}

/* Text under the card titles: lighter than the title */
.proof-card p {
  color: var(--neutral-muted);
}

.proof-card--grey .proof-card__number {
  color: var(--base-black);
}


/* -- Work screen: sits in the bottom-left, cropped at the right edge -- */

.proof-shot {
  position: relative;
  min-height: 453px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--neutral-grey-50);
}

.proof-shot img {
  position: absolute;
  top: 33px;
  bottom: 0;
  left: 19px;
  width: calc(100% - 19px);
  height: calc(100% - 33px);
  border: 1px solid #f2f2f2;
  border-radius: 14px 0 6px 0;
  object-fit: cover;
  object-position: 4% 0;
  background: var(--base-white);
}


/* 3. Selected projects
   --------------------------------------------------------------------------
   Left: counter, summary and buttons. Right: the open project (wide card)
   and the next one peeking in. home.js moves the cards; the card that
   closes shrinks away on the left and is then moved to the end of the list.
   ========================================================================== */

.projects {
  --project-peek: 140px;
  --project-gap: 16px;
  --project-height: 466px;

  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(1110px + var(--content-extra), 100% - 48px);
  margin: 0 auto;
  padding: 120px 0 280px;
}

.projects__title {
  max-width: 476px;
}

.projects__body {
  display: grid;
  grid-template-columns: 317px 1fr;
  column-gap: clamp(40px, 12.5vw - 50px, 139px);
}

/* -- Left column -- */

.projects__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding-top: 52px;
}

.projects__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.projects__counter {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  white-space: nowrap;
}

.projects__current {
  color: var(--base-black);
}

.projects__total {
  color: var(--neutral-muted);
}

.projects__summary {
  color: var(--base-black);
}

.projects__controls {
  display: flex;
  gap: 16px;
}

/* -- Cards -- */

.projects__track {
  container-type: inline-size;
  display: flex;
  height: var(--project-height);
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.project-card {
  --project-open-width: min(498px + var(--content-extra), 100cqw - var(--project-peek) - var(--project-gap));

  position: relative;
  flex: 0 0 0;
  margin-right: 0;
  overflow: hidden;
  border-radius: 16px;
  color: var(--base-black);
  opacity: 0;
  transition:
    flex-basis 0.7s var(--ease-in-out),
    margin-right 0.7s var(--ease-in-out),
    border-radius 0.7s var(--ease-in-out),
    opacity 0.5s ease;
}

.project-card.is-open {
  flex-basis: var(--project-open-width);
  margin-right: var(--project-gap);
  border-radius: 20px;
  opacity: 1;
}

.project-card.is-next {
  flex-basis: var(--project-peek);
  opacity: 1;
}

/* The whole card is a link that opens the project overlay (js/project-sheet.js) */
.project-card__link {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  color: inherit;
}

.project-card__link:focus-visible {
  outline-offset: -4px;
}

/* Hover: the card darkens a touch and an "open" arrow appears top right */
.project-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--base-black);
  opacity: 0;
  transition: opacity var(--duration-base) ease;
}

.project-card__icon {
  --icon-size: 20px;

  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  corner-shape: round;
  background: var(--base-white);
  box-shadow: var(--shadow-raised);
  color: var(--base-black);
  opacity: 0;
  scale: 0.8;
  transition:
    opacity var(--duration-base) ease,
    scale var(--duration-base) var(--ease-out);
}

.project-card__icon z-icon {
  transition: translate var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .project-card__link:hover::before {
    opacity: 0.04;
  }

  .project-card--stokr .project-card__link:hover::before,
  .project-card--velar .project-card__link:hover::before {
    background: var(--base-white);
    opacity: 0.06;
  }

  .project-card__link:hover .project-card__icon {
    opacity: 1;
    scale: 1;
  }

  .project-card__link:hover .project-card__icon z-icon {
    translate: 1px -1px;
  }
}

.project-card__link:focus-visible .project-card__icon {
  opacity: 1;
  scale: 1;
}

/* The logo sits in the middle of the open card. Its box is as wide as the
   open card, so it never moves while the card opens or closes. Logo files
   are black on transparent; --project-logo-filter makes them light on
   dark cards. */
.project-card__title {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--project-open-width);
  margin: 0;
}

.project-card__logo {
  width: var(--logo-width);
  max-width: 56%;
  height: auto;
  filter: var(--project-logo-filter, none);
  opacity: 0;
  scale: 0.96;
  transition:
    opacity 0.3s ease,
    scale 0.3s ease;
}

.project-card.is-open .project-card__logo {
  opacity: 1;
  scale: 1;
  transition:
    opacity 0.5s ease 0.35s,
    scale 0.7s var(--ease-out) 0.35s;
}

/* home.js uses this for one frame, to put a card back at the front unseen */
.projects__track.is-instant .project-card {
  transition: none;
}

/* Drag to switch: the cards follow the hand a little (--drag-x, set by
   home.js) and spring back on release. The peeking card opens on click. */
.projects__track {
  --drag-x: 0px;

  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.projects__track.is-dragging {
  cursor: grabbing;
}

.projects__track .project-card {
  translate: var(--drag-x) 0;
}

.projects__track:not(.is-dragging) .project-card {
  transition:
    flex-basis 0.7s var(--ease-in-out),
    margin-right 0.7s var(--ease-in-out),
    border-radius 0.7s var(--ease-in-out),
    opacity 0.5s ease,
    translate 0.5s var(--ease-out);
}

.projects__track.is-dragging .project-card__link {
  cursor: grabbing;
}

.project-card__link {
  cursor: inherit;
  -webkit-user-drag: none;
}

.project-card__logo {
  -webkit-user-drag: none;
  pointer-events: none;
}

.project-card.is-next .project-card__link {
  cursor: pointer;
}

.projects__track.is-dragging .project-card.is-next .project-card__link {
  cursor: grabbing;
}

/* One solid colour per project; dark cards turn the logo light */
.project-card--stokr {
  --project-logo-filter: invert(0.97);
  background: var(--base-black);
}

.project-card--meridian {
  background: var(--neutral-grey-100);
  box-shadow: inset 0 0 0 1px var(--neutral-line);
}

.project-card--velar {
  --project-logo-filter: invert(0.95) sepia(0.15);
  background: var(--scale-olive-900);
}

/* Widths are set by eye, so the three logos feel the same size */
.project-card__logo--stokr {
  --logo-width: 200px;
}

.project-card__logo--meridian {
  --logo-width: 248px;
}

.project-card__logo--velar {
  --logo-width: 224px;
}


/* 8. About ("Meet the Designer behind the screens")
   --------------------------------------------------------------------------
   Left: a polaroid tilted -3deg with two strips of tape, a handwritten note
   and an arrow pointing at it. Right: bio, with the button pinned to the bottom.
   ========================================================================== */

.about {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 98px;
  width: min(1116px + var(--content-extra), 100% - 48px);
  margin: 0 auto;
  /* Room under the testimonials, and for the note that sits above the polaroid */
  padding: 160px 0 150px;
}

.about__media {
  position: relative;
  flex: 0 0 404px;
  display: flex;
  justify-content: center;
  margin: 0;
}

.polaroid {
  position: relative;
  width: 380px;
  max-width: 100%;
  padding: 12px 12px 14px;
  border-radius: var(--radius-xs);
  background: var(--base-white);
  filter: drop-shadow(0 18px 25px rgba(20, 20, 20, 0.14));
  rotate: -3deg;
}

.polaroid__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 356 / 392;
  border-radius: 3px;
  object-fit: cover;
  object-position: 50% 40%;
}

.polaroid__caption {
  margin-top: 18px;
  color: var(--neutral-muted);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.0025em;
  text-align: center;
}

.polaroid__tape {
  position: absolute;
  height: 30px;
  border-radius: 2px;
}

.polaroid__tape--top {
  top: -10px;
  left: calc(50% - 55px);
  width: 110px;
  background: var(--brand-sage);
  rotate: 4deg;
}

.polaroid__tape--corner {
  top: 81%;
  right: -30px;
  width: 80px;
  background: var(--brand-stone);
  rotate: -38deg;
}

.about__note {
  position: absolute;
  top: -55px;
  left: 288px;
  width: 217px;
  color: #0d0d0d;
  font-family: "Gochi Hand", cursive;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
}

.about__arrow {
  position: absolute;
  top: -12px;
  left: 368px;
  width: 48px;
  height: 42px;
  color: #000000;
}

.about__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  min-width: 0;
  min-height: 422px;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about h2 {
  max-width: 422px;
  color: var(--base-black);
}

.about__accent {
  color: var(--brand-olive);
}

.about__bio {
  display: flex;
  flex-direction: column;
  gap: 26px;
  color: var(--neutral-muted);
}

/* 9. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .projects__body {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .projects__aside {
    order: 1;
    flex-direction: row;
    align-items: flex-end;
    padding-top: 0;
  }

  .projects__summary {
    max-width: 420px;
  }

  .proof__grid {
    grid-template-columns: 1fr 1fr;
  }

  .proof__highlights {
    grid-column: 1 / -1;
    gap: 12px;
  }

  .about {
    flex-direction: column;
    gap: 72px;
    padding-top: 100px;
  }

  .about__content {
    min-height: 0;
    max-width: 640px;
  }
}

@media (max-width: 860px) {
  .logos {
    --logos-gap: 56px;
    padding: 24px 0;
    gap: 16px;
  }

  .logos__list {
    height: 40px;
  }

  .logos__list img {
    height: calc(var(--h, 30px) * 0.8);
  }

  .proof {
    gap: 32px;
    padding: 96px 0 80px;
  }

  .proof h2 {
    font-size: 32px;
    line-height: 38px;
  }

  .proof-card__number {
    font-size: 40px;
    line-height: 46px;
  }

  .proof-card h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .projects {
    --project-peek: 72px;
    --project-height: 420px;
    gap: 32px;
    padding: 72px 0 168px;
  }

  .projects h2 {
    font-size: 32px;
    line-height: 38px;
  }

  .projects__current {
    font-size: 56px;
    line-height: 60px;
  }

  .projects__total {
    font-size: 36px;
    line-height: 42px;
  }

  .project-card.is-next .project-card__icon {
    display: none;
  }

  .about {
    padding: 80px 0 96px;
  }

  .about h2 {
    font-size: 32px;
    line-height: 38px;
  }
}

@media (max-width: 600px) {
  .proof__grid,
  .proof__highlights {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .proof__stats,
  .proof__highlights {
    grid-column: auto;
  }

  .proof-card {
    padding-top: 48px;
  }

  .proof-shot {
    min-height: 360px;
  }

  .projects {
    --project-peek: 32px;
    --project-gap: 10px;
  }

  .projects__aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* Title first, then the photo, then the bio and button */
  .about {
    align-items: stretch;
    gap: 0;
    padding-top: 40px;
  }

  .about__content,
  .about__text {
    display: contents;
  }

  .about h2 {
    order: -1;
    margin-bottom: 40px;
  }

  .about__bio {
    margin-top: 48px;
  }

  .about__content > .button {
    align-self: flex-start;
    margin-top: 32px;
  }

  .about__media {
    flex-basis: auto;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  .about__note {
    position: static;
    order: -1;
    rotate: -3deg;
  }

  .about__arrow {
    display: none;
  }

  .polaroid {
    width: min(340px, 100% - 24px);
  }

  .polaroid__tape--corner {
    right: -20px;
    width: 64px;
  }
}

/* Reduced motion: no loop, the logos wrap onto as many rows as needed */
@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-card__logo,
  .project-card.is-open .project-card__logo {
    transition: none;
  }

  .logos__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .logos__track {
    width: auto;
  }

  .logos__list {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    padding: 0 16px;
    row-gap: 24px;
  }
}


/* Off screen (js/home.js): the wheel and the logo strip stand still */
.orbit.is-offscreen .orbit__item,
.logos__viewport.is-offscreen .logos__track {
  animation-play-state: paused;
}