/* assets/css/achievements.css — page-specific styles (cosmic) */
.kks-timeline .kks-steps{ list-style:none; margin:0; padding:0; position:relative; }
.kks-step{ position:relative; padding-left:44px; margin:18px 0; }
.kks-dot{ position:absolute; left:10px; top:8px; width:14px; height:14px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #b188ff, #6b83ff); box-shadow: 0 0 12px rgba(124,156,255,.6); }
.kks-line{ position:absolute; left:16px; top:26px; bottom:-12px; width:2px; background: linear-gradient(#203055, #304a8a); }
.kks-step-range{ color:#cfd6ff; font-size:13px; letter-spacing:.2px; }
.kks-step-title{ font-weight:700; font-size:18px; margin:2px 0; }
.kks-step-place{ color:#b2b9dc; font-size:14px; }
.kks-step-note{ color:#9fb0ff; font-size:13px; margin-top:4px; }

.kks-certs .kks-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.kks-cert-grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kks-cert-card{ background:#0f162c; border:1px solid #1a2238; border-radius:16px; padding:12px; position:relative;
  transition: transform .18s ease, box-shadow .28s ease, border-color .28s ease; }
.kks-cert-card:hover{ transform: translateY(-2px); border-color:#2c3f72; box-shadow: 0 10px 28px rgba(124,156,255,.18); }
.kks-cert-meta h3{ margin:0; font-size:18px; }
.kks-cert-issuer{ color:#aab1c7; font-size:13px; }
.kks-cert-date{ color:#8ea1ff; font-size:12px; margin-top:2px; }

/* Certificate image box: shrink to canvas size (no leftover tall space) */
.kks-cert-canvas{
  position: relative;
  display: block;     /* was inline-block */
  width: 540px;        /* fill the card */
  height: 400px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 10% 10%, rgba(120,140,255,.10), rgba(40,60,130,.16) 45%, rgba(14,20,40,.9) 100%);
  user-select: none; -webkit-user-select: none;
  min-height: 0;     /* we set explicit height now */
  aspect-ratio: auto;
  margin: 0 auto;
}

/* keep this (crisp canvas scaling) */
.kks-cert-canvas canvas{
  display: block;
  width: 540px;        /* scale canvas to wrapper width */
  height: 400px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* loading shimmer (will auto-hide when JS adds .loaded) */
.kks-cert-canvas::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(200,220,255,.08) 15%, rgba(255,255,255,0) 30%);
  transform: translateX(-100%);
  animation: kks-shimmer 1.6s infinite;
  pointer-events:none;
}
.kks-cert-canvas.loaded::after{ opacity:0; animation:none; }
@keyframes kks-shimmer{ 100% { transform: translateX(100%); } }


.kks-cert-details{ color:#c7ceef; font-size:13px; margin-top:8px; }

/* Prevent context menu/drag */
.kks-cert-canvas, .kks-cert-canvas canvas {
  pointer-events: none; /* can't interact with the image directly */
  -webkit-user-drag: none;
  user-select: none;
}