/* ===== 点击卡片弹层 · 样式 =====
   两套弹层：
   1) 卷轴（羊皮纸 + 木轴展开）—— 用于 在校经验 / 实习经验
   2) 猫咪对话框（GIF + 手绘气泡）—— 用于 自我介绍
   弹层 HTML 都带 scroll-layer 类（交互脚本共用），
   对话框另加 dialog-layer 类做样式区分（本文件后段覆盖前段）。 */

/* ---- 触发点：透明卡片里的文字，保持主题原样，仅保留手型提示 ---- */
.card { cursor: pointer; }

/* 带 .card 的卡片：右侧图标在悬停/窄屏时也保留（主题默认会收起/隐藏） */
.projectItem:has(.card):hover .projectItemRight {
    width: 20%;
}
.projectItem:has(.card):hover .projectItemLeft {
    width: 80%;
}
@media (max-width: 800px) {
    .projectItem:has(.card) .projectItemRight {
        display: flex;
    }
    .projectItem:has(.card) .projectItemRight img {
        display: block;
    }
    .projectItem:has(.card) .projectItemLeft {
        width: 80%;
    }
}

/* ================================================================
   一、卷轴弹层（羊皮纸 + 木轴，从中心向两侧展开）
   ================================================================ */
.scroll-layer {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(10, 6, 2, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
    z-index: 10000;
}
.scroll-layer.open {
    opacity: 1; visibility: visible;
    transition: opacity .35s ease;
}

/* 第一步：整卷轴"弹出"（缩放 + 位移 + 透明度） */
.scroll-scene {
    width: min(520px, 92vw);
    opacity: 0;
    transform: translateY(40px) scale(.72);
    transition: transform .6s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.scroll-layer.open .scroll-scene {
    opacity: 1; transform: none;
    transition: transform .65s cubic-bezier(.34,1.56,.64,1), opacity .35s ease .05s;
}

.scroll {
    position: relative;
    height: clamp(300px, 54vh, 350px);
    filter: drop-shadow(0 16px 26px rgba(0,0,0,.5));
}

/* 羊皮纸（第二步：从中心向两侧展开） */
.parchment {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 10% 20%, rgba(122,84,32,.16), transparent 42%),
        radial-gradient(ellipse at 92% 85%, rgba(122,84,32,.14), transparent 45%),
        radial-gradient(ellipse at 70% 8%, rgba(140,100,42,.13), transparent 32%),
        linear-gradient(168deg, #efddac 0%, #e6cc94 48%, #d5b67c 100%);
    border-radius: 3px;
    transform-origin: center center;
    transform: scaleX(.012);
    transition: transform 1.15s cubic-bezier(.2,.75,.25,1) .28s;
    overflow: hidden;
    z-index: 2;
}
.scroll-layer.open .parchment { transform: scaleX(1); }
/* 羊皮纸颗粒纹理 */
.parchment::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .08;
    mix-blend-mode: multiply;
    z-index: 1; pointer-events: none;
}
/* 羊皮纸边缘做旧 */
.parchment::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(70,42,10,.24) 100%);
    z-index: 3; pointer-events: none;
}

/* 上下木质卷轴（随展开从中心滑向两侧） */
.dowel {
    position: absolute;
    top: -4%; bottom: -4%;
    width: 22px;
    border-radius: 11px;
    background: linear-gradient(90deg, #5f4020, #9a7244 28%, #cfa86f 50%, #8a6138 74%, #5f4020);
    box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,220,170,.35), inset -3px 0 5px rgba(0,0,0,.3);
    z-index: 4;
    transition: left 1.15s cubic-bezier(.2,.75,.25,1) .28s,
                right 1.15s cubic-bezier(.2,.75,.25,1) .28s;
}
.dowel::before, .dowel::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    width: 30px; height: 9px; border-radius: 5px;
    background: linear-gradient(180deg, #8a6138, #54381c);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.dowel::before { top: -7px; }
.dowel::after { bottom: -7px; }
.dowel-left  { left: calc(49.4% - 11px); }
.scroll-layer.open .dowel-left { left: -13px; }
.dowel-right { right: calc(49.4% - 11px); }
.scroll-layer.open .dowel-right { right: -13px; }

/* 内框装饰线 */
.frame {
    position: absolute; inset: 13px;
    border: 1px solid rgba(88,58,20,.42);
    box-shadow: inset 0 0 0 1px rgba(88,58,20,.16);
    z-index: 2; pointer-events: none;
}

/* 第三步：展开后文字淡入 */
.content {
    position: relative; z-index: 1;
    height: 100%;
    padding: clamp(22px, 4vw, 34px) clamp(26px, 5vw, 42px) 16px;
    display: flex; flex-direction: column;
    opacity: 0; transform: translateY(8px);
    transition: opacity .7s ease 1.02s, transform .7s ease 1.02s;
}
.scroll-layer.open .content { opacity: 1; transform: none; }
.content .salute { font-size: 15px; letter-spacing: .14em; color: #6f4e24; font-style: italic; }
.content h2 {
    margin: 10px 0 16px;
    font-size: clamp(19px, 3.4vw, 24px);
    letter-spacing: .1em; color: #4a3012; font-weight: 600;
}
.content p {
    font-size: clamp(13px, 2.5vw, 15px);
    line-height: 2; color: #55371a;
}

/* 火漆印章 + 纹章 */
.seal {
    position: absolute; right: 18px; top: 14px; z-index: 3;
    width: 54px; height: 54px; border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #c75a44, #a53225 55%, #77200f 100%);
    box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,190,160,.4), inset 0 -4px 8px rgba(40,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: rotate(-9deg) scale(.5);
    transition: opacity .5s ease 1.25s, transform .5s cubic-bezier(.34,1.56,.64,1) 1.25s;
}
.scroll-layer.open .seal { opacity: 1; transform: rotate(-9deg) scale(1); }
.seal svg { width: 26px; height: 26px; }

/* ================================================================
   二、猫咪对话框弹层（GIF 左下角 + 手绘气泡 + 约400字正文）
   与卷轴共用 scroll-layer（交互逻辑一致），本段样式覆盖前半段。
   ================================================================ */
.dialog-layer {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(247, 243, 233, .30);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
    z-index: 10000;
}
.dialog-layer.open {
    opacity: 1; visibility: visible;
    transition: opacity .3s ease;
}

/* 场景：猫咪在尖角正下方，对话框为主体 */
.dialog-scene {
    --scene-w: min(860px, 96vw);
    --pad-l: clamp(130px, 26vw, 210px);
    --bubble-w: min(620px, calc(var(--scene-w) - var(--pad-l)));
    position: relative;
    width: var(--scene-w);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--pad-l);
}

/* 猫咪 GIF：位于对话框尖角正下方、水平居中（multiply 混合去掉 GIF 白底）。
   尖角在气泡内 left:48px+半宽13px≈61px 处，气泡左边距场景 = padding + 居中偏移，
   所以猫咪 left = padding + (场景宽-padding-气泡宽)/2 + 61 - 猫宽/2，让中心对准尖角。 */
.dialog-cat {
    --cat-w: clamp(150px, 32vh, 230px);
    position: absolute;
    left: calc(var(--pad-l) + (var(--scene-w) - var(--pad-l) - var(--bubble-w)) / 2 + 61px - var(--cat-w) / 2 - 15px);
    bottom: calc(-12px - var(--cat-w));
    width: var(--cat-w);
    height: auto;
    mix-blend-mode: multiply;
    animation: cat-idle 3.2s ease-in-out infinite;
}
@keyframes cat-idle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 对话框气泡：白色圆角矩形 + 黑色描边，左下角尖角尾巴（线稿手绘风） */
.dialog-bubble {
    position: relative;
    width: min(620px, 100%);
    padding: 26px 32px 24px;
    background: #fff;
    border: 3px solid #2b2b2b;
    border-radius: 26px;
    box-shadow: 0 12px 32px rgba(40, 40, 45, .16);
}
/* 左下角尖角尾巴：旋转45°后 right+bottom 对应下面两条边，上面两条边无描边（藏进气泡） */
.dialog-bubble::after {
    content: "";
    position: absolute;
    left: 48px; bottom: -16px;
    width: 26px; height: 26px;
    background: #fff;
    border-right: 3px solid #2b2b2b;
    border-bottom: 3px solid #2b2b2b;
    transform: rotate(45deg);
    z-index: 1;
}

/* 对话文字（约400字） */
.dialog-text {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.95;
    color: #40392c;
    max-height: min(58vh, 430px);
    overflow-y: auto;
    padding-right: 6px;
}

/* 关闭按钮（黑描边圆形，和气泡同一线稿风格） */
.close-btn {
    position: absolute;
    top: -15px; right: -15px;
    width: 34px; height: 34px;
    border: 2px solid #2b2b2b;
    border-radius: 50%;
    background: #fff;
    color: #2b2b2b;
    font-size: 15px; line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    transition: background .2s ease, transform .2s ease;
}
.close-btn:hover { background: #f2f2f2; }
.close-btn:active { transform: scale(.94); }

/* 窄屏适配 */
@media (max-width: 800px) {
    .dialog-scene {
        padding-left: 0;
        padding-bottom: clamp(110px, 26vh, 150px);
        align-items: flex-end;
    }
    .dialog-cat {
        width: clamp(100px, 26vh, 150px);
        bottom: 0;
        left: 0;
        translate: none;
    }
    .dialog-bubble {
        padding: 20px 22px 18px;
    }
    .dialog-text {
        font-size: 14px;
        line-height: 1.85;
        max-height: 46vh;
    }
}

/* ===== 无障碍：减少动态效果 ===== */
@media (prefers-reduced-motion: reduce) {
    .card, .scroll-scene, .parchment, .dowel, .content, .seal,
    .dialog-scene, .dialog-cat, .dialog-bubble, .dialog-text, .close-btn {
        transition-duration: .01s !important;
        transition-delay: 0s !important;
        animation-duration: .01s !important;
    }
}