/* umano visual system: primitives. One piece takes one per category; marks, two or three at most. */

/* ---------- surfaces: a physical layer over the color, fixed opacity, can be switched off ---------- */
.surface-paper::after, .surface-film::after, .surface-photocopy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50;
}
.surface-paper::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0 0.18  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
                    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0 0.18  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  background-size: 400px, cover;
  mix-blend-mode: multiply; opacity: 0.32;
}
/* plastic film: soft creases lit from the top left, screen-blended so it reads on dark */
.surface-film::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1250' viewBox='0 0 1000 1250' preserveAspectRatio='none'><filter id='c'><feTurbulence type='turbulence' baseFrequency='0.006 0.011' numOctaves='3' seed='11'/><feDiffuseLighting lighting-color='white' surfaceScale='9'><feDistantLight azimuth='225' elevation='38'/></feDiffuseLighting><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.0 0.5 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
                    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 100% 100%, 300px;
  mix-blend-mode: screen; opacity: 0.09;
}
.surface-photocopy::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='1'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -9 4.6'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 300px; mix-blend-mode: multiply; opacity: 0.07;
}

/* ---------- depth: the background is a stack, never a flat fill (Juan, 20/10) ----------
   color, then a soft light behind the subject (--lx, --ly), then a subtle vertical gradient that darkens
   the edges, then the texture (::after). The light sits where the figure is, so the figure reads in front. */
.depth {
  --glow: color-mix(in srgb, var(--surface) 72%, white);
  --edge: color-mix(in srgb, var(--surface) 80%, black);
  background:
    radial-gradient(ellipse 70% 55% at var(--lx, 60%) var(--ly, 62%), var(--glow), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, black) 0%, transparent 35%, transparent 65%, var(--edge) 100%),
    var(--surface);
}
.mode-dark.depth { --glow: color-mix(in srgb, var(--surface) 82%, var(--paper)); --edge: color-mix(in srgb, var(--surface) 70%, black); }
.mode-light.depth { --glow: #fffefb; --edge: color-mix(in srgb, var(--surface) 88%, var(--ink)); }

/* ---------- cutouts: the isolated image, placed by its own box ---------- */
.cut { position: absolute; display: block; height: auto; z-index: 20; }
.cut { filter: brightness(0.9) contrast(1.06); }  /* the figure a touch darker than the light behind it */
.mode-dark .cut { filter: none; }
.cut.shadow { filter: drop-shadow(1.2cqw 1.6cqw 0 rgb(51 51 46 / 0.35)); }

/* ---------- color blocks ---------- */
.block { position: absolute; z-index: 5; }
.block.signal { background: var(--signal); }
.block.spark  { background: var(--spark); }
.block.ink    { background: var(--ink); }
.block.paper  { background: var(--paper); }
/* torn edges are drawn by primitives.js into clip-path, seeded so a render is repeatable */
.tape {
  position: absolute; z-index: 40; width: 16cqw; height: 5cqw;
  background: rgb(247 245 240 / 0.55); backdrop-filter: blur(0.3cqw);
  box-shadow: inset 0 0 0 0.2cqw rgb(255 255 255 / 0.25);
}

/* ---------- interventions over the image ---------- */
.eyebar {
  position: absolute; z-index: 30; background: var(--signal); color: var(--surface);
  display: flex; align-items: center; padding: 0 2.4cqw;
}

/* ---------- headline stacks ---------- */
.stack { position: absolute; z-index: 10; margin: 0; }
.stack .alt { font-weight: 300; }
.stack .hl { background: var(--signal); color: var(--surface); padding: 0 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.stack .ink-signal { color: var(--signal); }
.stack.step > span { display: block; }
.stack.step > span:nth-child(2) { padding-left: 1em; }
.stack.step > span:nth-child(3) { padding-left: 2em; }

/* ---------- marks: hand-drawn, one stroke weight ---------- */
.mark { position: absolute; z-index: 45; overflow: visible; fill: none; stroke: var(--signal); stroke-linecap: round; stroke-linejoin: round; }
.mark path { stroke-width: 1.1cqw; }

.support { position: absolute; z-index: 25; margin: 0; }

/* ---------- ribbon: the band that crosses the whole carousel (geometry in primitives.js) ---------- */
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 15; fill: var(--lime); pointer-events: none; }
.strip { display: flex; width: max-content; }

/* ---------- depth, strong: covers and back covers (Juan, 20/10: "los fondos están muy planos") ----------
   a real pool of light behind the subject, a vignette that closes the corners, and the texture on top.
   Measured on the references: the background is clearly lighter behind the figure than at the edges. */
.depth-strong {
  --glow: color-mix(in srgb, var(--surface) 55%, white);
  --edge: color-mix(in srgb, var(--surface) 62%, black);
  background:
    radial-gradient(ellipse 62% 48% at var(--lx, 60%) var(--ly, 60%), var(--glow), transparent 72%),
    radial-gradient(ellipse 120% 95% at 50% 45%, transparent 55%, var(--edge) 100%),
    var(--surface);
}
.mode-light.depth-strong { --glow: #ffffff; --edge: color-mix(in srgb, var(--surface) 78%, var(--ink)); }
.mode-dark.depth-strong  { --glow: color-mix(in srgb, var(--surface) 70%, var(--paper)); --edge: color-mix(in srgb, var(--surface) 55%, black); }

/* tonal lines: big strokes one step off the surface, the depth layer of the references (their calligraphic swirls).
   Ours are drawn from the scene (a phone cord, a path), never decoration for its own sake. */
.tonal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; pointer-events: none;
         stroke: color-mix(in srgb, var(--surface) 82%, var(--tonal-ink, white)); stroke-linecap: round; }
.tonal path { stroke-width: 1.4cqw; vector-effect: non-scaling-stroke; }

/* a figure that overlaps type sits in front of it and casts a shadow on it, so the overlap reads as depth */
.cut.lift { filter: brightness(0.9) contrast(1.06) drop-shadow(-1.2cqw 2cqw 2.2cqw rgb(20 20 18 / 0.42)); }
.mode-dark .cut.lift { filter: drop-shadow(-1.2cqw 2cqw 2.4cqw rgb(0 0 0 / 0.6)); }