/* ══════════════════════════════════════════════
   第 6、7 屏 · 非遗馆（组员原页移植版）
   来源：组员交付的「08 非遗馆：让老手艺被看见」单页
   本文件是原样移植：只做两件事 ——
     ① 全部选择器收进 .fx 作用域，避免与工程既有 .seal/.cap/.live/.s/.facts 撞车
     ② 关键帧统一加 fx- 前缀，避免与工程 blink 等撞名
   版面、配色、动效、构图比例均保持组员原样
   ══════════════════════════════════════════════ */
.fx{
    --gold:#f7c66a;
    --gold-hi:#ffe3a1;
    --cream:#ffeccd;
    --ink:#3a0700;
    /* 与第二页面板完全一致的木色深红 */
    --panel-a:rgba(58,8,0,.86);
    --panel-b:rgba(30,3,0,.9);
    --panel-line:rgba(255,214,150,.28);
    --veil:.16;          /* 海报统一色调的薄纱浓度，想更亮就调小 */
    --serif:"Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun",serif;
    --img-ratio:1.7759; /* 1030/580 原图高宽比 */

    /* —— 标准 H5 自适应：以 390×844（iPhone 14，行业主流 19.5:9）为设计基准 ——
       --u = 竖向缩放单位。844 高时 =1；矮屏（SE 的 568/640）自动压到 .84~.90，
       超高屏最多放大到 1.06，避免大屏上元素虚胖。
       所有"占竖向空间"的尺寸（题头/印牌/展签/间距/轴头）都乘 --u，
       横向尺寸保持 px 不动，保证 320~430 全宽机型都有正确构图。

       ⚠️ 刻意用媒体查询，不用 clamp(calc(100dvh / 844))：CSS calc 不支持
       「长度 ÷ 长度 得数字」，clamp 三参类型不一致会被判非法值 → --u 失效
       → 所有 calc(Npx * var(--u)) 连带失效、全页布局崩掉（实测会把浏览器卡死）。 */
    --u:.84;
  }
  @media (min-height:620px){.fx{--u:.90} }
  @media (min-height:700px){.fx{--u:.95} }
  @media (min-height:800px){.fx{--u:1} }
  @media (min-height:900px){.fx{--u:1.06} }/* 全局 reset 交由工程统一处理 */
/* html,body 重置交由工程统一处理 */
.fx{
    font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Source Han Sans SC",sans-serif;
    color:var(--cream);-webkit-font-smoothing:antialiased;
    /* —— 移植适配层 ——
       原页是「一个整屏里的两个视图」，现在拆成工程里的两屏，
       所以由本屏自行接管内边距与裁切，避免 .screen 的 padding 再叠加一层 */
    padding:0;overflow:hidden;
  }.fx a{color:inherit;text-decoration:none}.fx button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}/* ============ 背景：原图放大模糊的氛围底（不改动原图） ============ */
.fx .backdrop{
    position:absolute;inset:0;z-index:0;
    background:url("../assets/hall-feiyi-backdrop.webp") center/cover no-repeat;
    filter:blur(34px) brightness(.42) saturate(1.25);
    transform:scale(1.2);
  }/* 全屏木色深红罩层：与第二页面板同一组颜色，两页底色统一。
     中心留一团暖光、四周压暗，避免"平铺一块死色"造成的突兀感 */
.fx .backdrop::after{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(70% 38% at 50% 37%,rgba(126,32,8,.30) 0%,rgba(126,32,8,.12) 52%,transparent 72%),
      radial-gradient(125% 100% at 50% 50%,transparent 26%,rgba(16,2,0,.52) 100%),
      linear-gradient(180deg,var(--panel-a) 0%,var(--panel-b) 100%);
  }/* ============ 火星粒子 ============ */
.fx .embers{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}.fx .ember{
    position:absolute;bottom:-3vh;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#ffe9b0,#ff9b3d 55%,rgba(255,120,40,0) 75%);
    opacity:0;animation:fx-rise linear infinite;
  }
  @keyframes fx-rise{
    0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
    12%{opacity:.9}60%{opacity:.5}
    100%{transform:translate3d(var(--dx,2vmin),-108vh,0) scale(1.15);opacity:0}
  }/* ============ 每屏 = 原页的一个视图（第 6 屏 = p1 全景，第 7 屏 = p2 详情） ============ */
.fx .page{
    position:relative;z-index:2;width:100%;min-height:100dvh;
    display:flex;flex-direction:column;
    padding:calc(env(safe-area-inset-top) + 8px) 14px calc(env(safe-area-inset-bottom) + 8px);
  }/* ============ 第一屏：匾额 + 卷轴海报 + 三章印牌 + 展签 ============ */
.fx .p1{padding:0}/* —— 匾额题头：深色匾额 + 金字 + 回纹细带 —— */
.fx .gate{flex:0 0 auto;padding:calc(env(safe-area-inset-top) + calc(9px * var(--u))) 13px 0}.fx .gateInner{
    position:relative;display:flex;align-items:center;gap:10px;
    padding:calc(7px * var(--u)) 11px calc(10px * var(--u));border-radius:13px;
    background:linear-gradient(165deg,rgba(78,13,2,.92),rgba(30,4,0,.95));
    border:1px solid rgba(255,214,150,.34);
    box-shadow:0 10px 26px rgba(10,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 26px rgba(255,150,50,.07);
    opacity:0;animation:fx-gateIn .9s cubic-bezier(.16,1,.3,1) .08s forwards;
  }
  @keyframes fx-gateIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}.fx .gateInner::after{
    content:"";position:absolute;left:9px;right:9px;bottom:3px;height:6px;opacity:.36;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='7' viewBox='0 0 30 7'%3E%3Cpath d='M1 6V2h7v4h6V1h7v5' fill='none' stroke='%23f7c66a' stroke-width='.9'/%3E%3C/svg%3E");
    background-repeat:repeat-x;background-position:center;
  }.fx .gate .tt{flex:1;min-width:0}.fx .gate .tt h1{
    font-family:var(--serif);font-size:15px;font-weight:800;letter-spacing:3px;color:var(--gold-hi);
    text-shadow:0 2px 14px rgba(255,170,70,.3);white-space:nowrap;
  }.fx .gate .tt p{margin-top:2px;font-size:8.5px;letter-spacing:1.5px;color:rgba(255,236,205,.5);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx .gate .no{
    flex:0 0 auto;text-align:center;font-family:var(--serif);font-size:19px;font-weight:800;line-height:1;
    color:var(--gold);text-shadow:0 2px 12px rgba(255,160,50,.4);
  }.fx .gate .no i{display:block;font-style:normal;font-size:7.5px;letter-spacing:1px;
    color:rgba(255,236,205,.45);margin-top:3px}/* —— 卷轴舞台：上下轴头把海报「裱」起来 —— */
.fx .scrollstage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
    padding:calc(8px * var(--u)) 0 calc(6px * var(--u))}/* CSS 先给一版自适应估算，随后由 fitPoster() 用实测高度精确修正（见脚本末尾） */
.fx .scroll{width:min(100%,calc((100dvh - calc(300px * var(--u))) * 580 / 1030));display:flex;flex-direction:column}.fx .rod{
    position:relative;flex:0 0 auto;align-self:center;height:calc(9px * var(--u));width:calc(100% + 22px);border-radius:7px;
    background:linear-gradient(180deg,#ffeecb 0%,#f3c179 34%,#c1871f 70%,#7d4a0c 100%);
    box-shadow:0 4px 12px rgba(16,1,0,.55),inset 0 1px 0 rgba(255,255,255,.65);
  }.fx .rod::before, .fx .rod::after{
    content:"";position:absolute;top:calc(-2.5px * var(--u));width:calc(11px * var(--u));height:calc(14px * var(--u));border-radius:5px;
    background:linear-gradient(180deg,#ffeecb,#c98c2c);
    box-shadow:0 3px 8px rgba(16,1,0,.5),inset 0 1px 0 rgba(255,255,255,.6);
  }.fx .rod::before{left:-6px}.fx .rod::after{right:-6px}.fx .posterwrap{
    position:relative;margin:0;isolation:isolate;width:100%;
    aspect-ratio:580/1030;
    opacity:0;transform:scale(1.05) translateY(8px);
    animation:fx-posterIn 1.05s cubic-bezier(.16,1,.3,1) .3s forwards, fx-breathe 10s ease-in-out 1.9s infinite;
    box-shadow:0 18px 48px rgba(25,2,0,.6);
  }
  @keyframes fx-posterIn{to{opacity:1;transform:scale(1) translateY(0)}}
  @keyframes fx-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}}.fx .posterimg{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}/* 扫光 */
.fx .sheen{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}.fx .sheen::before{
    content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:44%;
    background:linear-gradient(105deg,transparent,rgba(255,240,205,.12) 45%,rgba(255,247,225,.2) 50%,rgba(255,240,205,.12) 55%,transparent);
    transform:translateX(-150%) skewX(-8deg);animation:fx-sweep 6s ease-in-out 2.4s infinite;
  }
  @keyframes fx-sweep{0%{transform:translateX(-150%) skewX(-8deg)}42%,100%{transform:translateX(330%) skewX(-8deg)}}/* —— 色调薄纱：让海报与页面 2 同一色温 ——
     ① 全局薄纱（浓度 --veil，偏轻，保留海报自身红金色）
     ② 中段柔和径向压色：把插画区的浅底慢慢收进木色深红，边缘大幅羽化，
        不会出现"中间一块矩形色差"的突兀边界 */
.fx .veil{
    position:absolute;inset:0;z-index:3;pointer-events:none;
    background:
      radial-gradient(78% 30% at 50% 36%,rgba(44,6,0,.12) 0%,rgba(44,6,0,.07) 48%,rgba(44,6,0,0) 76%),
      linear-gradient(165deg,rgba(58,8,0,var(--veil)) 0%,rgba(30,3,0,calc(var(--veil) + .03)) 100%);
  }/* —— 色相统一层：插画区底色偏灰，用 color 混合把它拉回木色红，
        只改色相不改明暗，所以画面细节不会糊掉；边缘同样羽化 —— */
.fx .warm{
    position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:color;
    background:
      radial-gradient(76% 32% at 50% 36%,rgba(154,44,14,.56) 0%,rgba(154,44,14,.32) 50%,rgba(154,44,14,0) 78%),
      linear-gradient(180deg,rgba(152,42,14,.18),rgba(152,42,14,.18));
  }/* —— 海报四边内收暗角：让海报"浮"在底色上，边界不再硬切 —— */
.fx .posterwrap::after{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:radial-gradient(118% 88% at 50% 50%,transparent 56%,rgba(26,3,0,.42) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,214,150,.10);
  }/* —— 特写态：卡片之外整体压暗 + 轻微景深，卡片自然成为主角 —— */
.fx .dim{
    position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;
    transition:opacity .55s ease;
    background:linear-gradient(165deg,rgba(30,3,0,.34),rgba(18,2,0,.46));
    backdrop-filter:blur(2px) saturate(.92);-webkit-backdrop-filter:blur(2px) saturate(.92);
  }.fx .posterwrap.focus .dim{opacity:1}/* —— 宣纸颗粒 —— */
.fx .paper{
    position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }/* 印章 */
.fx .seal{
    flex:0 0 auto;width:calc(28px * var(--u));height:calc(28px * var(--u));border-radius:6px;display:grid;place-items:center;
    font-size:11px;font-weight:800;line-height:1.05;color:#ffe9d2;
    background:linear-gradient(150deg,#c8321a,#96170a);
    border:1px solid rgba(255,190,150,.5);
    box-shadow:0 3px 10px rgba(60,8,0,.5),inset 0 1px 0 rgba(255,255,255,.22);
    transform:rotate(-4deg);animation:fx-sealPulse 3.8s ease-in-out infinite;
  }.fx .seal span{display:block;writing-mode:vertical-rl;text-orientation:upright}
  @keyframes fx-sealPulse{0%,100%{box-shadow:0 3px 10px rgba(60,8,0,.5),0 0 0 rgba(255,120,60,0)}
                       50%{box-shadow:0 3px 10px rgba(60,8,0,.5),0 0 16px rgba(255,120,60,.45)}}/* —— 底部「博物馆展签」：贴底面板，左侧宋体名 / 右侧外链 —— */
.fx .label{
    position:relative;margin-top:auto;
    padding:calc(13px * var(--u)) 16px calc(calc(13px * var(--u)) + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(60,10,1,.93) 0%,rgba(24,3,0,.97) 100%);
    border-top:1px solid rgba(255,214,150,.34);
    border-radius:20px 20px 0 0;
    box-shadow:0 -16px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    opacity:0;transform:translateY(100%);
    animation:fx-labelUp .9s cubic-bezier(.16,1,.3,1) .62s forwards;
  }
  @keyframes fx-labelUp{to{opacity:1;transform:none}}.fx .label::before{ /* 顶部回纹细带 */
    content:"";position:absolute;left:0;right:0;top:6px;height:7px;opacity:.38;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='7' viewBox='0 0 30 7'%3E%3Cpath d='M1 6V2h7v4h6V1h7v5' fill='none' stroke='%23f7c66a' stroke-width='.9'/%3E%3C/svg%3E");
    background-repeat:repeat-x;background-position:center;
  }.fx .lrow{display:flex;align-items:center;gap:10px}.fx .lidx{font-size:10px;letter-spacing:3px;color:rgba(255,236,205,.55);white-space:nowrap}.fx .lprog{flex:1;height:2px;border-radius:2px;background:rgba(255,214,150,.16);overflow:hidden}.fx .lprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ff9b3d);border-radius:2px}.fx .lprog i.run{animation:fx-prog 4.2s linear forwards}
  @keyframes fx-prog{from{width:0}to{width:100%}}.fx .lhint{font-size:9.5px;letter-spacing:1.5px;color:rgba(255,236,205,.42);white-space:nowrap}/* 主行：左 = 宋体展品名，右 = 资料 / 视频外链 */
.fx .lmain{margin-top:calc(8px * var(--u));display:flex;align-items:flex-end;gap:10px}.fx .ltxt{flex:1;min-width:0}.fx .lname{
    font-family:var(--serif);font-size:calc(24px * var(--u));line-height:1.12;letter-spacing:2px;font-weight:700;
    color:var(--gold-hi);text-shadow:0 2px 18px rgba(255,170,70,.28);white-space:nowrap;
  }.fx .lname.swap{animation:fx-nameIn .55s cubic-bezier(.16,1,.3,1)}
  @keyframes fx-nameIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}.fx .lsub{margin-top:calc(4px * var(--u));font-size:11px;letter-spacing:1.5px;color:rgba(255,236,205,.6)}.fx .lact{flex:0 0 auto;display:flex;gap:7px;padding-bottom:2px}.fx .lact .btn{padding:calc(8px * var(--u)) calc(12px * var(--u));font-size:calc(12px * var(--u));letter-spacing:1px}.fx .ldots{display:none}/* —— 展柜特写镜：全景时完全收起（海报保持原样），
        选中某件展品时才浮现金框卡片，用同一张原图推近取景 —— */
.fx .cam{
    position:absolute;left:13%;top:12%;width:74%;
    aspect-ratio:0.88;             /* 竖向取景：贴合三件展品的身形，三格等大 */
    z-index:9;overflow:hidden;border-radius:18px;background:#2a0400;
    opacity:0;transform:scale(.94) translateY(12px);pointer-events:none;
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
    box-shadow:inset 0 0 0 1.5px rgba(255,224,160,.34),0 18px 46px rgba(18,2,0,.62);
    contain:paint;
  }.fx .cam.on{opacity:1;transform:none;pointer-events:auto}.fx .cam .tone{ /* 只做轻微统一色温，不再压色 */
    position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:color;
    background:linear-gradient(165deg,rgba(152,42,14,.16),rgba(152,42,14,.16));
  }.fx .cam img{
    position:absolute;left:0;top:0;height:auto;
    transform-origin:0 0;
    /* 展柜聚光：特写比背景亮一档，细节才看得清 */
    filter:brightness(1.42) contrast(1.07) saturate(1.06);
    transition:transform 1.15s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }/* 影像框四角回纹括号 —— 推镜时才浮现 */
.fx .cam .brk{position:absolute;width:14px;height:14px;z-index:4;pointer-events:none;
    opacity:0;transition:opacity .6s ease}.fx .cam.on .brk{opacity:.9}.fx .cam .brk::before, .fx .cam .brk::after{content:"";position:absolute;background:var(--gold)}.fx .cam .brk::before{width:14px;height:1.4px}.fx .cam .brk::after{width:1.4px;height:14px}.fx .cam .brk.tl{left:9px;top:9px}.fx .cam .brk.tr{right:9px;top:9px}.fx .cam .brk.tr::before{right:0}.fx .cam .brk.tr::after{right:0}.fx .cam .brk.bl{left:9px;bottom:9px}.fx .cam .brk.bl::before{bottom:0}.fx .cam .brk.bl::after{bottom:0}.fx .cam .brk.br{right:9px;bottom:9px}.fx .cam .brk.br::before{bottom:0;right:0}.fx .cam .brk.br::after{bottom:0;right:0}.fx .cam::after{ /* 内圈细金线，装裱感 */
    content:"";position:absolute;inset:8px;border-radius:11px;pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,224,160,.22);
    opacity:0;transition:opacity .6s ease;
  }.fx .cam.on::after{opacity:1}.fx .cam .vig{ /* 边缘暗角，让推镜更有镜头感 */
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background:radial-gradient(120% 100% at 50% 50%,transparent 52%,rgba(60,6,0,.30) 100%);
    opacity:0;transition:opacity .6s;
  }.fx .cam.on .vig{opacity:1}.fx .cam .cap{
    position:absolute;left:10px;bottom:8px;z-index:3;
    display:flex;align-items:center;gap:6px;
    padding:4px 10px;border-radius:999px;
    background:rgba(40,5,0,.6);border:1px solid rgba(255,214,150,.3);
    backdrop-filter:blur(4px);
    font-size:11px;letter-spacing:2px;color:var(--gold-hi);
    transform:translateY(0);transition:transform .5s,opacity .5s;
  }.fx .cam .cap b{font-weight:700}.fx .cam .cap .live{
    width:6px;height:6px;border-radius:50%;background:#ff8a3d;
    box-shadow:0 0 8px rgba(255,138,61,.9);animation:fx-blink 1.5s ease-in-out infinite;
  }
  @keyframes fx-blink{0%,100%{opacity:1}50%{opacity:.3}}/* 左右切换箭头 */
.fx .camnav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
    background:rgba(45,6,0,.5);border:1px solid rgba(255,214,150,.35);
    backdrop-filter:blur(4px);
  }.fx .camnav svg{width:14px;height:14px;stroke:var(--gold-hi);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.fx .camnav.prev{left:7px}.fx .camnav.next{right:7px}.fx .camnav:active{transform:translateY(-50%) scale(.9)}/* —— 三章印牌：活态展演 / 可体验可带走 / 数字非遗 ——
        点牌面 = 海报推镜到对应展品；牌内两枚小按钮 = 直跳视频 / 资料 */
.fx .chapters{
    flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:2px 13px calc(10px * var(--u));
  }.fx .chap{
    position:relative;display:block;text-align:left;padding:calc(8px * var(--u));border-radius:13px;overflow:hidden;
    background:linear-gradient(165deg,rgba(72,12,2,.9),rgba(32,4,0,.93));
    border:1px solid rgba(255,214,150,.22);
    box-shadow:0 8px 22px rgba(10,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);
    opacity:0;transform:translateY(12px);
    animation:fx-chapIn .7s cubic-bezier(.16,1,.3,1) forwards;
  }.fx .chap:nth-child(1){animation-delay:.55s}.fx .chap:nth-child(2){animation-delay:.67s}.fx .chap:nth-child(3){animation-delay:.79s}
  @keyframes fx-chapIn{to{opacity:1;transform:none}}.fx .chap::before{
    content:"";position:absolute;right:-9px;top:-11px;width:48px;height:48px;border-radius:50%;
    background:radial-gradient(circle at 40% 40%,rgba(255,190,110,.13),transparent 70%);
    transition:background .4s;
  }.fx .chap.on{
    border-color:rgba(255,224,160,.8);
    background:linear-gradient(165deg,rgba(126,30,6,.96),rgba(58,8,0,.96));
    box-shadow:0 10px 26px rgba(255,140,40,.3),inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,205,120,.22);
  }.fx .chap.on::before{background:radial-gradient(circle at 40% 40%,rgba(255,205,130,.34),transparent 70%)}.fx .chap:active{transform:scale(.97)}/* 首屏一次性提示：三章轻轻呼吸两下，引导去点 */
.fx .chap.hint{animation:fx-chapHint 1.15s ease-in-out 2}
  @keyframes fx-chapHint{
    0%,100%{box-shadow:0 8px 22px rgba(10,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07),0 0 0 0 rgba(255,200,110,0)}
    50%{box-shadow:0 8px 22px rgba(10,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07),0 0 0 3px rgba(255,200,110,.3)}
  }/* 主题图标水印：面具 / 礼盒 / 云 */
.fx .chap .ico{
    position:absolute;right:6px;top:calc(7px * var(--u));width:calc(27px * var(--u));height:calc(27px * var(--u));z-index:1;
    opacity:.34;transition:opacity .4s;
  }.fx .chap.on .ico{opacity:.6}.fx .chap .ico svg{width:100%;height:100%;stroke:var(--gold);fill:none;
    stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.fx .chap .k{position:relative;display:flex;align-items:center;gap:4px;font-size:9px;letter-spacing:1.5px;color:rgba(255,236,205,.5)}.fx .chap .k b{font-family:var(--serif);font-size:13px;font-weight:800;color:var(--gold);letter-spacing:0}.fx .chap .n{position:relative;margin-top:2px;font-family:var(--serif);font-size:calc(13.5px * var(--u));font-weight:800;
    letter-spacing:.5px;color:var(--gold-hi);line-height:1.25;white-space:nowrap}.fx .chap .s{position:relative;margin-top:1px;font-size:calc(9px * var(--u));letter-spacing:.2px;color:rgba(255,236,205,.55);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx .chap .go{position:relative;margin-top:calc(7px * var(--u));display:flex;gap:5px}.fx .chap .go a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:3px;height:calc(22px * var(--u));border-radius:7px;
    font-size:calc(9.5px * var(--u));letter-spacing:.2px;border:1px solid rgba(255,214,150,.3);color:var(--gold-hi);
    background:rgba(255,200,120,.08);
  }.fx .chap .go a.solid{background:linear-gradient(160deg,#ffd88a,#f2a049);color:#571002;
    border-color:rgba(255,220,160,.85);font-weight:800}.fx .chap .go svg{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.6;
    stroke-linecap:round;stroke-linejoin:round}.fx .btn{
    display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;
    font-size:11.5px;letter-spacing:1px;white-space:nowrap;
    border:1px solid rgba(255,214,150,.4);color:var(--gold-hi);
    background:linear-gradient(160deg,rgba(255,200,120,.16),rgba(255,140,60,.06));
  }.fx .btn.solid{
    background:linear-gradient(160deg,#ffd88a,#f5a94e);color:#571002;border-color:rgba(255,220,160,.9);
    font-weight:700;
  }.fx .btn:active{transform:scale(.95)}.fx .btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}/* ============ 第二页：详情 / 资料 / 视频 ============ */
.fx .p2 .panel{
    margin:auto;width:100%;max-width:430px;
    /* max-height + 内部滚动兜底：矮屏（iPhone SE 568 / 640）内容超高时不会被裁掉 */
    max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:linear-gradient(165deg,rgba(58,8,0,.86),rgba(30,3,0,.9));
    border:1px solid rgba(255,214,150,.28);border-radius:22px;
    padding:calc(14px * var(--u));backdrop-filter:blur(10px);
    box-shadow:0 18px 56px rgba(10,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  }.fx .p2 .panel::-webkit-scrollbar{width:0;height:0}.fx .p2 .head{display:flex;align-items:center;justify-content:space-between;gap:8px}.fx .p2 .head .t{font-size:15px;font-weight:800;letter-spacing:2px;color:var(--gold-hi)}.fx .p2 .head .t small{display:block;font-size:10px;letter-spacing:3px;color:rgba(255,236,205,.5);font-weight:400}.fx .backbtn{
    display:flex;align-items:center;gap:5px;font-size:11.5px;letter-spacing:1px;color:rgba(255,236,205,.75);
    padding:6px 10px;border-radius:999px;border:1px solid rgba(255,214,150,.3);
  }.fx .backbtn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.fx .hero{
    position:relative;margin-top:calc(12px * var(--u));width:100%;aspect-ratio:1.4;
    border-radius:16px;overflow:hidden;contain:paint;
    box-shadow:inset 0 0 0 1.5px rgba(255,224,160,.25),0 10px 30px rgba(20,2,0,.5);
  }.fx .hero img{position:absolute;left:0;top:0;height:auto;transform-origin:0 0;
    filter:brightness(1.38) contrast(1.06) saturate(1.05);
    transition:transform 1.05s cubic-bezier(.16,1,.3,1);will-change:transform}.fx .hero .heroName{
    position:absolute;left:10px;bottom:10px;
    padding:5px 12px;border-radius:999px;
    background:rgba(30,4,0,.62);border:1px solid rgba(255,214,150,.35);backdrop-filter:blur(4px);
    font-size:13px;font-weight:800;letter-spacing:2px;color:var(--gold-hi);
  }.fx .hero .scan{
    position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(0deg,rgba(255,220,160,.06) 0 1px,transparent 1px 4px);
    mix-blend-mode:overlay;
  }/* 主题角标：活态展演 / 可体验可带走 / 数字非遗 */
.fx .hero .heroTag{
    position:absolute;left:0;top:0;
    padding:6px 13px 6px 11px;border-radius:0 0 12px 0;
    background:linear-gradient(160deg,rgba(255,216,138,.94),rgba(242,160,73,.92));
    color:#571002;font-family:var(--serif);font-size:12.5px;font-weight:800;letter-spacing:2px;
    box-shadow:0 4px 14px rgba(40,4,0,.4);
  }.fx .tabs{display:flex;gap:7px;margin-top:calc(12px * var(--u))}.fx .tabs button{
    flex:1;padding:8px 4px;border-radius:11px;font-size:12px;letter-spacing:1px;
    border:1px solid rgba(255,214,150,.22);color:rgba(255,236,205,.7);
    background:rgba(255,200,120,.05);transition:all .3s;
  }.fx .tabs button.on{
    color:#571002;font-weight:800;border-color:rgba(255,220,160,.9);
    background:linear-gradient(160deg,#ffd88a,#f5a94e);
    box-shadow:0 4px 14px rgba(255,160,60,.35);
  }.fx .desc{margin-top:calc(11px * var(--u));font-size:13px;line-height:1.8;color:rgba(255,236,205,.86);min-height:4.6em}.fx .facts{display:flex;gap:7px;margin-top:calc(11px * var(--u));flex-wrap:wrap}.fx .fact{
    padding:6px 10px;border-radius:10px;font-size:11.5px;letter-spacing:1px;
    background:rgba(255,200,120,.08);border:1px solid rgba(255,214,150,.2);color:rgba(255,240,215,.85);
  }.fx .links{display:flex;gap:8px;margin-top:calc(13px * var(--u))}.fx .links a{flex:1;justify-content:center;padding:10px 8px;font-size:12.5px}.fx .links.sub{margin-top:8px}.fx .links.sub a{
    background:rgba(255,200,120,.05);font-size:11.5px;letter-spacing:1px;
    color:rgba(255,236,205,.82);
  }.fx .links.sub a .ar{margin-left:2px;font-size:12px;opacity:.7}.fx .p2 .hint{
    margin-top:10px;text-align:center;font-size:10.5px;letter-spacing:2px;color:rgba(255,236,205,.45);
  }/* 页面切换时的错峰入场 */
/* 第 7 屏滚入视口时，详情面板整体起一版错峰入场（.in 由脚本挂上） */
.fx .page.p2.in .panel{animation:fx-panelIn .7s cubic-bezier(.16,1,.3,1) .12s both}
  @keyframes fx-panelIn{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
/* ============ 点击涟漪：收在本馆两屏内（脚本追加到屏容器，不再全站泄漏）============ */
.fx .ripple{position:absolute;z-index:11;pointer-events:none;width:12px;height:12px;border-radius:50%;
    border:2px solid rgba(255,232,180,.85);transform:translate(-50%,-50%);opacity:0}.fx .ripple.go{animation:fx-rip .6s ease-out forwards}
  @keyframes fx-rip{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(6)}}

  @media (prefers-reduced-motion:reduce){.fx *, *::before, *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.fx .posterwrap, .fx .gateInner, .fx .chap, .fx .label{opacity:1;transform:none}
  }