/* Work subpage (box → dieline). Design language: light gray, thin lines — the
   stroke matches the photography grid (#d4d4d4, 1px). */

/* Fade the stone/collage LAYERS (not the stage itself): opacity on .stage would
   make it a stacking context and isolate the layers' darken blend, flashing a
   white rectangle while it fades. The layers already transition opacity. */
body.is-work .stage {
  pointer-events: none;
}
body.is-work .stage .bg,
body.is-work .stage .layer.is-hovered,
body.is-work .stage .camera-clean {
  opacity: 0;
}
body.is-work .beam-canvas {
  visibility: hidden; /* the ASCII extrusion is replaced by the box */
}
/* At frame 1 the "Work" label stays where it is (behind the box, like the
   hover). When the unfold starts it moves to the bottom-left, as in the
   Photography view. */
body.is-work-open .beam-label {
  left: 3vw;
  top: 88vh;
  transform: translate(0, -50%);
  font-size: clamp(3rem, 8vw, 7rem);
  transition: none; /* the move to the corner is a FLIP on transform (script.js) */
}

.dieline-space {
  position: fixed;
  inset: 0;
  z-index: 20;
}
.dieline-space[hidden] {
  display: none;
}
.dieline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dieline-space.is-on .dieline {
  opacity: 1;
}
.dieline polygon {
  stroke: none; /* edges are drawn separately so cut/fold can differ */
}
.dieline line {
  stroke: #d4d4d4;
  stroke-width: 1;
  fill: none;
}
.dieline line.fold {
  stroke-dasharray: 4 4;
}
.dieline line.hidden {
  stroke-dasharray: 3 3; /* edges behind the box, seen "through" it */
}

/* Lines and images never take the pointer: hover/click hit the panel
   polygons underneath, so crossing a line doesn't flicker the hover. */
.dieline line,
.dieline image {
  pointer-events: none;
}
.dieline polygon.is-project {
  cursor: pointer;
}

/* A very light dotted grid behind the sheet, from the moment it unfolds.
   It sits under the hover backdrops, so it never shows through them. */
.dieline-space::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.11) 0.75px, transparent 1.25px);
  background-size: 24px 24px;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
body.is-work-open .dieline-space::before {
  opacity: 1;
}

/* Project images: clipped to their panel polygon (work.js), full color by
   default (grayscale / saturation in work.config.js), fading in panel by
   panel after the unfold. */
.panel-image {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.panel-image.is-visible {
  opacity: 1;
}

/* ---- Hover (desktop): same logic as the Photography projects. ---- */
.work-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.work-bg.is-on {
  opacity: 1;
}
/* A set (e.g. Broadar): same-size 4:5 tiles scattered over a dark backdrop
   (layout in work.js). The tiles fade in one after another. */
.work-bg.is-grid {
  overflow: hidden;
  background-color: #141414;
}
.work-tile {
  position: absolute;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.work-bg.is-on .work-tile {
  opacity: 1;
  transition-delay: calc(var(--i) * 30ms);
}
.dieline polygon,
.dieline line {
  transition: opacity 0.3s ease;
}
/* Fill eases only on the open sheet (hover), so the folding frames stay
   stepped. */
.dieline-space.is-unfolded .dieline polygon {
  transition: opacity 0.3s ease, fill 0.3s ease;
}
/* Everything but the hovered panel fades; it turns to plain paper with its
   own outline (cut + fold lines) still drawn. */
.dieline.has-hover polygon:not(.is-keep),
.dieline.has-hover line:not(.is-keep),
.dieline.has-hover .panel-image {
  opacity: 0;
}
.dieline.has-hover polygon.is-keep {
  fill: #fcfaf9;
}
/* The ghost "Work" title turns white over the backdrop. */
body.is-work .beam-label {
  transition: color 0.3s ease; /* the move itself: FLIP on transform (script.js) */
}
body.is-work-hover .beam-label {
  color: #ffffff;
  z-index: 21; /* above the backdrop (.dieline-space is 20) */
}
/* On the Work and project pages the ghost title is a link home. */
/* (Hovering it reads "Home" — script.js.) */
body.is-work-open .beam-label {
  z-index: 21; /* above the dieline layer so it can take the click */
  pointer-events: auto;
  cursor: pointer;
}

/* Content regions, one per panel (#panel-nirva, #panel-farr, #panel-chip-ux,
   #panel-chip-ds, #panel-moe, #panel-pexo), positioned over the flat dieline. */
.dieline-panels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dieline-panel {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size; /* card sizes follow the panel width (cqi) */
}
/* Hover card, from the Figma frame (panel ≈ 791 × 200):
     title        Inter Semi Bold 36, line-height auto, -4%, #1F1F1F
     type + year  Inter Semi Bold 24, auto, -4%, #8C8C8C   (bottom-left)
     description  Inter Regular 20, auto, -4%, #000 @ 35%   (326 wide, right)
     padding ≈ 27 on every side.
   Everything scales with the panel width (1cqi = 1% of it); sizes are in em
   of the description size so work.js can shrink the card to fit. */
.panel-info {
  box-sizing: border-box;
  height: 100%;
  padding: 3.4cqi; /* 27 / 791 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 41.2cqi; /* description 326 / 791 */
  font-family: "Inter", system-ui, sans-serif;
  font-size: 2.53cqi; /* 20 / 791 — the description size */
  line-height: 1.21; /* Inter "auto" */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dieline-panel.is-hover .panel-info {
  opacity: 1;
}
.panel-info-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5em;
  min-width: 0;
  min-height: 0;
  padding-right: 1em;
}
/* -4% tracking is set per style: an em value inherits as fixed px. */
.panel-info-title,
.panel-info-meta,
.panel-info-desc {
  letter-spacing: -0.04em;
}
.panel-info-title {
  font-size: 1.8em; /* 36 */
  font-weight: 600;
  color: #1f1f1f;
}
.panel-info-meta {
  font-size: 1.2em; /* 24 */
  font-weight: 600;
  color: #8c8c8c;
}
/* Type and year never break inside themselves. The dot between them is
   lighter, with a little air either side. */
.panel-info-type,
.panel-info-year {
  white-space: nowrap;
}
.panel-info-sep {
  margin: 0 0.1em;
  color: #bdbdbd;
}
.panel-info-desc {
  margin: 0;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.35);
  text-wrap: pretty; /* no one-word last line */
}
/* Narrow panels (the end panels): two groups. Header at the top — title,
   then "type · year" small and regular right under it — and the
   description, small and light, sitting at the bottom. */
@container (max-width: 420px) {
  .panel-info {
    padding: 11cqi 10cqi;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    font-size: clamp(10px, 6.4cqi, 16px); /* small text */
  }
  .panel-info-main {
    display: contents;
  }
  .panel-info-title {
    order: 1;
    font-size: 1.75em;
    line-height: 1.1;
  }
  .panel-info-meta {
    order: 2;
    margin-top: 0.45em;
    font-size: 1em;
    font-weight: 400;
    color: #8c8c8c;
  }
  .panel-info-desc {
    order: 3;
    align-self: end;
    padding-top: 1em;
    line-height: 1.3;
  }
  .panel-info-type {
    white-space: normal;
  }
  .panel-info-meta.is-stacked .panel-info-sep {
    display: none;
  }
  .panel-info-meta.is-stacked .panel-info-year {
    display: block;
  }
}
/* Small title tag: touch screens only. */
.panel-tag {
  display: none;
}

/* Project page: the right ~80% of the viewport, beside the docked box. */
.work-project {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 20vw;
}
.work-project[hidden] {
  display: none;
}
.dieline-space.is-project .dieline polygon {
  cursor: pointer;
}
/* Project content fades in while the sheet is still folding. */
.work-project {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.work-project.is-on {
  opacity: 1;
}
/* Leaving the Work page for a project: the images fade fast, alongside
   the fold. Coming back: they are simply there. */
.dieline-space.is-fast .panel-image {
  transition-duration: 0.15s;
}
.dieline-space.is-instant .panel-image,
.dieline-space.is-instant .dieline-panel {
  transition: none;
}

/* Mobile / touch: no hover. Images in color, a small title on each panel,
   tap opens the project. */
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .panel-image.is-gray {
    filter: none; /* touch screens keep color even with grayscale on */
  }
  .dieline-panel.is-visible .panel-tag {
    display: inline-block;
    position: absolute;
    left: 4px;
    top: 4px;
    padding: 2px 5px;
    background: #fcfaf9;
    font: 500 9px/1.2 "Inter", system-ui, sans-serif;
    letter-spacing: 0.02em;
    color: #6f6f6f;
    white-space: nowrap;
  }
  .work-project {
    left: 0;
    top: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-work .stage .bg,
  body.is-work .stage .layer,
  body.is-work-open .beam-label,
  body.is-work .beam-label,
  .dieline,
  .dieline polygon,
  .dieline line,
  .panel-image,
  .panel-info,
  .work-bg,
  .work-tile,
  .work-project {
    transition: none !important;
  }
}

/* Box editor (?hover=stone&edit=box): corner labels on the handles. */
.box-handle::after {
  content: attr(data-label);
  position: absolute;
  left: 14px;
  top: -6px;
  font: 600 11px/1 ui-monospace, Menlo, monospace;
  color: #111;
  pointer-events: none;
}