html { scroll-behavior: smooth; }
.hero-pattern {
    background-image: radial-gradient(#e7e5e4 1px, transparent 1px);
    background-size: 24px 24px;
    animation: drift 18s linear infinite;
}
.story-item {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(2px);
    transition: opacity 800ms ease, transform 900ms ease, filter 900ms ease;
    transition-delay: var(--story-delay, 0ms);
}
.story-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.story-fade-in {
    transform: translateY(8px);
}
.story-rise {
    transform: translateY(24px);
}
.story-tilt {
    transform: translateY(24px) rotate(-4deg);
}
.story-pop {
    transform: translateY(20px) scale(0.96);
}
.story-sway {
    transform: translateY(20px) rotate(4deg);
}
.story-orbit {
    transform: translateY(20px) scale(0.98);
}
.story-item.is-visible.story-tilt {
    transform: translateY(0) rotate(0deg);
}
.story-item.is-visible.story-pop {
    transform: translateY(0) scale(1);
}
.story-item.is-visible.story-sway {
    transform: translateY(0) rotate(0deg);
}
.story-item.is-visible.story-orbit {
    transform: translateY(0) scale(1);
}

.story-progress {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 14px;
    z-index: 30;
}
.story-dot {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(120, 113, 108, 0.6);
    background: rgba(250, 250, 249, 0.85);
    transition: transform 250ms ease, border-color 250ms ease, background 250ms ease;
}
.story-dot span {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a8a29e;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 250ms ease;
}
.story-dot.is-active {
    border-color: #57534e;
    background: #27272a;
    transform: scale(1.2);
}
.story-dot.is-active span {
    opacity: 1;
    color: #57534e;
}
.story-dot:hover span {
    opacity: 1;
}

.story-block {
    display: grid;
    gap: 48px;
    align-items: start;
}
.story-media {
    position: relative;
}
.story-copy {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.story-step {
    position: relative;
    padding: 20px 20px 20px 28px;
    border-left: 2px solid #e7e5e4;
    border-radius: 14px;
    background: rgba(253, 252, 248, 0.6);
}
.story-step::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 26px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #f5f5f4;
    border: 2px solid #d6d3d1;
}
.story-step.is-active {
    border-color: #a8a29e;
    background: #fafaf9;
    box-shadow: 0 18px 40px rgba(120, 113, 108, 0.12);
}
.story-step.is-active::before {
    background: #a8a29e;
    border-color: #a8a29e;
}
.story-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #a8a29e;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .story-progress { display: flex; }
    .story-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .story-media { position: sticky; top: 120px; }
    .story-block.story-reverse .story-media { order: 2; }
    .story-block.story-reverse .story-copy { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-pattern { animation: none; }
    .story-item {
        transition: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes drift {
    0% { background-position: 0 0; }
    50% { background-position: 40px 24px; }
    100% { background-position: 0 0; }
}