/*
 * Case study states and motion, driven by case.js.
 * Layout comes from general.css; this file only adds what the interactions need.
 */

:root {
    --cs-ease: cubic-bezier(.76, 0, .24, 1);
    --cs-expo-in-out: cubic-bezier(.87, 0, .13, 1);
    --cs-expo-out: cubic-bezier(.16, 1, .3, 1);
}

::selection {
    background: var(--color--pink);
    color: var(--color--black);
}

html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
    overflow: clip;
}

/* ---------- Preloader: a black layer peels back as the counter climbs, then the whole loader wipes away ---------- */

.loader {
    clip-path: inset(0 0 0 calc(var(--wipe, 0) * 1%));
}
.loader .loader_layer:nth-child(1) {
    color: var(--color--black);
}
.loader .loader_layer:nth-child(1) .loader_layer-bg {
    background-color: var(--color--white);
}
.loader .loader_layer:nth-child(2) {
    z-index: 2;
    color: var(--color--white);
    clip-path: inset(0 0 0 calc(var(--progress, 0) * 1%));
}
.loader .loader_layer:nth-child(2) .loader_layer-bg {
    background-color: var(--color--black);
}

/* ---------- Nav: dots open a panel; on desktop hovering opens it too ---------- */

.nav_body {
    pointer-events: auto;
    height: var(--topHeight);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    transition: width .8s var(--cs-expo-in-out), height .8s var(--cs-expo-in-out), border-radius .8s var(--cs-expo-in-out);
}
.nav {
    transition: transform .6s var(--cs-ease);
}
.hide-nav .nav {
    transform: translate3d(0, -200%, 0);
}
.nav_top::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: .25rem -1rem;
    border-radius: .75rem;
    background-color: color-mix(in srgb, #a3a3a3, transparent 50%);
    clip-path: inset(0 calc(100% - 100% * var(--progress, 0)) 0 0 round .75rem);
}
.nav_logo {
    transform-origin: center left;
    transition: transform .8s var(--cs-expo-in-out);
}
.nav_dots {
    cursor: pointer;
    transition: transform .8s var(--cs-expo-in-out);
}
.nav_dots .nav_dot {
    top: 50%;
    left: 50%;
    transition: transform .8s var(--cs-expo-in-out), top .8s var(--cs-expo-in-out);
}
.nav_dots .nav_dot:nth-child(1) { transform: translate3d(calc(-150% - 1px), calc(-150% - 1px), 0); }
.nav_dots .nav_dot:nth-child(2) { transform: translate3d(calc(50% + 1px), calc(-150% - 1px), 0); }
.nav_dots .nav_dot:nth-child(3) { transform: translate3d(calc(-150% - 1px), calc(50% + 1px), 0); }
.nav_dots .nav_dot:nth-child(4) { transform: translate3d(calc(50% + 1px), calc(50% + 1px), 0); }
.nav_content {
    display: flex;
    height: calc(var(--size--100dvh) - var(--size--16) * 2);
    clip-path: inset(0 0 100% 0 round var(--size--24));
    transition: clip-path .7s var(--cs-expo-in-out);
}
.nav_item {
    overflow: clip;
}
.nav_item .f-36 {
    flex: none;
    transform: translateY(110%);
    transition: transform .4s var(--cs-expo-in-out) .1s;
}
.nav_item .f-14,
.nav_item .f-20 {
    opacity: 0;
    transition: opacity .4s var(--cs-expo-in-out) .1s;
}
.nav_overlay {
    opacity: 0;
    background: color-mix(in srgb, var(--color--black), transparent 25%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: opacity .8s var(--cs-expo-in-out);
}

.nav.active .nav_body {
    height: calc(var(--size--100dvh) - var(--size--16) * 2);
}
.nav.active .nav_dots { transform: rotate(90deg); }
.nav.active .nav_dots .nav_dot {
    transform: translate3d(-50%, -50%, 0);
    transition: transform .8s var(--cs-expo-in-out), top .8s var(--cs-expo-in-out) .6s;
}
.nav.active .nav_dots .nav_dot:nth-child(-n+2) { top: 10%; }
.nav.active .nav_dots .nav_dot:nth-child(n+3) { top: 90%; }
.nav.active .nav_content { clip-path: inset(0 round var(--size--12)); }
.nav.active .nav_item .f-36 {
    transform: translateY(0);
    transition: transform .8s var(--cs-expo-in-out) var(--delay);
}
.nav.active .nav_item .f-14,
.nav.active .nav_item .f-20 {
    opacity: 1;
    transition: opacity .8s var(--cs-expo-in-out) var(--delay);
}
.nav.active .nav_logo { transform: scale(1.2); }
.nav_parent:has(.nav.active) .nav_overlay { opacity: 1; }

@media (min-width: 700px) {
    .nav.active .nav_body {
        width: 26.4375rem;
        border-radius: var(--size--12);
    }
}

/* ---------- Buttons: label rolls up to a copy on hover ---------- */

.btn {
    position: relative;
    border: none;
    background-color: transparent;
}
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--size--12);
    transition: transform .6s var(--cs-ease), background-color .6s var(--cs-ease);
}
.btn[data-wf--button--variant=pink]::before { background-color: var(--color--pink); }
.btn[data-wf--button--variant=base]::before { border: 1px solid currentColor; }
.btn .btn_text {
    position: relative;
    z-index: 2;
}
.btn .btn_text > * {
    transition: transform .6s var(--cs-ease), opacity .6s var(--cs-ease), filter .6s var(--cs-ease);
}
.btn .btn_text > :nth-child(2) {
    transform: translateY(150%) scale(1.2);
    opacity: 0;
    filter: blur(5px);
}
.btn:is(:hover, :focus-visible)::before { transform: scale(.98); }
.btn:is(:hover, :focus-visible)[data-wf--button--variant=pink]::before { background-color: #27d87d; }
.btn:is(:hover, :focus-visible)[data-wf--button--variant=base] { color: var(--color--black); }
.btn:is(:hover, :focus-visible)[data-wf--button--variant=base]::before { background-color: var(--color--white); }
.btn:is(:hover, :focus-visible) .btn_text > :nth-child(1) {
    transform: translateY(-150%) scale(.8);
    opacity: 0;
    filter: blur(5px);
}
.btn:is(:hover, :focus-visible) .btn_text > :nth-child(2) {
    transform: none;
    opacity: 1;
    filter: none;
}

.link-css {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}
.link-css::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .7s cubic-bezier(.77, 0, .175, 1);
}
a:is(:hover, :focus-visible) .link-css::after,
.link-css:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

:focus-visible {
    outline: 2px solid var(--color--pink);
    outline-offset: 3px;
}

/* ---------- Pinned results: one stat per screen of scroll ---------- */

.h-cta { height: calc(var(--length, 1) * 100vh); }
.h-cta_sticky { height: 100vh; }
.h-cta_item .custom-heading {
    width: var(--max-w);
    max-width: 100%;
}
@media (max-width: 991px) {
    .h-cta_item .custom-heading { width: auto; }
}

/* ---------- Pinned full-bleed videos: the active slide's lines rise out of a blur ---------- */

.full_bg {
    transition: opacity 1s var(--cs-expo-out);
}
.full_bg::before {
    content: "";
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, color-mix(in srgb, var(--color--black), transparent 20%), transparent);
}
.full_item.show-bg .full_bg { opacity: 1; }
.full_item .full_line,
.full_item .full_button {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(60%);
    transition: transform .5s var(--cs-expo-out), filter .5s var(--cs-expo-out), opacity .5s var(--cs-expo-out);
}
.full_item.active .full_line,
.full_item.active .full_button {
    opacity: 1;
    filter: none;
    transform: none;
    transition-duration: 1s;
    transition-delay: var(--delay, 0s);
}

/* ---------- Media that used to be drawn by WebGL now shows as plain video ---------- */

.preview_img,
.double-video {
    opacity: 1;
}
.double-video { aspect-ratio: 1739 / 1303; }
@media (max-width: 991px) {
    .double-video { aspect-ratio: 359 / 269; }
}
.preview_img video,
.double-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Cursor label over clickable media (mouse + wide screens only) ---------- */

.cursor {
    background-color: #3d3d3d4d;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
}
.cursor_wrapper .btn_scroll-arrow { display: none; }
@media (hover: hover) and (min-width: 992px) {
    .cursor_wrapper.is-ready { display: flex; }
}

/* ---------- Popup ---------- */

.popup {
    display: block;
    visibility: hidden;
    pointer-events: none;
}
.popup.active {
    z-index: 10;
    visibility: visible;
    pointer-events: auto;
}
.popup_body { overflow-y: auto; }

/* ---------- Helpers used by this page's markup ---------- */

.w-500 { font-weight: 500 !important; }
.custom-descr em { display: inline !important; }

@media (max-width: 991px) {
    .fb-15 { font-size: .94rem; }
    .fm-24 { font-size: 1.5rem; }
    .section-space {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .section-space:last-child { padding-bottom: 0 !important; }
    .full_container_asset { padding: .5rem !important; }
    .no-mb-mt { margin-top: 0 !important; }
    .mb-padding-small-asset { padding: 0 var(--size--24) !important; }
    .mb-padding-big-asset { padding: 0 .5rem !important; }
    .mb-padding-big-asset-text { padding: 0 1rem !important; }
    .gap-mb-32 { gap: var(--size--32) !important; }
}
.no-mb { margin-bottom: 0 !important; }

/* ---------- Reduced motion: no smooth scroll, no pinning theatrics ---------- */

@media (prefers-reduced-motion: reduce) {
    .h-cta { height: auto; }
    .h-cta_sticky {
        position: static;
        height: auto;
    }
    .h-cta_right {
        display: flex;
        flex-direction: column;
        gap: var(--size--48);
    }
    .h-cta_item { position: relative; }
    .full_item .full_line,
    .full_item .full_button,
    .full_bg,
    .nav,
    .nav_body,
    .nav_content,
    .nav_item .f-36 {
        transition: none !important;
    }
}