/**
 * Kinetic Archive home layer.
 * Scroll-video composition inspired by the high-impact MotionSites corpus.
 */

.xdj-home {
    background: #070707;
}

.impact-hero {
    position: relative;
    height: 320vh;
    background: #030408;
    color: #fff;
}

.impact-hero__sticky {
    position: sticky;
    isolation: isolate;
    top: 0;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
}

.impact-hero__video,
.impact-hero__veil,
.impact-hero__grid {
    position: absolute;
    z-index: -4;
    inset: 0;
    width: 100%;
    height: 100%;
}

.impact-hero__video {
    object-fit: cover;
    filter: saturate(.82) contrast(1.14) brightness(.64);
    transform: scale(1.035);
    will-change: transform;
}

.impact-hero__veil {
    z-index: -3;
    background:
        radial-gradient(circle at 60% 42%, transparent 0, rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, .58) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .6));
}

.impact-hero__veil::after {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
    background-size: 160px;
    content: "";
    mix-blend-mode: soft-light;
    opacity: .13;
}

.impact-hero__grid {
    z-index: -2;
    background: linear-gradient(90deg,
        transparent calc(25% - .5px), rgba(255, 255, 255, .11) 25%, transparent calc(25% + .5px),
        transparent calc(50% - .5px), rgba(255, 255, 255, .11) 50%, transparent calc(50% + .5px),
        transparent calc(75% - .5px), rgba(255, 255, 255, .11) 75%, transparent calc(75% + .5px));
}

.impact-hero__chrome {
    position: absolute;
    z-index: 8;
    top: 104px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .46);
    color: rgba(255, 255, 255, .56);
    font-family: var(--ui);
    font-size: 8px;
    letter-spacing: .16em;
}

.impact-scene {
    position: absolute;
    z-index: 2;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(42px) scale(.985);
    transition: opacity .7s ease, transform .9s var(--ease), visibility .7s;
}

.impact-scene.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.impact-scene.is-leaving {
    visibility: visible;
    opacity: 0;
    transform: translateY(-42px) scale(1.015);
}

.impact-scene__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 11vh;
}

.impact-scene__content > p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .62);
    font-family: var(--ui);
    font-size: 8px;
    letter-spacing: .2em;
}

.impact-scene h1 {
    margin: 0;
    font-size: clamp(90px, 15.4vw, 232px);
    font-weight: 650;
    line-height: .64;
    letter-spacing: -.11em;
}

.impact-scene h1 span,
.impact-scene h1 em {
    display: block;
}

.impact-scene h1 em {
    margin-top: .15em;
    padding-left: .7em;
    font-family: var(--serif);
    font-weight: 300;
}

.impact-scene__foot {
    display: grid;
    max-width: 680px;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    margin-top: 48px;
    margin-left: auto;
}

.impact-scene__foot span,
.impact-scene__metrics span,
.impact-story__meta {
    color: rgba(255, 255, 255, .5);
    font-family: var(--ui);
    font-size: 8px;
    letter-spacing: .14em;
}

.impact-scene__foot p {
    margin: 0;
    color: rgba(255, 255, 255, .74);
    font-size: 13px;
    line-height: 1.8;
}

.impact-scene__content--manifesto {
    justify-content: center;
}

.impact-scene__content--manifesto h2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    margin: 0;
    font-size: clamp(76px, 12vw, 184px);
    font-weight: 650;
    line-height: .72;
    letter-spacing: -.1em;
}

.impact-scene__content--manifesto h2 span:last-child {
    text-align: right;
}

.impact-scene__content--manifesto h2 em {
    color: #ff5335;
    font-family: var(--serif);
    font-weight: 300;
    transform: translateY(.28em) rotate(-7deg);
}

.impact-scene__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 90px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, .42);
}

.impact-scene__metrics span:nth-child(2) {
    text-align: center;
}

.impact-scene__metrics span:last-child {
    text-align: right;
}

.impact-scene__content--story {
    justify-content: center;
}

.impact-story__meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .46);
}

.impact-scene__content--story h2 {
    max-width: 1250px;
    margin: 0;
    font-size: clamp(52px, 8vw, 122px);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.08em;
}

.impact-story__action {
    display: grid;
    width: min(650px, 50%);
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 42px;
    margin-top: 54px;
    margin-left: auto;
}

.impact-story__action p {
    margin: 0;
    color: rgba(255, 255, 255, .64);
    font-size: 12px;
    line-height: 1.8;
}

.impact-story__action a {
    padding-bottom: 6px;
    border-bottom: 1px solid #fff;
    font-family: var(--ui);
    font-size: 8px;
    letter-spacing: .12em;
    white-space: nowrap;
}

.impact-hero__progress {
    position: absolute;
    z-index: 9;
    right: 0;
    bottom: 28px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.impact-hero__progress::before {
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, .25);
    content: "";
}

.impact-hero__progress span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 145px);
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}

.impact-hero__progress b {
    width: 127px;
    color: rgba(255, 255, 255, .56);
    font-family: var(--ui);
    font-size: 7px;
    font-weight: 400;
    letter-spacing: .14em;
}

/* High-impact transitions after the film. */
.signal-marquee {
    position: relative;
    z-index: 2;
    border-color: #070707;
}

.journal-intro {
    position: relative;
    background: var(--paper);
}

.journal-intro::before {
    position: absolute;
    top: 0;
    right: calc((100vw - var(--shell)) / -2);
    width: 31vw;
    height: 12px;
    background: var(--signal);
    content: "";
}

.feature-stage {
    min-height: 100svh;
}

.feature-stage__media,
.feature-stage__copy {
    min-height: 100svh;
}

.impact-stories {
    padding: 140px 0 0;
    background: var(--paper);
}

.impact-stories > .section-heading {
    width: var(--shell);
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 74px;
}

.impact-stories__stack {
    background: #050505;
}

.impact-poster {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    background: #111;
    color: #fff;
    overflow: hidden;
}

.impact-poster__media,
.impact-poster__overlay {
    position: absolute;
    z-index: -3;
    inset: 0;
}

.impact-poster__media img,
.impact-poster__media .image-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.75) contrast(1.1) brightness(.72);
    transition: transform 1.2s var(--ease), filter .6s ease;
}

.impact-poster:hover .impact-poster__media img {
    filter: saturate(1) contrast(1.05) brightness(.8);
    transform: scale(1.025);
}

.impact-poster__overlay {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .08) 65%),
        linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .62));
}

.impact-poster:nth-child(even) .impact-poster__overlay {
    background:
        linear-gradient(270deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .06) 62%),
        linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .64));
}

.impact-poster__content {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 90px;
    padding-bottom: 54px;
}

.impact-poster__content > div {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .48);
    color: rgba(255, 255, 255, .56);
    font-family: var(--ui);
    font-size: 8px;
    letter-spacing: .14em;
}

.impact-poster h3 {
    max-width: 1100px;
    margin: 8vh 0 5vh;
    font-size: clamp(54px, 8vw, 124px);
    font-weight: 400;
    line-height: .88;
    letter-spacing: -.08em;
}

.impact-poster:nth-child(even) h3 {
    max-width: 950px;
    margin-left: auto;
    text-align: right;
}

.impact-poster__button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    align-self: flex-start;
    gap: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 999px;
    font-family: var(--ui);
    font-size: 8px;
    letter-spacing: .12em;
    transition: background .25s ease, color .25s ease, transform .35s var(--ease);
}

.impact-poster:nth-child(even) .impact-poster__button {
    align-self: flex-end;
}

.impact-poster__button i {
    font-size: 17px;
    font-style: normal;
}

.impact-poster__button:hover {
    background: #fff;
    color: #090909;
    transform: translateY(-3px);
}

.topic-index {
    position: relative;
}

.topic-index::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--signal) 0 25%, #3155ff 25% 50%, #fff 50% 75%, #171717 75%);
    content: "";
}

.latest-notes {
    background: var(--paper);
}

@media (max-width: 980px) {
    .impact-scene__content--manifesto h2 {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .impact-scene__content--manifesto h2 span:last-child { text-align: left; }
    .impact-scene__content--manifesto h2 em { justify-self: center; transform: rotate(-6deg); }
    .impact-story__action { width: min(760px, 75%); }
}

@media (max-width: 768px) {
    .impact-hero { height: 280vh; }
    .impact-hero__sticky { min-height: 680px; }
    .impact-hero__chrome { top: 82px; font-size: 7px; }
    .impact-hero__chrome span:last-child { display: none; }
    .impact-scene__content { padding-bottom: 12vh; }
    .impact-scene h1 { font-size: clamp(80px, 28vw, 116px); line-height: .68; }
    .impact-scene h1 em { padding-left: .18em; }
    .impact-scene__foot { grid-template-columns: 1fr; margin-top: 34px; margin-left: 0; }
    .impact-scene__foot span { display: none; }
    .impact-scene__foot p { max-width: 340px; }
    .impact-scene__content--manifesto h2 { font-size: clamp(68px, 24vw, 100px); }
    .impact-scene__metrics { margin-top: 55px; }
    .impact-scene__content--story h2 { font-size: clamp(44px, 13vw, 65px); }
    .impact-story__action { width: 100%; grid-template-columns: 1fr; gap: 24px; margin-top: 36px; margin-left: 0; }
    .impact-story__action a { justify-self: start; }
    .impact-hero__progress { bottom: 18px; }
    .impact-stories { padding-top: 84px; }
    .impact-stories > .section-heading { padding-bottom: 42px; }
    .impact-poster, .impact-poster__content { min-height: 760px; }
    .impact-poster__content { padding-top: 76px; padding-bottom: 30px; }
    .impact-poster h3, .impact-poster:nth-child(even) h3 { margin: 6vh 0 4vh; font-size: clamp(43px, 13vw, 62px); text-align: left; }
    .impact-poster:nth-child(even) .impact-poster__button { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .impact-hero {
        height: 100svh;
    }
    .impact-scene:not([data-impact-scene="0"]) {
        display: none;
    }
    .impact-hero__progress {
        display: none;
    }
}