/* ══════════════════════════════════════════════════════════════
   DESIGNJOY (v2) — Moving Cards Hero Right Section
   ══════════════════════════════════════════════════════════════ */

.v2-pill-tag {
  background: var(--orange);
  color: #FFF;
  font-size: 11px;
  font-weight: 850;
  padding: 3px 8px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ─── HERO V2 CONTAINER ────────────────────────────────────── */
.hero-v2 {
  padding: 56px 0 80px;
}

.hero-container-v2 {
  grid-template-columns: 1.05fr 1.15fr;
  align-items: center;
  gap: 32px;
}

.hero-right-v2 {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

/* ─── MOVING CARDS MASONRY VIEWPORT ────────────────────────── */
.hero-masonry-viewport {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 560px;
  overflow: hidden;
  border-radius: 28px;
  background: #0E0E11;
  padding: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

.hero-masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  height: 100%;
}

.masonry-col {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.masonry-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  will-change: transform;
}

/* Pause scroll when hovering over the showcase */
.hero-masonry-viewport:hover .masonry-track {
  animation-play-state: paused !important;
}

/* ─── INFINITE SCROLL KEYFRAMES ────────────────────────────── */
@keyframes scrollUp {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(-50%); }
}

@keyframes scrollDown {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0%); }
}

.col-up .masonry-track {
  animation: scrollUp 28s linear infinite;
}

.col-down .masonry-track {
  animation: scrollDown 32s linear infinite;
}

.col-up-slow .masonry-track {
  animation: scrollUp 25s linear infinite;
}

/* ─── INDIVIDUAL CARD STYLES (MATCHING ATTACHED SCREENSHOT) ─── */
.m-card {
  width: 100%;
  min-height: 190px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  color: #FFF;
}
.m-card:hover {
  transform: scale(1.03);
  z-index: 10;
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
}

.m-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

/* ── COLUMN 1 CARDS ── */
.card-wilson {
  background: #F8F6F0;
  color: #111;
  min-height: 200px;
  border: 1px solid rgba(0,0,0,0.08);
}
.m-brand-wilson {
  font-size: 15px;
  font-weight: 850;
  color: #333;
  letter-spacing: -0.3px;
}
.script-custom {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  color: #EC4899;
  display: block;
  line-height: 1;
}
.m-wilson-ball {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ball-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #D97706, #78350F);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  border: 2px solid #5A2D0C;
}

.card-colgate {
  background: linear-gradient(145deg, #0D6EFD 0%, #084298 100%);
  min-height: 210px;
}
.m-logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-brand-colgate {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  color: #FFF;
}
.m-colgate-book {
  width: 100%;
  height: 95px;
  background: #EBF3FF;
  border-radius: 8px;
  transform: rotate(-8deg) translateY(12px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.m-colgate-book::after {
  content: '';
  position: absolute;
  top: 0; left: 20%;
  width: 45%; height: 100%;
  background: #0D6EFD;
  transform: skewX(-15deg);
}

.card-grubhub {
  background: linear-gradient(160deg, #FF6600 0%, #D94A00 100%);
  min-height: 220px;
}
.m-brand-grubhub {
  font-size: 22px;
  font-weight: 900;
  color: #FFF;
  letter-spacing: -0.5px;
  text-align: center;
  margin-top: 4px;
}
.m-grubhub-plate {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.plate-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  position: relative;
}
.plate-circle::after {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #78350F, #451A03);
}

/* ── COLUMN 2 CARDS ── */
.card-antler {
  background: #1E293B;
  color: #FFF;
  min-height: 240px;
  border: 1px solid rgba(255,255,255,0.1);
}
.m-brand-antler {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
}
.m-antler-quote {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-top: auto;
  color: #F8FAFC;
}

.card-bolt {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  min-height: 180px;
}
.m-brand-bolt {
  font-size: 26px;
  font-weight: 900;
  color: #FFF;
  letter-spacing: -1px;
  text-align: center;
}
.m-bolt-graphic {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #F3F4F6;
  margin: 12px auto 0;
  position: relative;
}
.m-bolt-graphic::after {
  content: '';
  position: absolute;
  bottom: 0; left: 15%;
  width: 70%; height: 50%;
  background: #EF4444;
  border-radius: 30px 30px 0 0;
}

.card-opa {
  background: linear-gradient(135deg, #EAB308 0%, #CA8A04 100%);
  color: #111;
  min-height: 200px;
}
.m-brand-opa {
  font-size: 20px;
  font-weight: 900;
  color: #FFF;
  text-align: center;
}
.m-opa-sushi {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.sushi-roll {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #FFF;
  border: 5px solid #14532D;
  position: relative;
}
.sushi-roll::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 2px;
  background: #F59E0B;
}

/* ── COLUMN 3 CARDS ── */
.card-outbrain {
  background: #D97706;
  min-height: 200px;
}
.m-brand-outbrain {
  font-size: 19px;
  font-weight: 850;
  color: #FFF;
}
.m-laptop-screen {
  width: 100%;
  height: 80px;
  background: #1F2937;
  border-radius: 8px 8px 0 0;
  border: 2px solid #9CA3AF;
  margin-top: 18px;
}

.card-marqeta {
  background: linear-gradient(170deg, #1E1B4B 0%, #0F172A 100%);
  min-height: 250px;
  border: 1px solid rgba(255,255,255,0.12);
}
.m-brand-marqeta {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 1px;
  color: #38BDF8;
}
.m-billboard-screen {
  width: 100%;
  height: 110px;
  background: #0284C7;
  border-radius: 12px;
  margin: 14px 0;
  box-shadow: 0 0 20px rgba(56,189,248,0.4);
}
.m-nasdaq-tag {
  font-size: 13px;
  font-weight: 800;
  color: #FFF;
  text-align: center;
}

.card-roland {
  background: #18181B;
  min-height: 170px;
  border: 1px solid rgba(255,255,255,0.08);
}
.m-brand-roland {
  font-size: 16px;
  font-weight: 800;
  color: #A1A1AA;
}
.m-roland-keys {
  width: 100%;
  height: 48px;
  background: #27272A;
  border-radius: 6px;
  margin-top: 14px;
  position: relative;
}

/* ─── RESPONSIVE FOR V2 ────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-container-v2 {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-right-v2 {
    justify-content: center;
  }
  .hero-masonry-viewport {
    max-width: 100%;
    height: 460px;
  }
}

@media (max-width: 600px) {
  .hero-masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .masonry-col.col-3 {
    display: none; /* Show 2 columns on mobile for clean look */
  }
}