/* ==========================================================================
   MIDDLE CORRIDOR — animated route map embedded in the blog post
   ========================================================================== */
.mc-map-wrap{
  position:relative;border-radius:2px;overflow:hidden;margin:36px 0;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy-mid) 70%,var(--navy-deep));
  border:1px solid var(--line-dark);
}
.mc-map-wrap::before{
  content:'';position:absolute;inset:0;z-index:1;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0.03) 0 2px,transparent 2px 30px);
}
.mc-map-svg{position:relative;z-index:2;display:block;width:100%;height:auto;}

.mc-land{fill:rgba(140,160,220,0.09);stroke:rgba(170,190,235,0.14);stroke-width:1.5;}
.mc-sea{fill:rgba(18,48,72,0.9);stroke:rgba(90,180,220,0.35);stroke-width:1.5;}

/* route lines draw themselves in on scroll — stroke-dasharray sized to
   each path's own length via inline style (set per-path below), animated
   through stroke-dashoffset rather than opacity so it reads as the route
   being traced, not just faded in */
.mc-route{
  fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,.9,.3,1);
}
.mc-map-wrap.in .mc-route{stroke-dashoffset:0;}
.mc-route.mc-route-2{transition-delay:.4s;}

/* the ferry crossing gets a distinct look (gold, thicker, with a glow)
   so it visually reads as a different KIND of leg — the whole point of
   the article is that this specific segment behaves differently */
.mc-ferry-route{
  fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1s var(--ease) 1.7s;
}
.mc-map-wrap.in .mc-ferry-route{stroke-dashoffset:0;}
.mc-ferry-glow{
  fill:none;stroke:var(--gold);stroke-width:11;opacity:0;
  transition:opacity .6s var(--ease) 2.1s;
}
.mc-map-wrap.in .mc-ferry-glow{opacity:0.18;}

/* the ferry icon's <g> uses cx/cy-free positioning via CSS transform
   (not an SVG transform="translate(...)" attribute) — CSS transform on
   an SVG element REPLACES any transform attribute rather than composing
   with it, so animating scale() alone on a translate()-positioned group
   wiped out its position entirely, dropping it to the SVG's (0,0)
   origin (the top-left corner) instead of the Caspian crossing. Both
   the translate and the scale now live in the same CSS transform. */
.mc-ferry-icon{
  opacity:0;transform:translate(866px,372px) scale(0.5);transform-origin:866px 372px;
  transition:opacity .5s var(--ease) 2.2s,transform .5s cubic-bezier(.34,1.56,.64,1) 2.2s;
}
.mc-map-wrap.in .mc-ferry-icon{opacity:1;transform:translate(866px,372px) scale(1);}

.mc-city-dot{opacity:0;transform:scale(0.4);transform-origin:center;
  transition:opacity .4s var(--ease),transform .4s cubic-bezier(.34,1.56,.64,1);}
.mc-map-wrap.in .mc-city-dot{opacity:1;transform:scale(1);}
.mc-city-1 .mc-city-dot{transition-delay:.1s;}
.mc-city-2 .mc-city-dot{transition-delay:1.2s;}
.mc-city-3 .mc-city-dot{transition-delay:2.5s;}

.mc-city-ring{opacity:0;transform:scale(0.4);transform-origin:center;
  transition:opacity .4s var(--ease),transform .4s var(--ease);}
.mc-map-wrap.in .mc-city-ring{opacity:0.5;transform:scale(1);}
.mc-city-1 .mc-city-ring{transition-delay:.1s;}
.mc-city-2 .mc-city-ring{transition-delay:1.2s;}
.mc-city-3 .mc-city-ring{transition-delay:2.5s;}
.mc-city-ring{animation:mc-pulse 2.4s ease-out infinite;}
.mc-city-1 .mc-city-ring{animation-delay:1.5s;}
.mc-city-2 .mc-city-ring{animation-delay:2.6s;}
.mc-city-3 .mc-city-ring{animation-delay:3.9s;}
.mc-map-wrap:not(.in) .mc-city-ring{animation:none;}
@keyframes mc-pulse{
  0%{transform:scale(1);opacity:0.6;}
  100%{transform:scale(2.6);opacity:0;}
}

.mc-label{opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
  font-family:'Manrope',sans-serif;font-weight:700;fill:#fff;}
.mc-map-wrap.in .mc-label{opacity:1;transform:translateY(0);}
.mc-city-1 .mc-label{transition-delay:.25s;}
.mc-city-2 .mc-label{transition-delay:1.35s;}
.mc-city-3 .mc-label{transition-delay:2.65s;}
.mc-label-sub{fill:rgba(255,255,255,0.55);font-family:Arial,sans-serif;font-weight:600;}

/* moving cargo indicator: a small dot that travels the whole route,
   looping, once everything else has drawn in — the one purely decorative
   touch, standing in for "cargo is always moving on this route" */
.mc-cargo{
  fill:var(--pure-white);opacity:0;
  offset-path:path("M 130,560 Q 340,500 520,470 Q 650,450 790,460 Q 860,480 940,490 Q 1040,505 1150,470 Q 1230,445 1320,430");
  offset-rotate:0deg;
  transition:opacity .4s var(--ease) 3.2s;
}
.mc-map-wrap.in .mc-cargo{opacity:1;}
.mc-map-wrap.in .mc-cargo{ animation:mc-travel 9s linear 3.4s infinite; }
@keyframes mc-travel{
  0%{offset-distance:0%;}
  100%{offset-distance:100%;}
}
@media (prefers-reduced-motion: reduce){
  .mc-map-wrap.in .mc-cargo{ animation:none; opacity:0; }
}

.mc-legend{
  position:relative;z-index:2;display:flex;gap:20px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid rgba(255,255,255,0.1);
  background:rgba(9,10,32,0.5);
}
.mc-legend-item{display:flex;align-items:center;gap:8px;font-size:0.78rem;color:rgba(255,255,255,0.65);}
.mc-legend-line{width:20px;height:3px;border-radius:2px;}
.mc-legend-line.teal{background:var(--accent);}
.mc-legend-line.gold{background:var(--gold);}

@media (max-width:640px){
  .mc-legend{padding:12px 16px;gap:14px;}
  .mc-legend-item{font-size:0.7rem;}
}