/* blog.css — DVD case */
.post {
  position: relative;
  background: linear-gradient(135deg, #1c2838 0%, #161b22 55%, #0d1117 100%);
  border: 1px solid #2a3441;
  border-left: 22px solid #080d14;
  border-radius: 3px 10px 10px 3px;
  box-shadow: 4px 6px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform-style: preserve-3d;
}
.post::after {
  content: '';
  position: absolute;
  right: -1px; top: 8%; bottom: 8%;
  width: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  border-radius: 0 6px 6px 0;
  pointer-events: none;
}
.post:hover {
  transform: translateY(-3px) perspective(800px) rotateY(-3deg);
  box-shadow: 8px 12px 28px rgba(0,0,0,0.65);
}
.post.open {
  transform: perspective(800px) rotateY(0deg);
  box-shadow: 6px 8px 24px rgba(0,0,0,0.6);
}
/* collapsed DVD — only cover visible */
.post .dvd-cover {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 6px 0 2px;
}
.post .dvd-cover .dvd-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a3a52, #0d1117 70%);
  border: 2px solid #30363d;
  display: grid; place-items: center;
  font-size: 18px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.4);
}
.post .dvd-cover .dvd-meta { flex: 1; min-width: 0; }
.post .dvd-cover h3 { margin: 4px 0 0 !important; }
.post .dvd-cover .dvd-chevron {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #1f6feb;
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px;
  transition: transform 0.4s ease;
}
.post.open .dvd-cover .dvd-chevron { transform: rotate(180deg); }
/* hidden body — DVD inside */
.post .dvd-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease, margin 0.4s ease;
}
.post.open .dvd-body {
  max-height: 5000px;
  opacity: 1;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(48,54,61,0.8);
  animation: dvd-reveal 0.5s ease;
}
@keyframes dvd-reveal {
  0% { transform: perspective(600px) rotateY(-12deg) translateX(-8px); opacity: 0; }
  100% { transform: perspective(600px) rotateY(0deg) translateX(0); opacity: 1; }
}
@media (max-width: 640px) {
  .post { border-left-width: 14px; }
  .post .dvd-cover .dvd-icon { width: 36px; height: 36px; font-size: 15px; }
}