/* Nobal Sanat — the "about" band. Scoped under .nsc-ab. v2.0.0
   A light plate after the dark hero. The art half is a honeycomb wall: opaque
   hexagonal tiles carrying one photograph, lit from behind so the only place
   the light escapes is the seams. */

.nsc-ab{
  --a-bg:#F5F7F9; --a-bg2:#FFFFFF; --a-ink:#15181D; --a-soft:#59626E;
  --a-rule:#DCE1E7; --a-acc:#FFC61E; --a-accink:#B07C05;

  position:relative;
  background:var(--a-bg);
  color:var(--a-ink);
  font-family:var(--nsc-font,"Vazirmatn","IRANSans",Tahoma,sans-serif);
  line-height:2;
  overflow:hidden;
}
.nsc-ab *,.nsc-ab *::before,.nsc-ab *::after{ box-sizing:border-box; }
.nsc-ab p{ margin:0; }

/* the same faint drafting grid the footer carries, inverted for a light ground */
.nsc-ab::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(21,24,29,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,24,29,.035) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 100%);
}

/* ---------------------------------------------------- light on the grid ---
   Hairlines that run along the grid, plus a couple of cells that breathe.
   They sit on the same 46px module as the grid itself, so the light always
   travels *on* a line rather than across one. */
.nsc-ab__wires{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 100%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 100%);
}
.nsc-ab__wire,.nsc-ab__spark{ position:absolute; display:block; }

.nsc-ab__wire--h{
  height:1px; width:190px; left:-190px; top:var(--t);
  background:linear-gradient(to right, rgba(255,198,30,0), rgba(255,198,30,.8) 62%, rgba(255,255,255,.95) 88%, rgba(255,198,30,0));
  animation:nsc-ab-runh var(--dur,13s) linear var(--del,0s) infinite;
}
.nsc-ab__wire--v{
  width:1px; height:150px; top:-150px; left:var(--l);
  background:linear-gradient(to bottom, rgba(255,198,30,0), rgba(255,198,30,.66) 62%, rgba(255,255,255,.9) 88%, rgba(255,198,30,0));
  animation:nsc-ab-runv var(--dur,14s) linear var(--del,0s) infinite;
}

@keyframes nsc-ab-runh{
  0%   { transform:translateX(0); opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { transform:translateX(calc(100vw + 380px)); opacity:0; }
}
@keyframes nsc-ab-runv{
  0%   { transform:translateY(0); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateY(calc(100% + 300px)); opacity:0; }
}

/* cells of the grid that quietly light up from the inside */
.nsc-ab__spark{
  width:45px; height:45px; top:var(--t); left:var(--l);
  background:radial-gradient(circle at 50% 50%, rgba(255,198,30,.30), rgba(255,198,30,0) 72%);
  animation:nsc-ab-breathe var(--dur,8s) ease-in-out var(--del,0s) infinite;
}
@keyframes nsc-ab-breathe{ 0%,100%{ opacity:0 } 50%{ opacity:1 } }

.nsc-ab__in{
  position:relative; z-index:1;
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px);
  padding-block:clamp(46px,6vw,96px);
  display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
}

/* ---------------------------------------------------------- the copy side */
.nsc-ab__eyebrow{
  font-family:var(--nsc-mono,"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,"Vazirmatn",monospace);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--a-accink);
  display:flex; align-items:center; gap:11px;
  margin-bottom:14px;
}
.nsc-ab__eyebrow::after{
  content:""; width:clamp(28px,5vw,74px); height:1px; background:var(--a-rule);
}
.nsc-ab__title{
  margin:0 0 14px;
  font-size:clamp(26px,3.4vw,42px);
  font-weight:800; line-height:1.45; color:var(--a-ink);
}
.nsc-ab__title em{ font-style:normal; color:var(--a-accink); }
.nsc-ab__lead{
  font-size:clamp(15px,1.3vw,18px);
  font-weight:700; line-height:1.95;
  margin-bottom:16px;
}
.nsc-ab__body p{ color:var(--a-soft); margin-bottom:12px; max-width:54ch; }
.nsc-ab__body p:last-child{ margin-bottom:0; }

.nsc-ab__btn{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:24px;
  padding:12px 20px;
  border:1px solid var(--a-ink);
  border-radius:2px;
  color:var(--a-ink); text-decoration:none;
  font-size:14px; font-weight:700;
  background:transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nsc-ab__btn svg{ flex:none; transition:transform .2s ease; }
.nsc-ab__btn:hover,.nsc-ab__btn:focus-visible{
  background:var(--a-ink); color:#fff; border-color:var(--a-ink);
}
.nsc-ab__btn:hover svg{ transform:translateX(-4px); }
.nsc-ab[data-lang="en"] .nsc-ab__btn:hover svg{ transform:translateX(4px); }
.nsc-ab :focus-visible{ outline:2px solid var(--a-accink); outline-offset:3px; }

/* ------------------------------------------------------- the honeycomb ---- */
.nsc-ab__art{ position:relative; }
.nsc-ab__svg{
  display:block; width:100%; height:auto;
}

.nsc-ab__ground{ fill:#0D1014; }

/* pools of light behind the wall. They are painted before the tiles, so the
   only way out is the seams — which is what makes the grout glow and drift. */
.nsc-ab__lamp{ fill:var(--lamp); }
.nsc-ab__bloom{ opacity:.92; }
/* everything painted over the tiles has to let the pointer through, or the
   vignette alone would swallow every hover on the wall */
.nsc-ab__lamps,.nsc-ab__bloom{ pointer-events:none; }
.nsc-ab__lamp--a{ animation:nsc-ab-lamp-a 19s ease-in-out infinite alternate; }
.nsc-ab__lamp--b{ animation:nsc-ab-lamp-b 23s ease-in-out infinite alternate; }
.nsc-ab__lamp--c{ animation:nsc-ab-lamp-c 15s ease-in-out infinite alternate; }
@keyframes nsc-ab-lamp-a{
  from{ transform:translate(-70px,-40px); opacity:.85; }
  to  { transform:translate(150px, 120px); opacity:1; }
}
@keyframes nsc-ab-lamp-b{
  from{ transform:translate(90px, 60px); opacity:.7; }
  to  { transform:translate(-120px,-90px); opacity:1; }
}
@keyframes nsc-ab-lamp-c{
  from{ transform:translate(60px,20px); opacity:.5; }
  to  { transform:translate(-80px,-60px); opacity:.95; }
}

/* Every tile is filled from one shared pattern, so the photograph runs
   straight across the seams instead of repeating inside each cell. The stroke
   is a bounding-box gradient, which gives each tile its own bevel: bright on
   the upper-left edges, dark on the lower-right. */
.nsc-ab__tiles polygon{
  fill:var(--tilefill);
  stroke:var(--tilerim);
  stroke-width:5;
  stroke-linejoin:round;
  paint-order:stroke fill;
}

.nsc-ab__cell{
  cursor:crosshair;
  transition:transform .58s cubic-bezier(.16,1.32,.38,1), filter .42s ease;
}
/* pressed in: it recedes, dims, and lets more of the glow through the seam */
.nsc-ab__cell:hover{
  transform:scale(.86);
  filter:brightness(.52) saturate(.85);
  transition:transform .17s cubic-bezier(.4,0,.7,1), filter .17s ease;
}

/* the reveal: each cell starts at nothing and pops outward from the middle */
.nsc-ab__art.is-armed .nsc-ab__pop{ transform:scale(0) rotate(-12deg); opacity:0; }
.nsc-ab__art.is-armed.is-in .nsc-ab__pop{
  animation:nsc-ab-pop .6s cubic-bezier(.2,.9,.25,1.3) both;
  animation-delay:var(--d,0ms);
}
@keyframes nsc-ab-pop{
  from{ transform:scale(0) rotate(-12deg); opacity:0; }
  55% { opacity:1; }
  to  { transform:scale(1) rotate(0); opacity:1; }
}

/* no script, or a visitor who asked for less motion: show it assembled */
@media (prefers-reduced-motion:reduce){
  .nsc-ab__art .nsc-ab__pop{ transform:none; opacity:1; animation:none; }
  .nsc-ab__lamp,.nsc-ab__wire,.nsc-ab__spark{ animation:none; }
  .nsc-ab__wire{ opacity:0; }
}

/* ---------------------------------------------------------- the year badge */
.nsc-ab__badge{
  position:absolute;
  inset-block-end:1%;
  inset-inline-start:0;
  background:var(--a-ink);
  color:#fff;
  padding:16px 22px 18px;
  border-radius:3px;
  text-align:center;
  box-shadow:0 16px 34px rgba(21,24,29,.3);
  min-width:132px;
  z-index:2;
}
.nsc-ab__badge b{
  display:block;
  font-size:34px; font-weight:800; line-height:1.2;
  color:var(--a-acc);
  font-variant-numeric:tabular-nums;
}
.nsc-ab__badge span{
  display:block;
  font-size:12px; line-height:1.7; color:#AEB8C4;
  margin-top:2px;
}
.nsc-ab__badge::before{
  content:""; position:absolute; inset-inline:16px; top:0; height:2px;
  background:var(--a-acc);
}

/* ---------------------------------------------------------- responsive */
@media (max-width:900px){
  .nsc-ab__in{ grid-template-columns:1fr; gap:30px; }
  .nsc-ab__art{ order:2; max-width:540px; margin-inline:auto; width:100%; }
  .nsc-ab__badge{ inset-inline-start:0; inset-block-end:0; }
}
@media (max-width:560px){
  .nsc-ab{ line-height:1.95; }
  .nsc-ab__badge{ padding:12px 16px 14px; min-width:112px; }
  .nsc-ab__badge b{ font-size:27px; }
}