header {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.chrysalis-logo {
    width: 10em;
    height: 8em;
    font-size: 1.5em;
    padding-top: 5em;
    line-height: 0.8;
    text-align: center;
    margin-inline: auto;
    background-image: url('/assets/chrysalis_contrast.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: top center;
}

.chrysalis-logo::before {
    display: block;
    content: "CHRYSALIS";
    font-weight: 200;
    letter-spacing: 0.6em;
    margin-right: -0.6em;
}

.chrysalis-logo::after {
    display: block;
    content: "DREAM WORK";
    font-weight: 600;
    font-size: 0.5em;
    letter-spacing: 0.6em;
    margin-right: -0.6em;
    margin-top: 0.6em;
}

.card .chrysalis-logo {
    font-size: 1.25em;
}

body {
    overflow-x: hidden;
}

header {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

header .background {
    position: absolute;
    inset: 0;
}

header .background::before,
header .background::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

header .background::before {
    background-image: var(--src-load);
    filter: blur(20px);
}

header .background::after {
    background-image: var(--src);
}

header .background.loading::before {
    opacity: 1;
}

header .background.loaded::after {
    opacity: 1;
}

header .cta {
    position: absolute;
    bottom: 20%;
}



.container {
    width: 100%;
    max-width: 40rem;
}

.container.narrow {
    width: 100%;
    max-width: 26rem;
}

p > em:only-child {
    font-size: clamp(20px, calc(10px + 1.25vw), 2em);
    line-height: 1.25em;
    font-style: normal;
    font-weight: 600;
    color: var(--clr-fade-lightest);
    background: linear-gradient(
        0deg,
        transparent 22%,
        var(--clr-base) 22%,
        var(--clr-base) 44%,
        transparent 44%
    )
}

p img {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 1.5rem auto;
    border-radius: 10px;
}

p > img:only-child {
    margin: 3rem auto;
}

.marked p:first-child img {
    max-width: none;
}

blockquote {
    display: block;
    width: 100vw;
    margin: 2.5em calc(50% - 50vw);
    padding: 1.5em;
    font-size: clamp(20px, 3vw, 3rem);
    font-weight: 900;
    line-height: 1.25em;

    /* Background stuff */
    position: relative;
    isolation: isolate;
    transform: translateZ(500px);
}

blockquote p {
    max-width: 44ch;
    text-align: center;
    margin: 0 auto;
}

blockquote strong {
    font-weight: 900;
    color: var(--clr-contrast-dark);
}

/* SECOND */
blockquote:nth-of-type(3) {
    color: var(--clr-base-lightest);
}

blockquote:nth-of-type(3)::before { 
    content: '';
    z-index: -1;
    inset: 0;
    position: absolute;
    transform: skewY(-5deg);
    background:
        linear-gradient(
            45deg,
            var(--clr-base-dark) 10%,
            transparent 35%,
            transparent 65%,
            var(--clr-base-dark) 90%
        );
}

/* THIRD */

blockquote:nth-of-type(2) {
    color: var(--clr-fade-lightest);
    background: linear-gradient(
        to right,
        var(--clr-fade),
        transparent 75%
    );
}

blockquote:nth-of-type(2) p {
    text-align: left;
    margin: 0 auto 0 0;
    max-width: 36ch;
}

#scroll-tracker {
    z-index: 1000;
    position: fixed;
    inset: 0 0 auto;
    height: 2px;
    background-color: var(--clr-base-lightest);
}

li:is(.video, .audio, .exercise, .practice) {
    margin-block: 0;
    font-size: 0.85em;
    font-weight: 600;
    margin-left: -1em;
    list-style: none;
}

li:is(.video, .audio, .exercise, .practice)::before {
    position: absolute;
    content: '';
    top: 0.35em;
    left: -.5em;
    width: 1em;
    height: 1em;
    opacity: 0.5;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

li.video::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"/></svg>');
}

li.audio::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80C149.9 80 62.4 159.4 49.6 262c9.4-3.8 19.6-6 30.4-6c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48c-44.2 0-80-35.8-80-80V384 336 288C0 146.6 114.6 32 256 32s256 114.6 256 256v48 48 16c0 44.2-35.8 80-80 80c-26.5 0-48-21.5-48-48V304c0-26.5 21.5-48 48-48c10.8 0 21 2.1 30.4 6C449.6 159.4 362.1 80 256 80z"/></svg>');
}

li.exercise::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg>');
}

li.practice::before {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M96 64c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32V224v64V448c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V384H64c-17.7 0-32-14.3-32-32V288c-17.7 0-32-14.3-32-32s14.3-32 32-32V160c0-17.7 14.3-32 32-32H96V64zm448 0v64h32c17.7 0 32 14.3 32 32v64c17.7 0 32 14.3 32 32s-14.3 32-32 32v64c0 17.7-14.3 32-32 32H544v64c0 17.7-14.3 32-32 32H480c-17.7 0-32-14.3-32-32V288 224 64c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32zM416 224v64H224V224H416z"/></svg>');
}


#checkout ul {
    margin: 1em 0 2em 1em;
}

#checkout li::marker {
    content:"✔";
}

.button--glow {
    --glow-color-off: hsl(var(--hue-contrast), 50%, 70%);
    --glow-color-on: hsl(var(--hue-contrast), 100%, 90%);
    --glow-off: 0 0 0 var(--glow-color-off);
    --glow-on: 0 0 1em var(--glow-color-on);
    --glow-border-radius: 30px;
    position: relative;
    background: none;
    font-weight: 400;
    border-radius: var(--glow-border-radius);
    color: var(--glow-color-off);
    border: 2px solid currentColor;
    text-shadow: var(--glow);
    box-shadow: inset var(--glow), var(--glow);
    animation: 2.2s ease-in-out infinite alternate glowHover;
}

.button--glow::after {
    content: '';
    inset: 0;
    position: absolute;
    background-color: currentColor;
    border-radius: var(--glow-border-radius);
    animation: 2.2s ease-in-out infinite alternate glowReflection;
}

@keyframes glowHover {
    from {
        transform: translateY(-0.5em);
        color: var(--glow-color-off);
        box-shadow: inset var(--glow-off), var(--glow-off);
        text-shadow: var(--glow-off);
    }
    to {
        transform: translateY(0em);
        color: var(--glow-color-on);
        box-shadow: inset var(--glow-on), var(--glow-on);
        text-shadow: var(--glow-on);
    }
}

@keyframes glowReflection {
    from {
        opacity: 0.2;
        filter: blur(1em);
        transform: translateY(150%) perspective(3.5em) rotateX(40deg) scale(1, .75) ;

    }
    to {
        opacity: 0.65;
        filter: blur(1.5em);
        transform: translateY(125%) perspective(4em) rotateX(40deg) scale(1, .5) ;
    }
}        


.text-animator {
    position: absolute;
    width: 100%;
    height: 12em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.text-animator > p {
    position: absolute;
    max-width: 36ch;
    font-size: min(8vw, 3.5em);
    font-weight: 900;
    line-height: 1.25em;
    color: white;
}

.text-animator > p > span {
    opacity: 0;
    display: inline-block;
}

/* header .background { opacity: .65; } */
header .logo { opacity: 0; }
header .launch-date { opacity: 0; }

header { z-index: 0; }
header > * { z-index: 1; } 

@keyframes textAnimatorEnterWord {
    from {
        opacity: 0;
        transform: translateY(-0.25em) scale(1.15);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes textAnimatorExitPhrase {
    to {
        opacity: 0;
        transform: scale(1.25);
        filter: blur(15px);
    }
}

@keyframes fadeAndZoom {
    0% { 
        opacity: 0.65;
        transform: scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0.05;
        transform: scale(1.25);
        filter: blur(3px);
    }
}

@keyframes breathe {
    0% {
        opacity: 0.05;
        filter: blur(3px);
    }
    100% {
        opacity: 0.10;
        filter: blur(1px);
    }
}

@keyframes blur {
    from { filter: blur(0); }
    to { filter: blur(10px); }
}

@keyframes unBlur {
    from {
        opacity: 0;
        filter: blur(50px);
        transform: scale(1.5);
    }
    to {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes enterWord {
    from {
        opacity: 0;
        transform: scale(1.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes enterPeriod {
    from{
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes enterLogo {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(1em);
    }
}

@keyframes enterOffer {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes enterCta {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}