/* Objects that shaped me, collaged around a centred introduction. */
.portfolio-about.has-collection { position: relative; min-height: calc(var(--hc-height, 0px) + 104px); }
.has-collection #intro-title { justify-content: center; }
.has-collection h2,
.has-collection .intro-copy { max-width: 470px; margin-left: auto; margin-right: auto; text-align: center; }
.has-collection h2, .has-collection .intro-copy, .has-collection #intro-title { position: relative; z-index: 2; }

.hero-collection { position: absolute; left: 0; right: 0; top: 76px; z-index: 3; pointer-events: none; opacity: calc(1 - var(--intro-progress, 0) * 1.1); }
.hero-collection:has(.hc-obj:hover, .hc-obj.is-dragging) { z-index: 40; }
.hero-collection.is-mobile { position: relative; top: 0; margin-top: 18px; opacity: 1; }
.hc-design { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.hc-obj { position: absolute; rotate: var(--r, 0deg); scale: 1; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; opacity: 0; filter: drop-shadow(0 14px 14px rgba(40, 30, 20, .2)) drop-shadow(0 2px 3px rgba(40, 30, 20, .22)); transition: scale .22s cubic-bezier(.2, .8, .2, 1), filter .22s; }
.hc-obj.is-in { opacity: 1; animation: hc-in .7s cubic-bezier(.2, .8, .2, 1) var(--delay, 0ms) backwards; }
.hc-obj:hover, .hc-obj.is-dragging { z-index: 30 !important; scale: 1.14; filter: drop-shadow(0 22px 22px rgba(40, 30, 20, .24)) drop-shadow(0 3px 4px rgba(40, 30, 20, .22)); }
.hc-obj.is-dragging { cursor: grabbing; }
@keyframes hc-in {
  from { opacity: 0; translate: 0 -18px; rotate: calc(var(--r, 0deg) + 9deg); scale: 1.12; }
}
.hc-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hc-photo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.hc-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.hc-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 36%); }
.hc-hit { position: absolute; inset: 0; cursor: pointer; }
.hc-lock { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform; }
.hc-tape { position: absolute; left: 50%; top: -12px; width: 78px; height: 22px; margin-left: -39px; rotate: -4deg; background: rgba(232, 222, 196, .78); box-shadow: 0 1px 2px rgba(40, 30, 20, .15); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); pointer-events: none; z-index: 3; }
:root[data-theme="dark"] .hc-tape { background: rgba(120, 112, 92, .7); }
.hc-hint { position: absolute; left: 50%; top: calc(100% + 12px); translate: -50% 0; rotate: calc(var(--r, 0deg) * -1); padding: 5px 9px; border-radius: 999px; background: var(--ink); color: var(--color-canvas); font: 500 11px/1 var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.hc-obj:hover .hc-hint, .hc-obj.is-hinting .hc-hint { opacity: 1; }
.hc-obj.is-dragging .hc-hint { opacity: 0; }
.hc-avatar-sticker.is-dragging.is-armed .hc-hint { opacity: 1; }

/* Surface screen: the GitHub profile, simplified; the whole screen is the link */
.hc-github { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #1f2328; font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; text-decoration: none; cursor: pointer; }
.hc-gh-bar { display: flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 16px; background: #f6f8fa; border-bottom: 1px solid #d0d7de; }
.hc-gh-bar i { width: 12px; height: 12px; border-radius: 50%; background: #d0d7de; }
.hc-gh-bar span { margin: 0 auto; padding: 5px 46px; border-radius: 8px; background: #fff; border: 1px solid #d0d7de; font: 500 15px/1 ui-monospace, Menlo, monospace; color: #59636e; }
.hc-gh-top { display: grid; grid-template-columns: 180px 1fr; gap: 22px; padding: 16px 26px 0; }
.hc-gh-me { display: flex; flex-direction: column; }
.hc-gh-me img { width: 74px; height: 74px; margin-bottom: 6px; border-radius: 50%; background: #eaeef2; box-shadow: 0 0 0 1px #d0d7de; }
.hc-gh-me b { font-size: 24px; font-weight: 600; line-height: 1.2; }
.hc-gh-me span { font-size: 17px; color: #59636e; }
.hc-gh-readme { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 22px; border: 1px solid #d0d7de; border-radius: 10px; }
.hc-gh-readme small { font: 500 13px/1 ui-monospace, Menlo, monospace; color: #59636e; }
.hc-gh-readme b { font-size: 26px; font-weight: 600; line-height: 1.2; }
.hc-gh-readme span { font-size: 19px; color: #31373d; }
.hc-gh-label { margin: 12px 26px 6px; font-size: 16px; font-weight: 600; }
.hc-gh-pins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 26px; }
.hc-gh-pins div { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; border: 1px solid #d0d7de; border-radius: 8px; }
.hc-gh-pins b { font-size: 18px; font-weight: 600; color: #0969da; }
.hc-gh-pins span { font-size: 13px; line-height: 1.35; color: #59636e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-gh-pins em { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; color: #59636e; }
.hc-gh-pins em i { width: 11px; height: 11px; border-radius: 50%; background: #f05138; }
.hc-gh-pins em.is-typescript i { background: #3178c6; }
.hc-gh-grid { display: grid; grid-auto-flow: column; grid-template-columns: repeat(53, 1fr); grid-template-rows: repeat(7, auto); gap: 2px; margin: 12px 26px 0; }
.hc-gh-grid i { aspect-ratio: 1; border-radius: 2px; background: #eff2f5; }
.hc-gh-grid .l1 { background: #9be9a8; }
.hc-gh-grid .l2 { background: #40c463; }
.hc-gh-grid .l3 { background: #30a14e; }
.hc-gh-grid .l4 { background: #216e39; }

/* N9 screen: the blog, read at a glance; the whole screen is the link */
.hc-blog { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 34px 34px 40px; background: #fbfaf7; color: #1d1b19; font-family: var(--sans); text-decoration: none; cursor: pointer; }
.hc-blog-top { font: 500 19px/1 ui-monospace, Menlo, monospace; color: #8d857a; }
.hc-blog-word { margin: 96px 0 56px; font: 400 168px/0.9 var(--display); letter-spacing: -.04em; }
.hc-blog-posts { display: flex; flex-direction: column; gap: 22px; }
.hc-blog-posts i { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid rgba(29, 27, 25, .1); }
.hc-blog-posts em { width: 34%; height: 14px; border-radius: 7px; background: #c9845f; opacity: .55; }
.hc-blog-posts s { height: 22px; border-radius: 11px; background: rgba(29, 27, 25, .16); }
.hc-blog-posts s + s { width: 66%; background: rgba(29, 27, 25, .09); }
.hc-blog-go { margin-top: auto; align-self: stretch; padding: 30px 0; border-radius: 999px; background: #1d1b19; color: #fbfaf7; font: 600 44px/1 var(--sans); text-align: center; }

/* iPod nano: cover flow, drawn in the portrait frame and turned upright */
.hc-cf { position: absolute; left: 0; top: 0; width: 400px; height: 325px; transform-origin: 0 0; transform: translate(325px, 0) rotate(90deg); background: #000; overflow: hidden; color: #fff; font-family: "Helvetica Neue", var(--sans); }
.hc-cf-row { position: absolute; left: 0; top: 0; width: 400px; height: 250px; overflow: hidden; perspective: 520px; }
.hc-cf-cover { position: absolute; left: 105px; top: 18px; width: 190px; height: 190px; transition: transform .38s cubic-bezier(.2, .8, .2, 1), filter .38s; -webkit-box-reflect: below 1px linear-gradient(transparent 62%, rgba(255, 255, 255, .3)); }
.hc-cf-meta { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; line-height: 1.3; }
.hc-cf-meta b { display: block; font-size: 19px; font-weight: 600; }
.hc-cf-meta span { font-size: 15px; color: #a7abb4; }
.hc-cf-play { position: absolute; left: 50%; bottom: 10px; width: 140px; height: 4px; margin-left: -70px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; opacity: 0; transition: opacity .2s; }
.hc-cf-play i { display: block; width: 0; height: 100%; background: #9fc2ff; }
.hc-cf.is-playing .hc-cf-play { opacity: 1; }
.hc-cf.is-playing .hc-cf-play i { animation: hc-progress 30s linear infinite; }
@keyframes hc-progress { to { width: 100%; } }
.hc-wheel { position: absolute; border-radius: 50%; cursor: grab; touch-action: none; }

@media (max-width: 899px) {
  .portfolio-about.has-collection { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-obj, .hc-obj.is-in, .hc-cf-cover { animation: none; transition: none; }
}
.hc-obj-nano .hc-tape { left: 88%; top: -8px; rotate: 34deg; }

/* The portrait is a die-cut sticker; its reflected underside follows the peel line. */
.hc-avatar-sticker { aspect-ratio: 472 / 677; filter: none; cursor: default; touch-action: auto; }
.hc-avatar-sticker:hover, .hc-avatar-sticker.is-dragging { scale: 1; filter: none; }
/* Same-size flat-color PNG with the exact alpha of the front; no rectangular card. */
.hc-sticker-contact { position: absolute; inset: 0; background: url("../assets/hero-collection/khalil-dog-sticker-back.png") center / 100% 100% no-repeat; color: #262723; font: 500 13px/1.3 var(--sans); }
.hc-sticker-name { position: absolute; left: 63%; top: 74%; translate: -50% 0; color: #73756d; font-size: 10px; white-space: nowrap; }
.hc-sticker-contact-button { position: absolute; left: 63%; top: 83%; translate: -50% 0; color: inherit; font: inherit; white-space: nowrap; text-align: center; padding: 4px 2px; border: 0; border-bottom: 1px solid #b8bab0; background: transparent; cursor: pointer; }
.hc-sticker-contact-button:hover { border-color: currentColor; }
.hc-sticker-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(1px 5px 4px #25281f24); }
.hc-sticker-fold { filter: drop-shadow(-2px -2px 2px #292d2333); }
.hc-sticker-toggle { position: absolute; inset: 0; border: 0; clip-path: polygon(100% 72%, 100% 100%, 38% 100%); background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.hc-sticker-move { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 72%, 38% 100%, 0 100%); cursor: grab; touch-action: none; }

.hc-sticker-contact-button { z-index: 4; }
.hc-sticker-contact { z-index: 0; }
.hc-sticker-art { z-index: 1; }
.hc-sticker-move { z-index: 2; }
.hc-sticker-toggle { z-index: 3; }
.hc-screen-grip { position: absolute; left: 0; right: 0; top: 0; height: 28%; cursor: grab; touch-action: none; }
.hc-avatar-sticker.is-dragging .hc-sticker-toggle { cursor: grabbing; }

.hc-sticker-toggle:focus-visible, .hc-sticker-contact-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }