/* cycle™ — Work parallax grid page. Ports work.html styles (scoped to .cy-work). */
body.cy-work { height: 100%; overflow: hidden; background: #000; color: #fff; cursor: grab; }
html.dragging, body.cy-work:active { cursor: grabbing; }

.cy-work #images { position: fixed; inset: 0; width: 100%; height: 100%; }

.cg-item {
  position: absolute; top: 0; left: 0; display: block; text-decoration: none; color: #fff;
  will-change: transform; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--gloss-edge-dark), var(--shadow-dark-md);
  contain: layout paint; /* isolate each tile's rendering from the rest */
}
.cg-img { position: absolute; inset: 0; overflow: hidden; background: #0a0a0a; } /* dark placeholder until lazy-loaded */
.cg-img::after { content: ""; position: absolute; inset: 0; background: var(--scrim-bottom); opacity: 0.7; z-index: 1; }
.cg-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08); transform: scale(1.04);
  opacity: 0;
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out), filter var(--d-slow) var(--e-out);
  -webkit-user-drag: none; user-select: none;
}
.cg-img img.is-loaded { opacity: 1; }
.cg-item:hover .cg-img img.is-loaded { transform: scale(1.12); filter: grayscale(1) contrast(1.15) brightness(1.05); }
.cg-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; align-items: baseline; gap: 10px; }
.cg-idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--gray-300); }
.cg-name { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: clamp(18px, 1.6vw, 26px); letter-spacing: -0.02em; }
.cg-cat { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); }
.cg-item:hover .cg-cat { color: #fff; }

.cw-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px,5vw,56px); pointer-events: none; mix-blend-mode: difference; }
.cw-header a { pointer-events: auto; }
.cw-brand { display: flex; align-items: center; gap: 14px; }
.cw-brand img { height: 22px; }
.cw-back { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.cw-ttl { position: fixed; left: clamp(20px,5vw,56px); bottom: 28px; z-index: 20; pointer-events: none; }
.cw-ttl h1 { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem,5vw,3.5rem); letter-spacing: -0.03em; line-height: 0.92; }
.cw-ttl small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-400); }
.cw-hint { position: fixed; right: clamp(20px,5vw,56px); bottom: 28px; z-index: 20; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); pointer-events: none; display: flex; align-items: center; gap: 10px; }
.cw-hint::before { content: ""; width: 26px; height: 1px; background: var(--gray-500); }
.cw-header__right { display: flex; align-items: center; gap: 16px; pointer-events: auto; }
.cw-indexbtn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--r-sm); padding: 8px 13px; cursor: pointer; transition: var(--t-hover); }
.cw-indexbtn:hover { background: #fff; color: #000; border-color: #fff; }

/* All-projects index panel (crawlable links + keyboard jump list) */
.cw-index { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(420px, 92vw); background: rgba(8,8,8,0.96); backdrop-filter: blur(18px); border-left: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; box-shadow: var(--shadow-xl); }
.cw-index[hidden] { display: none; }
.cw-index__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(18px,3vw,28px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.cw-index__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); }
.cw-index__close { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-sm); background: transparent; color: #fff; cursor: pointer; }
.cw-index__close:hover { background: #fff; color: #000; }
.cw-index__list { list-style: none; margin: 0; padding: 8px 0 32px; overflow-y: auto; flex: 1; }
.cw-index__list a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px; padding: 13px clamp(18px,3vw,28px); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.05); transition: background var(--d-fast) var(--e-out); }
.cw-index__list a:hover { background: rgba(255,255,255,0.06); }
.cw-index__n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--gray-500); }
.cw-index__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.cw-index__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); white-space: nowrap; }
.cw-noscript { position: fixed; left: 16px; bottom: 16px; z-index: 20; color: var(--gray-300); font-size: 13px; }