/* Shared layered project cover previews (home + /projects) */

.feature-link-block {
    display: block;
    color: inherit;
}

.feature-image,
.feature-stage {
    position: relative;
    overflow: hidden;
    background: #111;
    --mx: 0px;
    --my: 0px;
}

.feature-stage {
    aspect-ratio: 16 / 9;
    isolation: isolate;
}

.feature-stage-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.feature-stage--osnova .feature-stage-bg {
    background:
        linear-gradient(180deg, #8f57ef 0%, #8249e7 48%, #6730d7 100%);
}

.feature-stage--apex .feature-stage-bg {
    background:
        radial-gradient(circle at 78% 62%, rgb(255 73 29 / 20%), transparent 36%),
        #0e0e0f;
}

.feature-stage--osnova,
.feature-stage--apex {
    color: #f5f5f2;
    container-type: inline-size;
}

.feature-stage--osnova picture {
    display: contents;
}

.feature-stage-meta {
    position: absolute;
    z-index: 5;
    top: 4.5%;
    left: 3.5%;
    right: 3.5%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-size: clamp(7px, 1.35cqi, 13px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    pointer-events: none;
}

.feature-stage-meta > :last-child {
    justify-self: end;
}

.feature-stage-shv {
    justify-self: center;
    font-size: 1.35em;
    font-weight: 750;
    letter-spacing: -0.06em;
}

.feature-stage-shv sup {
    position: relative;
    top: -0.4em;
    margin-left: 0.1em;
    font-size: 0.35em;
}

.feature-stage-intro {
    position: absolute;
    z-index: 5;
    top: 22%;
    left: 3.5%;
    width: min(46%, 420px);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    pointer-events: none;
}

.feature-stage-eyebrow {
    margin: 0 0 0.9em;
    color: #ff5b2f;
    font-size: clamp(6px, 1.1cqi, 11px);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.feature-stage--apex .feature-stage-wordmark {
    position: relative;
    left: auto;
    top: auto;
    width: min(88%, 260px);
    height: auto;
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
}

.feature-stage-desc {
    margin: 1.1em 0 0;
    font-size: clamp(9px, 2.05cqi, 20px);
    font-weight: 420;
    line-height: 1.32;
    letter-spacing: -0.03em;
}

.feature-stage-scope {
    margin: 1.35em 0 0;
    color: rgb(245 245 242 / 62%);
    font-size: clamp(5px, 0.95cqi, 10px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.feature-case.is-preview-in .feature-stage-meta {
    animation: feature-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.feature-case.is-preview-in .feature-stage-intro {
    animation: feature-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

.feature-case.is-settled .feature-stage-meta,
.feature-case.is-settled .feature-stage-intro {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * 0.2), calc(var(--my) * 0.15), 0);
    transition: transform 0.4s var(--ease);
    animation: none;
}

.feature-case.is-settled .feature-stage--apex .feature-stage-wordmark {
    opacity: 1;
    transform: none;
    animation: none;
}

.feature-stage--osnova > span,
.feature-stage--apex > span {
    top: auto;
    bottom: 14px;
    left: 14px;
}

.feature-stage-rings {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    width: min(160%, 980px);
    height: min(160%, 980px);
    margin-left: calc(min(160%, 980px) / -2);
    margin-bottom: calc(min(160%, 980px) / -2);
    opacity: 0;
    pointer-events: none;
}

.feature-stage-rings span {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    transform: scale(var(--scale));
    background: rgb(255 255 255 / 0.1);
    animation: feature-ring-breathe 6.5s ease-in-out infinite;
    animation-delay: var(--delay);
}

.feature-stage-rings span:nth-child(1) {
    --scale: 0.58;
    --delay: 0s;
    background: rgb(255 255 255 / 0.2);
}

.feature-stage-rings span:nth-child(2) {
    --scale: 0.78;
    --delay: 0.35s;
    background: rgb(255 255 255 / 0.11);
}

.feature-stage-rings span:nth-child(3) {
    --scale: 1;
    --delay: 0.7s;
    background: rgb(255 255 255 / 0.06);
}

.feature-case.is-preview-in .feature-stage-rings {
    animation: feature-fade-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.feature-stage-layer {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
}

.feature-stage-wordmark {
    z-index: 2;
    left: 4%;
    top: 10%;
    width: 92%;
    height: auto;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}

.feature-case.is-preview-in .feature-stage--osnova .feature-stage-wordmark {
    animation: feature-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.feature-case.is-settled .feature-stage--osnova .feature-stage-wordmark {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * 0.25), calc(var(--my) * 0.2), 0);
    transition: transform 0.4s var(--ease);
    animation: none;
}

.feature-stage-phone {
    z-index: 3;
    height: auto;
    filter: drop-shadow(10px 18px 20px rgb(0 0 0 / 28%));
    transform-origin: center bottom;
    opacity: 0;
    transform: translate3d(0, 72%, 0);
}

.feature-stage-phone--left {
    left: 20%;
    top: 26%;
    width: 23%;
    z-index: 3;
}

.feature-stage-phone--right {
    left: 57%;
    top: 26%;
    width: 23%;
    z-index: 3;
}

.feature-stage-phone--center {
    left: 38.5%;
    top: 20%;
    width: 23%;
    z-index: 4;
    filter: drop-shadow(12px 20px 22px rgb(0 0 0 / 32%));
}

.feature-stage-mockups {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
}

.feature-stage-mockup {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    transform: translate3d(0, 72%, 0);
    transform-origin: 72% 100%;
}

.feature-case.is-preview-in:not(.is-settled) .feature-stage-rise {
    animation: feature-layer-rise var(--duration, 1.85s) cubic-bezier(0.22, 1, 0.36, 1)
        var(--delay, 0.1s) both;
}

.feature-case.is-settled .feature-stage-phone--left {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * 0.55), calc(var(--my) * 0.45), 0);
    transition: transform 0.4s var(--ease);
    animation: none;
}

.feature-case.is-settled .feature-stage-phone--right {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * 0.7), calc(var(--my) * 0.55), 0);
    transition: transform 0.4s var(--ease);
    animation: none;
}

.feature-case.is-settled .feature-stage-phone--center {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * 0.35), calc(var(--my) * 0.3), 0);
    transition: transform 0.4s var(--ease);
    animation: none;
}

.feature-case.is-settled .feature-stage-mockup--left {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * 0.45), calc(var(--my) * 0.35), 0);
    transition: transform 0.4s var(--ease);
    animation: none;
}

.feature-case.is-settled .feature-stage-mockup--right {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * 0.65), calc(var(--my) * 0.5), 0);
    transition: transform 0.4s var(--ease);
    animation: none;
}

.feature-case.is-settled .feature-stage-mockup--center {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * 0.3), calc(var(--my) * 0.25), 0);
    transition: transform 0.4s var(--ease);
    animation: none;
}

.feature-stage--flat img,
.feature-stage--flat picture {
    display: block;
    width: 100%;
    height: 100%;
}

.feature-stage--flat img {
    object-fit: cover;
    opacity: 0;
    transform: translate3d(0, 28px, 0);
}

.feature-case.is-preview-in .feature-stage--flat img {
    animation: feature-fade-up 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}

.feature-case.is-settled .feature-stage--flat img {
    opacity: 1;
    transform: translate3d(var(--mx), var(--my), 0);
    transition: transform 0.4s var(--ease);
    animation: none;
}

.feature-image > span,
.feature-stage > span {
    position: absolute;
    z-index: 6;
    top: 20px;
    left: 20px;
    display: grid;
    width: 38px;
    height: 38px;
    color: var(--white);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    place-items: center;
    font-size: 9px;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

.feature-case.is-preview-in .feature-stage > span {
    animation: feature-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.feature-case.is-settled .feature-stage > span {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * -0.35), calc(var(--my) * -0.35), 0);
    transition: transform 0.4s var(--ease), background 0.35s ease;
    animation: none;
}

.feature-case.is-settled.is-hovering .feature-stage > span {
    background: rgba(0, 0, 0, 0.55);
}

.feature-meta > *,
.feature-case .case-info > * {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
}

.feature-case.is-preview-in .feature-meta > *:nth-child(1),
.feature-case.is-preview-in .case-info > *:nth-child(1) {
    animation: feature-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.feature-case.is-preview-in .feature-meta > *:nth-child(2),
.feature-case.is-preview-in .case-info > *:nth-child(2) {
    animation: feature-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

.feature-case.is-preview-in .feature-meta > *:nth-child(3),
.feature-case.is-preview-in .case-info > *:nth-child(3) {
    animation: feature-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.feature-case.is-settled .feature-meta > *,
.feature-case.is-settled .case-info > * {
    opacity: 1;
    transform: none;
    animation: none;
}

.case-stage-wrap {
    position: relative;
}

.case-stage-wrap .case-badge {
    z-index: 7;
    opacity: 0;
    transform: translate3d(0, 16px, 0);
}

.feature-case.is-preview-in .case-stage-wrap .case-badge {
    animation: feature-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

.feature-case.is-settled .case-stage-wrap .case-badge {
    opacity: 1;
    transform: none;
    animation: none;
}

@keyframes feature-layer-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 72%, 0);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes feature-fade-up {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes feature-ring-breathe {
    0%,
    100% {
        opacity: 0.75;
        transform: scale(var(--scale));
    }

    50% {
        opacity: 1;
        transform: scale(calc(var(--scale) * 1.04));
    }
}

@media (max-width: 900px) {
    .feature-stage:not(.feature-stage--osnova) .feature-stage-phone--left,
    .feature-stage:not(.feature-stage--osnova) .feature-stage-phone--right {
        display: none;
    }

    .feature-stage:not(.feature-stage--osnova) .feature-stage-phone--center {
        left: 28%;
        top: 18%;
        width: 44%;
    }

    .feature-stage--osnova .feature-stage-phone--left {
        left: 2%;
        top: 28%;
        width: 36%;
    }

    .feature-stage--osnova .feature-stage-phone--right {
        left: 62%;
        top: 28%;
        width: 36%;
    }

    .feature-stage--osnova .feature-stage-phone--center {
        left: 26%;
        top: 22%;
        width: 48%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-image,
    .feature-stage {
        --mx: 0px;
        --my: 0px;
    }

    .feature-stage-wordmark,
    .feature-stage-phone,
    .feature-stage-mockup,
    .feature-stage-rings,
    .feature-stage-meta,
    .feature-stage-intro,
    .feature-stage > span,
    .feature-stage--flat img,
    .feature-meta > *,
    .feature-case .case-info > *,
    .case-stage-wrap .case-badge {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .feature-stage-rings span {
        animation: none !important;
    }
}