/* Project spotlight: 3D coverflow with a focus effect.
   All cards share one grid cell; the classes set by projects-spotlight.js
   (is-active / is-prev / is-next / is-hover / is-dimmed) pose them. */

.spotlight-viewport {
  overflow: hidden;
  /* room for the hover lift and the light-mode shadow without moving anything */
  padding: 1.5rem 0 1.75rem;
  margin: -1.5rem 0 -1.75rem;
  /* soft fade where the side cards run out of the page */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.spotlight-track {
  --shift: 56%;
  --rot: 30deg;
  --scale: .84;
  --dim: brightness(.6);
  --dim-hover: brightness(.95);
  --dim-strong: brightness(.5);
  display: grid;
  perspective: 1400px;
  perspective: max(1400px, 70rem);   /* same as before up to 1920px, then grows with the page on 2K / 4K */
}
html[data-theme="light"] .spotlight-track {
  --dim: brightness(.94) saturate(.85);
  --dim-hover: brightness(1);
  --dim-strong: brightness(.88) saturate(.7);
}

.spotlight-slide {
  grid-area: 1 / 1;
  justify-self: center;
  width: 88%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  --s: 0;
  --lift: 0px;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .6s ease, filter .45s ease, border-color .3s ease;
}
.spotlight-slide.no-anim { transition: none !important; }
.spotlight-slide.is-flip { opacity: 0 !important; }

.spotlight-slide.is-active { z-index: 5; cursor: default; }
.spotlight-slide.is-active.is-hover { transform: translateY(-0.5rem) scale(1.02); border-color: var(--teal); }

.spotlight-slide.is-prev,
.spotlight-slide.is-next {
  z-index: 3;
  opacity: .85;
  filter: var(--dim) blur(1.5px);
  transform: translateY(var(--lift)) translateX(calc(var(--s) * var(--shift))) rotateY(calc(var(--s) * var(--rot) * -1)) scale(var(--scale));
}
.spotlight-slide.is-prev { --s: -1; }
.spotlight-slide.is-next { --s: 1; }
/* focus effect: the hovered side card un-blurs and rises ... */
.spotlight-slide.is-prev.is-hover,
.spotlight-slide.is-next.is-hover { --lift: -0.5rem; opacity: 1; filter: var(--dim-hover); border-color: var(--teal); }
/* ... and while the centre card is hovered, the sides recede further */
.spotlight-slide.is-dimmed { filter: var(--dim-strong) blur(2.5px); }

.spotlight-slide.is-far { z-index: 1; opacity: 0; pointer-events: none; transform: scale(.7); }
.spotlight-slide:not(.is-active) .spotlight-demo-link { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .spotlight-slide { transition: none; }
}

.spotlight-code {
  background: var(--bg);
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  display: flex;
}
.mockwin {
  width: 100%;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  overflow: hidden;
  min-height: 0;
  /* Looks like the real app, but it's an inert static replica —
     nothing here is clickable or focusable. */
  pointer-events: none;
  user-select: none;
}
.mock-app {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.mock-titlebar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mock-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; }
.mock-dot.r { background: #D9645A; }
.mock-dot.y { background: #D9A94E; }
.mock-dot.g { background: #4EA97F; }
.mock-name {
  margin-left: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: .02em;
}
.mock-screen {
  padding: 0.875rem 0.75rem;
  flex: 1;
  min-height: 0;
}
.mock-line {
  margin: 0 0 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.mock-line.accent { color: var(--teal); }
.mock-line.warn { color: var(--copper); }
.mock-line.muted { color: var(--muted); }
.mock-controls {
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mock-controls input {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  color: var(--text);
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  font-family: 'JetBrains Mono', monospace;
  width: 100%;
}
.mock-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.mock-btn {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  padding: 0.625rem 0.5rem;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}
.mock-btn:only-child { grid-column: 1 / -1; }
.mock-btn.primary { border-color: var(--copper); color: var(--copper); }

/* Phone-shaped preview (for the mobile app project), sitting inside the
   same .mockwin shell the console-app previews use, so the titlebar row
   stays consistent across every card. */
.mock-phone-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0;
  background: var(--bg);
}
.mock-phone {
  width: 11.875rem;
  border-radius: 1.625rem;
  border: 0.125rem solid var(--border-strong);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1.125rem 2.5rem rgba(0, 0, 0, 0.28);
}
.mock-phone-notch {
  display: flex;
  justify-content: center;
  padding: 0.4375rem 0 0.25rem;
}
.mock-phone-notch span {
  width: 2.875rem;
  height: 0.875rem;
  border-radius: 0.5rem;
  background: #0b0b0b;
}
.mock-phone-body { padding: 0.875rem 0.875rem 1rem; }
.mock-phone-logo {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  margin: 0 auto 0.5rem;
  background: var(--teal);
  opacity: .85;
}
.mock-phone-eyebrow {
  text-align: center;
  font-size: 0.4688rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}
.mock-phone-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.625rem;
}
.mock-phone-field {
  font-size: 0.5625rem;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  padding: 0.4375rem 0.5rem;
  margin-bottom: 0.4375rem;
}
.mock-phone-btn {
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
}
.mock-phone-btn.primary { background: var(--copper); color: var(--on-copper); }
.mock-phone-btn.ghost { border: 1px solid var(--border-strong); color: var(--text); margin-top: 0.4375rem; }

.spotlight-info {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.125rem;
}
.spotlight-type {
  font-size: 0.6875rem;
  letter-spacing: .04em;
  color: var(--copper);
  text-transform: uppercase;
}
.spotlight-info h3 {
  margin: 0.5rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}
.spotlight-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
}
.spotlight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin: 0;
}
.spotlight-demo-link {
  align-self: stretch;
  text-align: center;
  text-decoration: none;
  font-size: 0.8438rem;
  padding: 0.6875rem 1.375rem;
}

.spotlight-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.375rem;
  margin-top: 1rem;
}
.spotlight-nav button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  transition: border-color .2s ease, color .2s ease, transform .12s ease;
}
@media (hover: hover) { .spotlight-nav button:hover { border-color: var(--teal); color: var(--teal); } }
.spotlight-nav button:active { transform: scale(.94); }
.spotlight-nav button.pressed { animation: navPress .32s cubic-bezier(.61, .06, .33, 1.15); }
@keyframes navPress { 0% { transform: scale(1); } 40% { transform: scale(.82); } 100% { transform: scale(1); } }
.spotlight-counter {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 3.25rem;
  text-align: center;
}

/* Screenshot preview (voting system): no titlebar. The picture keeps its own
   proportions (never stretched) and the box matches the picture's background. */
.mock-shot { position: relative; flex: none; aspect-ratio: 872 / 1018; height: auto; min-height: 0; background: #E4E8F1; }
.mock-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.spotlight-code:has(.mock-shot) { max-height: none; padding: 0; }
/* Full-bleed: the picture fills the whole left half of the card (no padding, border or rounded frame) */
.mockwin:has(.mock-shot) { border: 0; border-radius: 0; background: #E4E8F1; }

/* ---- Tablets (601px+): same stacked card, roomier ---- */
@media (min-width: 37.5625rem) {
  .spotlight-track { --shift: 58%; }
  .spotlight-slide { width: 84%; }
  .mock-titlebar { padding: 0.625rem 0.875rem; }
  .mock-name { font-size: 0.75rem; }
  .mock-screen { padding: 1.125rem 1rem; min-height: 11.25rem; }
  .mock-line { font-size: 0.8125rem; line-height: 1.85; overflow-wrap: normal; }
  .mock-controls { padding: 0.875rem 1rem; gap: 0.625rem; }
  .mock-controls input { font-size: 0.875rem; }
  .mock-btn-row { display: flex; flex-wrap: wrap; }
  .mock-btn { min-width: 6.875rem; padding: 0.625rem; }
  .spotlight-type { font-size: 0.75rem; }
  .spotlight-info h3 { margin-top: 0.75rem; font-size: clamp(1.375rem, 2vw, 1.75rem); }
  .spotlight-desc { font-size: 0.9062rem; }
  .spotlight-demo-link { align-self: flex-start; text-align: start; }
  .spotlight-nav { margin-top: 1.25rem; }
  /* stacked card on tablets: keep the picture a sensible height instead of full-width tall */
  .mock-shot { aspect-ratio: auto; height: clamp(18rem, 55vh, 30rem); height: clamp(18rem, 55dvh, 30rem); }
}

/* ---- Desktop (1101px+): 3D coverflow, the card is two columns ---- */
@media (min-width: 68.8125rem) {
  .spotlight-track { --shift: 64%; --rot: 36deg; --scale: .82; }
  .spotlight-slide {
    width: 60%;
    grid-template-columns: 1.15fr 1fr;
    /* flexible: follows the screen height so the whole card fits on small laptops */
    min-height: clamp(23rem, calc(100vh - 15rem), 35rem);
    min-height: clamp(23rem, calc(100dvh - 15rem), 35rem);
  }
  .spotlight-code {
    padding: clamp(1rem, 3.5vh, 2.125rem) 1.5rem;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }
  .spotlight-info { padding: clamp(1.25rem, 4vh, 2.5rem) 2rem; gap: clamp(0.75rem, 2.2vh, 1.375rem); }
  .mock-shot { flex: 1; aspect-ratio: auto; height: auto; }
}

/* ---- Touch: 44x44px tap area on the arrows (the look does not change) ---- */
@media (pointer: coarse) {
  .spotlight-nav button { position: relative; }
  .spotlight-nav button::after { content: ''; position: absolute; inset: -0.25rem; }
  .spotlight-demo-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Light theme */
html[data-theme="light"] .spotlight-nav button { background: var(--surface); box-shadow: var(--shadow-card); }
html[data-theme="light"] .mock-controls input { background: var(--surface-2); }