/* ===== Viewing-experience enhancements (self-contained) ===== */

/* Smooth in-page scrolling with offset for the sticky header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Top reading-progress bar */
#yk-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 99999;
  background: linear-gradient(90deg, #03ca89, #02a36e);
  box-shadow: 0 0 8px rgba(3, 202, 137, 0.6);
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* Back-to-top button (used only when the theme has none of its own) */
#yk-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #03ca89, #02a36e);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 99998;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
#yk-top:hover { filter: brightness(1.12); }
#yk-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Project category filter bar */
.yk-filterbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.yk-filter-btn {
  padding: 10px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.yk-filter-btn:hover { border-color: #03ca89; }
.yk-filter-btn.is-active {
  background: linear-gradient(135deg, #03ca89, #02a36e);
  border-color: transparent;
  color: #fff;
}
.yk-filter-btn .yk-count {
  font-size: 12px;
  opacity: 0.7;
  margin-left: 2px;
}
/* Filtered-out cards */
.cs-proj.yk-hidden { display: none !important; }
/* Subtle entrance when (re)shown */
.cs-proj { transition: opacity 0.3s ease; }
.cs-proj.yk-faded { opacity: 0; }

/* Project pagination */
.yk-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.yk-pager:empty { display: none; }
.yk-page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.yk-page-btn:hover:not(:disabled) { border-color: #03ca89; }
.yk-page-btn.is-active {
  background: linear-gradient(135deg, #03ca89, #02a36e);
  border-color: transparent;
}
.yk-page-btn:disabled { opacity: 0.35; cursor: default; }

/* Hover-preview backgrounds for the live AI apps.
   Layered: real screenshot first, themed gradient as fallback if the file is absent.
   Drop screenshots at assets/img/portfolio/hapiken.png and spelix.png to show them. */
.hapiken:before {
  background-image: url("../img/portfolio/hapiken.png"),
    linear-gradient(135deg, #a8e6cf 0%, #56c596 60%, #2f9e7e 100%);
  background-size: cover;
  background-position: center top;
}
.spelix:before {
  background-image: url("../img/portfolio/spelix.png"),
    linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
  background-size: cover;
  background-position: center top;
}
/* Gradient previews for the full-stack capability projects */
.ykfs-auto:before { background-image: linear-gradient(135deg, #0f766e 0%, #03ca89 100%); background-size: cover; }
.ykfs-data:before { background-image: linear-gradient(135deg, #1f2937 0%, #0e7490 100%); background-size: cover; }
.ykfs-eval:before { background-image: linear-gradient(135deg, #134e4a 0%, #0d9488 100%); background-size: cover; }

/* ===== New sections: Skills / Credentials / Contact ===== */
.yk-section { position: relative; }

/* Section lead line */
.yk-section-lead {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  line-height: 1.7;
  color: #aab3ae;
}

/* Skills — core stack row */
.yk-corestack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.yk-core-label {
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #03ca89;
  margin-right: 4px;
}
.yk-core-item {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  padding: 9px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(3, 202, 137, 0.18), rgba(3, 202, 137, 0.06));
  border: 1px solid rgba(3, 202, 137, 0.4);
}

/* Skills — stack sheet (numbered category rows) */
.yk-stack {
  max-width: 1040px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.yk-stack-row {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 30px;
  align-items: center;
  padding: 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  position: relative;
  transition: background 0.25s ease;
}
.yk-stack-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #03ca89;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s ease;
}
.yk-stack-row:hover { background: rgba(3, 202, 137, 0.04); }
.yk-stack-row:hover::before { transform: scaleY(1); }
.yk-stack-key {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}
.yk-stack-num {
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #03ca89;
  opacity: 0.85;
}
.yk-stack-key i { color: #03ca89; font-size: 17px; width: 20px; text-align: center; }
.yk-stack-val { display: flex; flex-wrap: wrap; gap: 9px; }
.yk-stack-val span {
  font-size: 14px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.025);
  color: #cdd6d1;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.yk-stack-val span:hover {
  border-color: #03ca89;
  color: #fff;
  background: rgba(3, 202, 137, 0.1);
  transform: translateY(-2px);
}
@media (max-width: 767px) {
  .yk-stack-row { grid-template-columns: 1fr; gap: 14px; padding: 22px 6px; }
}

/* Credentials (certs / education / languages) */
.yk-cred-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
}
.yk-cred-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.yk-cred-heading i { color: #03ca89; }
.yk-cred-list { list-style: none; margin: 0; padding: 0; }
.yk-cred-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.yk-cred-name { color: #ededed; font-weight: 600; }
.yk-cred-meta { color: #9a9a9a; font-size: 14px; white-space: nowrap; }

/* Contact */
.yk-contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px;
  align-items: start;
}
.yk-contact-photo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(3, 202, 137, 0.6);
  margin-bottom: 18px;
}
.yk-contact-name { font-size: 26px; font-weight: 700; color: #fff; margin: 0; }
.yk-contact-role { color: #03ca89; font-weight: 600; margin: 4px 0 14px; }
.yk-contact-blurb { color: #b7b7b7; margin: 0 0 22px; max-width: 360px; }
.yk-contact-list { list-style: none; margin: 0; padding: 0; }
.yk-contact-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: #ededed; }
.yk-contact-list i { color: #03ca89; width: 18px; text-align: center; }
.yk-contact-list a { color: #ededed; text-decoration: none; transition: color 0.2s ease; }
.yk-contact-list a:hover { color: #03ca89; }

.yk-contact-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 30px;
}
.yk-field { margin-bottom: 18px; }
.yk-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: #cfcfcf;
}
.yk-field input,
.yk-field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.yk-field input::placeholder,
.yk-field textarea::placeholder { color: #777; }
.yk-field input:focus,
.yk-field textarea:focus {
  outline: none;
  border-color: #03ca89;
  background: rgba(3, 202, 137, 0.06);
}
.yk-field textarea { resize: vertical; min-height: 120px; }
.yk-field.is-invalid input,
.yk-field.is-invalid textarea { border-color: #e2556a; }
.yk-form-note { margin: 14px 0 0; font-size: 14px; min-height: 20px; }
.yk-form-note.is-ok { color: #03ca89; }
.yk-form-note.is-err { color: #ff7a8a; }

@media (max-width: 991px) {
  .yk-cred-grid,
  .yk-contact-grid { grid-template-columns: 1fr; }
}