/*
 * Menu Overlay. The full-screen menu opens with two circular wipes (blue, then navy) growing from the
 * menu button, then the links rise out of masks one by one while the side panel photo un-masks.
 * Timing classes are added by the "Azadani – Menu overlay" WPCode snippet; without it the menu still
 * opens (via #id / :target) and simply appears.
 */
:root { --azb-header-h: 104px; }
@media (max-width: 767px) { :root { --azb-header-h: 84px; } }

.azb-menu-wrap { display: contents; }

/* ---------- button ---------- */
.azb-menu-toggle {
	position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px;
	height: 52px; padding: 0 8px 0 20px; border-radius: 999px;
	background: #fff; color: var(--azb-navy, #071d2d);
	font: 600 15px/1 var(--azb-body, sans-serif); letter-spacing: .01em; text-decoration: none; cursor: pointer;
	transition: background-color .4s, color .4s, transform .5s var(--azb-ease, ease);
}
.azb-menu-toggle:hover, .azb-menu-toggle:focus-visible { background: var(--azb-accent, #0092ff); color: #fff; }
.azb-menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.azb-menu-toggle:active { transform: scale(.96); }
.azb-menu-toggle__labels { position: relative; display: grid; overflow: hidden; height: 1.1em; }
.azb-menu-toggle__labels > span { grid-area: 1 / 1; transition: transform .6s var(--azb-ease, ease); }
.azb-menu-toggle__close { transform: translateY(110%); }
.azb-menu-toggle__icon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--azb-navy, #071d2d); transition: background-color .4s, transform .6s var(--azb-ease, ease); }
.azb-menu-toggle:hover .azb-menu-toggle__icon { background: #fff; }
.azb-menu-toggle__icon i { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: #fff; transition: transform .6s var(--azb-ease, ease), background-color .4s, top .4s; }
.azb-menu-toggle__icon i:first-child { top: 15px; }
.azb-menu-toggle__icon i:last-child { top: 21px; right: 15px; }
.azb-menu-toggle:hover .azb-menu-toggle__icon i { background: var(--azb-navy, #071d2d); }
.azb-menu-toggle:hover .azb-menu-toggle__icon i:last-child { right: 11px; }
html.azb-menu-open .azb-menu-toggle__open { transform: translateY(-110%); }
html.azb-menu-open .azb-menu-toggle__close { transform: none; }
html.azb-menu-open .azb-menu-toggle__icon { transform: rotate(180deg); }
html.azb-menu-open .azb-menu-toggle__icon i { top: 18px; right: 11px; }
html.azb-menu-open .azb-menu-toggle__icon i:first-child { transform: rotate(45deg); }
html.azb-menu-open .azb-menu-toggle__icon i:last-child { transform: rotate(-45deg); }
@media (max-width: 599px) {
	.azb-menu-toggle { height: 48px; padding: 0 5px; gap: 0; }
	.azb-menu-toggle__labels { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); }
}

/* ---------- overlay ---------- */
.azb-menu {
	position: fixed; inset: 0; z-index: -1;
	visibility: hidden; pointer-events: none;
	color: #fff; overflow: hidden;
}
.azb-menu:target, .azb-menu.is-open, .azb-menu.is-closing { visibility: visible; }
.azb-menu:target, .azb-menu.is-open { pointer-events: auto; }
.azb-menu__nojs-close { position: absolute; top: 24px; right: 24px; z-index: 3; color: #fff; }
.azb-menu.is-ready .azb-menu__nojs-close, .azb-menu.is-open .azb-menu__nojs-close { display: none; }

.azb-menu__bg { position: absolute; inset: 0; }
.azb-menu__wipe { position: absolute; inset: 0; clip-path: circle(var(--azb-r, 150%) at var(--azb-x, 100%) var(--azb-y, 0)); }
.azb-menu__wipe.is-1 { background: var(--azb-accent, #0092ff); }
.azb-menu__wipe.is-2 {
	background:
		radial-gradient(60% 70% at 85% 10%, rgba(0, 146, 255, .28), rgba(0, 146, 255, 0) 70%),
		radial-gradient(50% 60% at 0% 100%, rgba(92, 188, 255, .12), rgba(92, 188, 255, 0) 70%),
		var(--azb-ink, #05070f);
}
.azb-menu__grid {
	position: absolute; inset: 0; opacity: .9;
	background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 30% 50%, #000 10%, transparent 75%);
}

.azb-menu__inner {
	position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain;
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 120px);
	max-width: calc(1552px + 2 * clamp(20px, 4vw, 64px)); margin: 0 auto;
	padding: calc(var(--azb-header-h, 104px) + 24px) clamp(20px, 4vw, 64px) clamp(32px, 5vh, 64px);
	box-sizing: border-box;
}
@media (max-width: 1024px) { .azb-menu__inner { grid-template-columns: 1fr; align-items: start; gap: 40px; } }

/* links */
.azb-menu__list { list-style: none; margin: 0; padding: 0; counter-reset: azbm; }
.azb-menu__list > li { position: relative; margin: 0; padding: 0; counter-increment: azbm; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.azb-menu__list > li:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }
.azb-menu__list > li > a {
	position: relative; display: flex; align-items: center; gap: clamp(16px, 2vw, 32px);
	padding: clamp(10px, 1.6vh, 18px) 0; overflow: hidden;
	color: #fff; text-decoration: none;
	font: 600 clamp(32px, 4.2vw, 68px)/1.08 var(--azb-body, sans-serif); letter-spacing: -.035em;
}
.azb-menu__list > li > a::before {
	content: counter(azbm, decimal-leading-zero); flex: none; width: 3ch;
	font: 600 13px/1 var(--azb-body, sans-serif); letter-spacing: .2em; color: var(--azb-accent-hi, #5cbcff);
	align-self: flex-start; margin-top: .9em;
}
.azb-menu__list > li > a::after {
	content: ""; flex: none; width: .55em; height: .55em; margin-left: auto; opacity: 0; transform: translateX(-24px) rotate(-45deg);
	background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity .4s, transform .6s var(--azb-ease, ease);
}
.azb-menu__txt { display: inline-block; transition: transform .6s var(--azb-ease, ease), color .3s, opacity .3s; }
.azb-menu__list > li > a:is(:hover, :focus-visible) .azb-menu__txt { transform: translateX(14px); color: var(--azb-accent-hi, #5cbcff); }
.azb-menu__list > li > a:is(:hover, :focus-visible)::after { opacity: 1; transform: none; color: var(--azb-accent-hi, #5cbcff); }
.azb-menu__list > li > a:focus-visible { outline: none; }
@media (hover: hover) {
	.azb-menu__list:hover > li > a .azb-menu__txt { opacity: .38; }
	.azb-menu__list:hover > li > a:hover .azb-menu__txt, .azb-menu__list > li.is-expanded > a .azb-menu__txt { opacity: 1; }
}
.azb-menu__list > li:is(.current-menu-item, .current-menu-ancestor) > a .azb-menu__txt { color: var(--azb-accent-hi, #5cbcff); }

/* sub-menus: a compact two-column list under the parent */
.azb-menu__list .sub-menu { list-style: none; margin: 0; padding: 0 0 clamp(14px, 2vh, 22px) calc(3ch + clamp(16px, 2vw, 32px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; }
.azb-menu__list .sub-menu li { margin: 0; }
.azb-menu__list .sub-menu a { display: inline-block; padding: 7px 0; color: rgba(255, 255, 255, .72); text-decoration: none; font: 500 clamp(16px, 1.25vw, 19px)/1.35 var(--azb-body, sans-serif); transition: color .3s, transform .5s var(--azb-ease, ease); }
.azb-menu__list .sub-menu a:is(:hover, :focus-visible) { color: #fff; transform: translateX(6px); }
.azb-menu__list .sub-menu .current-menu-item > a { color: var(--azb-accent-hi, #5cbcff); }
@media (max-width: 599px) { .azb-menu__list .sub-menu { grid-template-columns: 1fr; } }
/* with the snippet, sub-menus fold away until the parent is opened */
.azb-menu.is-ready .menu-item-has-children > .sub-menu { display: block; overflow: hidden; padding-bottom: 0; max-height: 0; transition: max-height .6s var(--azb-ease, ease), padding .6s var(--azb-ease, ease); }
.azb-menu.is-ready .menu-item-has-children > .sub-menu > li { display: inline-block; width: calc(50% - 20px); margin-right: 16px; }
@media (max-width: 599px) { .azb-menu.is-ready .menu-item-has-children > .sub-menu > li { width: 100%; } }
.azb-menu.is-ready .menu-item-has-children.is-expanded > .sub-menu { max-height: 600px; padding-bottom: clamp(14px, 2vh, 22px); }
.azb-menu__plus { position: relative; flex: none; width: .5em; height: .5em; margin-left: auto; transition: transform .5s var(--azb-ease, ease); }
.azb-menu__plus::before, .azb-menu__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; border-radius: 2px; }
.azb-menu__plus::after { transform: rotate(90deg); transition: transform .5s var(--azb-ease, ease); }
.is-expanded > a .azb-menu__plus::after { transform: rotate(0); }
.azb-menu.is-ready .menu-item-has-children > a::after { display: none; }

/* side panel */
.azb-menu__panel { position: relative; }
.azb-menu__panel > * + * { margin-top: 20px; }
@media (max-width: 1024px) { .azb-menu__panel { max-width: 640px; } }

/* ---------- motion (snippet adds .is-ready; .is-open / .is-closing drive the states) ---------- */
.azb-menu.is-ready .azb-menu__wipe { clip-path: circle(0 at var(--azb-x, 100%) var(--azb-y, 0)); transition: clip-path .9s cubic-bezier(.76, 0, .24, 1); }
.azb-menu.is-ready .azb-menu__wipe.is-2 { transition-delay: .12s; }
.azb-menu.is-open .azb-menu__wipe { clip-path: circle(var(--azb-r, 150%) at var(--azb-x, 100%) var(--azb-y, 0)); }
.azb-menu.is-closing .azb-menu__wipe { transition-duration: .7s; }
.azb-menu.is-closing .azb-menu__wipe.is-1 { transition-delay: .18s; }
.azb-menu.is-closing .azb-menu__wipe.is-2 { transition-delay: .06s; }
.azb-menu.is-ready .azb-menu__grid { opacity: 0; transition: opacity .6s; }
.azb-menu.is-open .azb-menu__grid { opacity: .9; transition-delay: .5s; }

.azb-menu.is-ready .azb-menu__list > li > a .azb-menu__txt, .azb-menu.is-ready .azb-menu__list > li > a::before { transform: translateY(115%); opacity: 1; }
.azb-menu.is-ready .azb-menu__list > li { border-color: transparent; transition: border-color .6s; }
.azb-menu.is-open .azb-menu__list > li { border-color: rgba(255, 255, 255, .1); transition-delay: calc(.5s + var(--azb-i, 0) * 70ms); }
.azb-menu.is-open .azb-menu__list > li > a .azb-menu__txt, .azb-menu.is-open .azb-menu__list > li > a::before {
	transform: none; transition: transform .95s cubic-bezier(.16, 1, .3, 1), color .3s, opacity .3s; transition-delay: calc(.55s + var(--azb-i, 0) * 75ms), 0s, 0s;
}
.azb-menu.is-open .azb-menu__list > li > a:is(:hover, :focus-visible) .azb-menu__txt { transform: translateX(14px); transition-delay: 0s; }
.azb-menu.is-closing .azb-menu__list > li > a .azb-menu__txt, .azb-menu.is-closing .azb-menu__list > li > a::before { transform: translateY(-115%); transition: transform .35s cubic-bezier(.7, 0, .84, 0); transition-delay: calc(var(--azb-i, 0) * 25ms); }

.azb-menu.is-ready .azb-menu__panel { clip-path: inset(100% 0 0 0 round 28px); transform: translateY(40px); transition: clip-path 1.1s cubic-bezier(.76, 0, .24, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.azb-menu.is-ready .azb-menu__panel img { transform: scale(1.18); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); }
.azb-menu.is-open .azb-menu__panel { clip-path: inset(0 0 0 0 round 0); transform: none; transition-delay: .5s; }
.azb-menu.is-open .azb-menu__panel img { transform: none; transition-delay: .5s; }
.azb-menu.is-closing .azb-menu__panel { clip-path: inset(0 0 100% 0 round 28px); transition-duration: .5s; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
	.azb-menu.is-ready *, .azb-menu.is-ready .azb-menu__wipe { transition: opacity .25s !important; transform: none !important; clip-path: none !important; }
	.azb-menu.is-ready { opacity: 0; transition: opacity .25s; }
	.azb-menu.is-open { opacity: 1; }
}

/* page behind */
html.azb-menu-open, html.azb-menu-open body { overflow: hidden !important; }
.azb-menu.is-ready .menu-item-has-children:not(.is-expanded) > .sub-menu { visibility: hidden; transition: max-height .6s var(--azb-ease, ease), padding .6s var(--azb-ease, ease), visibility 0s .6s; }
.azb-menu.is-ready .azb-menu__plus { opacity: 0; transition: opacity .3s, transform .5s var(--azb-ease, ease); }
.azb-menu.is-open .azb-menu__plus { opacity: 1; transition-delay: .9s, 0s; }

/* liquid glass menu button (all screens) */
.azb-menu-toggle {
	color: #fff; overflow: hidden; isolation: isolate;
	background: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .14) 100%);
	-webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 24px -12px rgba(0, 0, 0, .6);
	transition: background .4s, box-shadow .4s, transform .5s var(--azb-ease, ease);
}
.azb-menu-toggle::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 55%); }
.azb-menu-toggle:hover, .azb-menu-toggle:focus-visible { color: #fff; background: linear-gradient(145deg, rgba(0, 146, 255, .55), rgba(0, 146, 255, .28)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(92, 188, 255, .45), 0 12px 28px -12px rgba(0, 146, 255, .55); }
.azb-menu-toggle__icon, .azb-menu-toggle:hover .azb-menu-toggle__icon { background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.azb-menu-toggle__icon i, .azb-menu-toggle:hover .azb-menu-toggle__icon i { background: #fff; }
html.azb-menu-open .azb-menu-toggle { background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)); }
@media (max-width: 599px) {
	.azb-menu-toggle { width: 48px; justify-content: center; }
	.azb-menu-toggle__icon, .azb-menu-toggle:hover .azb-menu-toggle__icon { background: transparent; box-shadow: none; }
}

/* smooth: compositor-only animation. The wipes are real circles that scale (GPU) instead of animating clip-path,
   the panel fades and slides instead of clipping, and background blurs pause while the menu animates. */
html { scrollbar-gutter: stable; }
.azb-menu { contain: layout paint; }
.azb-menu.is-ready .azb-menu__wipe {
	inset: auto; left: calc(var(--azb-x, 100vw) - var(--azb-r, 150vmax)); top: calc(var(--azb-y, 0px) - var(--azb-r, 150vmax));
	width: calc(2 * var(--azb-r, 150vmax)); height: calc(2 * var(--azb-r, 150vmax)); border-radius: 50%;
	clip-path: none; transform: scale(0); will-change: transform; backface-visibility: hidden;
	transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}
.azb-menu.is-ready .azb-menu__wipe.is-2 { background: var(--azb-ink, #05070f); transition-delay: .1s; }
.azb-menu.is-open .azb-menu__wipe { clip-path: none; transform: scale(1); }
.azb-menu.is-closing .azb-menu__wipe { transition-duration: .65s; }
.azb-menu.is-closing .azb-menu__wipe.is-1 { transition-delay: .16s; }
.azb-menu.is-closing .azb-menu__wipe.is-2 { transition-delay: .04s; }
.azb-menu__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 85% 10%, rgba(0, 146, 255, .28), rgba(0, 146, 255, 0) 70%), radial-gradient(50% 60% at 0% 100%, rgba(92, 188, 255, .12), rgba(92, 188, 255, 0) 70%); opacity: 0; transition: opacity .6s; }
.azb-menu.is-open .azb-menu__bg::after { opacity: 1; transition-delay: .45s; }
.azb-menu.is-ready .azb-menu__panel { clip-path: none; opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity .6s, transform 1.1s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; }
.azb-menu.is-open .azb-menu__panel { clip-path: none; opacity: 1; transform: none; transition-delay: .5s; }
.azb-menu.is-closing .azb-menu__panel { clip-path: none; opacity: 0; transform: translate3d(0, 24px, 0); transition-duration: .35s; transition-delay: 0s; }
.azb-menu.is-ready .azb-menu__list > li > a .azb-menu__txt, .azb-menu.is-ready .azb-menu__list > li > a::before { will-change: transform; }
/* pause the frosted-glass blurs while the menu animates (they would be recalculated every frame) */
html.azb-menu-open .site-header :is(.azb-menu-toggle, [class*="gb-element"]), html.azb-menu-open .site-header [class*="gb-element"]::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.azb-menu.is-ready .azb-menu__inner { opacity: 0; transition: opacity .25s; }
.azb-menu.is-open .azb-menu__inner { opacity: 1; transition: opacity .35s .3s; }
@media (prefers-reduced-motion: reduce) {
	.azb-menu.is-ready .azb-menu__wipe { transform: none !important; }
}

/* water bubble: a clear droplet with a bright highlight, a soft rim light underneath and a jelly wobble on touch */
.azb-menu-toggle {
	background: radial-gradient(120% 120% at 50% 120%, rgba(92, 188, 255, .22), rgba(92, 188, 255, 0) 60%), linear-gradient(160deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .12) 100%);
	box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .7), inset 0 -6px 12px -4px rgba(255, 255, 255, .22), inset 0 6px 14px -8px rgba(0, 20, 40, .55), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 26px -12px rgba(0, 0, 0, .65);
}
.azb-menu-toggle::before { background: radial-gradient(38% 30% at 30% 22%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .25) 45%, rgba(255, 255, 255, 0) 70%); opacity: .75; transition: opacity .4s, transform .6s var(--azb-ease, ease); }
.azb-menu-toggle::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 6%; height: 30%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(50% 60% at 50% 100%, rgba(140, 210, 255, .55), rgba(140, 210, 255, 0) 70%); filter: blur(2px); }
.azb-menu-toggle:hover::before, .azb-menu-toggle:focus-visible::before { opacity: 1; transform: translate(4%, 6%); }
@keyframes azbBubble { 0% { transform: scale(1, 1); } 30% { transform: scale(1.07, .94); } 50% { transform: scale(.96, 1.05); } 70% { transform: scale(1.03, .98); } 100% { transform: scale(1, 1); } }
.azb-menu-toggle:hover, .azb-menu-toggle:focus-visible { animation: azbBubble .7s cubic-bezier(.3, .7, .4, 1); }
.azb-menu-toggle:active { animation: none; transform: scale(.94, .9); }
@media (prefers-reduced-motion: reduce) { .azb-menu-toggle:hover, .azb-menu-toggle:focus-visible { animation: none; } }

/* keep the label white in every state (theme link colours for :focus/:active/:visited must not apply) */
.wp-block-azadani-menu-overlay .azb-menu-toggle, .wp-block-azadani-menu-overlay .azb-menu-toggle:is(:hover, :focus, :focus-visible, :active, :visited), .wp-block-azadani-menu-overlay .azb-menu-toggle :is(span, .azb-menu-toggle__labels > span) { color: #fff !important; }
