/* 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--moments {
    color: #fffdf8;
    background: #171512;
    container-type: inline-size;
}

.feature-stage--moments .feature-stage-bg {
    position: absolute;
    inset: 0;
    background: #171512;
}

.feature-stage--ud-group {
    color: #fff;
    background: #101326;
    container-type: inline-size;
}

.feature-stage-ud-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: translate3d(0, 24%, 0) scale(1.04);
}

.feature-stage-ud-veil {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgb(9 11 25 / 80%), rgb(9 11 25 / 22%) 70%), linear-gradient(0deg, rgb(9 11 25 / 48%), transparent 56%);
}

.feature-stage-ud-copy {
    z-index: 4;
    top: 28%;
    width: min(48%, 360px);
}

.feature-stage-ud-copy img {
    display: block;
    width: min(64%, 192px);
    height: auto;
}

.feature-stage-ud-copy p {
    margin: 1.35em 0 0;
    font-size: clamp(8px, 1.35cqi, 14px);
    font-weight: 420;
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.feature-stage--abdshop{color:#f5f5ef;background:#111;container-type:inline-size}.feature-stage-abd-grid{position:absolute;inset:0;z-index:0;opacity:.28;background-image:linear-gradient(rgb(255 255 255 / .16) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .16) 1px,transparent 1px);background-size:14% 24%}.feature-stage-abd-photo{position:absolute;z-index:1;right:0;bottom:-5%;width:70%;height:auto;opacity:0;transform:translate3d(0,45%,0) scale(1.04);filter:grayscale(1) contrast(1.1)}.feature-stage-abd-veil{position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgb(0 0 0 / .86),transparent 72%),linear-gradient(0deg,rgb(0 0 0 / .55),transparent 45%)}.feature-stage-abd-copy{z-index:4;top:27%;width:45%}.feature-stage-abd-copy>span{display:block;color:#d9ff2f;font-size:clamp(5px,.85cqi,9px);letter-spacing:.14em}.feature-stage-abd-copy strong{display:block;margin-top:.65em;font-size:clamp(24px,5cqi,56px);font-weight:450;letter-spacing:-.07em;line-height:.78}.feature-stage-abd-copy em{color:#d9ff2f;font-style:normal}.feature-stage-abd-copy p{margin:1.2em 0 0;font-size:clamp(7px,1.18cqi,12px);line-height:1.35}.feature-case.is-settled .feature-stage-abd-photo{opacity:1;transform:translate3d(calc(var(--mx) * -.13),calc(var(--my) * -.1),0) scale(1.015);transition:transform .65s var(--ease);animation:none}

.feature-stage--brehov{color:#f5f3ed;background:#151513;container-type:inline-size}.feature-stage-brehov-bg{position:absolute;z-index:0;inset:-7%;width:114%;height:114%;object-fit:cover;filter:grayscale(1) blur(3px);opacity:0;transform:scale(1.08)}.feature-stage-brehov-veil{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgb(12 12 11 / .92),rgb(12 12 11 / .42) 62%,rgb(12 12 11 / .66)),linear-gradient(0deg,rgb(12 12 11 / .58),transparent 62%)}.feature-stage-brehov-copy{z-index:4;top:28%;width:43%}.feature-stage-brehov-copy>span{display:block;color:#c7ff28;font-size:clamp(5px,.85cqi,9px);font-weight:600;letter-spacing:.16em;text-transform:uppercase}.feature-stage-brehov-copy strong{display:block;margin-top:.8em;font-size:clamp(27px,5.4cqi,58px);font-weight:450;line-height:.78;letter-spacing:-.07em}.feature-stage-brehov-copy em{color:#c7ff28;font-style:normal}.feature-stage-brehov-copy p{margin:1.25em 0 0;font-size:clamp(7px,1.25cqi,13px);line-height:1.35}.feature-stage-brehov-print{position:absolute;z-index:3;right:8%;bottom:-4%;width:43%;margin:0;box-shadow:0 20px 45px rgb(0 0 0 / .42);opacity:0;transform:translate3d(0,64%,0) rotate(3deg)}.feature-stage-brehov-print img{display:block;width:100%;height:auto;filter:grayscale(1)}.feature-case.is-settled .feature-stage-brehov-bg{opacity:.28;transform:translate3d(calc(var(--mx) * -.1),calc(var(--my) * -.08),0) scale(1.03);transition:transform .65s var(--ease);animation:none}.feature-case.is-settled .feature-stage-brehov-print{opacity:1;transform:translate3d(calc(var(--mx) * -.32),calc(var(--my) * -.25),0) rotate(3deg);transition:transform .55s var(--ease);animation:none}
.feature-case.is-preview-in .feature-stage-brehov-print{animation:feature-fade-up .85s cubic-bezier(.22,1,.36,1) .18s forwards}

.feature-stage-moments-mark {
    position: absolute;
    z-index: 1;
    top: 7%;
    right: 3%;
    width: 26%;
    height: auto;
    opacity: 0;
}

.feature-stage-moments-house {
    position: absolute;
    z-index: 2;
    left: 39%;
    bottom: -1%;
    width: min(79%, 880px);
    max-width: none;
    height: auto;
    opacity: 0;
    transform: translate3d(0, 72%, 0);
}

.feature-stage-moments-copy {
    position: absolute;
    z-index: 4;
    left: 5.5%;
    top: 29%;
    width: min(40%, 330px);
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    pointer-events: none;
}

.feature-stage-moments-wordmark {
    display: block;
    width: 100%;
    height: auto;
    filter: none;
}

.feature-stage-moments-kicker {
    display: block;
    margin-bottom: 0.9em;
    color: #d69a66;
    font-size: clamp(6px, 1.05cqi, 10px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.feature-stage-moments-copy p {
    margin: 1.35em 0 0;
    font-size: clamp(8px, 1.25cqi, 13px);
    line-height: 1.38;
}

.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-preview-in .feature-stage-moments-copy {
    animation: feature-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

.feature-case.is-preview-in .feature-stage-moments-mark {
    animation: feature-fade-up 0.9s 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-moments-copy {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * 0.16), calc(var(--my) * 0.14), 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;
}

/* Keep all risers visible after animation fill-mode is cleared */
.feature-case.is-settled .feature-stage-rise {
    opacity: 1;
    animation: none;
}

.feature-case.is-settled .feature-stage-moments-house {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * -0.16), calc(var(--my) * -0.12), 0);
    transition: transform 0.6s var(--ease);
    animation: none;
}

.feature-case.is-settled .feature-stage-ud-image {
    opacity: 1;
    transform: translate3d(calc(var(--mx) * -0.12), calc(var(--my) * -0.08), 0) scale(1.015);
    transition: transform 0.65s var(--ease);
    animation: none;
}

.feature-case.is-settled .feature-stage-moments-mark {
    opacity: 0.3;
    transform: translate3d(calc(var(--mx) * 0.08), calc(var(--my) * 0.06), 0);
    transition: transform 0.5s 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, cubic-bezier(0.22, 1, 0.36, 1));
    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, cubic-bezier(0.22, 1, 0.36, 1));
    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, cubic-bezier(0.22, 1, 0.36, 1));
    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-moments-mark,
    .feature-stage-moments-house,
    .feature-stage-moments-copy,
    .feature-stage-ud-image,
    .feature-stage-abd-photo,
    .feature-stage-brehov-bg,
    .feature-stage-brehov-print,
    .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;
    }
}

/* Brehov settles as a printed photograph, not as a full-bleed cover. */
.feature-case.is-settled .feature-stage-brehov-bg{opacity:.28}
.feature-case.is-settled .feature-stage-brehov-print{opacity:1}

@media (max-width: 640px){.feature-stage-brehov-copy{top:25%;left:5%;width:52%}.feature-stage-brehov-print{right:5%;width:46%}}