/* ==========================================================================
   projects.css — stacked project sections + their content.

   Stacking model (see js/stack.js):
   · .stack is its own stacking context (isolation), so section z-indexes
     never fight with the header, dots or toast.
   · every .stack-item is sticky. Tall sections pin by their BOTTOM edge
     (top = 100svh - height), so you read all of it first; then the next
     section, with a higher z-index, slides over it.
   · while covered, the content underneath recedes (--p 0→1): it scales
     down, lifts and fades. The background never moves, so the drip seam
     between the two colours stays perfectly clean.
   ========================================================================== */
.stack { position: relative; isolation: isolate; }
.stack > .stack-item {             /* child selector: beats .proj / .band position:relative */
  position: sticky;
  top: min(0px, calc(100vh - var(--h, 100vh)));
  top: min(0px, calc(100svh - var(--h, 100svh)));
  z-index: var(--z, 1);
}
.stack-item.is-buried > * { visibility: hidden; }   /* fully covered: skip painting */

.recede {
  transform-origin: 50% calc(100% - 50vh);
  transform: translate3d(0, calc(var(--p, 0) * -7vh), 0) scale(calc(1 - var(--p, 0) * .08));
  opacity: calc(1 - var(--p, 0) * .8);
}

/* section shell */
.proj {
  position: relative; min-height: 100vh; min-height: 100svh;
  background: var(--bg); color: var(--fg); text-align: center;
  overflow: hidden; overflow: clip;
}
.proj.has-drip { padding: calc(var(--drip-h) * .84) 0 calc(var(--sec) + 24px); }
.proj .deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.p-in { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gutr); }

/* the line + dot hanging from the centre drop. It starts under the drip
   (which is painted above, z-index 2), so it always meets the drop. */
.pin {
  display: flex; flex-direction: column; align-items: center;
  height: calc(var(--pin-h) + var(--drip-h) * .5 + 12px);
  margin: calc(var(--drip-h) * -.5) auto 30px;
}
.pin::before { content: ""; flex: 1; width: 2px; background: currentColor; opacity: .55; transform-origin: 50% 0; }
.pin::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.pin.has-logo { margin-bottom: 0; height: calc(var(--pin-h) + var(--drip-h) * .5); }
.pin.has-logo::after { display: none; }        /* the line lands on the logo tile instead of a dot */

/* client logo tile */
.p-logo {
  display: flex; align-items: center; justify-content: center;
  width: max-content; height: clamp(54px, 5.4vw, 68px); margin: 0 auto 26px; padding: 10px 18px;
  border-radius: var(--r-card); background: var(--logo-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent), 0 18px 30px -18px rgba(0, 0, 0, .45);
  transition: rotate .6s var(--ease-spring), scale .5s var(--ease-spring), box-shadow .4s var(--ease);
}
.p-logo img { display: block; height: 100%; width: auto; }
.p-logo.is-icon { height: clamp(60px, 6vw, 78px); padding: 0; background: none; box-shadow: none; }
.p-logo.is-icon img { border-radius: 22%; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55); }
.p-logo:hover { rotate: -4deg; scale: 1.08; }

.p-client { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; }
.p-num { opacity: .55; }
.p-title { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 24px); margin-top: 14px; }
.p-title svg {
  flex: none; width: clamp(18px, 2.4vw, 28px); height: clamp(18px, 2.4vw, 28px);
  transition: rotate .8s var(--ease-spring), scale .5s var(--ease-spring);
}
.p-title:hover svg { rotate: 180deg; scale: 1.25; }
.p-title h3 { font: 900 clamp(30px, 5.4vw, 68px)/1 var(--wide); letter-spacing: -.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
.p-sub { font-weight: 700; font-size: clamp(17px, 1.8vw, 20px); margin-top: 18px; }
.p-star { display: inline-block; animation: twinkle 3.2s ease-in-out infinite; }
.p-intro { max-width: 56ch; margin: 20px auto 0; font-size: clamp(17px, 1.7vw, 19px); opacity: .92; text-wrap: pretty; }

.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.tag {
  border-radius: var(--r-btn); padding: 7px 14px;
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  transition: background-color .3s var(--ease), translate .35s var(--ease-spring);
}
.tag:hover { background: color-mix(in srgb, var(--fg) 22%, transparent); translate: 0 -2px; }
.tag.live::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px;
  border-radius: 50%; background: currentColor; animation: live 2s ease-out infinite;
}

/* devices */
.devices { position: relative; width: min(780px, 100%); margin: clamp(48px, 6vw, 72px) auto 0; }
.laptop { width: 88%; margin: 0; transition: translate .6s var(--ease); }
.devices:hover .laptop { translate: 0 -6px; }
.lscreen { background: #111; border-radius: 16px 16px 0 0; padding: clamp(6px, 1vw, 11px); box-shadow: 0 40px 60px -40px rgba(0, 0, 0, .55); }
.lbase { height: clamp(9px, 1.2vw, 14px); background: linear-gradient(#cfcfcf, #9b9b9b); border-radius: 0 0 14px 14px; margin: 0 -6%; }
.phone {
  position: absolute; right: 0; bottom: -6%; width: 21%; min-width: 78px; margin: 0;
  translate: 0 calc(var(--sp, 0) * 46px);       /* moves at its own speed: depth */
}
.phone-body {
  background: #111; border-radius: clamp(16px, 2.4vw, 28px); padding: clamp(4px, .6vw, 7px);
  box-shadow: 0 30px 40px -24px rgba(0, 0, 0, .55);
  animation: bob 5.5s ease-in-out infinite;
}
.proj:not(.is-near) .phone-body,
.proj:not(.is-near) .p-star { animation-play-state: paused; }

.slot {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 9; padding: 12px; border-radius: 4px;
  background: var(--bg2); color: var(--ink);
}
.phone .slot { aspect-ratio: 9 / 19; border-radius: clamp(12px, 1.9vw, 22px); padding: 6px; }
.slot.has-img { padding: 0; }
.slot > div { display: grid; gap: 2px; }
.slot strong { font: 700 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; opacity: .55; }
.slot span { font-size: 13px; font-weight: 600; }
.slot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; border-radius: inherit; background: var(--bg2); }

/* wider mobile captures sit in a tablet frame instead of a phone */
.phone.is-tablet { width: 31%; min-width: 112px; bottom: -9%; }
.is-tablet .phone-body { border-radius: clamp(12px, 1.7vw, 22px); padding: clamp(5px, .7vw, 9px); }
.is-tablet .slot { border-radius: clamp(6px, .9vw, 12px); }
.slot::after {                       /* screen glare on hover */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 130% 0;
  transition: background-position 1.1s var(--ease);
}
.devices:hover .slot::after { background-position: -30% 0; }

.swatches { display: flex; justify-content: center; gap: 12px; margin-top: clamp(56px, 6vw, 76px); }
.swatches i {
  width: 30px; height: 30px; border-radius: 50%; background: var(--s);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg) 25%, transparent);
  transition: scale .4s var(--ease-spring);
}
.swatches i:nth-child(even) { translate: 0 12px; }
.swatches i:hover { scale: 1.3; }

.story {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(48px, 6vw, 72px); padding: clamp(24px, 3.5vw, 44px);
  text-align: left; border-radius: var(--r-card);
  background: var(--panel, color-mix(in srgb, var(--fg) 8%, transparent));
}
.story h4 { margin-bottom: 10px; opacity: .7; }
.story p { font-size: 16px; }
@media (max-width: 780px) { .story { grid-template-columns: 1fr; } }

.p-stack { margin-top: 28px; opacity: .7; }

@media (max-width: 760px) { .hide-sm { display: none; } }