/* Portfolio UI kit page-level styles */
@import url('./colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
img { display: block; max-width: 100%; }
button { font: inherit; }

/* placeholder image surface */
.ph {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(17,17,17,0.04) 14px 15px),
    linear-gradient(180deg, #E7DDC7 0%, #D6C9AB 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(17,17,17,0.45); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 20px;
}
.ph.warm { background: linear-gradient(135deg, #FFD9A8 0%, #FF9A6B 50%, #E53E2E 100%); color: rgba(255,255,255,0.85); }
.ph.cool { background: linear-gradient(135deg, #BFD0F0 0%, #9DB8EA 50%, #6E8BFF 100%); color: rgba(255,255,255,0.85); }
.ph.video { background: #1a1a1a; color: rgba(255,255,255,0.6); }

/* Skeleton loader — shimmer in the paper palette */
.skel {
  position: relative;
  overflow: hidden;
  background: #E6E8F2;
  border-radius: 20px;
}
.skel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(240,242,251,0) 20%,
    rgba(240,242,251,0.85) 50%,
    rgba(240,242,251,0) 80%
  );
  transform: translateX(-100%);
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer {
  100% { transform: translateX(100%); }
}
.skel-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 320ms var(--ease-out, ease-out);
}
.skel-img.loaded { opacity: 1; }
.skel.loaded { background: transparent; }
.skel.loaded::after { display: none; }

/* ---------- Featured project card body — 2-col on desktop, single column (badge first) on mobile ---------- */
.pc-body-desktop { display: grid; }
.pc-body-mobile { display: none; }

/* ---------- "Earlier · Amazon" cards — 3-col on desktop, full-width stacked on mobile ---------- */
.sp-grid { grid-template-columns: repeat(3, 1fr); }

/* ---------- About page profile photo — 160px on desktop, 140px on mobile ---------- */
.about-photo { width: 160px; height: 160px; }

/* ---------- Top nav — collapses to a hamburger sheet below 680px ---------- */
.top-nav-links { display: flex; align-items: center; gap: 8px; }
.top-nav-toggle { display: none; }
.top-nav-sheet { display: none; }

@media (max-width: 680px) {
  .home-section { padding-left: 20px !important; padding-right: 20px !important; }
  .about-photo { width: 140px; height: 140px; }
  .pc-body-desktop { display: none; }
  .pc-body-mobile { display: grid; }
  .sp-grid { grid-template-columns: 1fr; }
  .top-nav { padding: 16px 20px !important; }
  .top-nav-word { font-size: 16px !important; }
  .top-nav-links { display: none; }
  .top-nav-toggle {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 5px;
    width: 40px; height: 40px; border: none; border-radius: 999px;
    background: transparent; cursor: pointer; padding: 0; flex-shrink: 0;
  }
  .top-nav-toggle span {
    display: block; width: 20px; height: 2px; background: var(--ink);
    border-radius: 2px; transition: transform 200ms var(--ease-out, ease-out), opacity 200ms var(--ease-out, ease-out);
  }
  /* Middle line snaps instantly instead of fading through the rotation */
  .top-nav-toggle span:nth-child(2) { transition: opacity 0s; }
  .top-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .top-nav-toggle.open span:nth-child(2) { opacity: 0; }
  .top-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .top-nav-sheet {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px 20px 20px; background: var(--paper);
    box-shadow: var(--shadow-1);
    transform-origin: top;
    transform: scaleY(0.001) translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 280ms var(--ease-spring, ease-out), opacity 200ms var(--ease-out, ease-out), visibility 0s linear 280ms;
  }
  .top-nav-sheet.open {
    transform: scaleY(1) translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 280ms var(--ease-spring, ease-out), opacity 220ms var(--ease-out, ease-out), visibility 0s linear 0s;
  }
  .top-nav-sheet a { padding: 12px 4px; font-size: 16px; }
}