/* ============================================================
   WORK / CASE STUDIES SECTION
   ============================================================ */

/* ─── OUTER SECTION FRAME ────────────────────────── */
.work-section {
  background: var(--color-bg-primary);
  padding: var(--space-16) var(--space-8) var(--space-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}

/* ─── ROW CONTAINER ──────────────────────────────── */
.work-row {
  padding: 0;
  width: 95vw;
  max-width: 1280px;
}

/* ─── ROW HEADER ─────────────────────────────────── */
.work-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  gap: var(--space-4);
}

.work-row-title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-on-light);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* ─── CARD TRACK — single vertical stack ─────────── */
.work-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);  /* generous breathing room between cards */
  width: 100%;
  max-width: 960px;
}

/* ─── CASE STUDY CARD ────────────────────────────── */
.case-study-card {
  background: none;
  border: none;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.case-study-card:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}


/* Focus ring for keyboard nav — WCAG 2.4.7 */
.case-study-card:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 3px;
}

/* ─── CARD TAGS ──────────────────────────────────── */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.card-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background-color: var(--color-bg-light-row);
  color: var(--color-text-on-light);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: 100px;
  border: 1px solid var(--color-tag-border-light);
  white-space: nowrap;
}

/* ─── CARD MOCKUP IMAGE ──────────────────────────── */
.card-mockup {
  width: 100%;
  height: 540px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #e4e4e4;
  margin-bottom: 0;
  flex-shrink: 0;
}

.card-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Placeholder shimmer when no image */
.card-mockup.is-placeholder {
  background: linear-gradient(
    135deg,
    #e8e8e8 0%,
    #d8d8d8 50%,
    #e8e8e8 100%
  );
  background-size: 200% 200%;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── REAL IMAGE MOCKUP (has-image) ──────────────── */
.card-mockup.has-image {
  background: transparent;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-mockup.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  display: block;
}

/* Variant: image fills the full card width with no padding */
.card-mockup.has-image.card-mockup--fill {
  padding: 0;
  background: #f0eeea;
}

.card-mockup.has-image.card-mockup--fill img {
  object-fit: cover;
  object-position: center top;
}

/* Variant: crop black background, show phone only — remove class to revert */
.card-mockup.has-image.card-mockup--phone-crop {
  background: #000;
}

.card-mockup.has-image.card-mockup--phone-crop video {
  transform: scale(1.8) translateY(0%);
  transform-origin: center center;
}

/* ─── MOCKUP SCROLL ANIMATION ────────────────────── */
.card-mockup.has-image.mockup-scroll-play img {
  animation: mockup-scroll 2.5s ease-in-out 1 forwards;
}

@keyframes mockup-scroll {
  0%   { object-position: top; }
  50%  { object-position: bottom; }
  100% { object-position: top; }
}

/* ─── CARD CONTENT ───────────────────────────────── */
.card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-text-on-light);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.card-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--color-text-on-light-body);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-5);
}

.card-date {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--font-semibold);
  color: var(--color-text-on-light);
  margin-bottom: var(--space-5);
}

/* ─── CARD STATS ─────────────────────────────────── */
.card-stats {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
}

.card-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.card-stat-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--font-regular);
  color: var(--color-text-on-light-muted);
}

.card-stat-value {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text-on-light);
}

.card-stat-arrow {
  color: var(--color-stat-positive);
  font-size: 14px;
  font-weight: var(--font-bold);
}

/* ─── CARD CTA ───────────────────────────────────── */
.card-cta {
  margin-top: auto;
}

/* ─── CARD FOOTER — title stacked above meta ─────── */
.card-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: 0;
}

.card-footer-title {
  font-family: tiemposText, "tiemposText Fallback", serif;
  font-size: 21.2px;
  font-weight: 400;
  line-height: 1.4;
  color: #ffffff;
  margin: 0;
}

.card-footer-meta {
  font-family: tiemposText, "tiemposText Fallback", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ─── ROLE BADGE ─────────────────────────────────── */
.card-role {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: var(--font-medium);
  color: var(--color-text-on-light-muted);
  margin-bottom: var(--space-4);
}

.card-role::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-accent-primary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1024px) {
  .card-mockup {
    height: 420px;
  }
}

@media (max-width: 768px) {
  .work-section {
    padding: var(--space-12) var(--space-4) var(--space-16);
    gap: var(--space-8);
  }
  .work-track {
    gap: var(--space-12);
  }
  .card-mockup {
    height: 320px;
  }
}

@media (max-width: 480px) {
  .card-mockup {
    height: 240px;
  }
  .card-footer-title {
    font-size: 19px;
  }
  .card-footer-meta {
    font-size: 16px;
  }
}

/* ═══════════════════════════════════════════════════
   COGENT CARD
   thumb1 shown → slides out left / thumb2 slides in
   from right → held → thumb2 slides out right /
   thumb1 slides back in → loop
   ═══════════════════════════════════════════════════ */
.card-mockup--cogent-anim {
  position: relative;
  background: #e8e8e8;
  overflow: hidden;
  padding: 0;
  display: block;
}

/* Both frames fill the container absolutely */
.card-mockup--cogent-anim .cogent-f1,
.card-mockup--cogent-anim .cogent-f2 {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
  object-position: center;
  display: block;
}

/* thumb2 starts off-screen right */
.card-mockup--cogent-anim .cogent-f2 {
  transform: translateX(100%);
}

/* ── Triggered by .is-playing (IntersectionObserver) ── */
.card-mockup--cogent-anim.is-playing .cogent-f1 {
  animation: cogent-f1-slide 8s ease-in-out infinite;
}
.card-mockup--cogent-anim.is-playing .cogent-f2 {
  animation: cogent-f2-slide 8s ease-in-out infinite;
}

/*
  Beat map (8 s total)
  ────────────────────────────────────────────────
   0  – 20 %  (0 – 1.6 s)   thumb1 shown, pause
  20  – 32 %  (1.6 – 2.56s) thumb1 exits left / thumb2 enters right
  32  – 68 %  (2.56 – 5.44s) thumb2 held
  68  – 80 %  (5.44 – 6.4 s) thumb2 exits right / thumb1 enters left
  80  – 100 % (6.4 – 8 s)   thumb1 shown, pause before loop
*/
@keyframes cogent-f1-slide {
  0%,  20% { transform: translateX(0); }
  32%, 68% { transform: translateX(-100%); }
  80%, 100% { transform: translateX(0); }
}

@keyframes cogent-f2-slide {
  0%,  20% { transform: translateX(100%); }
  32%, 68% { transform: translateX(0); }
  80%, 100% { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════
   DIRECT CARD — full view → smooth zoom to pills
   ═══════════════════════════════════════════════════ */
.card-mockup--direct-anim {
  position: relative;
  background: #f0f0fa;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Lottie fills the full card container */
.direct-lottie {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.direct-lottie svg {
  width: 100% !important;
  height: 100% !important;
}

/* Portrait phone image — fills container height, centered */
.card-mockup--direct-anim img {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  display: block;
  /* transform-origin at the pills (~82% from top of image) */
  transform-origin: 50% 82%;
}

.card-mockup--direct-anim.is-playing img {
  animation: direct-zoom 9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

/* Full → pause → zoom in to pills → hold → zoom back → pause */
@keyframes direct-zoom {
  0%,  22% { transform: scale(1); }
  42%, 72% { transform: scale(2.6); }
  90%, 100% { transform: scale(1); }
}

/* ── Reduced motion: freeze frames, no animation ── */
@media (prefers-reduced-motion: reduce) {
  .card-mockup--cogent-anim.is-playing .cogent-f1,
  .card-mockup--cogent-anim.is-playing .cogent-f2,
  .card-mockup--cogent-anim.is-playing .cogent-click-ring,
  .card-mockup--direct-anim.is-playing img {
    animation: none;
  }
  .card-mockup--cogent-anim .cogent-f1 { transform: translateX(0); }
  .card-mockup--cogent-anim .cogent-f2 { transform: translateX(100%); }
}