/* ===== css/index-bird.css — index 头部那只 crow（auth.js 注入的 .chat-crow）+ 统一加载层 =====
   历史：CS10 飞升过场（js/bird-ascent.js + #birdAscent 覆盖层）已废案，
   完整实现留在 attic/cs10-launch-transition/（AScent 引擎 + 原样式）。
   现在这条链路只做三件事：
     1. .chat-crow 留在 auth.js 注入的原位：.user-info 里用户名和写文章按钮之间，
        尺寸对齐 .btn-sm 按钮，悬停框透明；
     2. 悬停喊叫（croak 帧轮播），点击后按 FlyUp01..15 帧展翅向上翱翔飞出；
     3. 飞出后铺 #pageLoadingOverlay（与 internet_cafe/article/login 同一套
        夜空 + 雪花 + 十帧跑动 Madeline + LOADING…），再进纪念页。 */

/* 加载层文字用 Renogare；纪念页没引 common.css，这里自带一份 @font-face 兜底 */
@font-face {
    font-family: 'Renogare';
    src: url('../celeste-font-en/Renogare-Regular.otf') format('opentype');
    font-display: swap;
}

/* ---------- header-right / .user-info 里的鸟：留在用户名和写文章之间，与按钮水平对齐 ---------- */
.user-info .chat-crow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    background: transparent;       /* 默认透明 */
    transition: filter .18s ease; /* 只过渡 filter，不再过渡背景 */
}
.user-info .chat-crow:hover,
.user-info .chat-crow:focus-visible { background: transparent; } /* 悬停框也透明 */
/* common.css 把 .chat-crow-box 定死成 19×18 + overflow:hidden、img 用负 margin 裁出头像，
   这里放开裁切，保持整只鸟可见 */
.chat-crow .chat-crow-box {
    width: auto;
    height: auto;
    overflow: visible;
    align-items: center;
    justify-content: center;
    position: relative;
    /* crow 素材 32×24 画布，鸟身只在下半部（y≈11..23，中心≈17），
       按渲染高度 28px 折算需上移 ~6px 视觉才居中；FlyUp 帧本身居中，飞出不受影响 */
    top: -6px;
}
.chat-crow .chat-crow-box img {
    height: 28px;            /* 与 .btn-sm 按钮高度对齐，保持 4:3 像素比 */
    width: auto;
    margin: 0;
    image-rendering: pixelated;
    transition: filter .18s ease;
    display: block;
}
/* 钥匙图标的视觉中线对齐鸟：.api-key-icon 是行内 <img>，按文字基线排布，
   下方留出 descender 空隙（按钮因此被撑到 36.8px），光学中心比按钮/鸟高 4.4px；
   只把这个图标下移同样的距离，按钮尺寸与 header 行高不变 */
.user-info .api-key-icon {
    position: relative;
    top: 4.4px;
}
/* 悬停只加亮：喊叫由 js/index-bird.js 轮播 crow00..13 完成，不做位移/缩放 */
.chat-crow:hover .chat-crow-box img,
.chat-crow:focus-visible .chat-crow-box img {
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(185, 220, 255, .9));
}

/* ---------- 点击后飞出：按 BirdPath FlyUp 动作纯竖直向上飞 ----------
   飞行时间 1.2s（Celeste 原版 FlyUp15 帧×0.10s=1.5s，稍快一点但够看清），
   路径纯 Y 轴，不带水平偏移（用户说"竖直向上飞不是按那个曲线路线"）。 */
.chat-crow.flying-out { pointer-events: none; }
.chat-crow.flying-out .chat-crow-box img {
    animation: crowFlyOut 1.2s ease-in forwards;
}
@keyframes crowFlyOut {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    60%  { transform: translate(0, -55vh) scale(1.15); opacity: 1; }
    100% { transform: translate(0, -85vh) scale(1.35); opacity: 0; }
}

/* ---------- 统一加载层 ----------
   与 internet_cafe.css 的 #pageLoadingOverlay 视觉同口径（月光晕 / 两层点阵星星 /
   雪花画布 / 底部雪带 / 十帧跑动 Madeline / LOADING…）。
   动画名加 ld 前缀，避免和 index-inline.css 的 snowDrift 等重名。
   index 页由 js/page-loading.js 的 show() 在鸟飞走后唤醒；[data-standby] 时先隐藏。 */
#pageLoadingOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #050514;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: none;   /* 进场不走整层淡入：暗底首帧即实心，内容分层进场；退场过渡写在 .done 上 */
}
#pageLoadingOverlay[data-standby] { display: none; }
/* 进场：总长 640ms（短于退场 970ms），光晕 → 星星 → 雪 → 人物 → 文字依次拉起；
   暗底首帧就是实心 #050514，不会透出原图，也不会白闪 */
#pageLoadingOverlay::before { animation: ldEnterFade .26s ease-out backwards; }
#pageLoadingOverlay #ldSnowCanvas { animation: ldEnterFade .28s ease-out .2s backwards; }
/* 退场第一段：光晕/点阵星/雪/人物先暗下去（320ms，与 js/page-loading.js 的 GLOW_MS 同值），
   暗底留到第二段再整层淡出；pointer-events 立即关闭，淡出期间不挡已就绪的内容 */
#pageLoadingOverlay.done {
    opacity: 0;
    pointer-events: none;
    transition: opacity .65s ease .32s;   /* FADE_MS / FADE_DELAY_MS */
}
#pageLoadingOverlay::before,
#pageLoadingOverlay .ld-stars,
#pageLoadingOverlay .ld-stars2,
#pageLoadingOverlay #ldSnowCanvas,
#pageLoadingOverlay .ld-snow-strip,
#pageLoadingOverlay .loading-madeline,
#pageLoadingOverlay .loading-text { transition: opacity .32s ease-out; }
#pageLoadingOverlay.done::before,
#pageLoadingOverlay.done #ldSnowCanvas,
#pageLoadingOverlay.done .ld-snow-strip,
#pageLoadingOverlay.done .loading-madeline,
#pageLoadingOverlay.done .loading-text { opacity: 0; }
/* 星星挂 ldStarTwinkle 无限动画，退场时停掉动画才能把透明度真正压到 0 */
#pageLoadingOverlay.done .ld-stars,
#pageLoadingOverlay.done .ld-stars2 { opacity: 0; animation: none; }
#pageLoadingOverlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 78% 16%, rgba(180, 200, 255, .16), transparent 32%),
        radial-gradient(circle at 18% 82%, rgba(90, 110, 180, .10), transparent 40%);
}
#pageLoadingOverlay .ld-stars,
#pageLoadingOverlay .ld-stars2 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    background: transparent;
}
#pageLoadingOverlay .ld-stars {
    box-shadow: 12vw 8vh 0 1px rgba(255,255,255,.8), 34vw 22vh 0 rgba(255,255,255,.5), 58vw 6vh 0 1px rgba(255,255,255,.7),
                82vw 18vh 0 rgba(255,255,255,.4), 46vw 12vh 0 rgba(255,255,255,.55), 90vw 40vh 0 1px rgba(255,255,255,.6),
                8vw 34vh 0 rgba(255,255,255,.45), 68vw 30vh 0 rgba(255,255,255,.5), 24vw 46vh 0 1px rgba(255,255,255,.65),
                94vw 8vh 0 rgba(255,255,255,.4), 52vw 40vh 0 rgba(255,255,255,.35), 16vw 16vh 0 rgba(255,255,255,.5);
    animation: ldEnterFade .3s ease-out .1s backwards, ldStarTwinkle 4.5s ease-in-out .4s infinite;
}
#pageLoadingOverlay .ld-stars2 {
    box-shadow: 20vw 12vh 0 rgba(255,255,255,.5), 42vw 5vh 0 1px rgba(255,255,255,.7), 72vw 22vh 0 rgba(255,255,255,.45),
                6vw 26vh 0 rgba(255,255,255,.5), 60vw 34vh 0 rgba(255,255,255,.4), 86vw 12vh 0 1px rgba(255,255,255,.6),
                30vw 38vh 0 rgba(255,255,255,.35), 96vw 30vh 0 rgba(255,255,255,.45), 48vw 24vh 0 rgba(255,255,255,.5),
                14vw 42vh 0 rgba(255,255,255,.3), 64vw 10vh 0 rgba(255,255,255,.4), 38vw 48vh 0 rgba(255,255,255,.35);
    animation: ldEnterFade .3s ease-out .1s backwards, ldStarTwinkle 6s ease-in-out 1.6s infinite;
}
#pageLoadingOverlay #ldSnowCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#pageLoadingOverlay .ld-snow-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: url('../celeste-areas/snow-front.webp') repeat-x bottom/220px auto;
    animation: ldEnterFadeHalf .28s ease-out .2s backwards, ldSnowDrift 45s linear infinite;
    opacity: .5;
    pointer-events: none;
}
/* 跑动的 Madeline：单图集裁剪窗 + 位移步进（transform 走合成层，主线程掉帧也不跳帧） */
#pageLoadingOverlay .loading-madeline {
    width: 120px;
    height: 120px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    animation: ldEnterRise .26s ease-out .3s backwards;
}
#pageLoadingOverlay .loading-madeline-sprite {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;      /* 图集 2000×200：10 帧 × 120px */
    height: 120px;
    max-width: none;
    display: block;
    image-rendering: pixelated;
    will-change: transform;
    animation: ldSpriteRun .8s steps(10) infinite;
}
@keyframes ldSpriteRun {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-1200px, 0, 0); }
}
#pageLoadingOverlay .loading-text {
    margin-top: 20px;
    color: #ffe36d;
    font-family: 'Renogare', 'CelesteZH', 'Microsoft YaHei', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    text-shadow: 0 0 12px rgba(255, 227, 109, .4);
    position: relative;
    z-index: 1;
    animation: ldEnterRise .24s ease-out .4s backwards;
}
#pageLoadingOverlay .loading-dots::after { content: ''; animation: ldDots 1.5s steps(4, end) infinite; }

/* 进场：光晕/星/雪纯淡入；人物/文字再叠 8px 上浮，分层感更明确 */
@keyframes ldEnterFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ldEnterFadeHalf { from { opacity: 0; } to { opacity: .5; } }
@keyframes ldEnterRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ldSnowDrift { from { background-position-x: 0; } to { background-position-x: -440px; } }
@keyframes ldStarTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes ldDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }