/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/



/* *****************************************************************************
******************************************************************************
*************      LONG FORM CSS    *********************
*******************************************************************************
******************************************************************************* */


/* body *,
body *::after,
body *::before {
    border: 1px solid rgba(255, 0, 0, 0.3)!important;
} */


html {
  scroll-behavior: smooth;
}

#main:has(.spongebob-longform) {
    overflow: hidden;
}

#main section.spongebob-longform {
    --sb-light-yellow: #ffef13;
    --sb-yellow: #ffd92f;
    --sb-pink: rgb(241, 105, 93);

    padding-top: 0;
    isolation: isolate;
}

section.spongebob-longform::before {

    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);

    background: #FFEF13;
    background: -webkit-gradient(linear,
        left top, left bottom,
        from(rgba(255, 239, 19, 1)), 
        color-stop(10%, rgba(255, 255, 255, 1)), 
        color-stop(90%, rgba(255, 255, 255, 1)), 
        to(rgb(241, 105, 93))
    );
    background: -o-linear-gradient(top,
        rgba(255, 239, 19, 1) 0%, 
        rgba(255, 255, 255, 1) 10%, 
        rgba(255, 255, 255, 1) 90%, 
        rgb(241, 105, 93) 100%
    );
    background: linear-gradient(180deg,
        rgba(255, 239, 19, 1) 0%, 
        rgba(255, 255, 255, 1) 10%, 
        rgba(255, 255, 255, 1) 90%, 
        rgb(241, 105, 93) 100%
    );

    width: 100vw;
    width: 100dvw;
    max-width: 1920px;
    height: 100%;

    z-index: -1;
}


@media (max-width: 670px) {

    section.spongebob-longform::before {
        background: -webkit-gradient(linear,
            left top, left bottom,
            from(rgba(255, 239, 19, 1)), 
            color-stop(5%, rgba(255, 255, 255, 1)), 
            color-stop(95%, rgba(255, 255, 255, 1)), 
            to(rgb(241, 105, 93))
        );
        background: -o-linear-gradient(top,
            rgba(255, 239, 19, 1) 0%, 
            rgba(255, 255, 255, 1) 5%, 
            rgba(255, 255, 255, 1) 95%, 
            rgb(241, 105, 93) 100%
        );
        background: linear-gradient(180deg,
            rgba(255, 239, 19, 1) 0%, 
            rgba(255, 255, 255, 1) 5%, 
            rgba(255, 255, 255, 1) 95%, 
            rgb(241, 105, 93) 100%
        );

    }
}


/******************************************************************************/
/* LONGFORM HERO */
/******************************************************************************/

.spongebob-longform .hero {
    position: relative;
    width: 100vw;
    width: 100dvw;
    max-width: 1920px;
    height: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    overflow: hidden;    
    margin-bottom: 10vh;
}

.spongebob-longform .hero .marquee {
    --marquee-animation-time: 40s;
    --marquee-gap: 1rem;

    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-block: var(--marquee-gap);
}

.spongebob-longform .hero .marquee-inner {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--marquee-gap);
}

.spongebob-longform .hero .marquee-inner ul {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-animation: marquee var(--marquee-animation-time) linear infinite;
            animation: marquee var(--marquee-animation-time) linear infinite;
    gap: var(--marquee-gap);
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

.spongebob-longform .hero .marquee-inner.active ul {
    -webkit-animation-play-state: running;
            animation-play-state: running
}

@-webkit-keyframes marquee {

    from { -webkit-transform: translateX(0); transform: translateX(0) }
    to { -webkit-transform: translateX(calc(-100% - var(--marquee-gap))); transform: translateX(calc(-100% - var(--marquee-gap)))}
}

@keyframes marquee {

    from { -webkit-transform: translateX(0); transform: translateX(0) }
    to { -webkit-transform: translateX(calc(-100% - var(--marquee-gap))); transform: translateX(calc(-100% - var(--marquee-gap)))}
}

.spongebob-longform .hero .marquee-inner ul li {
    width: 30vw;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.spongebob-longform .hero .marquee-inner ul li img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

@media (max-width: 1445px) {

    .spongebob-longform .hero .marquee-inner ul li {
        width: 40vw;
    }
}

@media (max-width: 1024px) {

    .spongebob-longform .hero {
        margin-bottom: 7vh;
    }

    .spongebob-longform .hero .marquee-inner ul li {
        width: 55vmin;
    }
}

@media (max-width: 670px) {

    .spongebob-longform .hero {
        margin-bottom: 2rem;
    }

    .spongebob-longform .hero .marquee-inner ul li {
        width: 70vmin;
    }
}




/******************************************************************************/
/* LONG FORM CONTENT */
/******************************************************************************/

section.spongebob-longform .longform-content {
    position: relative;
    max-width: 1100px;
    margin-inline: auto;
    z-index: 10;
}

section.spongebob-longform .longform-content > * {
    margin-inline: auto;
}

section.spongebob-longform .longform-content > h4,
section.spongebob-longform .longform-content > p {
  margin-bottom: 2rem;
}

section.spongebob-longform .longform-content > p a {
    color: var(--sb-pink);
}

section.spongebob-longform .longform-content .longform-media,
section.spongebob-longform .longform-content .longform-grid {
    margin-block: 5rem;
}

section.spongebob-longform .longform-content > h3,
section.spongebob-longform .longform-content > h4,
section.spongebob-longform .longform-content > p {
    width: 55%;
}

section.spongebob-longform .longform-content > h2 {
    color: var(--sb-yellow);
    font-size: 5rem;
    font-family: 'FranklinGothic';
    font-weight: 400;
    line-height: 1;
    max-width: 20ch;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-shadow: 0.05em 0.05em 0 #137e9e;
}

section.spongebob-longform .longform-content > h2 small {
    display: block;
    font-size: 50%;
    text-shadow: 0.07em 0.07em 0 #137e9e;
    margin-bottom: 0.5rem;
}

section.spongebob-longform .longform-content > h4 {
    text-align: center;
    margin-bottom: 4rem;
}

section.spongebob-longform .longform-content > h3 {
    font-family: 'FranklinGothic';
    font-weight: 400;
    margin-bottom: 0.7rem;
    line-height: 1.05;
}

section.spongebob-longform .longform-content > p {
    font-size: 1.13rem;
    line-height: 1.57;
}

@supports (initial-letter: 3 3) {

    section.spongebob-longform .longform-content > p:first-of-type::first-letter {
        color: var(--sb-yellow);
        font-weight: 700;
        -webkit-initial-letter: 3 3;
        initial-letter: 3 3;
        margin-right: 0.7rem;
        text-shadow: 0.2em 0.2em 0 #137e9e;
    }
}


section.spongebob-longform .longform-content .longform-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    scroll-margin-top: 100px;
}

section.spongebob-longform .longform-media img,
section.spongebob-longform .longform-media video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

section.spongebob-longform .longform-content .longform-grid {
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    gap: 2rem;
}

section.spongebob-longform .longform-content .longform-grid .longform-grid-image {
    width: 100%;
    aspect-ratio: 9/11;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

section.spongebob-longform .longform-content .longform-grid .longform-grid-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}


/* Footer */
section.spongebob-longform .longform-content .article-footer {
    width: 100%;
    text-align: center;
    padding-block: 2rem;
    background-color: transparent;
}

.spongebob-effect {
    position: relative;
    width: 300px;
    height: auto;
    margin: 0 auto 1rem;
}

.spongebob-effect * {
    pointer-events: none;
}

.spongebob-effect img.anchor,
.spongebob-effect img.eyes {
    width: 100%;
    height: auto;
}

.spongebob-effect img.anchor {
    display: block;
    position: relative;
    z-index: 10;
}

.spongebob-effect img.eyes {
    position: absolute;
    top: 0;
    left: 0;
}

.spongebob-effect .eyes-wrapper {
    position: absolute;
    top: 14.5%;
    left: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.2rem;
}

.spongebob-effect .eyes-wrapper .eye {
    width: 20%;
    aspect-ratio: 1 / 1;
    /* background-color: rgba(255, 0, 0, 0.2); */
    border-radius: 50%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

}

.spongebob-effect .eyes-wrapper img {
    position: relative;
    width: 2rem;
    height: 2rem;
}

section.spongebob-longform .longform-content .article-footer h2 {
    width: 100%;
    margin-bottom: 3rem;
    margin-inline: auto;
    font-family: 'FranklinGothic', sans-serif;
    font-size: 2.7rem;
    line-height: 1.1;
    color: #601301;
    font-weight: 400;
    max-width: 30ch;
}

section.spongebob-longform .longform-content .article-footer a {
    position: relative;
    padding: 1em 3em;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #9e0000;
    color: white;
    font-size: 1rem;
    border: none;
    -webkit-box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3);
    z-index: 10;
}


@media (max-width: 1445px) {
    section.spongebob-longform .longform-content {
        max-width: 900px;
    }
    section.spongebob-longform .longform-content > h2 {
        font-size: 4rem;
    }
}


@media (max-width: 1281px) {
    section.spongebob-longform .longform-content > h3,
    section.spongebob-longform .longform-content > h4,
    section.spongebob-longform .longform-content > p {
        width: 55%;
    }
}

@media (max-width: 800px) {
    section.spongebob-longform .longform-content > h3,
    section.spongebob-longform .longform-content > h4,
    section.spongebob-longform .longform-content > p {
        width: 70%;
    }
}

@media (max-width: 1170px) {
    .spongebob-effect {
        width: 220px;
    }
    .spongebob-effect .eyes-wrapper img {
        width: 1.7rem;
        height: 1.7rem;
    }
    section.spongebob-longform .longform-content > p {
        font-size: 1.05rem;
    }
}


@media (max-width: 670px) {

    section.spongebob-longform .longform-content > h3,
    section.spongebob-longform .longform-content > h4,
    section.spongebob-longform .longform-content > p {
        width: 87%;
    }

    section.spongebob-longform .longform-content .longform-media,
    section.spongebob-longform .longform-content .longform-grid {
        margin-block: 2rem;
    }

    section.spongebob-longform .longform-content .longform-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    section.spongebob-longform .longform-content > h2 {
        font-size: 2.4rem;
    }

    section.spongebob-longform .longform-content > h2 small {
        font-size: 70%;
    }

    section.spongebob-longform .longform-content > h3 {
        font-size: 1.7rem;
    }

    section.spongebob-longform .longform-content > h4 {
        margin-bottom: 2rem;
    }

    section.spongebob-longform .longform-content > p {
        line-height: 1.35;
    }

    section.spongebob-longform .longform-content .article-footer h2 {
        font-size: 1.7rem;
    }

}