/* ============================================================
   ARC — projects page: horizontal track of tall project cards
   ============================================================ */

.header__nav a.is-active::after { transform: scaleX(1); }

.pj { position: relative; min-height: 100vh; background: var(--bg); }

/* ---------- Stage + track ---------- */
.pj__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.pj__track {
  display: flex; align-items: center; gap: 24px; height: 100%;
  width: fit-content; padding: 0 16px; will-change: transform;
}
@media (min-width: 601px) { .pj__track { padding: 0 24px; } }
@media (min-width: 768px) { .pj__track { padding: 32px 48px 0; } }

/* Mobile / tablet: native snap carousel */
@media (max-width: 1024px) {
  .pj__stage {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .pj__stage::-webkit-scrollbar { display: none; }
  .pj__track { padding: 0 9vw; }
}
@media (min-width: 768px) and (max-width: 1024px) { .pj__track { padding: 0 21vw; } }

/* ---------- Card ---------- */
.pj-card {
  position: relative; flex-shrink: 0; display: flex; flex-direction: column;
  width: 82vw; scroll-snap-align: center;
}
@media (min-width: 768px) { .pj-card { width: 58vw; } }
@media (min-width: 1025px) { .pj-card { width: 400px; height: 70vh; max-height: 650px; } }

.pj-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.pj-card__title {
  margin: 0 0 8px; width: fit-content; font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase; color: var(--copper); opacity: .8;
  transition: opacity .6s;
}
.pj-card__meta { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }

.pj-card__frame { position: relative; width: 100%; height: 63vh; overflow: hidden; background: var(--sand); }
@media (min-width: 768px) and (max-width: 1024px) { .pj-card__frame { height: 72vh; } }
@media (min-width: 1025px) { .pj-card__frame { flex: 1; height: auto; } }

.pj-card__frame img {
  position: absolute; width: 110%; height: 110%; top: -5%; left: -5%;
  object-fit: cover; will-change: transform;
}

/* Film fades in over the still while it plays */
.pj-card__video {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease-soft);
}
.pj-card.is-playing .pj-card__video { opacity: 1; }

.pj-card__shade {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-soft);
}
/* One quiet ink wash for every card; terracotta stays a small accent */
.pj-card__shade { background: linear-gradient(rgba(53,44,34,0) 35%, rgba(53,44,34,.72) 100%); }
@media (max-width: 1024px) {
  .pj-card__shade { background: linear-gradient(rgba(53,44,34,0), rgba(53,44,34,.18) 40%, rgba(53,44,34,.55)); }
}

/* Corner marks draw in on hover / when active */
.pj-card__corners { position: absolute; inset: 16px; z-index: 3; pointer-events: none; }
.pj-card__corners i { position: absolute; width: 18px; height: 18px; }
.pj-card__corners i::before, .pj-card__corners i::after {
  content: ""; position: absolute; background: rgba(246,245,242,.9);
  transition: transform .6s cubic-bezier(.22,1,.36,1) .15s;
}
.pj-card__corners i::before { width: 100%; height: 1.5px; transform: scaleX(0); }
.pj-card__corners i::after { width: 1.5px; height: 100%; transform: scaleY(0); }
.pj-card__corners i:nth-child(1) { top: 0; left: 0; }
.pj-card__corners i:nth-child(1)::before { top: 0; left: 0; transform-origin: left; }
.pj-card__corners i:nth-child(1)::after { top: 0; left: 0; transform-origin: top; }
.pj-card__corners i:nth-child(2) { top: 0; right: 0; }
.pj-card__corners i:nth-child(2)::before { top: 0; right: 0; transform-origin: right; }
.pj-card__corners i:nth-child(2)::after { top: 0; right: 0; transform-origin: top; }
.pj-card__corners i:nth-child(3) { bottom: 0; left: 0; }
.pj-card__corners i:nth-child(3)::before { bottom: 0; left: 0; transform-origin: left; }
.pj-card__corners i:nth-child(3)::after { bottom: 0; left: 0; transform-origin: bottom; }
.pj-card__corners i:nth-child(4) { bottom: 0; right: 0; }
.pj-card__corners i:nth-child(4)::before { bottom: 0; right: 0; transform-origin: right; }
.pj-card__corners i:nth-child(4)::after { bottom: 0; right: 0; transform-origin: bottom; }

.pj-card__content { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3; padding: 32px; pointer-events: none; }
@media (max-width: 600px) { .pj-card__content { padding: 24px; } }
.pj-card__desc {
  margin: 0; color: rgba(255,255,255,.96); font-size: 16px; font-weight: 500; line-height: 1.6;
  opacity: 0; transform: translateY(24px);
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .8s cubic-bezier(.16,1,.3,1);
}
@media (min-width: 601px) and (max-width: 1024px) { .pj-card__desc { font-size: 18px; } }
@media (min-width: 1025px) { .pj-card__desc { font-size: 14px; line-height: 1.7; letter-spacing: .01em; } }

/* Revealed states: hover on desktop, active slide on touch */
@media (hover: hover) and (min-width: 1025px) {
  .pj-card:hover .pj-card__title, .pj-card:hover .pj-card__shade { opacity: 1; }
  .pj-card:hover .pj-card__desc { opacity: 1; transform: none; transition-delay: .1s; }
  .pj-card:hover .pj-card__corners i::before { transform: scaleX(1); }
  .pj-card:hover .pj-card__corners i::after { transform: scaleY(1); }
}
@media (max-width: 1024px) {
  .pj-card { opacity: .55; transform: scale(.94); transition: opacity .5s, transform .6s cubic-bezier(.22,1,.36,1); }
  .pj-card.is-active { opacity: 1; transform: none; }
  .pj-card.is-active .pj-card__title, .pj-card.is-active .pj-card__shade { opacity: 1; }
  .pj-card.is-active .pj-card__desc { opacity: 1; transform: none; transition-delay: .3s; }
  .pj-card.is-active .pj-card__corners i::before { transform: scaleX(1); }
  .pj-card.is-active .pj-card__corners i::after { transform: scaleY(1); }
  .pj-card:not(.is-active) .pj-card__link { pointer-events: none; }
}

/* ---------- Fig counter ---------- */
.pj__fig {
  position: fixed; z-index: 50; left: 24px; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: baseline; gap: 8px;
  animation: pjEnter .9s cubic-bezier(.22,1,.36,1) .6s backwards;
}
@media (min-width: 1025px) { .pj__fig { left: 48px; right: 48px; bottom: 4%; } }
.pj__fig-label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); }
.pj__fig-current { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--amber); font-variant-numeric: tabular-nums; }
.pj__fig-current.is-rising { animation: pjRise .5s cubic-bezier(.22,1,.36,1); }
.pj__fig-total { font-size: 12px; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.pj__fig-track {
  position: relative; flex: 1; align-self: center; height: 1px; overflow: hidden;
  background-image: repeating-linear-gradient(90deg, rgb(var(--ink-rgb) / .35) 0 6px, transparent 6px 12px);
}
.pj__fig-fill { position: absolute; inset: 0; height: 1.5px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.22,1,.36,1); }
@keyframes pjRise { from { opacity: 0; transform: translateY(.65em); } to { opacity: 1; transform: none; } }
@keyframes pjEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Scroll hint ---------- */
.pj__hint {
  position: fixed; z-index: 50; top: 50%; left: 24px; transform: translate(-50%, -50%);
  display: none; flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
  transition: opacity .5s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 1025px) { .pj__hint { display: flex; } }
.pj__hint.is-hidden { opacity: 0; }
.pj__hint-rule { position: relative; width: 1px; height: 64px; background: rgb(var(--accent-rgb) / .35); transform-origin: top; animation: pjDraw .9s cubic-bezier(.22,1,.36,1) .5s backwards; }
.pj__hint-rule::before, .pj__hint-rule::after { content: ""; position: absolute; left: 50%; width: 9px; height: 1px; background: var(--amber); transform: translateX(-50%); }
.pj__hint-rule::before { top: 0; } .pj__hint-rule::after { bottom: 0; }
.pj__hint-text { writing-mode: vertical-rl; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); }
@keyframes pjDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Custom cursor ---------- */
.pj__cursor {
  position: fixed; top: 0; left: 0; z-index: 60; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%; background: var(--amber); color: #fff; display: none; place-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none; transform: scale(0); will-change: transform;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) { .pj__cursor { display: grid; } }
.pj__cursor.is-secondary { background: var(--ink); }

/* The page is all track: hide the footer-style chrome */
.page-projects { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pj-card__corners i::before, .pj-card__corners i::after, .pj-card__desc, .pj__fig-fill { transition-duration: .01ms; }
}