/* ============================================
   WORK v3 — "Ideas we've brought to life"
   Editorial case grid (live on index.html).
   Even 2×2 grid of case cards (one column on phones). The fintech card
   frames a live-site screenshot in a browser window instead of a photo.
   Media is graded down to sit on the dark page and returns to full colour on hover.
============================================ */
.cases{ position:relative; padding: clamp(72px, 8vw, 120px) 0 clamp(64px, 7vw, 100px); }

/* ---- Head ---- */
.cases-head{
  display:grid; grid-template-columns: 1fr minmax(260px, 380px); align-items:end; gap: 40px;
  padding-bottom: clamp(28px, 3vw, 44px); margin-bottom: clamp(28px, 3vw, 44px);
  border-bottom: 1px solid var(--line-soft);
}
.cases-kicker{ display:flex; align-items:center; gap: 12px; color: rgba(244,244,239,.6); letter-spacing:.26em; }
.cases-dot{ width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow: 0 0 10px rgba(198,255,62,.6); }
.cases-title{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem); line-height: .98; letter-spacing: -.025em;
}
.cases-title em{ font-style: italic; font-weight: 900; color: var(--accent); }
.cases-intro{ color: var(--fg-muted); line-height: 1.7; font-size: 1rem; }

/* ---- Grid ---- */
.cases-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 3vw, 44px) clamp(16px, 1.8vw, 26px); }
.case--half   { grid-column: span 6; }

/* ---- Card ---- */
.case{ display:flex; flex-direction:column; gap: 20px; color: var(--fg); }
.case-media{
  position:relative; overflow:hidden; border-radius: 6px;
  background: var(--bg-soft);
  outline: 1px solid var(--line-soft); outline-offset:-1px;
  aspect-ratio: 16 / 10;
  isolation:isolate;
}
.case-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none;
  filter: saturate(.82) brightness(.86) contrast(1.04);
  transition: filter .8s var(--ease), opacity 1.2s ease;
}
/* dark grade at the base so badges and the page edge read cleanly */
.case-media::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(0deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,0) 38%), linear-gradient(180deg, rgba(5,5,5,.35), rgba(5,5,5,0) 25%);
  transition: opacity .6s ease;
}
.case:hover .case-media img{ filter: saturate(1) brightness(1) contrast(1.02); }
.case:hover .case-media::after{ opacity:.6; }

/* film loop: silent 6s clip over its poster frame; fades through the poster at the loop point */
.case-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: saturate(.82) brightness(.86) contrast(1.04);
  opacity:0; transition: opacity .45s ease, filter .8s var(--ease);
}
.case-video.is-playing{ opacity:1; }
.case:hover .case-video{ filter: saturate(1) brightness(1) contrast(1.02); }

/* badge (top-left) */
.case-badge{
  position:absolute; z-index:2; top:16px; left:16px;
  display:inline-flex; align-items:center; gap: 9px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(8,8,8,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244,244,239,.14);
  font-family: var(--font-display); font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.case-play{ width:0; height:0; border-left: 7px solid var(--accent); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.case-badge--live i{ position:relative; width:7px; height:7px; border-radius:50%; background: var(--accent); }
.case-badge--live i::after{ content:''; position:absolute; inset:0; border-radius:50%; background: var(--accent); animation: casePulse 2.4s ease-out infinite; }
@keyframes casePulse{ to{ transform: scale(3); opacity:0; } }


/* ---- Info ---- */
.case-info{ display:grid; grid-template-columns: auto 1fr; gap: 18px; align-items:start; }
.case-num{ font-family: var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.14em; color: var(--accent); padding-top: 7px; }
.case h3{
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.7vw, 1.6rem); letter-spacing:-.01em;
  margin-bottom: 8px; display:inline;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
  transition: background-size .6s var(--ease);
}
.case:hover h3{ background-size: 100% 2px; }
.case-desc{ color: var(--fg-muted); font-size: .92rem; line-height: 1.65; max-width: 54ch; margin-top: 10px; }
.case-tags{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 14px; }
.case-tags span{
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--font-display); font-size:.6rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color: rgba(244,244,239,.66);
}

/* ---- Fintech card: live site in a browser frame on a lit backdrop ---- */
.case-media--ui{
  background:
    radial-gradient(70% 80% at 62% 55%, rgba(198,255,62,.14), transparent 70%),
    linear-gradient(135deg, #12140e, #0a0a0a 65%);
}
.case-media--ui::after{ display:none; }
.case-ui{ position:absolute; inset:0; perspective: 1400px; isolation:isolate; }
.ui-window{
  position:absolute; left: 50%; top: 52%; width: 80%;
  transform: translate(-44%, -50%) rotateY(-14deg) rotateX(4deg);
  border-radius: 10px; overflow:hidden;
  background: rgba(18,19,15,.92); border: 1px solid rgba(244,244,239,.1);
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.9), 0 0 60px -20px rgba(198,255,62,.3);
  transition: transform 1s var(--ease);
}
.case:hover .ui-window{ transform: translate(-46%, -50%) rotateY(-5deg) rotateX(2deg); }
.ui-bar{ display:flex; align-items:center; gap:6px; padding: 10px 12px; border-bottom: 1px solid rgba(244,244,239,.07); }
.ui-bar i{ width:7px; height:7px; border-radius:50%; background: rgba(244,244,239,.16); }
.ui-bar span{ margin-left: 8px; font-size:.62rem; letter-spacing:.06em; color: rgba(244,244,239,.45); }
.ui-shot{ display:block; width:100%; height:auto; position:static !important; filter:none !important; }

/* the paper form it replaced, fading out behind */
.ui-paper{
  position:absolute; left: 6%; top: 50%; width: 26%; aspect-ratio: 1 / 1.3;
  transform: translateY(-58%) rotate(-8deg);
  background: linear-gradient(180deg, #e9e6dc, #cfcabd); border-radius: 3px;
  padding: 16% 12%; display:grid; align-content:start; gap: 9%;
  opacity:.2; filter: blur(.5px);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  transition: opacity .8s ease, transform 1s var(--ease);
}
.ui-paper span{ height:4px; border-radius:2px; background: rgba(0,0,0,.35); }
.ui-paper span:nth-child(2n){ width:70%; }
.case:hover .ui-paper{ opacity:.08; transform: translateY(-58%) translateX(-12px) rotate(-11deg); }

/* ---- Foot ---- */
.cases-foot{
  display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap;
  margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-soft);
}
.cases-foot p{ font-family: var(--font-display); font-weight:600; font-size: clamp(1.1rem, 1.8vw, 1.5rem); }

/* ============================================
   Responsive
============================================ */
@media (max-width: 1080px){
}
@media (max-width: 820px){
  .cases-head{ grid-template-columns: 1fr; gap: 18px; }
  .cases-grid{ grid-template-columns: 1fr; }
  .case--half{ grid-column: auto; }
}

@media (prefers-reduced-motion: reduce){
  .case-video{ display:none; }
  .case-badge--live i::after{ animation:none; }
}