/* =========================================================
   RAVEN INTRO SECTION
========================================================= */

.raven-intro {
    position: relative;
    isolation: isolate;

    min-height: clamp(58rem, 78vw, 74rem);

    padding:
        clamp(3rem, 5vw, 5rem)
        var(--page-gutter)
        clamp(5rem, 8vw, 8rem);

    overflow: hidden;

    background: var(--color-black);
    color: var(--color-white);
}

.raven-intro__inner {
    width: min(100%, 87.5rem);
    margin-inline: auto;
}

/* =========================================================
   HEADING
========================================================= */

.raven-intro__heading {
    position: relative;
    z-index: 4;

    width: min(100%, 31rem);
}

.raven-intro__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin: 0;

    font-family: var(--font-display);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.025em;
}

.raven-intro__title-line {
    display: block;

    font-size: clamp(3rem, 4.8vw, 4.5rem);
    white-space: nowrap;

    will-change:
        opacity,
        transform,
        filter;
}

.raven-intro__title-line--accent {
    margin-block:
        clamp(0.25rem, 0.8vw, 0.65rem)
        clamp(0.55rem, 1vw, 0.9rem);

    color: var(--color-raven-red);

    font-size: clamp(5.4rem, 10vw, 9.1rem);
    line-height: 0.72;
}

/* =========================================================
   TWO-COLUMN LAYOUT
========================================================= */

.raven-intro__content {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(18rem, 0.82fr)
        minmax(28rem, 1.6fr);

    align-items: start;

    gap: clamp(2rem, 5vw, 6rem);

    margin-top: clamp(5rem, 8vw, 8rem);
}

/* =========================================================
   COPY COLUMN
========================================================= */

.raven-intro__copy-column {
    position: relative;
    z-index: 5;

    width: min(100%, 36rem);
}

/*
 * Outer mask:
 * - preserves the fixed visible height
 * - clips the fade overlay
 * - does not itself scroll
 */
.raven-intro__copy-mask {
    position: relative;

    height: clamp(29rem, 42vw, 44rem);

    overflow: hidden;
}

/*
 * Inner scroll container:
 * - contains the native vertical scrolling
 * - hides the scrollbar in all major browsers
 */
.raven-intro__copy-scroll {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;

    overflow-x: hidden;
    overflow-y: auto;

    padding-right: 0.75rem;
    padding-bottom: clamp(8rem, 15vw, 14rem);

    scrollbar-width: none;
    -ms-overflow-style: none;

    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;

    touch-action: pan-y;
}

.raven-intro__copy-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/*
 * Bottom fade/shadow:
 * remains fixed while the text scrolls underneath it.
 */
.raven-intro__copy-mask::after {
    content: "";

    position: absolute;
    z-index: 3;

    right: 0;
    bottom: 0;
    left: 0;

    height: clamp(8rem, 15vw, 14rem);

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.3) 27%,
            rgba(0, 0, 0, 0.72) 60%,
            #000 100%
        );
}

.raven-intro__copy {
    position: relative;

    color: rgba(255, 255, 255, 0.78);

    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.55vw, 1.625rem);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -0.025em;

    will-change:
        opacity,
        transform,
        filter;
}

.raven-intro__copy p {
    margin: 0 0 clamp(1.6rem, 2.6vw, 2.5rem);
}

.raven-intro__copy p:last-child {
    margin-bottom: 0;
}

.raven-intro__copy strong {
    color: var(--color-raven-red);
    font-weight: 700;
}

/* =========================================================
   CTA
========================================================= */

.raven-intro__cta {
    position: relative;
    z-index: 6;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: clamp(2.25rem, 3.3vw, 2.75rem);

    margin-top: clamp(1.35rem, 2vw, 2rem);

    padding:
        0.3rem
        clamp(0.95rem, 1.8vw, 1.4rem);

    border-radius: 999px;

    background: var(--color-raven-red);
    color: var(--color-white);

    font-family: var(--font-body);
    font-size: clamp(0.78rem, 1.3vw, 1rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;

    transition:
        transform 350ms var(--ease-premium),
        background-color 250ms ease,
        box-shadow 350ms ease;
}

.raven-intro__cta:hover {
    transform: translateY(-0.2rem);

    background: #ff2727;

    box-shadow:
        0 0.85rem 2rem rgba(245, 25, 25, 0.2);
}

.raven-intro__cta:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 0.3rem;
}

/* =========================================================
   VIDEO
========================================================= */

.raven-intro__media {
    position: relative;

    align-self: stretch;

    min-height: clamp(34rem, 55vw, 50rem);

    margin-top: clamp(-4rem, -3vw, -1.5rem);

    pointer-events: none;
}

.raven-intro__video {
    position: absolute;

    top: 50%;
    left: 50%;

    width: clamp(44rem, 74vw, 73rem);
    max-width: none;
    height: auto;

    object-fit: contain;

    opacity: 0.98;

    transform: translate(-50%, -50%);

    mix-blend-mode: screen;

    will-change:
        opacity,
        transform,
        filter;
}

.raven-intro__video--mobile {
    display: none;
}

/*
 * Soft edge masking so that the video fades naturally into black.
 */
.raven-intro__media::after {
    content: "";

    position: absolute;
    z-index: 2;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            #000 0%,
            rgba(0, 0, 0, 0.35) 11%,
            transparent 27%,
            transparent 80%,
            rgba(0, 0, 0, 0.42) 93%,
            #000 100%
        ),
        linear-gradient(
            to bottom,
            #000 0%,
            transparent 16%,
            transparent 82%,
            #000 100%
        );
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
    .raven-intro {
        min-height: auto;
    }

    .raven-intro__content {
        grid-template-columns:
            minmax(17rem, 0.9fr)
            minmax(23rem, 1.35fr);

        gap: clamp(1.5rem, 4vw, 3rem);
    }

    .raven-intro__copy-mask {
        height: clamp(27rem, 52vw, 38rem);
    }

    .raven-intro__copy-scroll {
        padding-bottom: clamp(7rem, 16vw, 11rem);
    }

    .raven-intro__copy-mask::after {
        height: clamp(7rem, 16vw, 11rem);
    }

    .raven-intro__media {
        min-height: clamp(31rem, 62vw, 43rem);
    }

    .raven-intro__video {
        width: clamp(39rem, 83vw, 60rem);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .raven-intro {
        padding:
            clamp(3.5rem, 12vw, 5rem)
            var(--page-gutter)
            clamp(5rem, 17vw, 8rem);
    }

    .raven-intro__heading {
        width: 100%;
    }

    .raven-intro__title-line {
        font-size: clamp(2.7rem, 12vw, 4rem);
    }

    .raven-intro__title-line--accent {
        font-size: clamp(5rem, 23vw, 7.25rem);
    }

    .raven-intro__content {
        display: flex;
        flex-direction: column;

        gap: clamp(2rem, 8vw, 3.5rem);

        margin-top: clamp(4rem, 14vw, 6rem);
    }

    .raven-intro__copy-column {
        width: 100%;
        max-width: 32rem;
    }

    .raven-intro__copy-mask {
        height: clamp(28rem, 126vw, 38rem);
    }

    .raven-intro__copy-scroll {
        padding-right: 0.35rem;
        padding-bottom: clamp(7rem, 34vw, 10rem);
    }

    .raven-intro__copy {
        font-size: clamp(1rem, 4.7vw, 1.25rem);
        line-height: 1.2;
    }

    .raven-intro__copy-mask::after {
        height: clamp(7rem, 34vw, 10rem);
    }

    .raven-intro__media {
        order: -1;

        width: calc(100% + (var(--page-gutter) * 2));
        min-height: clamp(20rem, 88vw, 32rem);

        margin:
            clamp(-1.5rem, -4vw, -0.5rem)
            calc(var(--page-gutter) * -1)
            0;
    }

    .raven-intro__video--desktop {
        display: none;
    }

    .raven-intro__video--mobile {
        display: block;

        width: clamp(27rem, 138vw, 46rem);
    }

    .raven-intro__media::after {
        background:
            linear-gradient(
                to right,
                #000 0%,
                transparent 18%,
                transparent 82%,
                #000 100%
            ),
            linear-gradient(
                to bottom,
                #000 0%,
                transparent 14%,
                transparent 80%,
                #000 100%
            );
    }

    .raven-intro__cta {
        font-size: clamp(0.76rem, 3.8vw, 0.95rem);
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {
    .raven-intro__title-line {
        white-space: normal;
    }

    .raven-intro__copy-mask {
        height: 31rem;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .raven-intro__video {
        display: none;
    }

    .raven-intro__media {
        min-height: 14rem;
    }

    .raven-intro__cta {
        transition: none;
    }
}