/* ============================================================
   ports.css — компонент темы Kremlin Group
   Сгенерировано split-css.py из dist/css/style.css
   ============================================================ */


.section-ports {
  position: relative;
  z-index: 0
}

.section-ports::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--section-bg,url(../img/services/track.webp)) left/cover no-repeat;
  -webkit-filter: grayscale(.1) brightness(.3) contrast(.9);
  filter: grayscale(.1) brightness(.5) contrast(.9)
}

.section-ports__container {
  position: relative
}

.section-ports__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9375rem;
  max-width: 33.4375rem
}

.section-ports__label {
  font-size: .6875rem;
  text-transform: uppercase;
  color: #d4af37;
  line-height: 1.5;
  letter-spacing: .0625rem;
  font-weight: 700
}

.section-ports__title {
  font-family: Manrope,sans-serif;
  color: #fff;
  line-height: 1.2;
  font-weight: 700
}

.section-ports__subtitle {
  font-size: 1rem;
  color: #fff;
  opacity: .6;
  line-height: 1.5
}

.section-ports__body:not(:last-child) {
  margin-bottom: 3.75rem
}

.section-ports__list {
  counter-reset: item;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(9.375rem,1fr));
  gap: 2rem
}

.section-ports__list>.section-ports__item {
  opacity: 0;
  -webkit-transform: translate3d(0,1.875rem,0);
  transform: translate3d(0,1.875rem,0);
  transition: opacity .8s cubic-bezier(.33,1,.68,1),-webkit-transform .8s cubic-bezier(.33,1,.68,1);
  transition: opacity .8s cubic-bezier(.33,1,.68,1),transform .8s cubic-bezier(.33,1,.68,1);
  transition: opacity .8s cubic-bezier(.33,1,.68,1),transform .8s cubic-bezier(.33,1,.68,1),-webkit-transform .8s cubic-bezier(.33,1,.68,1)
}

.section-ports__list._watcher-view>.section-ports__item {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0)
}

.section-ports__list._watcher-view>.section-ports__item:nth-child(1) {
  transition-delay: 0s
}

.section-ports__list._watcher-view>.section-ports__item:nth-child(2) {
  transition-delay: .1s
}

.section-ports__list._watcher-view>.section-ports__item:nth-child(3) {
  transition-delay: .2s
}

.section-ports__list._watcher-view>.section-ports__item:nth-child(4) {
  transition-delay: .3s
}

.section-ports__list._watcher-view>.section-ports__item:nth-child(5) {
  transition-delay: .4s
}

.section-ports__list._watcher-view>.section-ports__item:nth-child(6) {
  transition-delay: .5s
}

.section-ports__list._watcher-view>.section-ports__item:nth-child(7) {
  transition-delay: .6s
}

.section-ports__list._watcher-view>.section-ports__item:nth-child(8) {
  transition-delay: .7s
}

@keyframes atlasRouteDraw {
  0% {
    stroke-dashoffset: 200;
    opacity: 0
  }
  20% {
    opacity: 1
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1
  }
}

@keyframes atlasPinIn {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%,calc(-50% + .375rem)) scale(.6);
    transform: translate(-50%,calc(-50% + .375rem)) scale(.6)
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1)
  }
}

@keyframes atlasLabelIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(.25rem);
    transform: translateY(.25rem)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes atlasDestPulse {
  0%,
  100% {
    box-shadow: 0 0 0 .375rem rgba(195,151,80,.18),0 0 2.25rem rgba(232,201,132,.6)
  }
  50% {
    box-shadow: 0 0 0 .875rem rgba(195,151,80,.04),0 0 3.75rem rgba(232,201,132,.85)
  }
}

.atlas {
  position: relative;
  overflow: hidden;
  border: .0625rem solid rgba(244,241,234,.1);
  height: 40rem;
  color: #f4f1ea
}

.atlas__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 52% 20%,rgba(195,151,80,.18) 0,transparent 45%);
  pointer-events: none;
  z-index: 2
}

.atlas__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) .0625rem,transparent .0625rem),linear-gradient(90deg,rgba(255,255,255,.035) .0625rem,transparent .0625rem);
  background-size: 3.75rem 3.75rem;
  pointer-events: none;
  z-index: 3
}

.atlas__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible
}

.atlas__route {
  fill: none;
  stroke: url(#atlasRouteGradient);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 4 4;
  stroke-dashoffset: 200;
  vector-effect: non-scaling-stroke;
  opacity: 0
}

.atlas._watcher-view .atlas__route {
  -webkit-animation: atlasRouteDraw 1.6s cubic-bezier(.4,0,.2,1) forwards;
  animation: atlasRouteDraw 1.6s cubic-bezier(.4,0,.2,1) forwards
}

.atlas._watcher-view .atlas__route:nth-child(2) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s
}

.atlas._watcher-view .atlas__route:nth-child(3) {
  -webkit-animation-delay: .09s;
  animation-delay: .09s
}

.atlas._watcher-view .atlas__route:nth-child(4) {
  -webkit-animation-delay: .18s;
  animation-delay: .18s
}

.atlas._watcher-view .atlas__route:nth-child(5) {
  -webkit-animation-delay: .27s;
  animation-delay: .27s
}

.atlas._watcher-view .atlas__route:nth-child(6) {
  -webkit-animation-delay: .36s;
  animation-delay: .36s
}

.atlas._watcher-view .atlas__route:nth-child(7) {
  -webkit-animation-delay: .45s;
  animation-delay: .45s
}

.atlas._watcher-view .atlas__route:nth-child(8) {
  -webkit-animation-delay: .54s;
  animation-delay: .54s
}

.atlas._watcher-view .atlas__route:nth-child(9) {
  -webkit-animation-delay: .63s;
  animation-delay: .63s
}

.atlas._watcher-view .atlas__route:nth-child(10) {
  -webkit-animation-delay: .72s;
  animation-delay: .72s
}

.atlas._watcher-view .atlas__route:nth-child(11) {
  -webkit-animation-delay: .81s;
  animation-delay: .81s
}

.atlas._watcher-view .atlas__route:nth-child(12) {
  -webkit-animation-delay: .9s;
  animation-delay: .9s
}

.atlas._watcher-view .atlas__route:nth-child(13) {
  -webkit-animation-delay: .99s;
  animation-delay: .99s
}

.atlas._watcher-view .atlas__route:nth-child(14) {
  -webkit-animation-delay: 1.08s;
  animation-delay: 1.08s
}

.atlas._watcher-view .atlas__route:nth-child(15) {
  -webkit-animation-delay: 1.17s;
  animation-delay: 1.17s
}

.atlas__pins {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 5
}

.atlas__pin {
  position: absolute;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background-color: #e8c984;
  box-shadow: 0 0 0 .25rem rgba(195,151,80,.18),0 0 .875rem rgba(232,201,132,.6);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  opacity: 0
}

.atlas._watcher-view .atlas__pin {
  -webkit-animation: atlasPinIn .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation: atlasPinIn .5s cubic-bezier(.2,.7,.3,1) forwards
}

.atlas__pin--target {
  width: 1.25rem;
  height: 1.25rem;
  background-color: #f4f1ea;
  border: .125rem solid #c39750;
  box-shadow: 0 0 0 .375rem rgba(195,151,80,.18),0 0 2.25rem rgba(232,201,132,.6)
}

.atlas._watcher-view .atlas__pin--target {
  -webkit-animation: atlasPinIn .5s cubic-bezier(.2,.7,.3,1) .8s forwards,atlasDestPulse 2.6s ease-out 1.4s infinite;
  animation: atlasPinIn .5s cubic-bezier(.2,.7,.3,1) .8s forwards,atlasDestPulse 2.6s ease-out 1.4s infinite
}

.atlas__pin--spb {
  left: 56%;
  top: 24%
}

.atlas__pin--newyork {
  left: 22%;
  top: 40%
}

.atlas__pin--losangeles {
  left: 8%;
  top: 51%
}

.atlas__pin--miami {
  left: 21%;
  top: 58%
}

.atlas__pin--toronto {
  left: 19%;
  top: 31%
}

.atlas__pin--montreal {
  left: 27%;
  top: 34%
}

.atlas__pin--vancouver {
  left: 8%;
  top: 27%
}

.atlas__pin--rotterdam {
  left: 44%;
  top: 32%
}

.atlas__pin--hamburg {
  left: 52%;
  top: 27%
}

.atlas__pin--milan {
  left: 48%;
  top: 42%
}

.atlas__pin--dubai {
  left: 62%;
  top: 55%
}

.atlas__pin--shanghai {
  left: 76%;
  top: 48%
}

.atlas__pin--seoul {
  left: 84%;
  top: 40%
}

.atlas._watcher-view .atlas__pin:nth-child(2) {
  -webkit-animation-delay: .8s;
  animation-delay: .8s
}

.atlas._watcher-view .atlas__pin:nth-child(3) {
  -webkit-animation-delay: .89s;
  animation-delay: .89s
}

.atlas._watcher-view .atlas__pin:nth-child(4) {
  -webkit-animation-delay: .98s;
  animation-delay: .98s
}

.atlas._watcher-view .atlas__pin:nth-child(5) {
  -webkit-animation-delay: 1.07s;
  animation-delay: 1.07s
}

.atlas._watcher-view .atlas__pin:nth-child(6) {
  -webkit-animation-delay: 1.16s;
  animation-delay: 1.16s
}

.atlas._watcher-view .atlas__pin:nth-child(7) {
  -webkit-animation-delay: 1.25s;
  animation-delay: 1.25s
}

.atlas._watcher-view .atlas__pin:nth-child(8) {
  -webkit-animation-delay: 1.34s;
  animation-delay: 1.34s
}

.atlas._watcher-view .atlas__pin:nth-child(9) {
  -webkit-animation-delay: 1.43s;
  animation-delay: 1.43s
}

.atlas._watcher-view .atlas__pin:nth-child(10) {
  -webkit-animation-delay: 1.52s;
  animation-delay: 1.52s
}

.atlas._watcher-view .atlas__pin:nth-child(11) {
  -webkit-animation-delay: 1.61s;
  animation-delay: 1.61s
}

.atlas._watcher-view .atlas__pin:nth-child(12) {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s
}

.atlas._watcher-view .atlas__pin:nth-child(13) {
  -webkit-animation-delay: 1.79s;
  animation-delay: 1.79s
}

.atlas._watcher-view .atlas__pin:nth-child(14) {
  -webkit-animation-delay: 1.88s;
  animation-delay: 1.88s
}

.atlas._watcher-view .atlas__pin:nth-child(15) {
  -webkit-animation-delay: 1.97s;
  animation-delay: 1.97s
}

.atlas__pin-name {
  position: absolute;
  left: 1rem;
  top: -.375rem;
  font-size: .625rem;
  color: rgba(244,241,234,.85);
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0
}

.atlas__pin--spb .atlas__pin-name {
  top: -2.25rem;
  font-family: Manrope,sans-serif;
  font-weight: 600
}

.atlas._watcher-view .atlas__pin-name {
  -webkit-animation: atlasLabelIn .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation: atlasLabelIn .5s cubic-bezier(.2,.7,.3,1) forwards
}

.atlas._watcher-view .atlas__pin:nth-child(2) .atlas__pin-name {
  -webkit-animation-delay: .9s;
  animation-delay: .9s
}

.atlas._watcher-view .atlas__pin:nth-child(3) .atlas__pin-name {
  -webkit-animation-delay: .99s;
  animation-delay: .99s
}

.atlas._watcher-view .atlas__pin:nth-child(4) .atlas__pin-name {
  -webkit-animation-delay: 1.08s;
  animation-delay: 1.08s
}

.atlas._watcher-view .atlas__pin:nth-child(5) .atlas__pin-name {
  -webkit-animation-delay: 1.17s;
  animation-delay: 1.17s
}

.atlas._watcher-view .atlas__pin:nth-child(6) .atlas__pin-name {
  -webkit-animation-delay: 1.26s;
  animation-delay: 1.26s
}

.atlas._watcher-view .atlas__pin:nth-child(7) .atlas__pin-name {
  -webkit-animation-delay: 1.35s;
  animation-delay: 1.35s
}

.atlas._watcher-view .atlas__pin:nth-child(8) .atlas__pin-name {
  -webkit-animation-delay: 1.44s;
  animation-delay: 1.44s
}

.atlas._watcher-view .atlas__pin:nth-child(9) .atlas__pin-name {
  -webkit-animation-delay: 1.53s;
  animation-delay: 1.53s
}

.atlas._watcher-view .atlas__pin:nth-child(10) .atlas__pin-name {
  -webkit-animation-delay: 1.62s;
  animation-delay: 1.62s
}

.atlas._watcher-view .atlas__pin:nth-child(11) .atlas__pin-name {
  -webkit-animation-delay: 1.71s;
  animation-delay: 1.71s
}

.atlas._watcher-view .atlas__pin:nth-child(12) .atlas__pin-name {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s
}

.atlas._watcher-view .atlas__pin:nth-child(13) .atlas__pin-name {
  -webkit-animation-delay: 1.89s;
  animation-delay: 1.89s
}

.atlas._watcher-view .atlas__pin:nth-child(14) .atlas__pin-name {
  -webkit-animation-delay: 1.98s;
  animation-delay: 1.98s
}

.atlas._watcher-view .atlas__pin:nth-child(15) .atlas__pin-name {
  -webkit-animation-delay: 2.07s;
  animation-delay: 2.07s
}

.atlas._watcher-view .atlas__pin--target .atlas__pin-name {
  -webkit-animation-delay: .9s;
  animation-delay: .9s
}

.atlas__pin-meta {
  display: none
}

.atlas__pin--target .atlas__pin-meta {
  display: block;
  position: absolute;
  left: 2.25rem;
  top: -.3125rem;
  font-size: .625rem;
  letter-spacing: .06em;
  color: rgba(244,241,234,.55);
  white-space: nowrap;
  opacity: 0
}

.atlas._watcher-view .atlas__pin--target .atlas__pin-meta {
  -webkit-animation: atlasLabelIn .5s cubic-bezier(.2,.7,.3,1) 1s forwards;
  animation: atlasLabelIn .5s cubic-bezier(.2,.7,.3,1) 1s forwards
}

.item-ports {
  color: #fff;
  position: relative;
  counter-increment: item;
  padding-top: 1.5625rem;
  padding-left: .3125rem;
  display: flex;
  flex-direction: column
}

.item-ports::before {
  color: #d4af37;
  font-weight: 700;
  position: absolute;
  top: -.625rem;
  left: 0;
  padding: .3125rem;
  content: counter(item,decimal-leading-zero)
}

.item-ports::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: .0625rem;
  width: 85%;
  background-color: rgba(255,255,255,.2)
}

.item-ports__title {
  font-size: 1.125rem;
  font-weight: 800;
  font-family: Manrope,sans-serif;
  text-transform: capitalize
}

.item-ports__title:not(:last-child) {
  margin-bottom: 1.5625rem
}

.item-ports__city {
  font-size: .875rem;
  color: rgba(255,255,255,.85);
  padding-top: .625rem;
  padding-bottom: .625rem;
  border-bottom: .0625rem solid #fff
}

@media (min-width:91.875em) {
.section-ports__container {
    padding-top: 6.875rem
  }
  .section-ports__container {
    padding-bottom: 6.875rem
  }
  .section-ports__header:not(:last-child) {
    margin-bottom: 3.125rem
  }
  .section-ports__title {
    font-size: 2.5rem
  }
  .atlas__pin--spb .atlas__pin-name {
    font-size: 1.5rem
  }
  .item-ports::before {
    font-size: .75rem
  }
}

@media (max-width:20em) {
.section-ports__container {
    padding-top: 3.125rem
  }
  .section-ports__container {
    padding-bottom: 3.125rem
  }
  .section-ports__header:not(:last-child) {
    margin-bottom: 2.1875rem
  }
  .section-ports__title {
    font-size: 1.75rem
  }
  .atlas__pin--spb .atlas__pin-name {
    font-size: .875rem
  }
  .item-ports::before {
    font-size: .625rem
  }
}

@media (max-width:61.99875em) {
.atlas {
    height: 32.5rem
  }
}

@media (max-width:47.99875em) {
.section-ports__subtitle {
    font-size: .875rem
  }
  .atlas {
    height: 26.25rem
  }
}

@media (max-width:29.99875em) {
.atlas__pin--spb .atlas__pin-name {
    left: -1rem
  }
  .atlas__pin--target .atlas__pin-meta {
    display: none
  }
}

@media (min-width:20em)and (max-width:91.875em) {
.section-ports__container {
    padding-top: clamp(3.125rem ,2.0815217391rem + 5.2173913043vw ,6.875rem)
  }
  .section-ports__container {
    padding-bottom: clamp(3.125rem ,2.0815217391rem + 5.2173913043vw ,6.875rem)
  }
  .section-ports__header:not(:last-child) {
    margin-bottom: clamp(2.1875rem ,1.9266304348rem + 1.3043478261vw ,3.125rem)
  }
  .section-ports__title {
    font-size: clamp(1.75rem ,1.5413043478rem + 1.0434782609vw ,2.5rem)
  }
  .atlas__pin--spb .atlas__pin-name {
    font-size: clamp(.875rem ,.7010869565rem + .8695652174vw ,1.5rem)
  }
  .item-ports::before {
    font-size: clamp(.625rem ,.5902173913rem + .1739130435vw ,.75rem)
  }
}

@media (prefers-reduced-motion:reduce) {
.section-ports__list>.section-ports__item {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    transition: none
  }
  .atlas__route {
    -webkit-animation: none!important;
    animation: none!important;
    opacity: 1;
    stroke-dashoffset: 0
  }
  .atlas__pin,
  .atlas__pin-meta,
  .atlas__pin-name {
    -webkit-animation: none!important;
    animation: none!important;
    opacity: 1;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
  }
  .atlas__pin--target {
    -webkit-animation: none!important;
    animation: none!important
  }
}