/* ============================================
   跨页过渡样式 - page-transition.css
   ============================================
   作用：
   1. 负责首页、行程页、详情页之间的主过渡动画和海洋遮罩。
   2. 把跨页切换做成潜浮式体验，而不是普通 fade。
   3. 配合深度计系统提供页面离场、入场和覆盖层节奏。
   阅读顺序：
   1. 全局变量
   2. 遮罩层与装饰层
   3. 页面进出场 class
   4. 细节状态与特殊过渡
*/

/* 文件导读：读这份样式时，建议一边对照 `depth-manager.js`，一边看每个状态 class 是什么时候被加上的。 */
/* 定义全局主题变量 */
:root {
    --ocean-base-opacity: 0.02;
    --ocean-cover-opacity: 0;
    --ocean-depth-progress: 0;
    --login-home-blue-opacity: 0;
    --login-home-caustic-opacity: 0;
    /* 过渡 token 兼容桥：
       优先复用 global.css 的共享节奏；若某页没带全局 token，再回退到原始时长。 */
    --page-exit-duration: 1000ms;
    --page-enter-duration: 760ms;
    --page-ocean-exit-duration: 1200ms;
    --page-ocean-enter-duration: 1040ms;
    --page-stage-translation: 76vh;
    --page-ocean-translation: 24vh;
    --page-ocean-swim-shift: 3vw;
    --page-ocean-swim-drift-y: 0.24vh;
    --page-ocean-swim-direction: 1;
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 780;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% -8%, rgb(172 224 255 / calc((var(--ocean-base-opacity) + var(--ocean-cover-opacity)) * 0.78)), transparent 48%),
        linear-gradient(
            180deg,
            rgb(16 81 125 / calc((var(--ocean-base-opacity) + var(--ocean-cover-opacity)) * 0.72)) 0%,
            rgb(6 33 62 / calc((var(--ocean-base-opacity) + var(--ocean-cover-opacity)) * 0.98)) 100%
        );
    /* 这里的 calc() 不是在算尺寸，而是在算颜色透明度：
       基础海层透明度 + 额外过渡增强值 会一起决定当前海水遮罩有多浓。 */
}

/* .page-transition-overlay::before 的前置装饰样式 */
.page-transition-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% -6%, rgba(184, 234, 255, 0.24), transparent 38%),
        radial-gradient(ellipse at 24% 72%, rgba(76, 169, 213, 0.18), transparent 46%),
        linear-gradient(180deg, rgba(22, 91, 137, 0.86) 0%, rgba(8, 44, 78, 0.94) 46%, rgba(3, 18, 40, 0.98) 100%);
    opacity: var(--login-home-blue-opacity);
}

/* .page-transition-overlay::after 的后置装饰样式 */
.page-transition-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 22%),
        linear-gradient(180deg, transparent 0%, rgba(0, 12, 34, 0.28) 100%);
    opacity: calc((var(--ocean-base-opacity) + var(--ocean-cover-opacity)) * (0.72 + var(--ocean-depth-progress) * 1.24));
    /* 深度越深，后半段乘数越大，遮罩就会更重；
       所以“继续下潜”时不只页面在移动，整片海也会一起加深。 */
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
.page-transition-bubbles {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    filter: saturate(1.08);
    transition: opacity 240ms linear;
}

.page-transition-spotlight {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 2;
    width: min(62vw, 760px);
    height: min(42vh, 420px);
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    mix-blend-mode: screen;
    filter: blur(22px) saturate(1.08);
    transform: translate3d(-50%, -50%, 0) scale(0.72);
    background:
        radial-gradient(ellipse at 50% 48%, rgba(232, 252, 255, 0.42) 0%, rgba(169, 230, 245, 0.24) 34%, rgba(74, 171, 211, 0.1) 58%, transparent 74%),
        radial-gradient(ellipse at 50% 100%, rgba(198, 242, 250, 0.18), transparent 64%);
    will-change: opacity, transform, filter;
}

.page-transition-spotlight::before {
    content: ";
    position: absolute;
    left: 50%;
    top: -34%;
    width: 36%;
    height: 132%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(240, 253, 255, 0.26), rgba(180, 237, 250, 0.1) 44%, transparent 100%);
    filter: blur(28px);
    opacity: 0.76;
    transform: translateX(-50%) rotate(3deg);
}

body.page-login-home-special-active .page-transition-spotlight {
    animation: login-home-spotlight-bloom 2.18s cubic-bezier(0.18, 0.78, 0.22, 1) 120ms both;
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
body.page-login-home-special-active .page-transition-bubbles {
    opacity: 1;
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
body.page-login-home-bubbles-fade .page-transition-bubbles {
    opacity: 0;
    transition: opacity 1140ms ease-out;
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
.page-transition-bubble {
    position: absolute;
    left: var(--bubble-left, 50%);
    bottom: var(--bubble-bottom, -14vh);
    width: var(--bubble-size, 18px);
    height: var(--bubble-size, 18px);
    opacity: 0;
    filter: blur(var(--bubble-blur, 0px));
    transform: translate3d(0, 24px, 0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.page-transition-bubble-core {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.22) 42%, transparent 64%),
        radial-gradient(circle at 64% 70%, rgba(170, 226, 246, 0.34), transparent 68%),
        radial-gradient(circle at 50% 50%, rgba(116, 203, 231, 0.18), rgba(116, 203, 231, 0.02) 58%, transparent 72%);
    box-shadow:
        inset 0 0 0 1px rgba(232, 250, 255, 0.28),
        0 0 calc(var(--bubble-size, 18px) * 0.86) rgba(141, 219, 243, 0.2);
    transform: translate3d(0, 0, 0) scale(var(--bubble-start-scale, 0.38));
    transform-origin: center;
    will-change: transform;
    backface-visibility: hidden;
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
body.page-login-home-bubbles .page-transition-bubble {
    animation: login-home-bubble-rise var(--bubble-duration, 1.8s) linear var(--bubble-delay, 0s) forwards;
}

body.page-login-home-bubbles .page-transition-bubble-core {
    animation: login-home-bubble-drift var(--bubble-duration, 1.8s) ease-in-out var(--bubble-delay, 0s) forwards;
}

body.page-login-home-special-active.login-page .page-stage {
    filter: saturate(0.96) brightness(0.92);
}

body.page-login-home-special-active.login-page .login-stage-shell {
    animation: login-home-stage-release 1.72s cubic-bezier(0.2, 0.78, 0.22, 1) 120ms both;
}

body.page-login-home-special-active.login-page .login-atmosphere {
    animation: login-home-atmosphere-sink 1.86s cubic-bezier(0.18, 0.76, 0.2, 1) both;
}

/* .page-stage 的主要视觉与布局效果 */
.page-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    transform: none;
    transform-origin: center center;
    opacity: 1;
    filter: none;
    will-change: auto;
    backface-visibility: hidden;
}

body.page-login-home-special-active .page-transition-overlay::before {
    animation: login-home-blue-breath 2.55s cubic-bezier(0.18, 0.76, 0.22, 1) both;
}

body.page-login-home-special-active .page-transition-overlay::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%),
        linear-gradient(112deg, transparent 0%, rgba(190, 238, 252, 0) 28%, rgba(203, 244, 255, 0.18) 48%, rgba(118, 202, 226, 0) 68%),
        repeating-linear-gradient(92deg, rgba(237, 251, 255, 0.045) 0 1px, transparent 1px 56px),
        linear-gradient(180deg, transparent 0%, rgba(0, 12, 34, 0.32) 100%);
    background-size: auto, 180% 100%, auto, auto;
    opacity: max(
        calc((var(--ocean-base-opacity) + var(--ocean-cover-opacity)) * (0.72 + var(--ocean-depth-progress) * 1.24)),
        var(--login-home-caustic-opacity)
    );
    animation: login-home-caustic-drift 2.72s cubic-bezier(0.18, 0.78, 0.2, 1) both;
}

/* 控制顶部导航的布局、透明度和当前页状态反馈 */
body.home-page > .navbar,
body.detail-page > .navbar,
body.trip-page > .navbar,
body.info-page > .navbar {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    filter: none;
    will-change: auto;
    backface-visibility: hidden;
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
body.page-transition-active {
    overflow: hidden;
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
body.page-transition-active .page-stage,
body.page-transition-active.home-page > .navbar,
body.page-transition-active.detail-page > .navbar,
body.page-transition-active.trip-page > .navbar,
body.page-transition-active.info-page > .navbar {
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
body.page-transition-active .navbar,
body.page-transition-active .back-to-top,
body.page-transition-active .sea-guide {
    pointer-events: none;
}

/* 控制页面过渡遮罩、气泡层和海洋切换特效 */
body.page-transition-active.home-page > .navbar,
body.page-transition-active.detail-page > .navbar,
body.page-transition-active.trip-page > .navbar,
body.page-transition-active.info-page > .navbar {
    z-index: 760;
}

/* 控制顶部导航的布局、透明度和当前页状态反馈 */
body.page-exit-up .page-stage,
body.home-page.page-exit-up > .navbar,
body.detail-page.page-exit-up > .navbar,
body.trip-page.page-exit-up > .navbar,
body.info-page.page-exit-up > .navbar {
    animation: page-exit-up var(--motion-depth-exit, var(--page-exit-duration) cubic-bezier(0.22, 0.74, 0.18, 1)) forwards;
}

/* 控制顶部导航的布局、透明度和当前页状态反馈 */
body.page-exit-down .page-stage,
body.home-page.page-exit-down > .navbar,
body.detail-page.page-exit-down > .navbar,
body.trip-page.page-exit-down > .navbar,
body.info-page.page-exit-down > .navbar {
    animation: page-exit-down var(--motion-depth-exit, var(--page-exit-duration) cubic-bezier(0.22, 0.74, 0.18, 1)) forwards;
}

/* body.page-enter-from-bottom .page-stage, body.home-page.page-enter-from-bottom > .nav... 的主要视觉与布局效果 */
body.page-enter-from-bottom .page-stage,
body.home-page.page-enter-from-bottom > .navbar,
body.detail-page.page-enter-from-bottom > .navbar,
body.trip-page.page-enter-from-bottom > .navbar,
body.info-page.page-enter-from-bottom > .navbar {
    animation: page-enter-from-bottom var(--motion-depth-enter, var(--page-enter-duration) cubic-bezier(0.14, 0.86, 0.2, 1)) both;
}

/* 控制顶部导航的布局、透明度和当前页状态反馈 */
body.page-enter-from-top .page-stage,
body.home-page.page-enter-from-top > .navbar,
body.detail-page.page-enter-from-top > .navbar,
body.trip-page.page-enter-from-top > .navbar,
body.info-page.page-enter-from-top > .navbar {
    animation: page-enter-from-top var(--motion-depth-enter, var(--page-enter-duration) cubic-bezier(0.14, 0.86, 0.2, 1)) both;
}

/* 控制顶部导航的布局、透明度和当前页状态反馈 */
body.page-ocean-dive-exit .page-stage,
body.home-page.page-ocean-dive-exit > .navbar,
body.detail-page.page-ocean-dive-exit > .navbar,
body.trip-page.page-ocean-dive-exit > .navbar,
body.info-page.page-ocean-dive-exit > .navbar {
    animation: page-ocean-dive-exit var(--motion-ocean-exit, var(--page-ocean-exit-duration) cubic-bezier(0.16, 0.8, 0.2, 1)) forwards;
}

body.page-ocean-dive-exit .page-stage,
body.page-ocean-dive-enter .page-stage {
    transform-origin: 50% 16%;
}

/* body.page-ocean-dive-enter .page-stage, body.home-page.page-ocean-dive-enter > .navba... 的主要视觉与布局效果 */
body.page-ocean-dive-enter .page-stage,
body.home-page.page-ocean-dive-enter > .navbar,
body.detail-page.page-ocean-dive-enter > .navbar,
body.trip-page.page-ocean-dive-enter > .navbar,
body.info-page.page-ocean-dive-enter > .navbar {
    animation: page-ocean-dive-enter var(--motion-ocean-enter, var(--page-ocean-enter-duration) cubic-bezier(0.16, 0.84, 0.18, 1)) both;
}

/* body.page-ocean-surface-exit .page-stage, body.home-page.page-ocean-surface-exit > .n... 的主要视觉与布局效果 */
body.page-ocean-surface-exit .page-stage,
body.home-page.page-ocean-surface-exit > .navbar,
body.detail-page.page-ocean-surface-exit > .navbar,
body.trip-page.page-ocean-surface-exit > .navbar,
body.info-page.page-ocean-surface-exit > .navbar {
    animation: page-ocean-surface-exit var(--motion-ocean-exit, var(--page-ocean-exit-duration) cubic-bezier(0.16, 0.76, 0.24, 1)) forwards;
}

body.page-ocean-surface-exit .page-stage,
body.page-ocean-surface-enter .page-stage {
    transform-origin: 50% 84%;
}

/* body.page-ocean-surface-enter .page-stage, body.home-page.page-ocean-surface-enter > ... 的主要视觉与布局效果 */
body.page-ocean-surface-enter .page-stage,
body.home-page.page-ocean-surface-enter > .navbar,
body.detail-page.page-ocean-surface-enter > .navbar,
body.trip-page.page-ocean-surface-enter > .navbar,
body.info-page.page-ocean-surface-enter > .navbar {
    animation: page-ocean-surface-enter var(--motion-ocean-enter, var(--page-ocean-enter-duration) cubic-bezier(0.12, 0.84, 0.18, 1)) both;
}

/* 同层潜游：用于同深度页面之间的平移过渡，例如详情页之间的海域切换。 */
body.page-ocean-swim-exit .page-stage,
body.home-page.page-ocean-swim-exit > .navbar,
body.detail-page.page-ocean-swim-exit > .navbar,
body.trip-page.page-ocean-swim-exit > .navbar,
body.info-page.page-ocean-swim-exit > .navbar {
    animation: page-ocean-swim-exit var(--motion-ocean-exit, var(--page-ocean-exit-duration) cubic-bezier(0.18, 0.8, 0.22, 1)) forwards;
}

body.page-ocean-swim-enter .page-stage,
body.home-page.page-ocean-swim-enter > .navbar,
body.detail-page.page-ocean-swim-enter > .navbar,
body.trip-page.page-ocean-swim-enter > .navbar,
body.info-page.page-ocean-swim-enter > .navbar {
    animation: page-ocean-swim-enter var(--motion-ocean-enter, var(--page-ocean-enter-duration) cubic-bezier(0.12, 0.84, 0.18, 1)) both;
}

/* 定义 page-exit-up 动画的关键帧 */
@keyframes page-exit-up {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(0, calc(var(--page-stage-translation) * -1), 0) scale(0.992);
        opacity: 0.2;
    }
}

/* 定义 page-exit-down 动画的关键帧 */
@keyframes page-exit-down {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(0, var(--page-stage-translation), 0) scale(0.992);
        opacity: 0.2;
    }
}

/* 定义 page-enter-from-bottom 动画的关键帧 */
@keyframes page-enter-from-bottom {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(0, var(--page-stage-translation), 0) scale(0.986);
        opacity: 0.08;
    }
/* 控制动画在 72% 阶段的状态 */
    72% {
        opacity: 0.92;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* 定义 page-enter-from-top 动画的关键帧 */
@keyframes page-enter-from-top {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(0, calc(var(--page-stage-translation) * -1), 0) scale(0.986);
        opacity: 0.08;
    }
/* 控制动画在 72% 阶段的状态 */
    72% {
        opacity: 0.92;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* 定义 page-ocean-dive-exit 动画的关键帧 */
@keyframes page-ocean-dive-exit {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(0, calc(var(--page-ocean-translation) * -0.74), 0) scale(0.986);
        opacity: 0.14;
    }
}

/* 定义 page-ocean-dive-enter 动画的关键帧 */
@keyframes page-ocean-dive-enter {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(0, calc(var(--page-ocean-translation) * 0.62), 0) scale(1.004);
        opacity: 0.1;
    }
/* 控制动画在 62% 阶段的状态 */
    62% {
        opacity: 0.88;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
}

/* 定义 page-ocean-surface-exit 动画的关键帧 */
@keyframes page-ocean-surface-exit {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(0, calc(var(--page-ocean-translation) * 0.72), 0) scale(0.986);
        opacity: 0.14;
    }
}

/* 定义 page-ocean-surface-enter 动画的关键帧 */
@keyframes page-ocean-surface-enter {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(0, calc(var(--page-ocean-translation) * -0.58), 0) scale(1.004);
        opacity: 0.1;
    }
/* 控制动画在 62% 阶段的状态 */
    62% {
        opacity: 0.9;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
}

/* 定义 page-ocean-swim-exit 动画的关键帧 */
@keyframes page-ocean-swim-exit {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
/* 控制动画在 48% 阶段的状态 */
    48% {
        transform: translate3d(
            calc(var(--page-ocean-swim-shift) * var(--page-ocean-swim-direction) * 0.56),
            calc(var(--page-ocean-swim-drift-y) * -1),
            0
        ) scale(0.992);
        opacity: 0.62;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(
            calc(var(--page-ocean-swim-shift) * var(--page-ocean-swim-direction)),
            calc(var(--page-ocean-swim-drift-y) * -1.4),
            0
        ) scale(0.982);
        opacity: 0.14;
    }
}

/* 定义 page-ocean-swim-enter 动画的关键帧 */
@keyframes page-ocean-swim-enter {
/* 控制动画在 0% 阶段的状态 */
    0% {
        transform: translate3d(
            calc(var(--page-ocean-swim-shift) * var(--page-ocean-swim-direction) * -1),
            var(--page-ocean-swim-drift-y),
            0
        ) scale(1.012);
        opacity: 0.08;
    }
/* 控制动画在 52% 阶段的状态 */
    52% {
        transform: translate3d(
            calc(var(--page-ocean-swim-shift) * var(--page-ocean-swim-direction) * -0.34),
            calc(var(--page-ocean-swim-drift-y) * 0.24),
            0
        ) scale(1.004);
        opacity: 0.74;
    }
/* 控制动画在 100% 阶段的状态 */
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
}

/* 登录成功后，蓝层像水压一样先轻轻压入，再为首页入场慢慢退开。 */
@keyframes login-home-blue-breath {
    0% {
        filter: saturate(0.96) brightness(0.92);
        transform: scale(1.018);
    }

    44% {
        filter: saturate(1.08) brightness(1.02);
        transform: scale(1.006);
    }

    100% {
        filter: saturate(1) brightness(0.96);
        transform: scale(1);
    }
}

@keyframes login-home-caustic-drift {
    0% {
        --login-home-caustic-opacity: 0;
        background-position: 0 0, -54% 0, 0 0, 0 0;
        filter: blur(10px);
    }

    34% {
        --login-home-caustic-opacity: 0.26;
        filter: blur(4px);
    }

    100% {
        --login-home-caustic-opacity: 0.12;
        background-position: 0 0, 72% 0, 22px 0, 0 0;
        filter: blur(9px);
    }
}

@keyframes login-home-stage-release {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
        filter: blur(0) saturate(1);
    }

    58% {
        transform: translate3d(0, -10px, 0) scale(0.992);
        opacity: 0.82;
        filter: blur(3px) saturate(0.92);
    }

    100% {
        transform: translate3d(0, -28px, 0) scale(0.982);
        opacity: 0.18;
        filter: blur(14px) saturate(0.72);
    }
}

@keyframes login-home-atmosphere-sink {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        opacity: 0.34;
        transform: translate3d(0, 22px, 0) scale(1.028);
    }
}

@keyframes login-home-spotlight-bloom {
    0% {
        opacity: 0;
        filter: blur(34px) saturate(0.96);
        transform: translate3d(-50%, -44%, 0) scale(0.62);
    }

    32% {
        opacity: 0.72;
        filter: blur(20px) saturate(1.14);
        transform: translate3d(-50%, -50%, 0) scale(0.94);
    }

    68% {
        opacity: 0.54;
        filter: blur(24px) saturate(1.08);
        transform: translate3d(-50%, -53%, 0) scale(1.04);
    }

    100% {
        opacity: 0;
        filter: blur(40px) saturate(0.98);
        transform: translate3d(-50%, -58%, 0) scale(1.22);
    }
}

/* 定义 login-home-bubble-rise 动画的关键帧 */
@keyframes login-home-bubble-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }

    8% {
        opacity: calc(var(--bubble-peak-opacity, 0.84) * 0.76);
    }

    18% {
        opacity: var(--bubble-peak-opacity, 0.84);
    }

    70% {
        opacity: calc(var(--bubble-peak-opacity, 0.84) * 0.72);
    }

    86% {
        opacity: calc(var(--bubble-peak-opacity, 0.84) * 0.26);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -126vh, 0);
    }
}

@keyframes login-home-bubble-drift {
    0% {
        transform: translate3d(0, 0, 0) scale(var(--bubble-start-scale, 0.38));
    }

    28% {
        transform: translate3d(calc(var(--bubble-drift, 0px) * -0.22), 0, 0) scale(var(--bubble-mid-scale, 0.72));
    }

    58% {
        transform: translate3d(calc(var(--bubble-drift, 0px) * 0.48), 0, 0) scale(0.96);
    }

    100% {
        transform: translate3d(var(--bubble-drift, 0px), 0, 0) scale(var(--bubble-end-scale, 1.08));
    }
}