/**
 * Founding Camper fire takeover.
 */


/* =========================================================
   FIRE LAYER
   ========================================================= */

.wriwoods-founding-fire {
    position: fixed;

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

    /*
     * Gives the sparks plenty of vertical room.
     */
    height: min(60vh, 620px);

    overflow: hidden;

    z-index: 99990;

    pointer-events: none;

    /*
     * This MUST stay on the parent based on what
     * we've learned from this particular video/page.
     */
    mix-blend-mode: multiply;

    opacity: 0;

    transition:
        opacity 2.5s ease,
        transform .9s ease;
}

.wriwoods-founding-fire.is-playing {
    opacity: 1;
}

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

.wriwoods-founding-fire__video {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 100vw;
    min-width: 100vw;
    height: auto;

    transform:
        translateX(-50%);

    /*
     * Color correction happens on the video itself,
     * while compositing happens on the parent.
     *
     * Adjust these live to taste.
     */
    filter:
        saturate(1.35)
        hue-rotate(-40deg);

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.wriwoods-founding-fire-message {
    position: fixed;

    left: 50%;
    bottom: 30px;

    width: min(760px, calc(100vw - 100px));

    transform:
        translateX(-50%)
        translateY(16px);

    z-index: 99991;

    padding: 28px 58px 26px;

    text-align: center;
    font-family: Georgia, serif;

    color: #f5e8cf;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    isolation: isolate;

    transition:
        opacity 1.2s ease,
        transform 1.4s cubic-bezier(.2, .7, .2, 1),
        visibility 0s linear 1.2s;
}


/*
 * Soft smoky pocket behind the announcement.
 *
 * No hard edges, so it still feels integrated
 * with the fire rather than like a popup card.
 */
.wriwoods-founding-fire-message::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 115%;
    height: 150%;

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

    z-index: -1;

    background:
        radial-gradient(
            ellipse at center,
            rgba(16, 8, 4, .66) 0%,
            rgba(16, 8, 4, .44) 38%,
            rgba(16, 8, 4, .16) 67%,
            transparent 83%
        );

    filter: blur(15px);

    pointer-events: none;
}


.wriwoods-founding-fire-message.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);

    transition:
        opacity 1.2s ease,
        transform 1.4s cubic-bezier(.2, .7, .2, 1),
        visibility 0s;
}


/* =========================================================
   KICKER
   ========================================================= */

.wriwoods-founding-fire__kicker {
    margin: 0 0 8px;

    color:
        rgba(248, 221, 180, .78);

    font-size: .73rem;
    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: .2em;

    text-shadow:
        0 1px 6px rgba(0, 0, 0, .8);
}


/* =========================================================
   TITLE
   ========================================================= */

.wriwoods-founding-fire__title {
    margin: 0 0 18px;

    color: #f6dfba;

    font-size:
        clamp(
            1.5rem,
            2.15vw,
            2.05rem
        );

    line-height: 1.08;

    font-weight: normal;
    letter-spacing: -.018em;

    text-shadow:
        0 2px 7px rgba(0, 0, 0, .78),
        0 0 22px rgba(88, 40, 12, .35);
}


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

.wriwoods-founding-fire__link {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 260px;

    padding: 11px 22px;

    border: none;

    border-radius: 6px;

    background:
        rgba(116, 57, 23, .88);

    color: #f6e7ca !important;

    font-size: .96rem;
    line-height: 1.3;

    text-decoration: none;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, .35);

    box-shadow:
        0 2px 8px rgba(24, 12, 5, .18),
        inset 0 1px 0 rgba(255, 225, 180, .08);

    transition:
        transform .22s ease,
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


.wriwoods-founding-fire__link span {
    display: inline-block;

    opacity: .8;

    transition:
        transform .22s ease,
        opacity .22s ease;
}


.wriwoods-founding-fire__link:hover {
    color: #fff3dc !important;

    background:
        rgba(137, 67, 25, .94);

    border-color:
        rgba(230, 169, 99, .62);

    transform:
        translateY(-1px);

    box-shadow:
        0 3px 10px rgba(24, 12, 5, .22),
        inset 0 1px 0 rgba(255, 225, 180, .1);
}


.wriwoods-founding-fire__link:hover span {
    opacity: 1;

    transform:
        translateX(3px);
}


.wriwoods-founding-fire__link:active {
    transform:
        translateY(0);

    background:
        rgba(105, 50, 20, .96);

    box-shadow:
        0 1px 4px rgba(24, 12, 5, .2);
}


.wriwoods-founding-fire__link:focus-visible {
    outline:
        2px solid rgba(235, 184, 117, .7);

    outline-offset: 3px;
}


/* =========================================================
   DISMISS
   ========================================================= */

.wriwoods-founding-fire__close {
    position: relative;

    /*
     * Put it on its own line beneath the CTA.
     */
    display: block;

    width: max-content;
    height: auto;

    margin: 22px auto 0;

    padding:
        3px 5px;

    border: 0;

    background: none;

    /*
     * Hide the × itself.
     */
    font-size: 0;

    color:
        rgba(245, 226, 197, .48);

    cursor: pointer;

    opacity: .8;

    transition:
        color .2s ease,
        opacity .2s ease;
}


/*
 * Replace the × visually with a quiet
 * text dismissal.
 */
.wriwoods-founding-fire__close::after {
    content: "Dismiss";

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: .72rem;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: .04em;
}


.wriwoods-founding-fire__close:hover {
    color: #f6c77f;

    background: none !important;

    opacity: 1;
}


.wriwoods-founding-fire__close:focus-visible {
    outline:
        1px solid rgba(255, 211, 148, .65);

    outline-offset: 2px;

    border-radius: 3px;
}


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

@media (max-width: 700px) {

    .wriwoods-founding-fire-message {
        left: 16px;
        right: 16px;
        bottom: 18px;

        width: auto;

        padding:
            24px 38px 22px;

        transform:
            translateY(14px);
    }


    .wriwoods-founding-fire-message.is-visible {
        transform:
            translateY(0);
    }


    .wriwoods-founding-fire__kicker {
        font-size:
            .65rem;
    }


    .wriwoods-founding-fire__title {
        margin-bottom: 14px;

        font-size:
            1.35rem;
    }


    .wriwoods-founding-fire__link {
        min-width: 0;

        width: 100%;

        padding:
            11px 15px;

        font-size:
            .9rem;
    }


    .wriwoods-founding-fire__close {
        top: 4px;
        right: 5px;
    }

}


/* =========================================================
   KICKER
   ========================================================= */

.wriwoods-founding-fire__kicker {
    margin: 0 0 7px;

    color:
        rgba(245, 224, 192, .72);

    font-size: .72rem;

    line-height: 1.2;

    text-transform: uppercase;

    letter-spacing: .19em;

    /*
     * Very restrained shadow.
     */
    text-shadow:
        0 1px 5px rgba(0, 0, 0, .75);
}


/* =========================================================
   TITLE
   ========================================================= */

.wriwoods-founding-fire__title {
    margin: 0 0 9px;

    color: #f4dfbd;

    font-size:
        clamp(
            1.45rem,
            2vw,
            1.9rem
        );

    line-height: 1.1;

    font-weight: normal;

    letter-spacing: -.015em;

    text-shadow:
        0 2px 7px rgba(0, 0, 0, .75);
}


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

.wriwoods-founding-fire__link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        4px 1px 3px;

    color:
        rgba(245, 232, 207, .82) !important;

    font-size: .92rem;

    line-height: 1.4;

    text-decoration: none;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, .8);

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.wriwoods-founding-fire__link:hover {
    color:
        #fff2d9 !important;

    border-color:
        rgba(255, 190, 105, .72);

    transform:
        translateX(2px);
}

/* =========================================================
   KICKER
   ========================================================= */

.wriwoods-founding-fire__kicker {
    margin:
        0 0 6px;

    font-size:
        .75rem;

    line-height:
        1.3;

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    color:
        rgba(
            245,
            232,
            207,
            .72
        );
}


/* =========================================================
   TITLE
   ========================================================= */

.wriwoods-founding-fire__title {
    margin:
        0 0 10px;

    font-size:
        clamp(
            1.45rem,
            2.4vw,
            2.2rem
        );

    line-height:
        1.15;

    font-weight:
        normal;

    letter-spacing:
        -.015em;

    color:
        #f6dfba;
}


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

.wriwoods-founding-fire__link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        5px 0;

    font-size:
        1rem;

    line-height:
        1.4;

    color:
        rgba(
            255,
            238,
            209,
            .9
        ) !important;

    text-decoration:
        none;

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.wriwoods-founding-fire__link:hover {
    color:
        #fff4df !important;

    border-color:
        rgba(
            255,
            191,
            112,
            .85
        );

    transform:
        translateX(2px);
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.wriwoods-founding-fire__close {
    position: absolute;

    right: 0;
    top: 50%;

    width: 34px;
    height: 34px;

    transform:
        translateY(-50%);

    display: grid;

    place-items: center;

    padding: 0;

    border:
        1px solid rgba(
            245,
            232,
            207,
            .18
        );

    border-radius:
        50%;

    background:
        rgba(
            8,
            5,
            3,
            .35
        );

    color:
        rgba(
            245,
            232,
            207,
            .68
        );

    font-family:
        inherit;

    font-size:
        21px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.wriwoods-founding-fire__close:hover {
    color:
        #f5e8cf;

    border-color:
        rgba(
            245,
            232,
            207,
            .36
        );

    background:
        rgba(
            8,
            5,
            3,
            .62
        );
}


/* =========================================================
   DISMISS
   ========================================================= */

.wriwoods-founding-fire__close {
    position: relative;

    /*
     * Put it on its own line beneath the CTA.
     */
    display: block;

    width: max-content;
    height: auto;

    margin:
        10px auto 0;

    padding:
        3px 5px;

    border: 0;

    background: none;

    /*
     * Hide the × itself.
     */
    font-size: 0;

    color:
        rgba(245, 226, 197, .48);

    cursor: pointer;

    opacity: .8;

    transition:
        color .2s ease,
        opacity .2s ease;
}


/*
 * Replace the × visually with a quiet
 * text dismissal.
 */
.wriwoods-founding-fire__close::after {
    content: "Dismiss";

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: .72rem;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: .04em;
}


.wriwoods-founding-fire__close:hover {
    color:
        rgba(255, 240, 216, .88);

    opacity: 1;
}


.wriwoods-founding-fire__close:focus-visible {
    outline:
        1px solid rgba(255, 211, 148, .65);

    outline-offset: 2px;

    border-radius: 3px;
}

/* =========================================================
   DISMISSAL
   ========================================================= */

.wriwoods-founding-fire.is-leaving {
    opacity: 0;

    transition:
        opacity 1.2s ease !important;
}


.wriwoods-founding-fire-message.is-leaving {
    opacity: 0;

    transform:
        translateX(-50%)
        translateY(8px);

    pointer-events: none;

    transition:
        opacity .9s ease,
        transform 1.1s ease;
}

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

@media (max-width: 700px) {

    .wriwoods-founding-fire {
        height:
            min(58vh, 520px);
    }


    /*
     * Keep landscape footage visually large
     * on narrow screens.
     */
    .wriwoods-founding-fire__video {
        width:
            170vw;

        min-width:
            170vw;
    }


    .wriwoods-founding-fire-message {
        left: 20px;
        right: 20px;
        bottom: 20px;

        width: auto;

        transform:
            translateY(14px);
    }


    .wriwoods-founding-fire-message.is-visible {
        transform:
            translateY(0);
    }

/* =========================================================
   Kicker
   ========================================================= */

    .wriwoods-founding-fire__kicker {
        font-size:
            .68rem;
    }


    .wriwoods-founding-fire__title {
        font-size:
            1.35rem;
    }


    .wriwoods-founding-fire__link {
        font-size:
            .92rem;
    }


    .wriwoods-founding-fire__close {
        right: -4px;
        top: -42px;

        transform: none;
    }

}


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

@media (prefers-reduced-motion: reduce) {

    .wriwoods-founding-fire,
    .wriwoods-founding-fire-message,
    .wriwoods-founding-fire-message * {
        transition-duration:
            .001ms !important;
    }

}

/* =========================================================
   EXTRA SPARKS
   ========================================================= */

.wriwoods-founding-fire__sparks {
    position: absolute;
    inset: 0;

    overflow: visible;

    pointer-events: none;

    z-index: 2;
}


.wriwoods-founding-fire__spark {
    position: absolute;

    left: 50%;
    bottom: 4%;

    width: var(--spark-size);
    height: var(--spark-size);

    border-radius: 50%;

    background:
        rgba(255, 149, 64, .95);

    box-shadow:
        0 0 6px rgba(255, 115, 35, .75),
        0 0 14px rgba(255, 74, 20, .38);

    opacity: 0;

    animation:
        wriwoodsSparkRise
        var(--spark-duration)
        ease-out
        forwards;
}


@keyframes wriwoodsSparkRise {

    0% {
        opacity: 0;

        transform:
            translate(
                var(--spark-start-x),
                0
            )
            scale(.85);
    }

    10% {
        opacity: .9;
    }

    55% {
        opacity: .65;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--spark-end-x),
                var(--spark-rise)
            )
            scale(.15);
    }
}