/* Header: the logo, a glass capsule with a link to each section, the live-projects button and the menu button.
   The logo and the buttons sit on two plates hanging from a thin band along the top of the screen; the plates slope
   up into the band in an S, and the capsule sits in the gap between them, over the page. The shape is an SVG that
   app.js draws to the two groups' widths. The full-screen menu (partials/menu.php) opens under it. */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header-h);
  color: var(--white);
  transition: transform .5s var(--ease-out), opacity .5s;
}
/* ---------- the plates ---------- */
.site-header {
  --hs-band: 9px;                       /* the band along the top, over the capsule */
  --hs-c1: #F5F6F2; --hs-c2: #E3E8E2;   /* drawing paper: the one light thing over the night of the sections */
  --hs-grid: rgb(14 156 89 / .07); --hs-grid2: rgb(14 156 89 / .11);   /* graph paper, faint: fine lines and every fifth */
  --hs-r0: rgb(255 255 255 / 0); --hs-r1: rgb(255 255 255 / .95); --hs-r2: rgb(255 255 255 / .45);   /* the rim: brightest on the slopes */
  --hs-ink: #0E141B;
}
.hshape {
  position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: calc(var(--header-h) + 40px); overflow: visible; pointer-events: none;
  filter: drop-shadow(0 14px 22px rgb(0 0 0 / .5));
}
.hs-c1 { stop-color: var(--hs-c1); } .hs-c2 { stop-color: var(--hs-c2); }
.hs-r0 { stop-color: var(--hs-r0); } .hs-r1 { stop-color: var(--hs-r1); } .hs-r2 { stop-color: var(--hs-r2); }
.hs-grid { stroke: var(--hs-grid); stroke-width: .8; }
.hs-grid2 { stroke: var(--hs-grid2); stroke-width: 1; }
.hshape__fill { fill: url(#hs-fill); }
.hshape__grid { fill: url(#hs-grid); }
.hshape__rim { fill: none; stroke: url(#hs-rim); stroke-width: 1.2; }
html:not(.js) .hshape__fill { fill: var(--hs-c2); }
html.js:not(.gr-static) .site-header { opacity: 0; transform: translateY(-12px); }
html.js.gr-ready .site-header { opacity: 1; transform: none; }

.site-header__inner {
  position: relative; height: 100%; max-width: 1600px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--hs-ink); flex: none; }
.brand__mark { width: 42px; height: 42px; color: var(--green); transition: transform .8s var(--ease-out); }
.brand:hover .brand__mark { transform: rotate(45deg); }
.brand__text { display: grid; line-height: 1.15; }
.brand__name { font-weight: 800; font-size: 17px; }
.brand__latin { font: 700 12px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }   /* Gilroy: the Latin labels' face; 12 px, the least the site sets */

/* ---------- the capsule ---------- */
.hnav {
  position: absolute; left: 50%; top: calc(50% + var(--hs-band) / 2 + 3px); transform: translate(-50%, -50%);
  padding: 5px; border-radius: 999px; isolation: isolate;
  background: rgb(12 18 25 / .42); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), inset 0 1px 0 rgb(255 255 255 / .14), 0 14px 34px -16px rgb(0 0 0 / .7);
  transition: opacity .4s, transform .5s var(--ease-out);
}
/* a slow light travelling round the rim: a still conic gradient turning inside the rim's mask. It turns with a
   transform, which the graphics card does alone (turning the gradient's angle instead repainted the capsule every
   frame, on every page) */
.hnav__rim {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; padding: 1px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.hnav__rim i {
  position: absolute; left: 50%; top: 50%; width: 104%; aspect-ratio: 1; translate: -50% -50%;   /* a square as wide as the capsule covers it at every turn */
  background: conic-gradient(transparent 0 62%, rgb(142 240 205 / .75) 74%, rgb(255 255 255 / .9) 77%, transparent 88%);
  animation: gr-rim 9s linear infinite; will-change: transform;
}
@keyframes gr-rim { to { transform: rotate(1turn); } }
.hnav__list { position: relative; z-index: 1; display: flex; gap: 2px; }
.hnav__link {
  position: relative; display: block; height: 38px; line-height: 38px; padding: 0 clamp(10px, 1vw, 16px); border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; color: rgb(255 255 255 / .7);
  transition: color .25s;
}
.hnav__link[aria-current="true"] { color: var(--white); }
.hnav__link[aria-current="true"]::after {   /* the section you are in */
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--green-hi); box-shadow: 0 0 8px var(--green-hi);
}
.hnav__link:hover, .hnav__link:focus-visible { color: var(--white); }
.hnav__link:focus-visible { outline-offset: -2px; }
.hnav__glow {   /* follows the pointer from link to link */
  position: absolute; z-index: 0; top: 5px; left: var(--gx, 5px); width: var(--gw, 0px); height: 38px; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .17), rgb(255 255 255 / .06));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 0 22px rgb(91 230 198 / .14);
  opacity: var(--go, 0);
  transition: left .5s var(--ease-out), width .5s var(--ease-out), opacity .3s;
}

/* ---------- live projects ---------- */
.site-header__end { display: flex; align-items: center; gap: 10px; }
.hcta {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding-inline: 18px 6px; border-radius: 999px;
  color: var(--white); text-decoration: none; font-weight: 700; font-size: 14.5px; white-space: nowrap;
  background: linear-gradient(180deg, #13A863, #0B874D 55%, #0A7C47);   /* deep enough under white text (4.6:1) */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 0 0 1px rgb(255 255 255 / .12), 0 12px 28px -12px rgb(14 156 89 / .95);
  transition: transform .3s var(--ease-out), box-shadow .3s, opacity .4s;
}
.hcta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), inset 0 0 0 1px rgb(255 255 255 / .16), 0 16px 34px -12px rgb(14 156 89 / 1); }
.hcta__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--white); flex: none; }
.hcta__live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .9); animation: gr-pulse 2.2s var(--ease-out) infinite; }
.hcta__go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .18); transition: background-color .3s, color .3s, transform .35s var(--ease-out); }
.hcta:hover .hcta__go { background: var(--white); color: var(--green); transform: translateX(var(--nudge, -3px)); }
[dir="ltr"] .hcta { --nudge: 3px; }

/* ---------- menu button ---------- */
.menu-btn {   /* ink on the paper */
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding-inline: 14px 18px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--white); background: linear-gradient(180deg, #1A232C, var(--hs-ink));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 10px 22px -12px rgb(14 20 27 / .8);
  font-size: 14.5px; font-weight: 650; transition: background-color .3s, transform .3s var(--ease-out);
}
.menu-btn:hover { transform: translateY(-1px); }
.menu-btn__lines { position: relative; width: 20px; height: 12px; }
.menu-btn__lines i { position: absolute; inset-inline-start: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease-out), width .35s var(--ease-out), top .35s var(--ease-out); }
.menu-btn__lines i:first-child { top: 1px; width: 20px; }
.menu-btn__lines i:last-child { top: 9px; width: 12px; }
.menu-btn:hover .menu-btn__lines i:last-child { width: 20px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines i { top: 5px; width: 20px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child { transform: rotate(-45deg); }

/* while the menu is open the bar keeps only the logo and the close button */

html.gr-menu-open .hnav, html.gr-menu-open .hcta { opacity: 0; pointer-events: none; }
html.gr-menu-open .newspill { opacity: 0; pointer-events: none; }

/* ======================================================================================
   Full-screen menu
   ====================================================================================== */
.menu {
  position: fixed; inset: 0; z-index: 58; color: var(--white); background: #0A1016; overflow: hidden auto;
  clip-path: circle(0 at var(--mx, 90%) var(--my, 40px));
  transition: clip-path .85s var(--ease-io);
}
.menu.is-open { clip-path: circle(150vmax at var(--mx, 90%) var(--my, 40px)); }
.menu[hidden] { display: none; }
.menu__bg { position: absolute; inset: 0; }
.menu__frame {
  position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.07);
  transition: opacity .8s var(--ease-out), transform 1.6s var(--ease-out);
}
.menu__frame.is-on { opacity: 1; transform: none; }
.menu__veil {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgb(91 230 198 / .04) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgb(91 230 198 / .04) 0 1px, transparent 1px 64px),
    linear-gradient(to var(--veil-dir, left), rgb(10 16 22 / .55), rgb(10 16 22 / .82) 45%, rgb(10 16 22 / .95));
}
[dir="ltr"] .menu__veil { --veil-dir: right; }

.menu__inner {
  position: relative; min-height: 100%; max-width: 1600px; margin: 0 auto;
  padding: calc(var(--header-h) + 36px) var(--gutter) 48px;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 6vw; align-items: center;
}
.menu__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu__item { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .7s var(--ease-out); }
.menu.is-open .menu__item { opacity: 1; transform: none; filter: none; transition-delay: calc(.28s + var(--i) * .06s); }
.menu__link { display: inline-flex; align-items: baseline; gap: 20px; padding: 4px 0; text-decoration: none; }
.menu__n { font-size: 13px; font-weight: 700; color: var(--wire); min-width: 1.8em; opacity: .85; }
.menu__t {
  position: relative; font-size: clamp(30px, 4.3vw, 66px); font-weight: 800; line-height: 1.22; color: rgb(255 255 255 / .92);
  transition: color .35s, transform .5s var(--ease-out);
}
.menu__t::after {
  content: ""; position: absolute; inset-inline: 0; bottom: .08em; height: 2px; border-radius: 2px; background: var(--wire);
  transform: scaleX(0); transform-origin: var(--origin, right); transition: transform .5s var(--ease-out);
}
[dir="ltr"] .menu__t::after { --origin: left; }
.menu__list:hover .menu__link .menu__t, .menu__list:has(.menu__link:focus-visible) .menu__link .menu__t { color: rgb(255 255 255 / .34); }
.menu__list .menu__link:hover .menu__t, .menu__list .menu__link:focus-visible .menu__t { color: var(--white); transform: translateX(var(--shift, -12px)); }
[dir="ltr"] .menu__t { --shift: 12px; }
.menu__link:hover .menu__t::after, .menu__link:focus-visible .menu__t::after { transform: scaleX(1); }
.menu__subs { display: flex; gap: 8px; margin-inline-start: 44px; padding: 2px 0 8px; }
.menu__sub {
  font-size: 13.5px; font-weight: 650; text-decoration: none; padding: 6px 13px; border-radius: 999px;
  background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); transition: background-color .25s;
}
.menu__sub:hover { background: rgb(255 255 255 / .14); }

.menu__side {
  display: grid; gap: 30px; align-content: center; padding-inline-start: 4vw; border-inline-start: 1px solid rgb(255 255 255 / .1);
  opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
}
.menu.is-open .menu__side { opacity: 1; transform: none; transition-delay: .55s; }
.menu__live {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding-inline: 22px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 750; font-size: 16px;
  background: linear-gradient(180deg, #13A863, #0B874D 55%, #0A7C47);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), 0 16px 34px -14px rgb(14 156 89 / .9);
}
.menu__live span:nth-child(2) { margin-inline-end: auto; }
.menu__label { font-size: 12.5px; font-weight: 700; color: var(--wire); margin-bottom: 10px; }
.menu__contact { display: grid; gap: 8px; font-size: 16px; color: rgb(255 255 255 / .82); }
.menu__contact a { text-decoration: none; justify-self: start; }
.menu__contact a:hover { color: var(--wire); }
.menu__row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }

.langs { display: flex; align-items: center; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.langs__item { min-width: 38px; height: 32px; display: grid; place-items: center; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; }
.langs__item[aria-current] { background: rgb(255 255 255 / .16); }
.langs__item.is-soon { opacity: .42; cursor: default; }

/* ---------- smaller screens ---------- */
@media (max-width: 1360px) {
  .hcta__text { display: none; }                        /* the live button keeps its dot and arrow: room for the capsule */
  .hcta { padding-inline: 12px 6px; }
}
@media (max-width: 1100px) {
  .hnav { display: none; }
}
@media (max-width: 860px) {
  .menu__inner { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 36px; padding-top: calc(var(--header-h) + 20px); }
  .menu__side { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid rgb(255 255 255 / .1); padding-top: 26px; align-content: start; }
  .menu__t { font-size: clamp(28px, 8vw, 40px); }
  .menu__link { gap: 14px; }
  .menu__subs { margin-inline-start: 38px; }
  .menu__veil { background: linear-gradient(rgb(10 16 22 / .88), rgb(10 16 22 / .94)); }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .hcta { display: none; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 15.5px; }
  .brand__latin { display: none; }   /* a phone-wide header: the Persian name alone */
  .menu-btn { height: 42px; padding-inline: 12px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu__item, .menu__side, .menu__frame { transition: none; }
  .hnav__rim i { animation: none; }
}