/* ============================================================================
   The chain on the map (v3) — home page, below the four doors.
   Nested layers of real geography in one projection (Web Mercator):
     the overview (34.85–37.05 N, 49.40–53.40 E); Mazandaran and the plateau
     around Mamuniyeh from real satellite imagery (Sentinel-2 cloudless 2016);
     Tehran, and inside it the head office's neighbourhood. The camera flies between them;
     each facility rises as its own scale model, with a name card on it.
   Models and cards sit in a flat overlay positioned by map.js, so they stay
   sharp at any zoom.
   ========================================================================== */
.mapx { background: #0B1622; color: #F3EFE4; }
.mapx .sc-stage { overflow: clip; }
.mapx__view { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 30%; overflow: clip; }
.mapx__plane { position: absolute; left: 0; top: 0; width: 1600px; height: 1073px; transform-origin: 0 0; }
.mapx__terrain { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; border-radius: 6px;
                 box-shadow: 0 40px 120px rgba(0,0,0,.55); }

/* the two areas, framed on the overview with their counts */
.mapx__frame { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%);
               border: 2px solid rgba(243,239,228,.85); border-radius: 6px; box-shadow: 0 0 0 1px rgba(11,22,34,.4), inset 0 0 40px rgba(200,16,46,.18);
               opacity: 0; transition: opacity 500ms ease; }
.mapx.show-frames .mapx__frame { opacity: 1; }
.mapx__frame b { position: absolute; top: -2px; inset-inline-start: -2px; translate: 0 -100%; display: flex; align-items: center; gap: 8px; white-space: nowrap;
                 background: #C8102E; color: #F3EFE4; font-size: 15px; font-weight: 700; padding: 4px 12px; border-radius: 6px 6px 0 0; }
.mapx__frame b i { font-style: normal; font-size: 22px; line-height: 1; }

/* the detailed regions: big CSS boxes scaled DOWN by map.js, so they never upscale */
.mapx__region { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; pointer-events: none;
                -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
                -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
                mask-composite: intersect; }
.mapx__region img { width: 100%; height: 100%; display: block; max-width: none; }
/* the office's neighbourhood is a small patch inside Tehran: a wide, soft edge so the city around it reads as distance */
.mapx__region[data-r="hood"] { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%); }
.mapx__region { width: 3200px; height: 2133px; }

.mapx__shade { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(to left, rgba(11,22,34,.92) 0%, rgba(11,22,34,.5) 28%, rgba(11,22,34,0) 46%),
              linear-gradient(to top, rgba(11,22,34,.7) 0%, rgba(11,22,34,0) 22%); }
html[dir="ltr"] .mapx__shade { background: linear-gradient(to right, rgba(11,22,34,.92) 0%, rgba(11,22,34,.5) 28%, rgba(11,22,34,0) 46%),
              linear-gradient(to top, rgba(11,22,34,.7) 0%, rgba(11,22,34,0) 22%); }

/* the facilities: a flat overlay, each placed on its exact coordinate by map.js */
.mapx__sites { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mapx__site { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.mapx__pin { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #C8102E;
             background: rgba(200,16,46,.3); box-shadow: 0 0 0 4px rgba(200,16,46,.18); opacity: 0; transition: opacity 350ms ease; }
.mapx__site.is-placed .mapx__pin, .mapx__site.is-on .mapx__pin { opacity: 1; }
.mapx__site.is-on .mapx__pin { animation: mapx-ping 1.8s ease-out infinite; }
@keyframes mapx-ping { from { box-shadow: 0 0 0 0 rgba(200,16,46,.55); } to { box-shadow: 0 0 0 18px rgba(200,16,46,0); } }
.mapx__stand { position: absolute; left: 0; bottom: 6px; display: flex; flex-direction: column-reverse; align-items: center;
               transform-origin: 50% 100%; transform: translateX(-50%) scale(calc(var(--pop, 0) * var(--sz, 1)));
               opacity: 0; transition: transform 650ms cubic-bezier(.22,.61,.36,1), opacity 420ms ease; }
.mapx__site.is-on .mapx__stand { --pop: 1; opacity: 1; }
.mapx__stand > img { width: 300px; max-width: none; height: auto; display: block; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
/* the name card: the writing on the asset */
.mapx__card { margin-bottom: 6px; text-align: center; white-space: nowrap; background: rgba(11,22,34,.9); color: #F3EFE4;
              border-top: 3px solid #C8102E; border-radius: 6px; padding: 6px 14px 7px; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.mapx__card b { display: block; font-size: 17px; font-weight: 700; line-height: 1.5; }
.mapx__card span { display: block; font-size: 13px; color: #BCC2C8; line-height: 1.5; }
/* sites with no photo yet: a red pin and the card, never an invented model */
.mapx__site--pin .mapx__stand > img { display: none; }
.mapx__site--pin .mapx__stand { bottom: 14px; }

/* the panel: what the camera is showing, in words and one big number */
.mapx__panel { position: absolute; z-index: 5; inset-inline-start: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(26rem, 34vw); }
.mapx__ch { position: absolute; inset-inline-start: 0; top: 50%; translate: 0 -50%; width: 100%; opacity: 0; pointer-events: none;
            transition: opacity 450ms ease, transform 450ms cubic-bezier(.22,.61,.36,1); transform: translateY(14px); }
.mapx__ch.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mapx__ch .h2 { color: #F3EFE4; }
.mapx__big { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.mapx__big b { font-family: var(--sc-font-display); font-size: clamp(64px, 8vw, 112px); line-height: 1; font-weight: 700; color: #F3EFE4; font-variant-numeric: tabular-nums; }
.mapx__big span { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.4; }
.mapx__list { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: 6px; }
.mapx__list li { display: flex; align-items: center; gap: 10px; font-size: 17px; opacity: 0; transform: translateX(10px);
                 transition: opacity 420ms ease, transform 420ms cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i) * 110ms); }
html[dir="rtl"] .mapx__list li { transform: translateX(-10px); }
.mapx__ch.is-on .mapx__list li { opacity: 1; transform: none; }
.mapx__list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C8102E; flex: none; }
.mapx__lines { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: 4px; font-size: 18px; font-weight: 600; }
.mapx__fact { margin: var(--sc-5) 0 0; color: #BCC2C8; font-size: 15px; }
html[lang="fa"] .mapx__fact { font-size: 16px; }
.mapx__steps { position: absolute; z-index: 5; inset-inline-start: var(--sc-gutter); bottom: clamp(20px, 5vh, 44px); display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mapx__steps li { width: 34px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); transition: background 300ms ease; }
.mapx__steps li.is-on { background: #C8102E; }
.mapx__steps li.is-done { background: rgba(243,239,228,.7); }
.mapx .note--float { top: 96px; z-index: 6; }

@media (max-width: 860px) {
  .mapx__shade { background: linear-gradient(to top, rgba(11,22,34,.96) 0%, rgba(11,22,34,.82) 34%, rgba(11,22,34,0) 58%); }
  .mapx__panel { top: auto; bottom: 84px; translate: none; width: auto; inset-inline: var(--sc-gutter); }
  .mapx__steps { bottom: 62px; }                    /* above the satellite credit, which wraps to three lines here */
  .mapx__ch { top: auto; bottom: 0; translate: none; }
  .mapx__stand > img { width: 150px; }
  .mapx__card b { font-size: 14px; } .mapx__card span { font-size: 11px; }
  .mapx__big b { font-size: 56px; }
  .mapx__list { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mapx__stand, .mapx__ch, .mapx__list li { transition: none; }
  .mapx__site.is-on .mapx__pin { animation: none; }
}
.mapx__credit { position: absolute; z-index: 5; inset-inline-end: var(--sc-gutter); bottom: 10px; margin: 0; font: 400 10px/1.4 "IBM Plex Sans", sans-serif; color: rgba(243,239,228,.55); }

/* placed: every facility in the region the camera is in rests on the map, smaller and without its card;
   from high up it is a pin only */
.mapx__site.is-placed .mapx__stand { --pop: .48; opacity: .95; }
.mapx__site.is-placed .mapx__card { display: none; }
.mapx.is-far .mapx__site.is-placed .mapx__stand { opacity: 0; }
/* the panel list follows the camera: the farm on screen is lit, the ones already shown stay readable */
.mapx__ch.is-on .mapx__list li[data-k] { opacity: .45; }
.mapx__ch.is-on .mapx__list li.is-past { opacity: .8; }
.mapx__ch.is-on .mapx__list li.is-cur { opacity: 1; font-weight: 700; }
.mapx__list li.is-cur::before { width: 12px; height: 12px; box-shadow: 0 0 0 4px rgba(200,16,46,.25); }

/* the name card carries the TPG mark: every facility reads as part of the group (a future sub-brand swaps its own mark in) */
.mapx__card { display: flex; align-items: center; gap: 10px; text-align: start; padding: 6px 12px 7px 10px; }
html[dir="rtl"] .mapx__card { padding: 6px 10px 7px 12px; }
.mapx__logo { flex: none; width: 46px; height: auto; background: #fff; border-radius: 4px; padding: 3px 4px; display: block; }

/* the info card: slides out beside the facility as it pops up, on the side away from the panel */
.mapx__info { position: absolute; bottom: 22%; inset-inline-start: calc(100% + 14px); width: max-content; max-width: 270px;
              background: rgba(11,22,34,.92); color: #F3EFE4; border-inline-start: 3px solid #C8102E; border-radius: 6px;
              padding: 10px 14px 11px; box-shadow: 0 8px 20px rgba(0,0,0,.35); text-align: start; white-space: normal;
              opacity: 0; transform: translateX(14px); transition: opacity 380ms ease, transform 520ms cubic-bezier(.22,.61,.36,1); }
html[dir="ltr"] .mapx__info { transform: translateX(-14px); }
.mapx__site.is-on .mapx__info { opacity: 1; transform: none; transition-delay: 260ms; }
.mapx__site.is-placed .mapx__info { display: none; }
.mapx__fig { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.mapx__fig i { font-style: normal; font-size: 13px; color: #BCC2C8; width: 100%; }
.mapx__fig b { font-family: var(--sc-font-display); font-size: 30px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.mapx__fig span { font-size: 14px; font-weight: 600; }
.mapx__info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mapx__info li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.6; }
.mapx__info li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #C8102E; translate: 0 -2px; }
.mapx__todo { display: block; margin-top: 6px; font: 600 11px/1.4 "IBM Plex Sans", sans-serif; color: #F2C14E; }
body.notes-off .mapx__todo { display: none; }
@media (max-width: 860px) {
  /* phone: under the facility, centred, between it and the panel */
  .mapx__info { bottom: auto; top: calc(100% + 18px); inset-inline-start: auto; left: 50%; max-width: 230px; padding: 8px 12px 9px;
                transform: translate(-50%, 10px); }
  html[dir="ltr"] .mapx__info { transform: translate(-50%, 10px); }
  .mapx__site.is-on .mapx__info { transform: translate(-50%, 0); }
  .mapx__fig b { font-size: 22px; }
  .mapx__info li { font-size: 12px; }
  .mapx__logo { width: 34px; }
}
@media (prefers-reduced-motion: reduce) { .mapx__info { transition: none; } }

/* phones: the map is one canvas (map.js "flat", Amir's iPhone 2026-10-24); the 3D layers are never painted */
.mapx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapx.is-flat .mapx__view { perspective: none; }
.mapx.is-flat .mapx__plane, .mapx.is-flat .mapx__region { display: none; }
.mapx__flatframes { position: absolute; inset: 0; pointer-events: none; }
.mapx.is-flat .mapx__stand > img { filter: none; }