/* ------------------------------ */
/* "Always With You" Intro
/* ------------------------------ */

.devon__intro {
    display: none;
}

.devon-intro-playing {
    overflow: hidden;
}

.devon-intro-playing .devon__intro {
    /* One Figma pixel of the 1440x1024 frame, shrunk to fit the viewport. */
    --devon-intro-unit: min(100vw / 1440, 100vh / 1024);
    /* Smooth fit (within 2.6%) of Figma's 50-stop spring, whose corners read as wobble on the zoomed letters. */
    --devon-intro-spring: cubic-bezier(0.293, 0.678, 0, 1);

    display: block;
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow: hidden;
    pointer-events: none;
}

.devon__intro__panel {
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--wp--preset--color--blue-primary);
}

/* Split sits in the gap between ALWAYS and WITH, as in the frame. */
.devon__intro__panel--top {
    top: 0;
    height: calc(50% - 22.74 * var(--devon-intro-unit));
    animation: devon-intro-split-top 1.995s var(--devon-intro-spring) 2.005s both;
}

.devon__intro__panel--bottom {
    bottom: 0;
    height: calc(50% + 22.74 * var(--devon-intro-unit));
    animation: devon-intro-split-bottom 1.995s var(--devon-intro-spring) 2.005s both;
}

.devon__intro__wordmark {
    position: absolute;
    left: calc(50% - 99.78 * var(--devon-intro-unit));
    width: calc(541.97 * var(--devon-intro-unit));
    height: calc(371.93 * var(--devon-intro-unit));
    transform-origin: 7.486% 32.048%;
    /* Fading with the split clears the letters on tall phones, where the zoom alone leaves them on screen. */
    animation:
        devon-intro-zoom 3.479s ease-out 0.521s both,
        devon-intro-fade 1.995s var(--devon-intro-spring) 2.005s both;
}

.devon__intro__row {
    position: absolute;
    max-width: none;
    height: calc(113.463 * var(--devon-intro-unit));
}

.devon__intro__row--always {
    left: calc(2.81 * var(--devon-intro-unit));
    top: 0;
    width: calc(539.156 * var(--devon-intro-unit));
}

.devon__intro__row--with {
    left: calc(3.41 * var(--devon-intro-unit));
    top: calc(129.24 * var(--devon-intro-unit));
    width: calc(352.851 * var(--devon-intro-unit));
}

.devon__intro__row--you {
    left: 0;
    top: calc(258.47 * var(--devon-intro-unit));
    width: calc(262.784 * var(--devon-intro-unit));
}

/* Both wordmark copies hang off the split line, so the halves line up as one wordmark. */
.devon__intro__panel--top .devon__intro__wordmark {
    top: calc(100% - 121.26 * var(--devon-intro-unit));
}

.devon__intro__panel--bottom .devon__intro__wordmark {
    top: calc(-121.26 * var(--devon-intro-unit));
}

/* Panel travel matches the frame's 500px/700px as a share of each panel's height. */
@keyframes devon-intro-split-top {
    to {
        translate: 0 -102.2%;
    }
}

@keyframes devon-intro-split-bottom {
    to {
        translate: 0 130.9%;
    }
}

@keyframes devon-intro-zoom {
    to {
        scale: 10;
    }
}

@keyframes devon-intro-fade {
    to {
        opacity: 0;
    }
}