.pt-path-wrap {
max-width: 1600px;
margin: 0 auto;
padding: 50px 24px;
}
.pt-path-stage {
position: relative;
width: 100%;
height: 1300px;
}
.pt-path-svg {
width: 100%;
height: 100%;
display: block;
} .pt-path-icons image {
pointer-events: none;
} .pt-step {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: #ffffff;
border: 3px solid #5B6E74;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #2b2b2b;
transform: translate(-50%, -50%) scale(0.9);
transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.4s ease, box-shadow 0.4s ease;
opacity: 0;
z-index: 10;
cursor: pointer;
user-select: none;
}
.pt-step.is-visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
} .pt-step-title {
transition: color 0.3s ease;
line-height: 1.3;
}
.pt-step:hover .pt-step-title,
.pt-step.is-active .pt-step-title {
color: #e3010f;
} .pt-step.is-active {
border-color: #e3010f;
box-shadow: 0 0 0 6px rgba(227, 1, 15, 0.08), 0 12px 30px rgba(40, 50, 55, 0.06);
}
.pt-step.is-active::before {
content: "";
position: absolute;
inset: -12px;
border-radius: 50%;
border: 1px solid rgba(227, 1, 15, 0.25);
animation: ptPulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes ptPulse {
0%   { transform: scale(0.96); opacity: 0.6; }
70%  { transform: scale(1.18); opacity: 0; }
100% { transform: scale(1.18); opacity: 0; }
} .pt-info-box {
position: absolute;
width: 380px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 30px 70px rgba(40, 50, 55, 0.10), 0 6px 18px rgba(40, 50, 55, 0.06);
overflow: hidden;
z-index: 15;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.pt-info-box.is-ready {
opacity: 1;
transform: translateY(0);
} .pt-info-box--top {
top: 40px;
left: -24px;
}
.pt-info-box--bottom {
bottom: 40px;
right: -24px;
} .pt-info-image {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: #d8d6d2;
overflow: hidden;
}
.pt-info-image-inner {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.04);
transition: opacity 0.6s ease, transform 1.2s ease;
}
.pt-info-image-inner.is-active {
opacity: 1;
transform: scale(1);
} .pt-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 18px;
color: rgba(255,255,255,0.85);
letter-spacing: 0.12em;
text-transform: uppercase;
background-size: cover;
background-position: center;
}
.pt-placeholder span {
position: relative;
z-index: 2;
text-align: center;
padding: 0 20px;
}
.pt-placeholder::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
z-index: 1;
}
.pt-ph-1 { background: linear-gradient(135deg, #8a7e6e 0%, #5d544a 100%); }
.pt-ph-2 { background: linear-gradient(135deg, #6e7a82 0%, #4a5560 100%); }
.pt-ph-3 { background: linear-gradient(135deg, #a8927c 0%, #6e5d4a 100%); }
.pt-ph-4 { background: linear-gradient(135deg, #7a6e5c 0%, #4d4434 100%); }
.pt-ph-5 { background: linear-gradient(135deg, #8a8a8a 0%, #5d5d5d 100%); } .pt-info-content {
padding: 28px 32px 32px;
position: relative;
}
.pt-info-slide {
position: absolute;
top: 28px;
left: 32px;
right: 32px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
.pt-info-slide.is-active {
position: relative;
top: 0; left: 0; right: 0;
opacity: 1;
transform: translateY(0);
transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
pointer-events: auto;
}
.pt-info-num {
display: inline-block;
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-style: normal;
font-size: 12px;
color: #e3010f;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 8px;
}
.pt-info-title {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 28px;
color: #2b2b2b;
line-height: 1.2;
margin-bottom: 16px;
letter-spacing: 0.01em;
}
.pt-info-text {
font-family: "Open Sans", sans-serif;
font-size: 14.5px;
line-height: 1.7;
color: #5B6E74;
} .pt-info-hint {
position: absolute;
top: 14px;
right: 18px;
font-family: "Open Sans", sans-serif;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(91, 110, 116, 0.55);
z-index: 3;
} @media (max-width: 1200px) {
.pt-path-stage { height: 780px; }
}
@media (max-width: 1024px) {
.pt-path-stage { height: 680px; }
.pt-step {
width: 125px;
height: 125px;
font-size: 12px;
}
.pt-info-box {
width: 320px;
}
} .pt-mobile {
display: none;
}
@media (max-width: 768px) {
.pt-path-stage {
display: none;
}
.pt-mobile {
--pt-m-marker: 44px; --pt-m-col: 16px; --pt-m-gap: 56px; --pt-m-icon: 20px; display: grid;
row-gap: var(--pt-m-gap);
margin: 0;
padding: 0;
list-style: none;
}
.pt-m-step {
position: relative;
display: grid;
grid-template-columns: var(--pt-m-marker) minmax(0, 1fr);
column-gap: var(--pt-m-col);
align-items: start;
margin: 0;
padding: 0;
list-style: none;
} .pt-m-marker {
position: relative;
z-index: 2;
width: var(--pt-m-marker);
height: var(--pt-m-marker);
border-radius: 50%;
background: #ffffff;
border: 2px solid #5B6E74;
display: flex;
align-items: center;
justify-content: center;
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
color: #2b2b2b;
transition: border-color 0.4s ease, color 0.3s ease, box-shadow 0.4s ease;
}
.pt-m-step.is-active .pt-m-marker {
border-color: #e3010f;
color: #e3010f;
box-shadow: 0 0 0 5px rgba(227, 1, 15, 0.08), 0 8px 20px rgba(40, 50, 55, 0.06);
}
.pt-m-step.is-active .pt-m-marker::before {
content: "";
position: absolute;
inset: -9px;
border-radius: 50%;
border: 1px solid rgba(227, 1, 15, 0.25);
animation: ptPulse 2.4s ease-out infinite;
pointer-events: none;
} .pt-m-rail {
position: absolute;
left: calc(var(--pt-m-marker) / 2 - var(--pt-m-icon) / 2);
width: var(--pt-m-icon);
top: calc(var(--pt-m-marker) + 8px);
bottom: calc(-1 * var(--pt-m-gap) + 8px);
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.pt-m-rail-icon {
display: block;
flex: none;
width: var(--pt-m-icon);
height: var(--pt-m-icon);
background: var(--pt-icon) center / contain no-repeat;
transform: rotate(90deg); opacity: 0.16;
transition: opacity 0.5s ease;
}
.pt-m-rail-icon.is-on {
opacity: 1;
} .pt-m-card {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 20px 44px rgba(40, 50, 55, 0.08), 0 4px 12px rgba(40, 50, 55, 0.05);
overflow: hidden;
}
.pt-m-media {
position: relative;
aspect-ratio: 4 / 3;
background: #d8d6d2;
overflow: hidden;
}
.pt-m-media .pt-m-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
}
.pt-m-content {
padding: 22px 22px 26px;
} .pt-mobile .pt-info-num {
margin-bottom: 8px;
}
.pt-mobile .pt-info-title {
font-size: 23px;
line-height: 1.2;
margin: 0 0 10px;
}
.pt-mobile .pt-info-text {
font-size: 15px;
line-height: 1.65;
margin: 0;
}
} @media (max-width: 360px) {
.pt-mobile {
--pt-m-marker: 38px;
--pt-m-col: 12px;
--pt-m-icon: 18px;
}
.pt-m-marker {
font-size: 11px;
}
.pt-m-content {
padding: 20px 18px 22px;
}
.pt-mobile .pt-info-title {
font-size: 21px;
}
} @media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
.pt-mobile.is-enhanced .pt-m-marker {
opacity: 0;
transform: scale(0.85);
transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.4s ease, color 0.3s ease, box-shadow 0.4s ease;
}
.pt-mobile.is-enhanced .pt-m-card {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s ease 0.1s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}
.pt-mobile.is-enhanced .pt-m-img {
transform: scale(1.06);
transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}
.pt-mobile.is-enhanced .pt-m-step.is-inview .pt-m-marker {
opacity: 1;
transform: none;
}
.pt-mobile.is-enhanced .pt-m-step.is-inview .pt-m-card {
opacity: 1;
transform: none;
}
.pt-mobile.is-enhanced .pt-m-step.is-inview .pt-m-img {
transform: scale(1);
}
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
.pt-m-step.is-active .pt-m-marker::before {
animation: none;
opacity: 0;
}
.pt-m-marker,
.pt-m-rail-icon {
transition: none;
}
}