/* 1PXL Labs — devices.css
   The drawing language: dimension lines, crop marks, plates, title blocks,
   photo sequences and hand redlines. */

/* ── DRAWING DEVICES ── */
/* Dimension line: ├──── 1 PX ────┤ */
.dim {
  display: flex; align-items: center; gap: 14px;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.dim::before, .dim::after {
  content: '';
  flex: 1; height: 9px;
  border-left: 0.5px solid var(--red); border-right: 0.5px solid var(--red);
  background: linear-gradient(var(--red), var(--red)) center / 100% 0.5px no-repeat;
  opacity: 0.8;
}
.dim.left::before { display: none; }
/* Crop / registration marks on a framed block */
.crop { position: relative; }
.crop::before, .crop::after {
  content: '';
  position: absolute; width: 14px; height: 14px;
  pointer-events: none; z-index: 3;
}
.crop::before { top: -1px; left: -1px; border-top: 1px solid var(--red); border-left: 1px solid var(--red); }
.crop::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--red); border-right: 1px solid var(--red); }
/* Framed drawing panel */
.plate {
  background: var(--surface);
  border: 0.5px solid var(--border);
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(var(--border) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--border) 0.5px, transparent 0.5px);
  background-size: 40px 40px;
}
.plate svg { width: 62%; height: auto; position: relative; z-index: 1; }
.plate-label {
  position: absolute; left: 20px; bottom: 18px;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.plate-label.tr { left: auto; bottom: auto; right: 20px; top: 18px; color: var(--red); }
.plate.photo { background-image: none; }
.plate.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); opacity: 0.9; }
.plate.photo .plate-label { color: var(--white-dim); text-shadow: 0 1px 6px rgba(0,0,0,0.8); z-index: 2; }

/* ── SEQUENCE (one job, start to finish — numbered photo strip) ── */
.sequence { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 64px; }
.seq-frame { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--surface); border: 0.5px solid var(--border); }
.seq-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1) contrast(1.08); opacity: 0.85;
  transition: transform 0.6s ease, opacity 0.4s, filter 0.4s;
}
.seq-frame:hover img { transform: scale(1.04); opacity: 1; }
.seq-frame.final img { filter: none; opacity: 1; }
.seq-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.1) 55%, transparent 100%);
}
.seq-cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.seq-n { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.seq-t { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; line-height: 1.1; color: var(--white); }
.seq-d { font-size: 10px; color: var(--white-dim); line-height: 1.6; margin-top: 6px; }

/* ── REDLINES (hand markup — the one human hand in the system) ── */
.hand { font-family: 'Reenie Beanie', cursive; font-weight: 400; color: var(--red); letter-spacing: 0; text-transform: none; line-height: 1; }
.redline {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: 'Reenie Beanie', cursive; font-size: 30px; line-height: 0.95; color: var(--red);
  transform: rotate(-4deg); white-space: nowrap;
}
.redline svg { display: block; overflow: visible; }
.redline path { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.circled { position: relative; white-space: nowrap; }
.circled svg { position: absolute; left: -6%; top: -12%; width: 112%; height: 124%; overflow: visible; pointer-events: none; }
.circled path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.struck { position: relative; white-space: nowrap; color: var(--muted); }
.struck::after { content: ''; position: absolute; left: -3%; right: -3%; top: 54%; height: 2px; background: var(--red); transform: rotate(-2deg); }


/* ── TITLE BLOCK (drawing-style spec plate: every project and page carries one) ── */
.titleblock {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 0.5px solid var(--border-light);
  margin-top: 48px;
  background: var(--black);
}
.titleblock.three { grid-template-columns: repeat(3, 1fr); }
.tb-cell { padding: 16px 20px 18px; border-right: 0.5px solid var(--border-light); border-bottom: 0.5px solid var(--border-light); min-width: 0; }
.tb-cell.wide { grid-column: span 2; }
.tb-cell.full { grid-column: 1 / -1; }
.tb-k { font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tb-v { font-size: 12px; color: var(--white); line-height: 1.6; }
.tb-v.big { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
.tb-v .red, .tb-v.red { color: var(--red); }
.titleblock { margin-right: -0.5px; }

/* Bilingual mono label: ATELIER / WORKSHOP */
.bi { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.bi i { font-style: normal; color: var(--red); padding: 0 6px; }

@media (max-width: 1100px) { .sequence { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .sequence { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .sequence .seq-frame:last-child { grid-column: 1 / -1; aspect-ratio: 4/3; }
  .redline { font-size: 24px; }
  .titleblock, .titleblock.three { grid-template-columns: 1fr 1fr; }
  .tb-cell.wide { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .seq-frame img { transition: none; } }

/* Hero hand note (positioned by hero.js at the apex of the cut rib) */
.hero-note { display: flex; align-items: flex-end; gap: 6px; transform: translate(8px, -100%) rotate(-5deg); transform-origin: left bottom; opacity: 0; animation: fadeUp 0.8s 1.4s ease forwards; }
.hero-note span { padding-bottom: 20px; }
@media (max-width: 860px) { .hero-note { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-note { animation: none; opacity: 1; } }