/* 此文件只覆盖品牌与内容样式；透视、路径、时序和四幕状态全部来自参考原版 style.css。
   注意：卡片的 width / aspect-ratio 也属于「运动参数」——参考脚本按
   baseCardHeight = baseCardWidth * 4/3 反推 outerScale 和光圈匹配比例，
   所以卡框一律沿用参考包的统一尺寸，画作靠 background-size:contain 保持各自原始比例。
   路径一律相对本文件，不要写 /public/…（部署后 public/ 就是站点根）。 */
@font-face{font-family:"Noto Serif SC Sub";src:url("/fonts/noto-serif-sc.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Bodoni Moda Sub";src:url("/fonts/bodoni-moda.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Lora Sub";src:url("/fonts/lora.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{--ink:#0b1535;--paper:#f4f6fb;--blue:#002fa7;--blue-light:#7da2ff;--muted:#5f6880;--blue-ui:#002fa7;--blue-ui-hover:#001f78;--blue-accent:#002fa7;--aperture:#002fa7;--dot:rgba(0,47,167,.17);--veil:rgba(255,255,255,.94);--veil-0:rgba(244,246,251,0);--glow:#fff;--glow-a:.76;--sh-card:0 10px 18px #061b5b26;--sh-plate:0 20px 34px #061b5b2e;--chip-bg:#f4f6fbd9;--chip-line:#002fa733;--font-editorial:"Noto Serif SC Sub","Songti SC",serif;--font-geist-sans:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;--font-geist-mono:"Lora Sub",serif}
body{color:var(--ink)}
/* 翻页由参考脚本接管（wheel 里 preventDefault，触屏走 script.js 的 touch 代理）。
   只挡竖向手势，留着 pinch-zoom 不要一并封掉。
   is-paged 由 script.js 在确认能驱动参考包之后才加 —— 否则原生滚动被挡、
   JS 又接不上，触屏会彻底卡死。 */
.page-scroll.is-paged{touch-action:pan-x pinch-zoom}
.hero-shell,.motion-screen{background-color:var(--paper);background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.3px)}
.hero-shell::before,.motion-screen::before{background:radial-gradient(circle at 50% 43%,var(--veil),var(--veil-0) 44%)}
.center-aperture{background:var(--aperture);box-shadow:0 0 80px #002fa72b}
.corridor-glow{background:var(--glow);opacity:var(--glow-a)}

/* 所有卡片统一大小：cover 填满参考包给的卡框，画作按需裁切。
   卡框本身不动 —— 参考脚本按 baseCardWidth*4/3 反推透视，改比例会让卡片对不准光圈。
   背景图统一从 --cover 取，并且 !important —— 参考脚本会先给每张卡写一条
   指向它自己 assets/ 的 inline background-image，没有 <base> 时那是 404。
   用变量接管之后，那条 inline 声明在层叠里直接出局，url() 根本不会被解析。 */
.color-card,.placeholder-card{background-color:transparent;background-image:var(--cover,none)!important;background-position:center;background-repeat:no-repeat;background-size:cover}
/* 填满卡框之后阴影就是个矩形，box-shadow 足够，
   不必让 64 张卡每张都去算 drop-shadow 的 alpha 轮廓。 */
.color-card{box-shadow:var(--sh-card)}
.placeholder-card{box-shadow:var(--sh-plate)}
.shared-card{width:320px;--fourth-x:calc(43.2vw - 160px);--fourth-y:calc(39vh - 184px)}

/* 第三幕允许脚本在短屏上等比缩小扇形。覆盖参考包同名关键帧，
   宽屏的 --third-scale 仍为 1，不改变原有视觉。 */
@keyframes shared-card-third-expand{
  from{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(1)}
  to{opacity:1;transform:translate(calc(-50% + var(--third-x)),calc(-50% + var(--third-y))) rotate(var(--third-rotation)) scale(var(--third-scale,1))}
}
@keyframes shared-card-third-return{
  from{opacity:1;transform:translate(calc(-50% + var(--fourth-x)),calc(-50% + var(--fourth-y))) rotate(0deg) scale(1)}
  to{opacity:1;transform:translate(calc(-50% + var(--third-x)),calc(-50% + var(--third-y))) rotate(var(--third-rotation)) scale(var(--third-scale,1))}
}
@keyframes shared-card-third-close{
  from{opacity:1;transform:translate(calc(-50% + var(--third-x)),calc(-50% + var(--third-y))) rotate(var(--third-rotation)) scale(var(--third-scale,1))}
  to{opacity:1;transform:translate(calc(-50% + var(--fourth-x)),calc(-50% + var(--fourth-y))) rotate(0deg) scale(1)}
}

/* 第四幕最终卡：画作与歌曲封面各占一个伪元素做交叉淡入，两者同样 cover 填满同一个方框，
   所以换图时大小不跳。::after 即使 opacity:0 也会被下载，顺带解决切换瞬间的白屏。
   最终卡不设 --cover，父元素留空，画面全交给两个伪元素，阴影仍由 .placeholder-card 提供。 */
.shared-card.is-final-card::before,.shared-card.is-final-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background-position:center;background-repeat:no-repeat;background-size:cover;transition:opacity 700ms cubic-bezier(.4,0,.2,1)}
.shared-card.is-final-card::before{background-image:var(--art-cover);opacity:1}
.shared-card.is-final-card::after{background-image:var(--song-cover);opacity:0}
.shared-card.is-final-card.is-song-swapped::before{opacity:0}
.shared-card.is-final-card.is-song-swapped::after{opacity:1}
@media(prefers-reduced-motion:reduce){.shared-card.is-final-card::before,.shared-card.is-final-card::after{transition-duration:1ms}}

.site-header{z-index:400}.brand,.motion-toggle{background:var(--blue-ui);border-color:#ffffff26;border-radius:999px;box-shadow:0 12px 34px #002fa72b;transition:background-color .45s ease,color .45s ease,box-shadow .45s ease}.brand-mark{border-radius:3px;transform:rotate(0)}.brand-mark::after{background:var(--blue-light);transition:background-color .45s ease}.replay-icon{color:#fff;transition:color .45s ease}.motion-toggle:hover{background:var(--blue-ui-hover)}.motion-toggle:focus-visible{outline-color:var(--blue-light)}

/* IRIS 那一屏背景就是 var(--blue)，药丸同色会糊进去（实测 1.00:1）。到那一屏反色成白底蓝字。 */
:root.is-on-blue .brand,:root.is-on-blue .motion-toggle{background:#fff;color:var(--blue);border-color:#ffffff00;box-shadow:0 12px 34px #00081f4d}
:root.is-on-blue .replay-icon{color:var(--blue);background:transparent}
:root.is-on-blue .brand-mark::after{background:var(--blue)}
:root.is-on-blue .motion-toggle:hover{background:#dbe5ff}
:root.is-on-blue .motion-toggle:focus-visible{outline-color:#fff}

.hero-copy h1{font-family:var(--font-editorial);font-size:clamp(54px,5.7vw,96px);font-weight:600;line-height:1.04;letter-spacing:-.015em;white-space:normal}
.eyebrow,.display-heading p,.marketplace-kicker{font-family:var(--font-geist-sans);font-weight:750;color:var(--blue-accent);font-size:11px;letter-spacing:.18em}
.hero-footnote p{font-family:"Lora Sub",var(--font-editorial);color:var(--muted)}.hero-footnote span{border-color:var(--chip-line);background:var(--chip-bg);color:var(--blue-accent);font-family:var(--font-geist-sans);font-size:10px;font-weight:750}

.display-heading{top:clamp(76px,9vh,98px)}
.display-heading h2,.marketplace-copy h2,.featured-copy h2{font-family:var(--font-editorial);font-weight:600;letter-spacing:-.02em;line-height:1.08}
.display-heading h2{font-size:clamp(54px,5.2vw,88px)}
.display-caption>p{color:var(--muted);font-family:"Lora Sub",var(--font-editorial)}

.marketplace-screen{background-color:var(--blue);background-image:radial-gradient(circle,rgba(255,255,255,.2) 1.1px,transparent 1.3px);color:#fff}
.marketplace-screen::before{background:radial-gradient(circle at 76% 48%,#6d97ff4a,transparent 54%)}
.marketplace-copy{top:clamp(94px,13vh,138px);width:min(680px,48vw)}
.marketplace-copy h2{font-size:clamp(50px,4.5vw,82px)}.marketplace-copy h2 em{color:#a9c0ff}
.marketplace-copy .marketplace-kicker{color:#b8cbff}
.marketplace-description{color:#dbe5ff;font-family:"Lora Sub",var(--font-editorial);font-size:14px;line-height:1.75}
.project-stats{display:flex;gap:24px;flex-wrap:wrap;margin:24px 0 0;padding-top:18px;border-top:1px solid #ffffff38;font-family:var(--font-geist-sans);font-size:10px;letter-spacing:.08em;color:#dbe5ff}.project-stats b{margin-right:5px;font-family:"Bodoni Moda Sub",var(--font-editorial);font-size:25px;color:#fff}
.marketplace-action{margin-top:22px;background:#fff;color:var(--blue);font-family:var(--font-geist-sans);font-size:11px;font-weight:750;letter-spacing:.06em;text-decoration:none}.marketplace-action:hover{background:#dbe5ff}

/* 第三幕满屏克莱因蓝 → 第四幕纸白，是 10 倍亮度跳变。
   第四幕进场时先垫一层蓝调再化开，让眼睛跟得上。卡片在 stage 里、不受影响。 */
.featured-screen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--blue);opacity:0}
.featured-screen.is-active::after{animation:featured-tint-out 900ms cubic-bezier(.33,1,.68,1) both}
@keyframes featured-tint-out{from{opacity:.5}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.featured-screen.is-active::after{animation-duration:1ms}}

.featured-copy{top:20vh}.featured-copy h2{font-size:clamp(52px,4.7vw,86px)}.featured-copy .marketplace-kicker{color:var(--blue-accent)}.featured-copy .marketplace-description{color:var(--muted)}.featured-copy .project-stats{max-width:410px;border-color:var(--chip-line);color:var(--muted)}.featured-copy .project-stats b{color:var(--blue-accent)}.featured-copy .marketplace-action{background:var(--blue-ui);color:#fff}.featured-copy .marketplace-action:hover{background:var(--blue-ui-hover)}
.site-links{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;margin-top:18px;font-family:var(--font-geist-sans);font-size:10px;font-weight:700;letter-spacing:.06em}.site-links a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--chip-line);padding-bottom:3px}.site-links a:hover{color:var(--blue-accent)}.site-links .contact-link{display:inline-flex;align-items:center;min-height:36px;padding:8px 14px;border:0;border-radius:999px;background:var(--blue-ui);color:#fff;font-size:12px;letter-spacing:.02em;box-shadow:0 8px 22px #002fa726}.site-links .contact-link:hover{background:var(--blue-ui-hover);color:#fff}.site-links a:focus-visible{outline:2px solid var(--blue-accent);outline-offset:4px}


/* 深色模式：site.css 与 index/iris/songs/works/404 每页都有 prefers-color-scheme 块，
   这里对齐它们的令牌，别让首页成为唯一不跟随系统的那一页。
   --blue #002fa7 在 #070b16 上只有 1.84:1，作为 UI 色不可用，
   所以填充面用 #3357d8（对底 3.27:1、白字 6.01:1），文字强调用 #7da2ff（7.94:1）。
   IRIS 那一整屏保持克莱因蓝不变 —— 那是品牌场，不是 UI。 */
@media(prefers-color-scheme:dark){
  :root{
    --ink:#edf2ff;--paper:#070b16;--muted:#a2abc1;
    --blue-ui:#3357d8;--blue-ui-hover:#4468e8;--blue-accent:#7da2ff;--aperture:#7da2ff;
    --dot:rgba(125,162,255,.14);--veil:rgba(21,31,56,.92);--veil-0:rgba(7,11,22,0);
    --glow:#cddcff;--glow-a:.14;
    --sh-card:0 10px 20px #00000073;--sh-plate:0 20px 38px #00000080;
    --chip-bg:#0f1729d9;--chip-line:#7da2ff3d;
  }
  .brand,.motion-toggle{box-shadow:0 12px 34px #00000066}
  .featured-copy .project-stats b{color:#8fb4ff}
  .marketplace-screen::before{background:radial-gradient(circle at 76% 48%,#5a86ff3d,transparent 54%)}
}

@media(max-width:760px){
  .hero-copy{top:88px}.hero-copy h1{font-size:clamp(32px,10vw,46px);line-height:1.08}.eyebrow{font-size:9px}.corridor{top:27%;height:52%}.hero-footnote p{font-size:12px}
  .display-heading{top:82px;width:92vw}.display-heading h2{font-size:clamp(41px,12vw,58px)}
  .marketplace-copy,.featured-copy{left:22px;top:92px;width:calc(100% - 44px)}.marketplace-copy h2,.featured-copy h2{font-size:clamp(39px,10.5vw,50px);line-height:1.08}.marketplace-description{max-width:28em;margin:18px 0 14px;font-size:12px;line-height:1.65}.project-stats{gap:13px;margin-top:13px;padding-top:12px}.project-stats b{font-size:20px}.marketplace-action{margin-top:15px}.site-links{margin-top:14px;gap:8px 12px;font-size:9px}.site-links .contact-link{min-height:34px;padding:7px 12px;font-size:11px}
  .shared-card{width:230px;--fourth-x:calc(46vw - 115px);--fourth-y:calc(49vh - 163px)}
}