/* ================================================================
   Mayor section — portrait treatment + signature
   The source photo is small (236×293), so it is shown at its native
   width (no up-scaling) inside an arch with a thin, living gold
   border: light travels around it and it breathes a soft glow.
   JS: assets/js/mayor-signature.js
   ================================================================ */
@property --mp-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.mayor-photo-wrap{position:relative;display:inline-block;padding:12px}

.mayor-photo-frame{--bw:1.5px;position:relative;z-index:1;width:min(236px,64vw);height:auto;aspect-ratio:236/293;
  border-radius:130px 130px 20px 20px;overflow:hidden;border:0;padding:var(--bw);
  background:conic-gradient(from var(--mp-angle),rgba(94,199,184,.25),rgba(94,199,184,.25) 60%,#009383 75%,#FFF3C4 80%,#009383 85%,rgba(94,199,184,.25));
  animation:mpTrace 7s linear infinite,mpBreathe 4.5s ease-in-out infinite}
@keyframes mpTrace{to{--mp-angle:360deg}}
@keyframes mpBreathe{
  0%,100%{box-shadow:0 26px 50px rgba(0,0,0,.4),0 0 0 0 rgba(94,199,184,0),0 0 10px rgba(94,199,184,.12)}
  50%{box-shadow:0 26px 50px rgba(0,0,0,.4),0 0 0 5px rgba(94,199,184,.07),0 0 28px rgba(0,47,31,.35)}}
.mayor-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;
  border-radius:calc(130px - var(--bw)) calc(130px - var(--bw)) calc(20px - var(--bw)) calc(20px - var(--bw));
  filter:url(#mayorSharpen) contrast(1.05) saturate(1.06)}
/* Film grain + soft vignette (inside the border) */
.mayor-photo-frame::before,.mayor-photo-frame::after,.mayor-photo-frame .mp-sweep{inset:var(--bw)!important;
  border-radius:calc(130px - var(--bw)) calc(130px - var(--bw)) calc(20px - var(--bw)) calc(20px - var(--bw));overflow:hidden}
.mayor-photo-frame::before{content:"";position:absolute;z-index:2;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mayor-photo-frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 30%,transparent 55%,rgba(0,42,37,.45) 100%),
             linear-gradient(0deg,rgba(0,42,37,.35),transparent 30%)}
/* One slow light sweep across the portrait when it enters */
.mayor-photo-frame .mp-sweep{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,244,210,.28) 50%,transparent 65%);transform:translateX(-120%)}
.mayor-photo-wrap.is-in .mp-sweep{animation:mpSweep 1.6s cubic-bezier(.22,1,.36,1) .3s both}
@keyframes mpSweep{to{transform:translateX(120%)}}

.mayor-badge-wrap{z-index:5;bottom:-6px;right:-18px;padding:12px 16px}
.mayor-badge-wrap strong{font-size:1.125rem}
@media (max-width:575px){.mayor-badge-wrap{right:-6px}}

/* ── Signature ── */
.mayor-signature{position:relative;min-height:2.6rem;margin-top:-4px;color:var(--gold);opacity:1}
.ms-ar-sig{position:relative;display:inline-block;padding:0 4px 18px;line-height:1.35;
  font:400 2.5rem/1.35 'Aref Ruqaa','Cairo',serif;font-style:normal;color:#009383;direction:rtl;
  text-shadow:0 2px 14px rgba(94,199,184,.25)}
.ms-flourish{position:absolute;left:-6%;right:-4%;bottom:0;width:110%;height:26px;overflow:visible;pointer-events:none}
.ms-flourish path{fill:none;stroke:#5EC7B8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.ms-nib{position:absolute;top:40%;right:0;width:9px;height:9px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#FFF6D6 0 30%,#009383 45%,rgba(94,199,184,0) 72%);box-shadow:0 0 14px 4px rgba(0,47,31,.55)}

/* Armed = JS present and motion allowed: hide, then write on .is-signing */
.ms-armed .ms-ink{-webkit-mask-image:linear-gradient(to left,#000 42%,transparent 58%);mask-image:linear-gradient(to left,#000 42%,transparent 58%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0}
.ms-armed .ms-flourish path{stroke-dasharray:1;stroke-dashoffset:1}
.ms-armed.is-signing .ms-ink{animation:msInk 2.1s cubic-bezier(.45,.05,.35,1) forwards}
.ms-armed.is-signing .ms-nib{animation:msNib 2.1s cubic-bezier(.45,.05,.35,1) forwards,msNibFade 2.9s linear forwards}
.ms-armed.is-signing .ms-flourish path{animation:msStroke 1s cubic-bezier(.65,0,.35,1) 1.75s forwards}
@keyframes msInk{to{-webkit-mask-position:100% 0;mask-position:100% 0}}
@keyframes msNib{0%{right:0;top:44%}20%{top:22%}40%{top:58%}60%{top:30%}80%{top:52%}100%{right:100%;top:62%}}
@keyframes msNibFade{0%{opacity:0}6%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes msStroke{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .mayor-photo-wrap.is-in .mp-sweep,.mayor-photo-frame{animation:none}
}