/* ML:SHELL product card: cinematic 3D stack, fans out on hover */

[data-shot-stack] {
  perspective: 900px;
  perspective-origin: 65% 95%;
}

[data-shot-stack] .pc-shot {
  left: 50% !important;
  top: 78% !important;
  width: calc(34% * var(--shrink, 1)) !important;
  transform-origin: left bottom;
  transform: translate(calc(-50% + var(--dx, 0%)), calc(-50% + var(--dy, 0%))) translateX(calc(var(--depth, 0px) * -0.45)) translateZ(var(--depth, 0px)) rotateZ(var(--fan, 0deg)) rotateY(-30deg);
  transition:
    left 0.6s cubic-bezier(0.3, 1.25, 0.5, 1),
    top 0.6s cubic-bezier(0.3, 1.25, 0.5, 1),
    width 0.6s cubic-bezier(0.3, 1.25, 0.5, 1),
    transform 0.6s cubic-bezier(0.3, 1.25, 0.5, 1),
    box-shadow 0.3s ease;
  will-change: left, top, transform;
  transform-style: preserve-3d;
}

/* cards fan clockwise from their own left-bottom corner, laid like cards on a table */
[data-shot-stack] .pc-shot:nth-child(1) { --fan: -4deg; --depth: 40px; --shrink: 1; --dx: -6%; --dy: 7%; z-index: 4; }
[data-shot-stack] .pc-shot:nth-child(2) { --fan: 6deg; --depth: -110px; --shrink: 0.92; --dx: 0%; --dy: 0%; z-index: 3; }
[data-shot-stack] .pc-shot:nth-child(3) { --fan: 14deg; --depth: -260px; --shrink: 0.85; --dx: 0%; --dy: 0%; z-index: 2; }
[data-shot-stack] .pc-shot:nth-child(4) { --fan: 22deg; --depth: -410px; --shrink: 0.78; --dx: 0%; --dy: 0%; z-index: 1; }

.product-card:hover [data-shot-stack] .pc-shot,
.product-card:focus-within [data-shot-stack] .pc-shot {
  top: 48% !important;
  width: 19% !important;
  transform: translate(0, -50%) rotateY(-14deg) rotateZ(var(--row, 0deg));
}
.product-card:hover [data-shot-stack] .pc-shot:nth-child(1),
.product-card:focus-within [data-shot-stack] .pc-shot:nth-child(1) { --row: -4deg; }
.product-card:hover [data-shot-stack] .pc-shot:nth-child(2),
.product-card:focus-within [data-shot-stack] .pc-shot:nth-child(2) { --row: -1.5deg; }
.product-card:hover [data-shot-stack] .pc-shot:nth-child(3),
.product-card:focus-within [data-shot-stack] .pc-shot:nth-child(3) { --row: 1.5deg; }
.product-card:hover [data-shot-stack] .pc-shot:nth-child(4),
.product-card:focus-within [data-shot-stack] .pc-shot:nth-child(4) { --row: 4deg; }
.product-card:hover [data-shot-stack] .pc-shot:nth-child(1),
.product-card:focus-within [data-shot-stack] .pc-shot:nth-child(1) { left: 11% !important; }
.product-card:hover [data-shot-stack] .pc-shot:nth-child(2),
.product-card:focus-within [data-shot-stack] .pc-shot:nth-child(2) { left: 30.5% !important; }
.product-card:hover [data-shot-stack] .pc-shot:nth-child(3),
.product-card:focus-within [data-shot-stack] .pc-shot:nth-child(3) { left: 50% !important; }
.product-card:hover [data-shot-stack] .pc-shot:nth-child(4),
.product-card:focus-within [data-shot-stack] .pc-shot:nth-child(4) { left: 69.5% !important; }
.product-card:hover [data-shot-stack] .pc-shot:hover,
.product-card:focus-within [data-shot-stack] .pc-shot:hover {
  width: 21% !important;
  z-index: 5;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.6);
}

/* ML:SHELL product page */

.shell-stage {
  position: relative;
  width: min(320px, 78vw);
  aspect-ratio: 72 / 165;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  background: #0b0d13;
}
.shell-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.8s ease, transform 4.5s ease-out;
}
.shell-shot.is-active {
  opacity: 1;
  transform: scale(1);
}

/* changelog */
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 760px;
}
.changelog-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  padding: 1rem 1.2rem;
}
.changelog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.changelog-head h3 { margin: 0; font-size: 1.1rem; }
.changelog-date { color: var(--muted); font-size: 0.82rem; }
.changelog-card ul {
  margin: 0;
  padding-left: 1.2rem;
  color: #bdc4d1;
  font-size: 0.95rem;
  line-height: 1.6;
}