/* Nobal Sanat — the solutions grid. Scoped under .nsc-sl. v1.1.0
   A white band of drawings: five line-art machines, each one moving slowly
   enough that five of them at once still read as calm. */

.nsc-sl{
  --s-ink:#15181D; --s-soft:#59626E; --s-rule:#DCE1E7; --s-plate:#F7F9FB;
  --s-acc:#FFC61E; --s-accink:#B07C05;
  --s-font:var(--nsc-font,"Vazirmatn","IRANSans",Tahoma,sans-serif);
  --s-mono:var(--nsc-mono,"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace);
  position:relative;
  padding-block:clamp(48px,6vw,88px);
  background:#FFFFFF;
  color:var(--s-ink);
  font-family:var(--s-font);
  line-height:1.95;
}
.nsc-sl *,.nsc-sl *::before,.nsc-sl *::after{ box-sizing:border-box; }
.nsc-sl p{ margin:0; }
.nsc-sl ul{ margin:0; padding:0; list-style:none; }
.nsc-sl :focus-visible{ outline:2px solid var(--s-acc); outline-offset:3px; }

/* the drafting grid, very faint, so the white is a sheet and not a gap */
.nsc-sl__grid{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    repeating-linear-gradient(to right, var(--s-rule) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, var(--s-rule) 0 1px, transparent 1px 72px);
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.nsc-sl__in{ position:relative; z-index:1; width:min(1240px,100% - 32px); margin-inline:auto; }

/* ------------------------------------------------------------ the heading */
.nsc-sl__head{ text-align:center; margin-bottom:clamp(26px,3.2vw,44px); }
.nsc-sl__eyebrow{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0 0 10px;
  font-family:var(--s-mono); font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--s-accink);
}
.nsc-sl__eyebrow::before,.nsc-sl__eyebrow::after{
  content:""; width:clamp(20px,5vw,58px); height:1px; background:var(--s-rule);
}
.nsc-sl__title{
  margin:0; color:var(--s-ink); text-wrap:balance;
  font-size:clamp(1.4rem,3vw,2.1rem); font-weight:800; line-height:1.5;
}
.nsc-sl__title em{ font-style:normal; color:var(--s-accink); }
.nsc-sl__sub{ margin-top:8px; color:var(--s-soft); font-size:clamp(.92rem,1.4vw,1rem); }

/* -------------------------------------------------------------- the tiles */
.nsc-sl__row{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,24px);
}
@media (max-width:900px){ .nsc-sl__row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .nsc-sl__row{ grid-template-columns:1fr; } }

.nsc-sl__tile{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:clamp(24px,2.6vw,32px) 16px clamp(16px,1.8vw,22px);
  border:1px solid var(--s-rule); border-radius:3px;
  background:var(--s-plate);
  color:inherit; text-decoration:none;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
/* The hover is on every tile, linked or not: a tile that does nothing when the
   mouse reaches it reads as broken, and most of these have no link yet. Only
   the lift is kept for the ones that actually go somewhere. */
.nsc-sl__tile:hover{ border-color:var(--s-acc); background:#FFF9EA; }
.nsc-sl__tile:hover .nsc-sl__art{ color:var(--s-accink); }
.nsc-sl__tile:hover::before,.nsc-sl__tile:hover::after{ opacity:1; }
a.nsc-sl__tile{ cursor:pointer; }
a.nsc-sl__tile:hover{ transform:translateY(-2px); }

/* the corner ticks every framed thing on this site wears */
.nsc-sl__tile::before,.nsc-sl__tile::after{
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
  border:1px solid var(--s-acc); opacity:.55;
}
.nsc-sl__tile::before{ inset-block-start:-1px; inset-inline-start:-1px; border-width:1px 0 0 1px; }
.nsc-sl__tile::after{ inset-block-end:-1px; inset-inline-end:-1px; border-width:0 1px 1px 0; }
.nsc-sl[dir]:not([dir="rtl"]) .nsc-sl__tile::before{ border-width:1px 0 0 1px; }

.nsc-sl__art{
  display:block; width:clamp(104px,11vw,132px); height:auto;
  color:var(--s-ink); transition:color .25s ease;
}
.nsc-sl__name{
  margin:0; text-align:center; color:var(--s-ink);
  font-size:clamp(.98rem,1.5vw,1.08rem); font-weight:700; line-height:1.6;
}
.nsc-sl__go{
  display:flex; align-items:center; gap:7px; height:0; overflow:visible;
  font-family:var(--s-mono); font-size:12px; letter-spacing:.08em;
  color:var(--s-accink); opacity:0; transform:translateY(-2px);
  transition:opacity .25s ease, transform .25s ease;
}
a.nsc-sl__tile:hover .nsc-sl__go,a.nsc-sl__tile:focus-visible .nsc-sl__go{ opacity:1; transform:translateY(2px); }
.nsc-sl__go svg{ width:13px; height:13px; }

/* =========================================================== the movements
   One vocabulary, five drawings. Everything is between six and nine seconds
   and every tile is offset by --d, so no two beats land together — five icons
   ticking in step would be a strobe, not a machine. */

.nsc-sl__tile{ --d:0s; }
.nsc-sl__tile:nth-child(2){ --d:-1.6s; }
.nsc-sl__tile:nth-child(3){ --d:-3.1s; }
.nsc-sl__tile:nth-child(4){ --d:-4.4s; }
.nsc-sl__tile:nth-child(5){ --d:-5.9s; }

/* a level climbing inside a clipped vessel */
.nsc-sl__lvl{
  fill:var(--s-acc); stroke:none; opacity:.85;
  transform:translateY(58px);
  animation:nsc-sl-fill 8s cubic-bezier(.4,0,.5,1) infinite var(--d);
}
@keyframes nsc-sl-fill{
  0%,6%   { transform:translateY(58px); }
  58%,78% { transform:translateY(8px); }
  96%,100%{ transform:translateY(58px); }
}

/* one drop, falling, over and over */
.nsc-sl__drop{
  stroke:var(--s-acc); stroke-width:2.6; stroke-dasharray:5 60; stroke-dashoffset:5;
  animation:nsc-sl-drop 2.6s linear infinite var(--d);
}
@keyframes nsc-sl-drop{
  0%  { stroke-dashoffset:5; opacity:0; }
  12% { opacity:1; }
  70% { stroke-dashoffset:-9; opacity:1; }
  78%,100%{ stroke-dashoffset:-9; opacity:0; }
}

/* the grease ram: down slowly, back up slowly */
.nsc-sl__ram{ animation:nsc-sl-ram 8s cubic-bezier(.45,0,.55,1) infinite var(--d); }
@keyframes nsc-sl-ram{
  0%,8%   { transform:translateY(0); }
  55%,70% { transform:translateY(34px); }
  95%,100%{ transform:translateY(0); }
}

/* three thin streams, on together, off together */
.nsc-sl__jets{
  stroke:var(--s-acc); stroke-width:2.2;
  animation:nsc-sl-jet 6.4s ease-in-out infinite var(--d);
  transform-origin:60px 50px;
}
@keyframes nsc-sl-jet{
  0%,14%  { transform:scaleY(0); opacity:0; }
  26%,66% { transform:scaleY(1); opacity:1; }
  80%,100%{ transform:scaleY(0); opacity:0; }
}

/* the bottles index one pitch and the next three arrive */
.nsc-sl__tile .nsc-sl__row{ display:initial; }   /* the SVG group, not the grid */
g.nsc-sl__row{ animation:nsc-sl-index 6.4s cubic-bezier(.6,0,.3,1) infinite var(--d); }
@keyframes nsc-sl-index{
  0%,70%  { transform:translateX(0); }
  88%,100%{ transform:translateX(-24px); }
}

/* the lance dives into the bung and lifts out */
.nsc-sl__lance{ animation:nsc-sl-dive 8s cubic-bezier(.45,0,.55,1) infinite var(--d); }
@keyframes nsc-sl-dive{
  0%,8%   { transform:translateY(0); }
  46%,74% { transform:translateY(26px); }
  96%,100%{ transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce){
  .nsc-sl__lvl,.nsc-sl__drop,.nsc-sl__ram,
  .nsc-sl__jets,g.nsc-sl__row,.nsc-sl__lance{ animation:none; }
  .nsc-sl__lvl{ transform:translateY(20px); }
  .nsc-sl__drop{ opacity:0; }
  .nsc-sl__jets{ transform:scaleY(1); opacity:1; }
  a.nsc-sl__tile:hover{ transform:none; }
}