/* =========================================================================
   SLACK, "Reimagined" concept / playground case study  (prefix sl-)
   Dark portfolio system · plum accent · deliberately lighter than the others.
   Also defines the home-row hover peek (a mini redesigned Slack window).
   ========================================================================= */

:root {
  --sl-plum:   #4a154b;
  --sl-plum-2: #611f69;
  --sl-plum-3: #8a4f93;
  --sl-lilac:  #b794d4;
  --sl-lilac-2:#d7bfe6;
  --sl-aqua:   #36c5f0;
  --sl-green:  #2eb67d;
  --sl-gold:   #ecb22e;
  --sl-red:    #e01e5a;
}

/* local accent for this case */
.sl { --accent: var(--sl-lilac); --accent-ink: var(--sl-lilac); padding-bottom: 0; }

/* ---- concept ribbon ---------------------------------------------------- */
.sl-ribbon { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-lilac); border: 1px solid color-mix(in srgb, var(--sl-lilac) 45%, transparent); background: color-mix(in srgb, var(--sl-plum) 30%, transparent); padding: 7px 14px; border-radius: 999px; }
.sl-ribbon__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sl-lilac); }
/* light-mode: lilac-on-cream is too faint, use a deep plum for legibility */
html[data-theme="light"] .sl-ribbon { color: var(--sl-plum-2); border-color: color-mix(in srgb, var(--sl-plum-2) 42%, transparent); background: color-mix(in srgb, var(--sl-plum-2) 9%, transparent); }
html[data-theme="light"] .sl-ribbon__dot { background: var(--sl-plum-2); }

/* section scaffold ------------------------------------------------------- */
.sl-sec { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px,4vw,56px); padding-block: clamp(48px,7vw,96px); border-top: 1px solid var(--line); }
.sl-sec__label { display: flex; align-items: baseline; gap: 14px; position: sticky; top: 90px; align-self: start; height: fit-content; }
.sl-sec__label .pixel { font-size: clamp(22px,2.4vw,30px); line-height: 1; }
.sl-sec__body { min-width: 0; }
@media (max-width: 820px) { .sl-sec { grid-template-columns: 1fr; gap: 18px; } .sl-sec__label { position: static; } }

.sl-h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px,3.6vw,52px); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 22px; max-width: 20ch; text-wrap: balance; }
.sl-h3 { font-family: var(--display); font-weight: 700; font-size: clamp(18px,1.7vw,24px); letter-spacing: -.01em; margin: clamp(40px,5vw,60px) 0 18px; }
.sl-lead { font-size: clamp(16px,1.35vw,20px); line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.sl-lead--sm { font-size: clamp(15px,1.2vw,17px); margin-bottom: 22px; }
.sl-lead strong { color: var(--ink); font-weight: 600; }
.mono--plum { color: var(--sl-lilac); }

/* honesty note ----------------------------------------------------------- */
.sl-disclaimer { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--ink-3); margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--line-2); line-height: 1.5; max-width: 60ch; }

/* POV / itch cards ------------------------------------------------------- */
.sl-pov { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.8vw,22px); margin-top: 28px; }
@media (max-width: 820px) { .sl-pov { grid-template-columns: 1fr; } }
.sl-povcard { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--sl-plum-3); padding: clamp(20px,2.2vw,28px); display: flex; flex-direction: column; gap: 11px; }
.sl-povcard__n { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--sl-lilac); }
.sl-povcard__t { font-family: var(--display); font-weight: 700; font-size: clamp(17px,1.6vw,21px); letter-spacing: -.01em; }
.sl-povcard__d { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* statement band --------------------------------------------------------- */
.sl-band { position: relative; overflow: hidden; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(50px,7vw,96px) 0; }
.sl-statement { font-family: var(--display); font-weight: 700; font-size: clamp(26px,3.4vw,48px); line-height: 1.18; letter-spacing: -.02em; margin-top: 18px; max-width: 26ch; text-wrap: balance; }
.sl-statement em { font-style: italic; color: var(--sl-lilac); }

/* browser-framed screen placeholder (user uploads later) ----------------- */
.sl-screen { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--frame, #fbfbf9); box-shadow: 0 28px 64px rgba(0,0,0,.42); }
.sl-screen__bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: var(--sl-plum); }
.sl-screen__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.32); flex: none; }
.sl-screen__url { flex: 1; margin-left: 9px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.14); display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; color: rgba(255,255,255,.7); }
.sl-screen__view { background: repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--bg-2) 12px 24px); min-height: 300px; display: flex; align-items: center; justify-content: center; }
.sl-screen__view img { width: 100%; height: auto; display: block; }
.sl-screen__ph { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 24px; max-width: 32ch; line-height: 1.6; }

.sl-shotrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.2vw,30px); margin-top: 18px; align-items: start; }
@media (max-width: 760px) { .sl-shotrow { grid-template-columns: 1fr; } }
.sl-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.sl-tag--before { color: var(--ink-3); }
.sl-tag--after { color: var(--sl-lilac); }
.sl-tag__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* annotated decision stickies -------------------------------------------- */
.sl-decisions { display: flex; flex-direction: column; margin-top: 12px; }
.sl-decision { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: baseline; padding: clamp(16px,2vw,24px) 0; border-top: 1px solid var(--line); }
.sl-decision:first-child { border-top: none; }
.sl-decision__n { font-family: var(--mono); font-size: 13px; color: var(--sl-lilac); }
.sl-decision__t { font-size: clamp(15px,1.3vw,18px); line-height: 1.55; color: var(--ink-2); }
.sl-decision__t strong { color: var(--ink); font-weight: 600; }

/* next-steps ------------------------------------------------------------- */
.sl-next2 { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); margin-top: 8px; }
@media (max-width: 760px) { .sl-next2 { grid-template-columns: 1fr; } }
.sl-next2__item { border-left: 2px solid var(--sl-plum-3); padding-left: 16px; }
.sl-next2__t { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--ink); margin-bottom: 8px; }
.sl-next2__d { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* =========================================================================
   HOME-ROW HOVER, mini "reimagined Slack" window pops up
   ========================================================================= */
.workrow__slfan {
  position: absolute; right: 17%; top: 50%; width: 0; height: 0;
  pointer-events: none; z-index: 6;
  transform: translate(calc(var(--fx,0) * 16px), calc(-50% + var(--fy,0) * 12px));
  transition: transform .25s var(--ease);
}
@media (max-width: 900px) { .workrow__slfan { display: none; } }

/* iPhone mockups, titanium bezel + dynamic island (refined vs Coffee) */
.slfan-ph {
  position: absolute; top: 0; left: 0;
  width: 156px; height: 338px; margin: -169px 0 0 -78px;   /* center on anchor */
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(150deg, #2b2930, #141318 58%, #1f1d23);
  padding: 5px;
  box-shadow: 0 26px 60px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.10), inset 0 0 0 1px rgba(255,255,255,0.05);
  opacity: 0; transform: translateY(26px) scale(0.82);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.slfan-ph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 22px; }
.slfan-ph__island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 42px; height: 13px; border-radius: 999px; background: #000; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* hover-in reveal with stagger */
.workrow--sl:hover .slfan-ph { opacity: 1; }
.workrow--sl:hover .slfan-ph--1 { transition-delay: .04s; }
.workrow--sl:hover .slfan-ph--0 { transition-delay: .11s; }
.workrow--sl:hover .slfan-ph--2 { transition-delay: .11s; }

/* distinct motion: tighter overlap that lifts UP into an arc (center forward) */
.workrow--sl:hover .slfan-ph--1 { transform: translateY(-10px) rotate(0deg) scale(1.08); z-index: 3; }
.workrow--sl:hover .slfan-ph--0 { transform: translate(-86px, -2px) rotate(-12deg) scale(0.97); z-index: 2; }
.workrow--sl:hover .slfan-ph--2 { transform: translate(86px, -2px) rotate(12deg) scale(0.97); z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .workrow--sl:hover .slfan-ph { transition: none; }
}

/* =========================================================================
   CASE STUDY, phone screens, wireframes, problem tags
   ========================================================================= */
/* problem pills, callback to the Figma "Problems" board */
.sl-probtags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.sl-probtag { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; border-radius: 999px; background: var(--sl-green); color: #fff; font-family: var(--display); font-weight: 700; font-size: clamp(15px,1.5vw,19px); letter-spacing: -.01em; box-shadow: 0 10px 26px -12px var(--sl-green); }
.sl-probtag__x { font-family: var(--mono); font-size: 12px; opacity: .7; }

/* problem detail list */
.sl-probs { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 26px; }
@media (max-width: 680px) { .sl-probs { grid-template-columns: 1fr; } }
.sl-prob { background: var(--bg); padding: clamp(18px,2vw,24px); display: flex; flex-direction: column; gap: 8px; }
.sl-prob__k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-lilac); }
.sl-prob__d { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* phone screen cards (hi-fi) -------------------------------------------- */
.sl-phonegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,1.8vw,24px); margin-top: 22px; }
@media (max-width: 900px) { .sl-phonegrid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px) { .sl-phonegrid { grid-template-columns: repeat(2,1fr); } }
.sl-phone { display: flex; flex-direction: column; gap: 11px; }
.sl-phone__scr { border-radius: clamp(14px,1.6vw,20px); overflow: hidden; background: #1a1a1a; box-shadow: 0 22px 44px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
.sl-phone__scr img { width: 100%; height: auto; display: block; }
.sl-phone__cap { display: flex; align-items: baseline; gap: 9px; }
.sl-phone__n { font-family: var(--mono); font-size: 11px; color: var(--sl-lilac); flex: none; }
.sl-phone__t { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: -.005em; color: var(--ink-2); }

/* wireframe variant, lighter frame for white screens */
.sl-phone--wf .sl-phone__scr { background: #fff; box-shadow: 0 18px 38px -18px rgba(0,0,0,.5), 0 0 0 1px var(--line); }
.sl-phone--wf .sl-phone__n { color: var(--ink-3); }

/* ===== iPhone mockup (reusable) ======================================== */
.sl-ip { position: relative; border-radius: clamp(30px,3vw,46px); background: linear-gradient(150deg, #2b2930, #141318 58%, #1f1d23); padding: clamp(7px,.7vw,11px); box-shadow: 0 44px 76px -28px rgba(0,0,0,.82), 0 0 0 1px rgba(255,255,255,.09), inset 0 0 0 1.5px rgba(255,255,255,.05); }
.sl-ip::before, .sl-ip::after { content: ''; position: absolute; left: -2px; width: 2px; border-radius: 2px 0 0 2px; background: linear-gradient(#3a3840, #221f27); }
.sl-ip::before { top: 19%; height: 7%; box-shadow: 0 0 0 0 transparent; }
.sl-ip::after { top: 30%; height: 12%; }
.sl-ip__btn { position: absolute; right: -2px; top: 26%; width: 2px; height: 9%; border-radius: 0 2px 2px 0; background: linear-gradient(#3a3840, #221f27); }
.sl-ip__screen { position: relative; border-radius: clamp(23px,2.4vw,36px); overflow: hidden; background: #000; }
.sl-ip__screen img { width: 100%; height: auto; display: block; }
.sl-ip__island { position: absolute; top: clamp(7px,.85vw,13px); left: 50%; transform: translateX(-50%); width: 30%; max-width: 86px; height: clamp(15px,1.5vw,21px); background: #000; border-radius: 999px; z-index: 3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }

/* ===== hero showpiece, switchable layouts ============================= */
.sl-hero3 { position: relative; margin-top: clamp(28px,4vw,52px); padding: clamp(24px,4vw,56px) 0; }
.sl-hero3__ph { position: relative; z-index: 1; }

/* -- default + TRIO: three phones in a row, centre raised -- */
.sl-hero3 { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px,2.6vw,44px); }
.sl-hero3__ph { width: clamp(178px,26vw,300px); }
.sl-hero3__ph--side { margin-bottom: clamp(20px,3.4vw,52px); }
.sl-hero3__ph--c { z-index: 2; }

/* -- FAN: overlapping, rotated like a hand of cards -- */
html[data-slhero="fan"] .sl-hero3 { gap: 0; align-items: center; min-height: clamp(420px,48vw,640px); }
html[data-slhero="fan"] .sl-hero3__ph { width: clamp(188px,26vw,300px); margin: 0; }
html[data-slhero="fan"] .sl-hero3__ph--l { transform: rotate(-11deg) translateX(34%) translateY(4%); z-index: 1; }
html[data-slhero="fan"] .sl-hero3__ph--c { transform: translateY(-5%); z-index: 3; }
html[data-slhero="fan"] .sl-hero3__ph--r { transform: rotate(11deg) translateX(-34%) translateY(4%); z-index: 2; }

/* -- STAGGER: stepped diagonal cascade -- */
html[data-slhero="stagger"] .sl-hero3 { align-items: center; gap: clamp(10px,1.6vw,26px); }
html[data-slhero="stagger"] .sl-hero3__ph { width: clamp(166px,22vw,268px); }
html[data-slhero="stagger"] .sl-hero3__ph--l { transform: translateY(-12%) rotate(-4deg); }
html[data-slhero="stagger"] .sl-hero3__ph--c { transform: translateY(2%) rotate(-2deg); z-index: 2; }
html[data-slhero="stagger"] .sl-hero3__ph--r { transform: translateY(16%) rotate(-1deg); }

@media (max-width: 620px) {
  .sl-hero3__ph--side { display: none; }
  html[data-slhero="fan"] .sl-hero3__ph--side, html[data-slhero="stagger"] .sl-hero3__ph--side { display: none; }
  html[data-slhero="fan"] .sl-hero3__ph--c, html[data-slhero="stagger"] .sl-hero3__ph--c { transform: none; }
  html[data-slhero="fan"] .sl-hero3 { min-height: 0; }
}

/* decision row with thumbnail ------------------------------------------- */
.sl-decgrid { display: flex; flex-direction: column; margin-top: 12px; }
.sl-decrow { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding: clamp(18px,2.2vw,28px) 0; border-top: 1px solid var(--line); }
.sl-decrow:first-child { border-top: none; }
.sl-decrow__n { font-family: var(--display); font-weight: 800; font-size: clamp(22px,2.4vw,32px); color: var(--sl-plum-3); line-height: .8; }
.sl-decrow__t { font-family: var(--display); font-weight: 700; font-size: clamp(17px,1.7vw,22px); letter-spacing: -.01em; margin-bottom: 8px; }
.sl-decrow__d { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.sl-decrow__d strong { color: var(--ink); font-weight: 600; }