/* ==========================================================================
   Conversion (#conversion) — rules transcribed verbatim from
   docs/research/css/index.f9761eab.pretty.css (lines ~6407-6740, 3414-3465)
   Only the `--asset` variant used by this page is carried over.
   ========================================================================== */

/* --- .conversion -------------------------------------------------------- */
.conversion {
  padding: 80px var(--grid-gutter-width);
  background: var(--primitive-black);
  grid-template-rows: repeat(3, auto);
  grid-template-columns: 1fr;
  grid-template-areas: "heading" "body" "cta";
  display: grid;
  position: relative;
}
@media (width >= 744px) {
  .conversion {
    grid-template: "heading heading" 1fr "cta body" / auto 1fr;
  }
}
@media (width >= 1280px) {
  .conversion {
    padding: 120px var(--grid-gutter-width);
  }
}

/* .conversion--asset overrides the grid with a centered flex column and
   suppresses the ::after hairline. */
.conversion--asset {
  text-align: center;
  z-index: 2;
  background: 0 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
  display: flex;
  position: relative;
}
.conversion--asset::after {
  display: none;
}

/* --- title / body ------------------------------------------------------- */
.conversion__title {
  max-width: calc((var(--grid-column-width) * 11) + (var(--grid-gutter-width) * 10));
  grid-area: heading;
  margin-bottom: 32px;
}
@media (width >= 744px) {
  .conversion__title {
    max-width: calc((var(--grid-column-width) * 9) + (var(--grid-gutter-width) * 8));
  }
}
@media (width >= 1280px) {
  .conversion__title {
    max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7));
    margin-bottom: 40px;
  }
}
@media (width >= 1920px) {
  .conversion__title {
    max-width: calc((var(--grid-column-width) * 7) + (var(--grid-gutter-width) * 6));
  }
}

.conversion__title--asset {
  max-width: none;
  margin-bottom: 40px;
}
@media (width >= 744px) {
  .conversion__title--asset {
    max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7));
  }
}
@media (width >= 1020px) {
  .conversion__title--asset {
    max-width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5));
    margin-bottom: 56px;
  }
}

.conversion__body {
  grid-area: body;
  align-self: center;
  margin-bottom: 80px;
}
@media (width >= 744px) {
  .conversion__body {
    margin-bottom: 0;
    margin-left: 40px;
  }
}
html:not([lang]) .conversion__body,
html[lang^="en"] .conversion__body {
  max-width: 14em;
}
html[lang^="ja"] .conversion__body,
html[lang^="ko"] .conversion__body {
  width: 272px;
}

.conversion__body--asset {
  margin-bottom: 40px;
}
@media (width >= 744px) {
  .conversion__body--asset {
    margin-bottom: 40px;
    margin-left: 0;
  }
  html:not([lang]) .conversion__body--asset,
  html[lang^="en"] .conversion__body--asset {
    max-width: none;
  }
}
@media (width >= 1020px) {
  .conversion__body--asset {
    margin-bottom: 56px;
  }
}

/* --- CTA: desktop only (the sticky MobileCta replaces it < 1020px) -------
   Source puts these rules directly on the anchor; here they sit on the
   entrance-animation wrapper so the anchor keeps its `inline-flex`. */
.flagship-conversion__cta {
  display: none;
  grid-area: cta;
  justify-content: center;
}
@media (width >= 1020px) {
  .flagship-conversion__cta {
    display: flex;
  }
}

/* --- asset container / glow / device ------------------------------------ */
.conversion__asset-container {
  margin-top: 56px;
  position: relative;
}

.conversion__glow {
  background: var(--glow-color, #8c613d);
  filter: blur(150px);
  will-change: transform;
  border-radius: 700px;
  width: 100%;
  height: 700px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
}
@media (width >= 744px) {
  .conversion__glow {
    height: 160%;
  }
}

.conversion__asset {
  width: calc((var(--grid-column-width) * 10) + (var(--grid-gutter-width) * 9));
  border: 1px solid var(--color-gray-200);
  background-color: var(--primitive-black);
  border-bottom: none;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  margin: 0 auto;
  display: block;
  position: relative;
  overflow: hidden;
}
.conversion__asset::before {
  content: "";
  width: 100%;
  padding-top: 88.843%;
  display: block;
}
@media (width >= 744px) {
  .conversion__asset {
    margin-top: 64px;
  }
  .conversion__asset::before {
    padding-top: 35.59%;
  }
}
@media (width >= 1020px) {
  .conversion__asset::before {
    padding-top: 30.397%;
  }
}
@media (width >= 1280px) {
  .conversion__asset::before {
    padding-top: 30%;
  }
}
@media (width >= 1440px) {
  .conversion__asset::before {
    padding-top: 30.195%;
  }
}
@media (width >= 1920px) {
  .conversion__asset::before {
    padding-top: 30.013%;
  }
}

.conversion__asset-bezel {
  background-color: #626262;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  position: absolute;
  inset: 12px 12px 0;
  overflow: hidden;
}

/* --- campaign marquee (not in the source) --------------------------------
   The reference filled this bezel with a looping film, and everything above
   this comment is its own CSS. What follows is the replacement content: the
   three Zaubermensch campaign boards running through the frame as one track.

   It paints its own ground rather than overriding `.conversion__asset-bezel`
   (which is transcribed and stays that way). The boards are transparent PNGs
   of white Instagram cards, and the bezel's #626262 behind them turned the
   cards muddy; near-black lets them read as a screen instead. */
.conversion__feed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #0b0b0b;
  border-radius: inherit;
}

.conversion__feed-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
  /* One full cycle shows all three campaigns, so this is really "how long
     before a visitor has seen everything". At 60s it was ~40px/s and nobody
     stands at the foot of a page that long; 32s puts a board past the frame
     roughly every ten seconds, which is the pace a logo marquee runs at. */
  animation: conversionFeed 32s linear infinite;
}

/* Paused rather than unset, so the track holds its position instead of
   snapping back to the start when the section leaves the viewport. */
.conversion__feed[data-running="false"] .conversion__feed-track {
  animation-play-state: paused;
}

/* No gap, deliberately. Each board is a cut section of one long row of posts —
   the cut runs through a post at both ends — so butting them continues the row
   rather than lining up three separate pictures. It only works because the
   pipeline trims the transparent margin off: with that margin still on, the
   boards were held ~4% of their own width apart no matter what the gap said.
   Measured on the trimmed files, the row of posts sits at 26.4-26.6% to
   83.0-83.3% of the height on all three, so it stays level across a seam.

   Height is short of the frame because the trim took the breathing room with
   it. The phone in each board is the full height of the artwork, and flush
   against the bezel it reads as cropped rather than as sitting in a screen. */
/* The frame used to hold three cut sections of one continuous row of posts,
   butted with no gap so a seam continued the row. It shows separate pieces of
   work now — a flyer, a folder, a business card, an event frame, a post — and
   butting those would read as one collage rather than five works, so each
   carries its own margin.

   The margin is on the item, not a `gap` on the track, and that is what keeps
   the loop exact: ten items with ten margins is precisely twice five items
   with five margins, so translateX(-50%) still lands pass two where pass one
   began. A `gap` would give nine gaps across the track and drift by one. */
.conversion__feed-item {
  flex: none;
  height: 92%;
  width: auto;
  object-fit: contain;
  user-select: none;
  margin-right: 24px;
}
@media (width >= 744px) {
  .conversion__feed-item { margin-right: 32px; }
}

@keyframes conversionFeed {
  from { transform: translateX(0); }
  /* Exactly half: six boards, no gaps, so half the track is the first three
     and pass two is standing where pass one began. */
  to   { transform: translateX(-50%); }
}

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

.conversion__fade {
  background: linear-gradient(#0000 0%, #00000080 100%);
  width: 100%;
  height: calc(100% - 12px);
  position: absolute;
  bottom: 0;
  left: 0;
}