/* ============================================
   KIVI public site — project presentation
   Device frames (browser + phone), project tints and the case-study layout
   (case visuals are .plate specimens from shell.css).
   Loaded by index.html (showcase) and projects.html (cases).
   ============================================ */

.project--ailekart {
  --project-tint: #6a4cf0;
  --project-tint-soft: rgba(124, 92, 255, 0.24);
}

.project--axis {
  --project-tint: #2f6fbf;
  --project-tint-soft: rgba(60, 130, 220, 0.24);
}

/* ---- Device frames ---- */

.device-stack {
  position: relative;
  padding: 0 7% 9% 0;
  transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-out);
}

.device-browser {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--color-line-strong);
  background: #0f130c;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}

.device-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: #1a2015;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.device-browser__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3b4533;
}

.device-browser__bar i:first-child {
  background: #ff6b5a;
}

.device-browser__bar i:nth-child(2) {
  background: #f4c04e;
}

.device-browser__bar i:nth-child(3) {
  background: #7fd05a;
}

.device-browser__url {
  flex: 1;
  max-width: 260px;
  margin-inline: auto;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #b8c2ad;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-browser img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  transition: transform 1200ms var(--ease-out);
}

.device-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  padding: 6px;
  border-radius: 30px;
  background: #0d100b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-pop), 0 0 0 1px rgba(0, 0, 0, 0.5);
  transform: translateZ(60px);
  transition: transform 800ms var(--ease-out);
}

.device-phone::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 1;
  width: 30%;
  height: 10px;
  border-radius: var(--r-pill);
  background: #0d100b;
  translate: -50% 0;
}

.device-phone img {
  width: 100%;
  aspect-ratio: 390 / 740;
  border-radius: 24px;
  object-fit: cover;
  object-position: top;
}

.project-visual:hover .device-browser img {
  transform: scale(1.04);
}

.project-visual:hover .device-phone {
  transform: translateZ(60px) translateY(-14px) rotate(-3deg);
}

/* ---- Projects page: filter and case studies ---- */

.projects-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.projects-filter__status {
  margin-left: var(--sp-3);
  color: var(--color-text-faint);
  font-size: var(--fs-small);
}

.cases {
  display: grid;
  gap: clamp(var(--sp-8), 9vw, var(--sp-section));
  padding-bottom: var(--sp-section);
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: center;
  scroll-margin-top: calc(var(--header-height) + var(--sp-5));
}

.case[hidden] {
  display: none;
}

.case:nth-of-type(even) .case__visual {
  order: 2;
}

/* The visual is a .plate specimen; its caption sits under the mount. */
.case__visual {
  position: relative;
  padding: clamp(var(--sp-6), 4.4vw, var(--sp-8));
}

.case__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
}

.case__index::before {
  content: 'Fig. ';
  font-family: var(--font-accent);
  font-size: 1.3em;
  font-style: italic;
  letter-spacing: 0;
  color: var(--color-text);
}

.case__name {
  margin-top: var(--sp-3);
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
}

.case__tagline {
  margin-top: var(--sp-3);
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-style: italic;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-text);
}

.case__summary {
  margin-top: var(--sp-4);
  color: var(--color-text-muted);
}

/* Specimen record: mono field names over ruled rows. */
.case__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-4) 0;
  border-top: 2px solid var(--color-text);
  border-bottom: 1px solid var(--color-line-strong);
}

.case__meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.case__meta dd {
  margin-top: var(--sp-1);
  font-weight: var(--fw-semibold);
}

.case__features-title {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.case__features {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
}

.case__features li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}

.case__features li::before {
  content: '';
  flex: none;
  width: 7px;
  height: 11px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--project-tint);
  transform: rotate(18deg) translateY(1px);
}

.case__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* An empty plate waiting for the next specimen, outlined with a cut line. */
.case--next {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  padding: clamp(var(--sp-6), 6vw, var(--sp-9));
  border-radius: 3px;
  border: 2px dashed var(--color-line-strong);
}

.case--next h2 {
  font-size: var(--fs-h2);
  max-width: 16ch;
}

.case--next p {
  margin-top: var(--sp-4);
  max-width: 50ch;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.case--next .button {
  margin-top: var(--sp-6);
}

@media (max-width: 1024px) {
  .case {
    grid-template-columns: minmax(0, 1fr);
  }

  .case:nth-of-type(even) .case__visual {
    order: 0;
  }
}

@media (max-width: 480px) {
  .case__meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .device-browser__bar {
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-stack,
  .device-browser img,
  .device-phone {
    transition: none;
  }
}

.case__host {
  display: block;
  margin-top: var(--sp-2);
  font-size: 0.32em;
  letter-spacing: 0;
  color: var(--color-text-faint);
}