/* ============================================================
   004, Email / Retention studio (Klaviyo portfolio)
   Full-bleed marquee of real email designs in mail-client
   frames. Hover a card: the rail pauses and the email scrolls.
   ============================================================ */

.emailmkt {
  background: transparent;
  color: inherit;
  padding-top: clamp(12px, 1.5vw, 20px);
  overflow: hidden;
}
.emailmkt .clients-head .lede strong { color: var(--brand); opacity: 1; font-weight: 700; }
.em-cta { margin-top: clamp(22px, 2.5vw, 32px); }
.emailmkt .lede { color: inherit; opacity: 0.6; }
.emailmkt .lede strong { color: inherit; font-weight: 700; }
.emailmkt .eyebrow { color: inherit; opacity: 0.55; }

/* ---- rail / marquee ---- */
.em-rail {
  --emv: 400px;               /* email viewport height inside a card */
  position: relative;
  margin-top: clamp(28px, 3vw, 44px);
  padding: 30px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.em-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: em-drift 90s linear infinite;
  will-change: transform;
}
.em-rail:hover .em-track { animation-play-state: paused; }
@keyframes em-drift {
  to { transform: translateX(-50%); }
}

/* ---- card ---- */
.em-card {
  flex: none;
  width: 272px;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  transform: translateY(0);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease;
}
.em-card:nth-child(even) { margin-top: 26px; }
.em-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
}

/* mail-client chrome */
.em-chrome {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(10, 10, 11, 0.08);
  position: relative;
  z-index: 2;
}
.em-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.em-who { min-width: 0; }
.em-from {
  font-size: 11.5px;
  font-weight: 700;
  color: #141414;
  line-height: 1.25;
}
.em-subj {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: #8a8a8a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 158px;
}
.em-tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: #b3b3b3;
  text-transform: uppercase;
}

/* email viewport: hover = scroll the email */
.em-view {
  position: relative;
  height: var(--emv);
  overflow: hidden;
  background: #f4f4f4;
}
.em-view img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  transition: transform 0.9s var(--ease-out);
}
.em-card:hover .em-view img {
  transform: translateY(calc(-100% + var(--emv)));
  transition: transform 9s linear;
}
.em-view::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.9));
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.em-card:hover .em-view::after { opacity: 0; }

/* ---- foot: meter + flow pipeline + link ---- */
.em-foot {
  margin-top: clamp(24px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.em-meter { min-width: 240px; }
.em-meter-label {
  font-size: 13px;
  color: inherit;
  opacity: 0.72;
  margin-bottom: 10px;
}
.em-meter-n,
.em-meter-u {
  font-family: var(--display);
  font-size: 22px;
  color: var(--acid);
  letter-spacing: -0.01em;
  margin-right: 1px;
}
.em-meter-u { margin-right: 8px; font-size: 15px; }
.em-meter-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(136, 136, 136, 0.28);
  overflow: hidden;
}
.em-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--acid);
  transition: width 1.6s var(--ease-out) 0.2s;
}
.emailmkt.is-in .em-meter-fill { width: 40%; }

.em-flows {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.em-flow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid rgba(136, 136, 136, 0.4);
  border-radius: 999px;
  color: inherit;
  opacity: 0.75;
  white-space: nowrap;
}
.em-arr { color: var(--acid); font-size: 12px; }

/* foot link adapts to the scrolling theme */
.emailmkt .btn-ghost {
  color: inherit;
  border-color: rgba(136, 136, 136, 0.4);
}
.emailmkt .btn-ghost:hover {
  border-color: currentColor;
  background: rgba(136, 136, 136, 0.12);
}

@media (max-width: 900px) {
  .em-rail { --emv: 340px; }
  .em-card { width: 236px; }
  .em-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .em-track { animation: none; }
  .em-rail { overflow-x: auto; }
  .em-card:hover .em-view img { transition-duration: 0.01s; }
}

/* ============================================================
   DOCK MAGNIFY (current), small email thumbnails on a baseline,
   magnify toward the cursor like the macOS dock.
   ============================================================ */
.em-dock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 30px var(--gutter) 40px;
  margin-top: clamp(10px, 1.5vw, 20px);
  overflow: visible;
}
.em-dock-item {
  flex: 0 0 auto;
  position: relative;
  --f: 0;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.em-di-card {
  width: 104px;
  height: 304px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transform-origin: bottom center;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease;
  will-change: transform;
}
.em-dock-item:hover .em-di-card { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.em-di-card img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  transition: transform 0.45s ease;
  will-change: transform;
}
.em-dock-item.peak .em-di-card { box-shadow: 0 34px 70px rgba(0, 0, 0, 0.62); }
.em-di-label {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: inherit;
  opacity: var(--f);
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.em-di-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.em-di-from { font-weight: 600; }

@media (max-width: 900px) {
  /* swipeable carousel: cards peek at the edges to signal swipe, the
     centred card enlarges and reveals its full email (see wireDockMobile) */
  .em-dock {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 14px max(16px, calc(50% - 86px)) 20px;
  }
  .em-dock::-webkit-scrollbar { display: none; }
  .em-dock-item { scroll-snap-align: center; }
  .em-di-card {
    width: 172px;
    height: 360px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  }
  .em-dock-item.peak .em-di-card {
    transform: scale(1.05);
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.62);
  }
  .em-di-label { display: none; }
}