.react-experience {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    --scroll-progress: 0;
    --pointer-x: 50%;
    --pointer-y: 50%;
}

.react-experience::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background:
        linear-gradient(90deg, transparent calc(var(--pointer-x) - 0.0625rem), rgba(230,189,114,0.28) var(--pointer-x), transparent calc(var(--pointer-x) + 0.0625rem)),
        linear-gradient(180deg, transparent calc(var(--pointer-y) - 0.0625rem), rgba(45,186,168,0.18) var(--pointer-y), transparent calc(var(--pointer-y) + 0.0625rem));
    transition: opacity 0.18s ease;
}

.experience-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(var(--scroll-progress) * 100%);
    height: 0.1875rem;
    background: linear-gradient(90deg, #c83a3f, #e6bd72, #2dbaa8);
    box-shadow: 0 0 1.2rem rgba(230,189,114,0.35);
}

.experience-dock {
    position: fixed;
    top: 50%;
    right: 1.1rem;
    transform: translateY(-50%);
    display: grid;
    gap: 0.45rem;
    pointer-events: auto;
}

.experience-dot {
    width: 0.72rem;
    height: 0.72rem;
    border: 0.0625rem solid rgba(255,255,255,0.22);
    border-radius: 0.125rem;
    background: rgba(8,8,8,0.72);
    color: transparent;
    cursor: pointer;
    transition:
        width 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.experience-dot:hover,
.experience-dot.is-active {
    width: 1.6rem;
    border-color: rgba(230,189,114,0.78);
    background: rgba(230,189,114,0.9);
    transform: translateX(-0.2rem);
}

.experience-badge {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.4rem;
    padding: 0 0.8rem;
    border: 0.0625rem solid rgba(255,255,255,0.12);
    border-radius: 0.5rem;
    background: rgba(5,5,5,0.72);
    backdrop-filter: blur(0.75rem);
    color: rgba(243,239,232,0.74);
    font-size: 0.78rem;
    pointer-events: none;
}

.experience-badge strong {
    color: #fff8ee;
    font-weight: 700;
}

.experience-pulse {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.125rem;
    background: #2dbaa8;
    box-shadow: 0 0 1rem rgba(45,186,168,0.72);
}

.react-motion-ready .hero-content,
.react-motion-ready .hero-panel,
.react-motion-ready .nw-content,
.react-motion-ready .nw-visual,
.react-motion-ready .services-header,
.react-motion-ready .services-rail,
.react-motion-ready .studio-header,
.react-motion-ready .studio-manifesto,
.react-motion-ready .projects-header,
.react-motion-ready .projects-footer,
.react-motion-ready .contact-content,
.react-motion-ready .contact-form-wrapper,
.react-motion-ready .service-card,
.react-motion-ready .studio-value,
.react-motion-ready .project-card,
.react-motion-ready .nw-feature-card {
    opacity: 0;
    transform: translateY(1.4rem);
    transition:
        opacity 0.72s ease,
        transform 0.72s ease,
        border-color 0.22s ease,
        background-color 0.22s ease;
}

.react-motion-ready .is-visible {
    opacity: 1;
    transform: translateY(0);
}

.react-motion-ready .service-card:nth-child(2),
.react-motion-ready .studio-value:nth-child(2),
.react-motion-ready .project-card:nth-child(2),
.react-motion-ready .nw-feature-card:nth-child(2) {
    transition-delay: 0.06s;
}

.react-motion-ready .service-card:nth-child(3),
.react-motion-ready .studio-value:nth-child(3),
.react-motion-ready .project-card:nth-child(3),
.react-motion-ready .nw-feature-card:nth-child(3) {
    transition-delay: 0.12s;
}

.react-motion-ready .service-card:nth-child(4),
.react-motion-ready .studio-value:nth-child(4),
.react-motion-ready .project-card:nth-child(4) {
    transition-delay: 0.18s;
}

@media (max-width: 64rem) {
    .experience-dock {
        display: none;
    }

    .experience-badge {
        display: none;
    }
}

@media (pointer: coarse) {
    .react-experience::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .react-experience::before,
    .experience-badge,
    .experience-dock {
        display: none;
    }

    .react-motion-ready .hero-content,
    .react-motion-ready .hero-panel,
    .react-motion-ready .nw-content,
    .react-motion-ready .nw-visual,
    .react-motion-ready .services-header,
    .react-motion-ready .services-rail,
    .react-motion-ready .studio-header,
    .react-motion-ready .studio-manifesto,
    .react-motion-ready .projects-header,
    .react-motion-ready .projects-footer,
    .react-motion-ready .contact-content,
    .react-motion-ready .contact-form-wrapper,
    .react-motion-ready .service-card,
    .react-motion-ready .studio-value,
    .react-motion-ready .project-card,
    .react-motion-ready .nw-feature-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}