/* amitch.design — work page: a scrolling library of the projects (Amit's reference, Oct 19).
   Desktop: the middle project is large; its neighbours shrink and tuck behind it on both sides
   (positions set by work.js). Phones: one project under another. */

.is-work .clock { display: none; }   /* no clocks on this page */

.work {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: none;
  z-index: 1;   /* keeps the cards' stacking inside the library, under the cursor */
  touch-action: pan-y;
  user-select: none;
}
.card {
  /* the large middle card: 820 × 551 in the 1740 px reference, centred a little above the middle */
  --cw: min(47.1vw, 56svh * 1.488);
  position: absolute;
  left: 50%;
  top: 45%;
  width: var(--cw);
  aspect-ratio: 820 / 551;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  background: #2a2928;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); pointer-events: none; }
.card--soon { background: #E9E7E3; }   /* placeholder for the next project */

/* Hover: the picture darkens by 35%, the name shows bottom left, and the big cursor appears */
.card::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.card__name {
  position: absolute;
  z-index: 1;
  left: calc(var(--cw) * .04);
  bottom: calc(var(--cw) * .025);
  font-size: calc(var(--cw) * .078);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
@media (hover: hover) {
  a.card, a.card * { cursor: none; }
  a.card:hover::after, a.card:hover .card__name { opacity: 1; }
}

/* the big cursor with its "Go to Project" tail; difference blend, like the keychain hover on the home page */
.work-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .2s ease;
}
.work-cursor.is-on { opacity: 1; }
.work-cursor svg { display: block; width: calc(6.4 * var(--u)); height: auto; }
.work-cursor span {
  position: absolute;
  left: calc(4.6 * var(--u));
  top: calc(9.6 * var(--u));
  font-size: max(1.15 * var(--u), 13px);
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.hero { pointer-events: none; }

/* Phones: one project under another, full width, its name under it */
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  body.is-work { height: auto; overflow: visible; }   /* the home page locks scrolling; this page scrolls */
  .is-work .page { height: auto; min-height: 100svh; overflow: visible; }
  .is-work .hero { position: static; inset: auto; padding: 56px 16px 0; }
  .is-work .footer { position: relative; inset: auto; padding: 28px 16px max(10px, env(safe-area-inset-bottom)); }
  .work { position: relative; inset: auto; overflow: visible; display: flex; flex-direction: column; gap: 16px; padding: 64px 16px 0; }  /* tighter (Amit, Oct 27) */
  .card--copy { display: none; }
  .card { --cw: calc(100vw - 32px); position: relative; left: auto; top: auto; transform: none !important; border-radius: 10px; overflow: visible; background: none; z-index: auto !important; opacity: 1 !important; }
  .card img { border-radius: 10px; height: auto; aspect-ratio: 820 / 551; }
  .card::after { display: none; }
  .card__name { position: static; display: block; margin-top: 6px; font-size: 22px; opacity: 1; color: var(--fg); }
  .card--soon { aspect-ratio: 820 / 551; border-radius: 10px; background: #E9E7E3; }
  /* phones show the projects in reading order: karly first */
  .card[href="karly.html"] { order: -3; } .card[href="wip.html"] { order: -2; } .card[href="vaniblu.html"] { order: -1; }
}

/* the scroll hint under the library (work.js removes it after the first scroll) */
.work-hint {
  position: fixed;
  left: 50%;
  bottom: 7svh;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--fg);
  opacity: .75;
  pointer-events: none;
  transition: opacity .6s ease;
}
.work-hint__arrow { display: inline-block; animation: work-hint-nudge 1.8s ease-in-out infinite; }
.work-hint__arrow:first-child { animation-name: work-hint-nudge-l; }
@keyframes work-hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes work-hint-nudge-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
.work-hint.is-gone { opacity: 0; }
@media not all and (min-width: 701px) and (min-aspect-ratio: 4/5) { .work-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .work-hint__arrow { animation: none; } }