/* =================================================================
   Persian motifs (see persian.js)
   ================================================================= */
:root { --persian-gold: #c9a04c; }

/* Shamseh sun-medallion behind the statue head */
.persian-medallion {
  position: absolute;
  left: 84%; top: 43%;
  width: 172%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--persian-gold);
  opacity: .42;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 52%, rgba(0,0,0,.6) 64%, transparent 71%);
  mask-image: radial-gradient(circle, #000 52%, rgba(0,0,0,.6) 64%, transparent 71%);
}
.persian-medallion::before {
  content: "";
  position: absolute; inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,140,50,.22), rgba(201,160,76,.08) 45%, transparent 70%);
}
.persian-medallion-spin { position: absolute; inset: 0; animation: persian-spin 240s linear infinite; }
.persian-medallion svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(239,150,60,.35)); }
.persian-medallion .fill { fill: currentColor; stroke: none; }
@keyframes persian-spin { to { transform: rotate(360deg); } }

/* Carpet border strip under the hero */
.persian-border {
  position: relative;
  z-index: 2;
  height: 76px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  opacity: .92;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.45);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}


.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hero name that scrambles between English and Old Persian cuneiform */
.hero-name { display: inline-block; white-space: nowrap; overflow: visible; font-family: var(--font-mono), "Noto Sans Old Persian", monospace; }
.hero-name-glyphs { font-family: inherit; }
.hero-name { transition: width .6s cubic-bezier(.2,.7,.2,1); vertical-align: bottom; }
.hero-name .cu { font-size: 1.32em; line-height: 1; letter-spacing: 1.5px; vertical-align: -1px; }

/* Card frames: double gold ruling (jadval) with carpet corner-pieces (lachak) */
.persian-frame {
  position: absolute; inset: 7px;
  z-index: 4;
  border-radius: 12px;
  pointer-events: none;
  color: var(--persian-gold);
  border: 1px solid rgba(201,160,76,.2);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0), inset 0 0 0 4px rgba(201,160,76,.1);
  opacity: .75;
  transition: opacity .4s ease, border-color .4s ease;
}
.work-card:hover .persian-frame,
.service-card:hover .persian-frame { opacity: 1; border-color: rgba(201,160,76,.42); }
.persian-frame .lk { position: absolute; width: 50px; height: 50px; }
.persian-frame .lk svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(239,150,60,.25)); }
.persian-frame .lk-tl { top: -1px; left: -1px; }
.persian-frame .lk-tr { top: -1px; right: -1px; transform: scaleX(-1); }
.persian-frame .lk-bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.persian-frame .lk-br { bottom: -1px; right: -1px; transform: scale(-1, -1); }
.persian-frame .lk-fill { fill: rgba(12,10,8,.78); }
.persian-frame .lk-line { fill: none; stroke: currentColor; stroke-width: 1.3; }
.persian-frame .lk-thin { stroke-width: .8; opacity: .8; }
.persian-frame .lk-dot { fill: currentColor; }

/* Pasargadae: tomb of Cyrus in the footer */
.footer-tomb { margin: 0; justify-self: end; align-self: end; width: 100%; max-width: 260px; color: var(--persian-gold); }
.footer-tomb svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 8px rgba(239,150,60,.18)); }
.footer-tomb .t-face { fill: rgba(201,160,76,.06); stroke: currentColor; stroke-width: 1.1; }
.footer-tomb .t-lit { stroke: rgba(255,214,150,.45); stroke-width: .8; fill: none; }
.footer-tomb .t-joint { stroke: currentColor; stroke-width: .6; opacity: .45; fill: none; }
.footer-tomb .t-line { stroke: currentColor; stroke-width: 1.1; fill: none; }
.footer-tomb .t-door { fill: rgba(7,7,7,.9); stroke: currentColor; stroke-width: 1; }
.footer-tomb figcaption { white-space: nowrap; margin-top: 10px; text-align: right; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted-2); }

@media (max-width: 760px) {
  .hero-name { display: block; margin-bottom: 6px; }
  .hero-sep { display: none; }
  .footer-tomb { justify-self: center; align-self: center; max-width: 170px; margin-top: 4px; }
  .footer-tomb figcaption { text-align: center; font-size: 9.5px; letter-spacing: 1.1px; margin-top: 8px; }
  .persian-border { height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .persian-medallion-spin { animation: none; }
}