/**
 * Selected work — Era of tech banner (code, social, AI/ML textures)
 */

.home-selected-work .feature-split {
    align-items: center;
}

.home-selected-work .feature-split__visual {
    width: 100%;
    min-width: 0;
}

.selected-work-era {
    width: 100%;
    max-width: none;
    margin-left: auto;
}

.selected-work-era__frame {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0.45rem 0.55rem 0.45rem 0.65rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: linear-gradient(165deg, rgba(46, 107, 255, 0.08) 0%, var(--color-surface-1) 55%);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.selected-work-era__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 72% 50%, rgba(57, 198, 244, 0.1), transparent 48%);
    pointer-events: none;
}

.selected-work-era__viewport {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 6.25rem;
}

.selected-work-era__canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: calc(var(--radius-md) - 2px);
}

.selected-work-era__texture {
    position: absolute;
    inset: 0;
    opacity: 0.9;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 11px,
            rgba(57, 198, 244, 0.04) 11px,
            rgba(57, 198, 244, 0.04) 12px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 11px,
            rgba(108, 77, 255, 0.035) 11px,
            rgba(108, 77, 255, 0.035) 12px
        ),
        radial-gradient(ellipse 80% 120% at 30% 50%, rgba(108, 77, 255, 0.12), transparent 55%),
        radial-gradient(ellipse 70% 100% at 78% 40%, rgba(57, 198, 244, 0.1), transparent 50%);
    mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
}

.selected-work-era__scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(37, 184, 245, 0.06) 45%,
        rgba(108, 77, 255, 0.08) 55%,
        transparent 100%
    );
    animation: selectedWorkEraScan 6s ease-in-out infinite;
    pointer-events: none;
}

.selected-work-era__neural {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

.selected-work-era__neural-path {
    stroke-dasharray: 6 8;
    animation: selectedWorkEraDash 14s linear infinite;
}

.selected-work-era__neural-node {
    fill: #25b8f5;
    opacity: 0.75;
    animation: selectedWorkEraNodePulse 2.4s ease-in-out infinite;
}

.selected-work-era__neural-node:nth-child(5) {
    animation-delay: -0.4s;
}

.selected-work-era__neural-node:nth-child(6) {
    animation-delay: -0.9s;
}

.selected-work-era__neural-node:nth-child(7) {
    animation-delay: -1.3s;
}

.selected-work-era__neural-node:nth-child(8) {
    animation-delay: -1.8s;
}

.selected-work-era__code-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
    padding: 0 0.5rem;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.selected-work-era__code-track {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    width: max-content;
    font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
    font-size: 0.62rem;
    line-height: 1;
    color: rgba(57, 198, 244, 0.55);
    white-space: nowrap;
    animation: selectedWorkEraCodeDrift 28s linear infinite;
}

.selected-work-era__code-track span:nth-child(odd) {
    color: rgba(108, 77, 255, 0.5);
}

.selected-work-era__code-track--reverse {
    animation-duration: 32s;
    animation-direction: reverse;
    opacity: 0.82;
    font-size: 0.58rem;
}

.selected-work-era__social {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.selected-work-era__social-item {
    position: absolute;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(46, 107, 255, 0.35);
    background: rgba(6, 17, 27, 0.88);
    color: var(--color-accent-primary-edge);
    font-size: 0.82rem;
    box-shadow: 0 4px 14px rgba(5, 11, 18, 0.4);
    animation: selectedWorkEraSocialFloat 5s ease-in-out infinite;
}

.selected-work-era__social-item--1 {
    left: 8%;
    top: 18%;
    animation-delay: 0s;
}

.selected-work-era__social-item--2 {
    left: 22%;
    bottom: 16%;
    animation-delay: -1.1s;
}

.selected-work-era__social-item--3 {
    left: 48%;
    top: 12%;
    animation-delay: -2s;
}

.selected-work-era__social-item--4 {
    right: 28%;
    bottom: 14%;
    animation-delay: -0.6s;
}

.selected-work-era__social-item--5 {
    right: 10%;
    top: 22%;
    animation-delay: -1.7s;
}

.selected-work-era__ml-tags {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    pointer-events: none;
}

.selected-work-era__ml-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(57, 198, 244, 0.28);
    background: rgba(46, 107, 255, 0.1);
    font-family: var(--font-body);
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent-primary-edge);
}

.selected-work-era__ml-tag i {
    font-size: 0.65rem;
}

.selected-work-era__timeline {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    list-style: none;
    flex-shrink: 0;
    margin: 0;
    padding: 0.15rem 0 0.15rem 0.75rem;
    border-top: none;
    border-left: 1px solid var(--color-border-subtle);
    min-width: 4.5rem;
}

.selected-work-era__timeline li {
    flex: none;
    text-align: left;
}

.selected-work-era__timeline span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.selected-work-era__timeline li.is-active span {
    color: var(--color-accent-primary-edge);
}

.selected-work-era__timeline li.is-active span::before {
    content: "";
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--color-accent-primary-edge);
    box-shadow: 0 0 8px rgba(57, 198, 244, 0.55);
    flex-shrink: 0;
}

@keyframes selectedWorkEraCodeDrift {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes selectedWorkEraSocialFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes selectedWorkEraScan {
    0%,
    100% {
        opacity: 0.35;
        transform: translateX(-8%);
    }
    50% {
        opacity: 0.75;
        transform: translateX(8%);
    }
}

@keyframes selectedWorkEraDash {
    to {
        stroke-dashoffset: -120;
    }
}

@keyframes selectedWorkEraNodePulse {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 1;
    }
}

@media (max-width: 991.98px) {
    .selected-work-era {
        margin: var(--space-5) auto 0;
    }

    .selected-work-era__frame {
        max-width: 28rem;
        margin-left: auto;
        margin-right: auto;
    }

    .selected-work-era__social-item--5 {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .selected-work-era__viewport {
        height: 5.5rem;
    }

    .selected-work-era__ml-tags {
        display: none;
    }

    .selected-work-era__social-item {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.72rem;
    }

    .selected-work-era__timeline {
        min-width: 3.75rem;
        padding-left: 0.55rem;
    }

    .selected-work-era__timeline span {
        font-size: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .selected-work-era__code-track,
    .selected-work-era__social-item,
    .selected-work-era__scan,
    .selected-work-era__neural-path,
    .selected-work-era__neural-node {
        animation: none !important;
    }
}