.steps-3d-scope {
--color-bg: #faf8f6;
--color-surface: #ffffff;
--color-surface-2: #f5f2ef;
--color-text: #1a1014;
--color-text-soft: #4a3f44;
--color-burg: #800020;
--color-burg-dark: #5a0016;
--color-gold: #a8782e;
--color-gold-light: #c9a96e;
--shadow-card: 0 2px 10px rgba(26, 16, 20, 0.06);
--shadow-card-hover: 0 8px 28px rgba(26, 16, 20, 0.11);
--shadow-number:
0 0 0 4px var(--color-bg),
0 0 0 5px rgba(168, 120, 46, 0.30),
0 0 14px rgba(128, 0, 32, 0.12),
0 4px 16px rgba(10, 3, 5, 0.25);
--border-radius: 12px;
--spacing-xs: 0.5rem;
--spacing-sm: 1.125rem;
--spacing-md: 1.5rem;
--spacing-lg: 1.75rem;
--spacing-xl: 2rem;
--spacing-2xl: 3.75rem;
--spacing-3xl: 5rem;
--ease: cubic-bezier(.4, 0, .2, 1);
font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.steps-3d-scope *,
.steps-3d-scope *::before,
.steps-3d-scope *::after {
box-sizing: border-box;
}
.steps-3d-scope .steps-section {
padding: var(--spacing-3xl) var(--spacing-md);
background: transparent;
}
.steps-3d-scope .steps-stair {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5625rem;
max-width: 900px;
margin: 0 auto;
} .steps-3d-scope .step {
width: 100%;
background: var(--color-surface);
border-radius: var(--border-radius);
padding: 1.5rem 1.75rem 1.5rem calc(1.75rem + 4px);
transition: transform 0.20s var(--ease),
box-shadow 0.20s var(--ease);
box-shadow: var(--shadow-card);
border: 1px solid rgba(128, 0, 32, 0.06);
display: flex;
align-items: center;
gap: 1.75rem;
position: relative;
overflow: hidden;
animation: stepEnter 0.8s both;
} .steps-3d-scope .step::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, var(--color-burg), var(--color-gold-light), transparent);
border-radius: var(--border-radius) var(--border-radius) 0 0;
opacity: 0.45;
transition: opacity 0.20s var(--ease);
} .steps-3d-scope .step::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(to right,
rgba(128, 0, 32, 0.18),
rgba(168, 120, 46, 0.12),
transparent 80%);
border-radius: 0 0 var(--border-radius) var(--border-radius);
opacity: 0.60;
transition: opacity 0.20s var(--ease);
}
.steps-3d-scope .step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.steps-3d-scope .step:hover::before {
opacity: 1;
}
.steps-3d-scope .step:hover::after {
opacity: 1;
} .steps-3d-scope .step:nth-child(odd) {
flex-direction: row-reverse;
padding: 1.5rem calc(1.75rem + 4px) 1.5rem 1.75rem;
}
.steps-3d-scope .step:nth-child(odd)::before {
background: linear-gradient(to left, var(--color-burg), var(--color-gold-light), transparent);
}
.steps-3d-scope .step:nth-child(odd)::after {
background: linear-gradient(to left,
rgba(128, 0, 32, 0.18),
rgba(168, 120, 46, 0.12),
transparent 80%);
} .steps-3d-scope .step-nr {
flex-shrink: 0;
width: 4.375rem;
height: 4.375rem;
border-radius: 50%;
background: radial-gradient(circle at 38% 32%, #3a0a18, #110208);
background-color: #110208;
color: #ede4d8;
font-family: 'Roboto Slab', Georgia, serif;
font-size: 1.6rem;
font-weight: 300;
letter-spacing: 0.02em;
display: grid;
place-items: center;
box-shadow: var(--shadow-number);
transition: transform 0.20s var(--ease);
position: relative;
z-index: 1;
} .steps-3d-scope .step-nr::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.035;
mix-blend-mode: overlay;
pointer-events: none;
} .steps-3d-scope .step-nr::after {
content: "";
position: absolute;
inset: -8px;
border-radius: inherit;
background: radial-gradient(circle, rgba(168, 120, 46, 0.10), transparent 70%);
z-index: -1;
pointer-events: none;
}
.steps-3d-scope .step:hover .step-nr {
transform: scale(1.08);
} .steps-3d-scope .step-txt h3 {
font-family: 'Roboto Slab', Georgia, serif;
font-weight: 300;
font-size: 1.2rem;
letter-spacing: 0.02em;
margin: 0 0 var(--spacing-xs);
color: var(--color-text);
line-height: 1.3;
text-align: left;
position: relative;
padding-bottom: 0.65rem;
} .steps-3d-scope .step-txt h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 1px;
background: linear-gradient(to right, var(--color-gold), transparent);
} .steps-3d-scope .step:nth-child(odd) .step-txt h3 {
text-align: right;
}
.steps-3d-scope .step:nth-child(odd) .step-txt h3::after {
left: auto;
right: 0;
background: linear-gradient(to left, var(--color-gold), transparent);
}
.steps-3d-scope .step-txt p {
margin: 0;
color: var(--color-text-soft);
font-size: 1.05rem;
line-height: 1.55;
text-align: left;
}
.steps-3d-scope .step:nth-child(odd) .step-txt p {
text-align: right;
} .steps-3d-scope .step:nth-child(1)  { animation-delay: 0.1s; }
.steps-3d-scope .step:nth-child(2)  { animation-delay: 0.18s; }
.steps-3d-scope .step:nth-child(3)  { animation-delay: 0.26s; }
.steps-3d-scope .step:nth-child(4)  { animation-delay: 0.34s; }
.steps-3d-scope .step:nth-child(5)  { animation-delay: 0.42s; }
.steps-3d-scope .step:nth-child(6)  { animation-delay: 0.50s; }
.steps-3d-scope .step:nth-child(7)  { animation-delay: 0.58s; }
.steps-3d-scope .step:nth-child(8)  { animation-delay: 0.66s; }
.steps-3d-scope .step:nth-child(9)  { animation-delay: 0.74s; }
.steps-3d-scope .step:nth-child(10) { animation-delay: 0.82s; }
@keyframes stepEnter {
from {
transform: translateY(2.5rem);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} @media (max-width: 768px) {
.steps-3d-scope .steps-section {
padding: var(--spacing-2xl) var(--spacing-md);
background: transparent;
}
.steps-3d-scope .steps-stair {
gap: 1.25rem;
width: 100%;
} .steps-3d-scope .step {
flex-direction: column;
text-align: left;
padding: var(--spacing-xl) 1.5rem 1.75rem;
width: 100%;
max-width: 26.25rem;
margin: 0 auto;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.40);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.50);
}
.steps-3d-scope .step:hover {
transform: none;
} .steps-3d-scope .step::before {
background: linear-gradient(to right, var(--color-burg), var(--color-gold-light), transparent);
opacity: 0.35;
} .steps-3d-scope .step::after {
background: linear-gradient(to right,
rgba(128, 0, 32, 0.10),
rgba(168, 120, 46, 0.06),
transparent 80%);
opacity: 0.50;
}
.steps-3d-scope .step:nth-child(odd) {
flex-direction: column;
padding: var(--spacing-xl) 1.5rem 1.75rem;
}
.steps-3d-scope .step:nth-child(odd)::before {
background: linear-gradient(to right, var(--color-burg), var(--color-gold-light), transparent);
}
.steps-3d-scope .step:nth-child(odd)::after {
background: linear-gradient(to right,
rgba(128, 0, 32, 0.10),
rgba(168, 120, 46, 0.06),
transparent 80%);
} .steps-3d-scope .step-nr {
margin-bottom: var(--spacing-sm);
box-shadow:
0 0 0 4px rgba(255, 255, 255, 0.50),
0 0 0 5px rgba(168, 120, 46, 0.25),
0 0 14px rgba(128, 0, 32, 0.10),
0 4px 12px rgba(10, 3, 5, 0.18);
} .steps-3d-scope .step-txt h3,
.steps-3d-scope .step:nth-child(odd) .step-txt h3 {
text-align: left;
color: var(--color-text);
}
.steps-3d-scope .step-txt h3::after,
.steps-3d-scope .step:nth-child(odd) .step-txt h3::after {
left: 0;
right: auto;
background: linear-gradient(to right, var(--color-gold), transparent);
}
.steps-3d-scope .step-txt p,
.steps-3d-scope .step:nth-child(odd) .step-txt p {
text-align: left;
color: #4a3f44;
}
}