/* =====================================================================
   art.css — ITEM ART DIRECTION
   One block per editorial item. Pure CSS compositions for the MVP;
   any block can later be replaced by an <img>/<picture> without
   touching layout (the .art container defines size; this file only
   paints inside it). The site atmosphere is NOT defined here.
   ===================================================================== */

.art{position:relative;overflow:hidden;background:#e9e1cf;}
.art::after{ /* shared material grain so artworks feel printed on the same paper */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;opacity:.28;mix-blend-mode:multiply;
}
.art > *{position:absolute;}

/* ---------- SERIES · מציאות דחוסה ----------
   One signal unpacking into many: lines that get denser toward one edge,
   a single red bar = the incoming item, the dark mass = what it opens. */
.art-series{background:#ece3cf;}
.art-series .lines{
  inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(15,13,24,.85) 0 1px,transparent 1px 3px) 0 0/ 34% 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(15,13,24,.7) 0 1px,transparent 1px 7px) 34% 0/ 26% 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(15,13,24,.55) 0 1px,transparent 1px 15px) 60% 0/ 22% 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(15,13,24,.4) 0 1px,transparent 1px 32px) 82% 0/ 18% 100% no-repeat;
  opacity:.75;
}
.art-series .bar{top:18%;right:7%;width:6%;height:64%;background:#8a3230;}
.art-series .ice{bottom:10%;left:10%;width:22%;height:14%;background:rgba(56,212,232,.35);clip-path:polygon(0 50%,40% 0,100% 30%,80% 100%,20% 90%);}

/* ---------- 01 · זמן סיני ----------
   Horizontal, slow, almost nothing happens: sky / sea / sand bands,
   one low sun. The only vertical element is the sun's reflection. */
.art-sinai{background:#e7d9bd;}
.art-sinai .sky{inset:0 0 52% 0;background:linear-gradient(180deg,#f2dcc3 0%,#e8c6b0 60%,#d9a79a 100%);}
.art-sinai .sea{top:48%;left:0;right:0;height:30%;background:linear-gradient(180deg,#0a6d7d 0%,#0b7f8f 40%,#4fb3bf 100%);}
.art-sinai .sand{bottom:0;left:0;right:0;height:24%;background:linear-gradient(180deg,#c89a3a 0%,#b5862a 100%);}
.art-sinai .sun{top:30%;left:62%;width:9%;aspect-ratio:1;border-radius:50%;background:#c2615a;opacity:.9;}
.art-sinai .glint{top:49%;left:65.5%;width:2%;height:26%;background:linear-gradient(180deg,rgba(242,220,195,.9),rgba(242,220,195,0));}
.art-sinai .horizon{top:48%;left:0;right:0;height:1px;background:rgba(15,13,24,.5);}

/* ---------- 02 · הודעה.zip ----------
   A single small rectangle (the message) on one side; a branching grid
   of many cells spreading from it. Typographic, ink-on-paper, red accent. */
.art-zip{background:#f3ecdd;}
.art-zip .grid{
  inset:0;
  background-image:
    linear-gradient(rgba(15,13,24,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,13,24,.12) 1px,transparent 1px);
  background-size:7.5% 12%;
}
.art-zip .msg{top:14%;right:10%;width:13%;height:18%;background:#0f0d18;}
.art-zip .msg::before{content:".zip";direction:ltr;position:absolute;inset:0;display:grid;place-items:center;color:#f3ecdd;font:400 clamp(9px,1.1vw,14px) ui-monospace,Menlo,Consolas,monospace;letter-spacing:.05em;}
.art-zip .cells{
  top:14%;left:10%;width:58%;height:72%;
  background-image:
    linear-gradient(#0f0d18 1px,transparent 1px),
    linear-gradient(90deg,#0f0d18 1px,transparent 1px);
  background-size:9.5% 14.3%;
  background-position:-1px -1px;
  opacity:.85;
}
.art-zip .fill{top:14%;left:10%;width:58%;height:72%;
  background:
    linear-gradient(#8a3230,#8a3230) 0 0/9.5% 14.3% no-repeat,
    linear-gradient(#8a3230,#8a3230) 38% 43%/9.5% 14.3% no-repeat,
    linear-gradient(#8a3230,#8a3230) 57% 100%/9.5% 14.3% no-repeat,
    linear-gradient(#0a7d90,#0a7d90) 19% 86%/9.5% 14.3% no-repeat,
    linear-gradient(#c8920a,#c8920a) 100% 14%/9.5% 14.3% no-repeat;
}
.art-zip .link{top:23%;left:68%;width:22%;height:1px;background:#0f0d18;opacity:.7;}

/* ---------- 03 · Processing... ----------
   Night field, concentric arcs (the loop that has not closed),
   a monospace caption with an ellipsis that keeps going. */
.art-processing{background:#14121f;}
.art-processing .field{inset:0;background:radial-gradient(ellipse 80% 70% at 40% 60%,#25203a 0%,#14121f 70%);}
.art-processing .ring{
  left:40%;top:60%;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(56,212,232,.7);
  border-right-color:transparent;aspect-ratio:1;
}
.art-processing .r1{width:22%;}
.art-processing .r2{width:38%;opacity:.7;border-bottom-color:transparent;}
.art-processing .r3{width:56%;opacity:.45;border-top-color:transparent;}
.art-processing .r4{width:76%;opacity:.25;}
.art-processing .dot{left:40%;top:60%;width:1.2%;min-width:5px;aspect-ratio:1;border-radius:50%;background:#38d4e8;transform:translate(-50%,-50%);}
.art-processing .glow{left:40%;top:60%;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(56,212,232,.35),rgba(56,212,232,0) 70%);transform:translate(-50%,-50%);}
.art-processing .red{top:10%;right:8%;width:20%;height:4px;background:#c2615a;}
.art-processing .cap{
  direction:ltr;bottom:9%;right:8%;color:#e8e0d0;
  font:300 clamp(11px,1.4vw,17px) ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;
}
.art-processing .cap::after{content:"";animation:dots 1.8s steps(4,end) infinite;}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ---------- STANDALONE placeholders (temporary artwork) ---------- */
/* Ghost in the Shell placeholder — violet depth + scanlines */
.art-ghost{background:linear-gradient(180deg,#2a1f3d 0%,#6b3d6a 55%,#b9566a 100%);}
.art-ghost .scan{inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.08) 0 1px,transparent 1px 5px);}
.art-ghost .body{left:50%;bottom:0;width:26%;height:70%;transform:translateX(-50%);background:rgba(15,13,24,.75);clip-path:polygon(30% 0,70% 0,85% 30%,80% 100%,20% 100%,15% 30%);}
.art-ghost .halo{left:50%;top:22%;width:16%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);border:1px solid rgba(56,212,232,.8);}

/* Parasite placeholder — stacked floors, a staircase */
.art-parasite{background:#d6d8cf;}
.art-parasite .f1{inset:0 0 66% 0;background:#e9ebe4;}
.art-parasite .f2{top:34%;left:0;right:0;height:33%;background:#9aa394;}
.art-parasite .f3{bottom:0;left:0;right:0;height:33%;background:#2f3a33;}
.art-parasite .stair{
  right:14%;bottom:0;width:22%;height:100%;
  background:
    linear-gradient(#0f0d18,#0f0d18) 0 0/20% 33.4% no-repeat,
    linear-gradient(#0f0d18,#0f0d18) 25% 33.3%/20% 33.4% no-repeat,
    linear-gradient(#0f0d18,#0f0d18) 50% 66.6%/20% 33.4% no-repeat,
    linear-gradient(#0f0d18,#0f0d18) 75% 100%/20% 33.4% no-repeat;
  opacity:.85;
}
.art-parasite .rain{inset:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.18) 0 1px,transparent 1px 9px);}

/* Generic "future item" slot */
.art-empty{background:transparent;border-style:dashed !important;}
.art-empty::after{display:none;}
.art-empty span{inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.2em;color:#867654;}

/* Artwork-to-be-announced: an announced chapter whose art direction is not
   designed yet. Same quiet dashed slot as .art-empty, marked TBA; replaced
   automatically the moment a "part N_ ....jpg" lands in articles/images/. */
.art-tba{background:transparent;border-style:dashed !important;}
.art-tba::after{display:none;}
.art-tba span{inset:0;display:grid;place-items:center;font-family:'Courier New','Cousine',monospace;font-size:13px;letter-spacing:.34em;text-indent:.34em;color:#867654;}