/* Ornament. The rationale is in BRAND.md; the binding rules are in DESIGN.md -> Ornament system.
   Two of them govern everything below:
     1. A surface gets EITHER a repeating field (the şəbəkə lattice) OR one cropped accent (the
        rosette). Never both: three layers under one heading turned the hero to mud.
     2. Ornament never sits behind body text and never lies across a photograph. It frames, divides
        or edges. Woodwork drawn over a picture is the cage effect, and it cost three revisions. */

/* ============================================================ ŞƏBƏKƏ FIELD */

.shebeke-band { position: relative; }
.shebeke-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--shebeke-lattice); background-repeat: repeat;
  pointer-events: none;
}
.shebeke-band > * { position: relative; z-index: 1; }

.shebeke-soft::before { background-image: var(--shebeke-lattice-soft); }

/* ============================================================ ROSETTE ACCENT
   One cropped medallion per surface, cut by the edge it sits against. Ink only: a coloured bloom
   competes with the content in front of it. */

.rosette-medallion { position: relative; overflow: hidden; }
.rosette-medallion::after {
  content: ""; position: absolute; inset-inline-end: -80px; inset-block-end: -110px;
  width: 440px; height: 440px; z-index: 0;
  background-image: var(--rosette-ink); background-size: contain; background-repeat: no-repeat;
  pointer-events: none;
}
.rosette-medallion > * { position: relative; z-index: 1; }

.rosette-bloom { position: relative; overflow: hidden; }
.rosette-bloom::after {
  content: ""; position: absolute; inset-inline-end: -40px; inset-block-end: -52px;
  width: 208px; height: 208px; z-index: 0;
  background-image: var(--rosette-ink); background-size: contain; background-repeat: no-repeat;
  pointer-events: none;
}
.rosette-bloom > * { position: relative; z-index: 1; }

/* ============================================================ BUTA
   A terminal mark: end of a section, nothing else. Ink rather than brand, because the brand hue
   belongs to actions and a coloured divider competes with the CTA below it. */

.buta-rule {
  display: flex; align-items: center; gap: var(--s-5);
  color: var(--ink-3); opacity: 0.3; margin: var(--s-10) 0;
}
.buta-rule span { flex: 1; height: 1px; background: currentColor; }

/* ============================================================ QARABAĞ CARPET BORDER
   A carpet has a field and a border; only the border is borrowed, and only as an edge. It marks
   one thing: a project in the reconstruction region. The motif carries data, the way the eight
   glass colours carry agency identity, so it is never applied decoratively.

   It hangs at the BOTTOM of its own row, inset past the thumbnail. Tried first across the row's
   top edge at full width: it read as a separator belonging to the row above, and at 12px the
   rhombi collapsed into a dotted line. Guard lines plus an 18px band fixed both. */

.karabakh-edge { position: relative; padding-block-end: calc(var(--s-6) + 22px); }
.karabakh-edge::after {
  content: ""; position: absolute; inset-block-end: var(--s-3);
  inset-inline-start: 120px; inset-inline-end: var(--s-6); height: 18px;
  background-image: var(--karabakh-band); background-repeat: repeat-x;
  background-position: 0 center; background-size: auto 18px;
  pointer-events: none;
}
.karabakh-edge > * { position: relative; }
.karabakh-tag { color: var(--glass-ruby); border-color: color-mix(in oklch, var(--glass-ruby) 35%, transparent); }
@media (max-width: 760px) { .karabakh-edge::after { inset-inline-start: var(--s-6); } }

/* ============================================================ ŞİRVAN RHOMBUS CHAIN
   Eight rhombi on a ring, framing the two moments where a screen has nothing to show: the empty
   state and the completion mark. Outline only; a filled chain at this size reads as a smudge. */

.empty-mark {
  position: relative; width: 76px; height: 76px; margin: 0 auto var(--s-6);
  display: grid; place-items: center; color: var(--ink-3);
}
.empty-mark .shirvan-frame { position: absolute; inset: 0; opacity: 0.45; }
.empty-glyph {
  width: 44px; height: 44px; border-radius: var(--r-panel);
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-3);
}

/* ============================================================ SEAL */

.seal-glyph { display: block; flex: none; }

/* ============================================================ ŞƏBƏKƏ GATEWAY
   The hero window: a diagram, not a picture. Flat brand-tinted glass, the lattice as a hairline,
   the eight institution stars riding on its intersections.

   It used to hold a photograph with a white lattice over it. That died twice over: the hero
   already shows the country through its own arch, so a second photo-arch repeated the statement,
   and woodwork drawn OVER a photograph is the cage motif this design spent three revisions
   removing. As a diagram it finally reads as what it is: a control for picking an institution.

   Colour here is wiring. Each star carries its agency's pane colour through the inline --glass
   custom property, and the chip for the same agency below carries the identical colour, so the
   pair is found by eye before anything is hovered. Hover moves opacity, never the hue: changing
   the colour on hover would break the pairing at the moment the user is using it. */

.shebeke-gateway {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 12px 26px oklch(0.28 0.05 258 / 0.14));
}
[data-theme="dark"] .shebeke-gateway { filter: drop-shadow(0 18px 34px oklch(0 0 0 / 0.5)); }

.gw-glass { fill: var(--brand-soft); }
.gw-lattice { stroke: var(--brand); opacity: 0.30; }
.gw-frame { stroke: var(--brand); }

.window-node { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.window-node:focus { outline: none; }
.window-node .node-halo { fill: var(--surface); stroke: var(--brand-border); stroke-width: 1.4; }
.window-node .node-star {
  fill: var(--glass, var(--brand)); opacity: 0.85;
  transition: opacity var(--fast) var(--ease);
}
.window-node .node-core { fill: var(--brand); opacity: 0; }
.window-node:hover .node-star,
.window-node:focus-visible .node-star { opacity: 1; }
.window-node[data-active="true"] .node-halo { fill: var(--glass, var(--brand)); stroke: var(--glass, var(--brand)); }
.window-node[data-active="true"] .node-star { fill: var(--ink-on-brand); opacity: 1; }
.window-node:focus-visible .node-halo { stroke: var(--ring); stroke-width: 2.4; }

/* Assembly on load: the members draw along their own length, then the stars settle in. Gated by
   the motion switch, so a reduce-mode visitor gets the finished window with no drawing at all -
   the diagram is the content, the assembly is only the flourish. */
[data-motion="full"] .gw-lattice {
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: gw-draw 1500ms var(--ease) 120ms forwards;
}
[data-motion="full"] .gw-frame {
  stroke-dasharray: 1700; stroke-dashoffset: 1700;
  animation: gw-draw-frame 1400ms var(--ease) forwards;
}
[data-motion="full"] .window-node {
  opacity: 0;
  animation: gw-star-in 460ms var(--ease) forwards;
  animation-delay: calc(900ms + var(--i, 0) * 90ms);
}
@keyframes gw-draw { to { stroke-dashoffset: 0; } }
@keyframes gw-draw-frame { to { stroke-dashoffset: 0; } }
@keyframes gw-star-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

/* ============================================================ THE NATIONAL GROUND
   One faint Şəki-panel field under the whole product. This is the answer to "make it read as
   Azerbaijani without turning it into a brochure": the identity is carried by geometry at 5%,
   everywhere, instead of by a photograph on one page.

   It sits on a fixed pseudo-element rather than on `body`, so it does not scroll with the content
   (a moving texture under a case queue is nausea, not craft) and so it costs one composited layer
   instead of repainting on every scroll. Surfaces - panels, tables, modals - are opaque and paint
   over it, which is what keeps body text on a clean ground. */

body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--sheki-ground); background-repeat: repeat;
}
#app { position: relative; z-index: 1; }

/* The topbar and the rail are the two chrome surfaces that must stay quiet, so they carry their
   own opaque ground and let the field show only in the content gutter. */
.topbar, .rail { background-color: var(--surface); }
.rail { background-color: var(--surface-2); }

/* Qarabağ gül: the completion and empty-state mark. Same treatment as the Şirvan chain it joins,
   never coloured - the status vocabulary owns colour. */
.empty-mark .karabakh-gul { position: absolute; inset: 0; opacity: 0.5; }
.gul-mark { color: var(--ink-3); }

/* ============================================================ THE ARCH APERTURE
   The hero opening: a real photograph of the country, at full strength, seen through the arch the
   şəbəkə frames. Three rules bind it and none of them is negotiable, because each one was paid for:

   1. FULL STRENGTH. No tint, no fade, no gradient scrim, no dark overlay. A washed photograph
      keeps neither its colour nor its subject; if the image cannot carry the composition at 100%,
      it is the wrong image, not a case for a scrim.
   2. NOTHING ON TOP. No lattice, no rosette, no ornament across the opening. Woodwork drawn over a
      picture is the cage effect. The şəbəkə stands AT THE EDGE of the aperture - the frame, the
      spring line, the ground behind it - never across the view.
   3. Text never sits on the photograph. The heading, the lede and the actions live in their own
      column on a plain surface, so contrast is a token decision and not a function of whichever
      part of the sky the crop happened to land on. */

.arch {
  position: relative; overflow: hidden;
  border: 1px solid var(--brand-border);
  border-radius: 50% 50% var(--r-panel) var(--r-panel) / 42% 42% var(--r-panel) var(--r-panel);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}
/* The crop is pulled down the frame: a hero arch fills its vault with sky if you let the default
   centre crop decide, and the subject ends up in the bottom third. */
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
.arch-tall { aspect-ratio: 3 / 4; }
.arch-wide { aspect-ratio: 4 / 3; }

/* The spring line was tried as a hairline across the opening at 42%, where a real arch turns from
   wall into vault. On screen it read as a scratch across the photograph, which is rule 2 above
   broken by the very file that states it. It survives only as two ticks on the frame itself. */
.arch::after {
  content: ""; position: absolute; top: 42%; inset-inline: 0; height: 0;
  border-top: 1px solid var(--brand); opacity: 0.3; pointer-events: none;
  clip-path: polygon(0 0, 10px 0, 10px 2px, 0 2px, 0 0, calc(100% - 10px) 0, 100% 0, 100% 2px, calc(100% - 10px) 2px);
}

@media (max-width: 760px) { .arch-tall { aspect-ratio: 4 / 5; } }