@font-face{font-family:NanMing;src:url('../assets/font/nanming.woff2')}@font-face{font-family:GenYo;src:url('../assets/font/genyoN.woff2');font-weight:400}@font-face{font-family:GenYo;src:url('../assets/font/genyoM.woff2');font-weight:600}@font-face{font-family:Cormorant;src:url('../assets/font/cormorantit.woff2');font-style:italic}@font-face{font-family:Instrument;src:url('../assets/font/instrumentit.woff2');font-style:italic}@font-face{font-family:SpaceG;src:url('../assets/font/sgM.woff2')}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--paper);overflow-x:clip}body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--body)/1.8 GenYo,"Microsoft JhengHei",sans-serif;overflow-x:clip}button,a{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer}.skip{position:fixed;z-index:1000;top:-60px;left:20px;background:var(--paper);color:var(--deep);padding:8px 16px}.skip:focus{top:10px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.site-header{position:fixed;z-index:20;top:0;left:0;width:100%;display:flex;align-items:center}.site-header nav{display:flex;font:13px/1 SpaceG,monospace}.site-header a{color:inherit;text-decoration:none}.nav-cta{padding:8px 12px}
.hero-track{position:relative}.hero-stage{position:sticky;top:0;height:100svh;background:var(--deep)}.hero-videos,.hero-video,.video-vignette{position:absolute;inset:0;width:100%;height:100%}.hero-video{opacity:0;transition:opacity .7s var(--ease)}.hero-video.active{opacity:1}.video-vignette{z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(25,19,16,.76),rgba(25,19,16,.06) 56%,rgba(25,19,16,.42)),linear-gradient(0deg,rgba(25,19,16,.58),transparent 42%)}.hero-count,.hero-copy,.object-stage,.hero-footer{position:absolute}.hero-count{z-index:2}.hero-copy,.object-stage,.hero-footer{color:var(--paper)}.hero-count{top:clamp(84px,12vh,130px);left:var(--pad);font:13px/1 SpaceG;letter-spacing:.15em}.eyebrow{font:italic clamp(16px,1.7vw,27px)/1.3 Cormorant,Georgia,serif;letter-spacing:.19em;margin:0 0 14px}.hero-sub{margin:18px 0 0}.object-stage{display:grid;place-items:center}.object-stage:before{width:66%}model-viewer{position:relative;width:100%;height:100%;--poster-color:transparent}.drag-hint{position:absolute;z-index:2;font:11px/1 SpaceG;letter-spacing:.14em;pointer-events:none}.drag-hint span{display:inline-block;color:var(--emberlift);font-size:18px}.object-label{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;font:11px/1.2 SpaceG;letter-spacing:.09em;pointer-events:none}.object-label i{width:28px;border-top:1px solid var(--emberlift)}.hero-footer{left:var(--pad);right:var(--pad);display:flex;align-items:center}.scroll-note{margin:0;font:13px/1.2 SpaceG;letter-spacing:.13em}.scroll-note a{display:inline-block;padding:5px;margin:0 -5px}.scroll-note i{color:var(--emberlift);font-size:18px;font-style:normal}.chapter-dots{gap:7px}.chapter-dots button{width:34px;background:rgba(244,239,231,.35);transition:background .25s}.wall h2,.showroom h2,.start h2{
  font:400 var(--h1)/1.12 NanMing,serif;margin:0;text-wrap:balance}.wall-head>p:last-child{max-width:430px;color:rgba(244,239,231,.74)}.showroom-head .eyebrow{color:var(--ember)}.product{display:flex}.product-no{font:12px/1 SpaceG}.product h3{font:400 var(--h2)/1.1 NanMing}.product a{font:12px/1 SpaceG}.start-options{display:flex;flex-wrap:wrap}.start-options button{border:1px solid rgba(244,239,231,.34)}.selected-choice{min-height:30px}@keyframes dialog-in{from{transform:translateY(28px) scale(.97);opacity:0}to{transform:none;opacity:1}}.solid-action{color:var(--paper);padding:14px 18px}.text-action{font-size:13px}
@media(max-width:1100px){.hero-sub{display:none}}
@media(max-width:760px){.nav-cta{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-video{transition:none}.hero-video:not(.active){display:none}.drag-hint{display:none}}

/* ── 頁首與 Hero 基本版面 ── */
  .site-header{pointer-events:none}.site-header>*{pointer-events:auto}.nav-cta{
  border:1px solid rgba(244,239,231,.65);text-shadow:none}.product{
  flex-direction:column}.product:after{border-top:1px solid rgba(25,19,16,.35)}.product-no{position:relative;z-index:2}.solid-action{background:var(--violet);border-bottom:3px solid var(--pink)}.solid-action span{color:var(--acid)}
@media(max-width:1100px){.product:nth-child(4),.product:nth-child(5){grid-column:span 1}}

/* 窄螢幕的文字與間距 */

/* ── Hero 01–04 連續影片與 05 展示牆的銜接 ── */
.site-header{background:none;color:var(--paper);text-shadow:0 2px 12px rgba(25,19,16,.48)}
.site-header nav{
  gap:clamp(12px,2vw,28px);
  letter-spacing:.08em;
  text-shadow:0 1px 8px rgba(25,19,16,.45);
  align-items:center;color:var(--paper)}.site-header .nav-cta{background:rgba(36,23,15,.72);border-color:rgba(255,247,237,.62);color:var(--paper)}.nav-cta span{color:var(--hero-copper)}
/* 頁首：選單按鈕（≤900px 才顯示）與導覽連結的點擊高度 */
.nav-links{display:contents}.nav-links a{padding:6px 0}
.nav-toggle{display:none;min-width:44px;min-height:44px;padding:0 14px;border:1px solid currentColor;border-radius:999px;background:rgba(25,19,16,.24);letter-spacing:.08em}
/* 頁首依所在區段換色（js/app.js 依頁首下方的區段設定 html[data-header-tone]）；淺色區段用深色字與原色字標 */
.brand .brand-logo-on-light{display:none}
html[data-header-tone="light"] .site-header{color:#2a2018;text-shadow:none;background:rgba(244,239,231,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(42,32,24,.08)}
html[data-header-tone="light"] .site-header nav{color:#2a2018;text-shadow:none}
html[data-header-tone="light"] .nav-toggle{background:rgba(255,255,255,.55)}
html[data-header-tone="light"] .brand .brand-logo-on-dark{display:none}
html[data-header-tone="light"] .brand .brand-logo-on-light{display:block}.hero-stage{overflow:visible}.hero-videos{overflow:hidden}
.hero-copy{left:50%;bottom:auto;max-width:none;align-items:center;transition:opacity .45s var(--ease),transform .6s var(--ease),filter .5s var(--ease)}
.hero-en{font:italic clamp(34px,5.8vw,104px)/.8 Cormorant,Georgia,serif;letter-spacing:.015em;color:var(--hero-ivory);text-shadow:0 3px 0 rgba(36,23,15,.38),0 12px 34px rgba(0,0,0,.28)}
.hero-sub{font-size:clamp(15px,1.3vw,20px);line-height:1.7;padding:0 0 0 14px;color:var(--hero-ivory);text-shadow:0 2px 12px rgba(25,19,16,.55)}
.object-stage{z-index:5;left:clamp(18px,5vw,78px);transition:opacity .4s var(--ease),transform .55s var(--ease)}
.object-stage:before{
  z-index:-1;
  content:"";
  position:absolute;
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(22px);
  transform:translateY(24%);background:radial-gradient(circle,rgba(255,247,237,.25),transparent 66%)}.drag-hint{color:var(--hero-ivory);text-shadow:0 1px 6px rgba(0,0,0,.4)}.object-label{color:var(--hero-ivory)}.object-label i{border-color:var(--hero-copper)}
.hero-corner{position:absolute;z-index:5;left:var(--pad);bottom:24px;align-items:center;gap:9px;max-width:260px;color:rgba(255,247,237,.86);font:10px/1.35 SpaceG,monospace;letter-spacing:.1em;text-shadow:0 1px 6px rgba(0,0,0,.35)}.hero-corner i{display:block;width:20px;border-top:1px solid var(--hero-copper)}
.hero-count{color:var(--hero-ivory)}.hero-count span{color:var(--hero-copper);background:transparent}.chapter-dots button.on{background:var(--hero-copper)}.hero-footer{z-index:6}.scroll-note{color:var(--hero-ivory)}
.wall--integrated .wall-head{position:relative;z-index:2}
@media(max-width:760px){.wall--integrated .wall-head>p:last-child{display:none}}

/* ── 各區字體排版：每一區有自己的字體風格 ── */
@font-face{font-family:NotoSerifTC;src:url('../assets/font/NotoSerifTC-VF-subset-20260925.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url('../assets/font/fraunces.woff2')}@font-face{font-family:Fraunces;src:url('../assets/font/frauncesit.woff2');font-style:italic}@font-face{font-family:Instrument;src:url('../assets/font/instrument.woff2')}@font-face{font-family:Instrument;src:url('../assets/font/instrumentit.woff2');font-style:italic}@font-face{font-family:Archivo;src:url('../assets/font/archivo.woff2')}@font-face{font-family:Bricolage;src:url('../assets/font/bricolage.woff2')}@font-face{font-family:Iansui;src:url('../assets/font/iansui.woff2')}@font-face{font-family:JMMing;src:url('../assets/font/jmming.woff2')}@font-face{font-family:JMKai;src:url('../assets/font/jmkai.woff2')}@font-face{font-family:WenKai;src:url('../assets/font/wenkai.woff2')}@font-face{font-family:WenKai;src:url('../assets/font/wenkaib.woff2');font-weight:700}@font-face{font-family:GenYo;src:url('../assets/font/genyoL.woff2');font-weight:300}@font-face{font-family:SpaceG;src:url('../assets/font/sgL.woff2');font-weight:300}

/* 01: the opening promise — centered, high-fashion title card */.stage-0 .hero-copy h1{font-family:NanMing,serif;font-size:clamp(43px,5.35vw,88px);letter-spacing:-.05em}.stage-0 .hero-sub{font-family:GenYo,"Microsoft JhengHei",sans-serif;font-weight:300;letter-spacing:.035em}

/* 02: a live briefing note — asymmetric within a deliberately centred field */.stage-1 .hero-en{margin-left:-.08em}.stage-1 .hero-copy h1{font-family:Iansui,"Microsoft JhengHei",sans-serif;font-size:clamp(40px,5.05vw,80px);letter-spacing:.018em}.stage-1 .hero-copy h1 em{padding:0;background:none;box-shadow:none;border-bottom:2px solid var(--hero-copper)}.stage-1 .hero-sub{font-family:WenKai,"Microsoft JhengHei",sans-serif;font-size:clamp(17px,1.45vw,22px);line-height:1.7;max-width:480px}

/* 03: the system layer — geometric, precise and almost typographic UI */.stage-2 .hero-copy h1{font-family:GenYo,"Microsoft JhengHei",sans-serif;font-weight:600;font-size:clamp(40px,5.4vw,91px);letter-spacing:-.07em}.stage-2 .hero-copy h1 em{padding:0;background:none;box-shadow:none;color:#f6cba4;border-bottom:5px solid var(--hero-copper)}.stage-2 .hero-sub{font-family:SpaceG,monospace;font-weight:300;font-size:clamp(12px,1vw,16px);letter-spacing:.07em;border-left:0;border-right:2px solid var(--hero-copper);padding:0 14px 0 0;text-align:right;max-width:480px}

/* 04: the delivery layer — a softer, ceremonial finale */.stage-3 .hero-copy h1{font-family:JMMing,"Microsoft JhengHei",serif;letter-spacing:.02em}.stage-3 .hero-copy h1 em{color:#4A3728;background:#F6CBA4;box-shadow:6px 6px 0 rgba(255,247,237,.16)}.stage-3 .hero-sub{font-family:WenKai,"Microsoft JhengHei",sans-serif;font-size:clamp(17px,1.45vw,22px);border-left:0;border-top:1px solid rgba(255,247,237,.7);padding:16px 0 0;text-align:center}

/* 05: wall signage, not another hero heading */
.wall--integrated .eyebrow{
  color:var(--hero-copper);font-family:Archivo,Arial,sans-serif;font-size:clamp(10px,.85vw,14px);font-style:normal;font-weight:700;letter-spacing:.18em}.wall--integrated .wall-head>p:last-child{
  max-width:380px;
  font-size:clamp(14px,1.1vw,17px);
  line-height:1.7;
  color:rgba(255,247,237,.88);
  text-shadow:0 2px 12px rgba(0,0,0,.36);font-family:GenYo,"Microsoft JhengHei",sans-serif;font-weight:300}

/* 06: a handwritten production manifesto with technical rails */

/* 07: product edit — magazine masthead + five different product voices */
.showroom-head .eyebrow{font-family:Archivo,Arial,sans-serif;font-size:clamp(10px,.85vw,14px);font-style:normal;font-weight:700;letter-spacing:.2em}.showroom-head>p:last-child{
  line-height:1.7;
  margin:20px 0 0;
  color:var(--muted);font-family:JMMing,"Microsoft JhengHei",serif;font-size:clamp(17px,1.25vw,20px);max-width:600px}.product-no,.product a{font-family:Archivo,Arial,sans-serif;letter-spacing:.12em}.product h3{
  font-size:clamp(25px,2vw,36px);
  margin:5px 0 10px;line-height:1}.product p{font-family:GenYo,"Microsoft JhengHei",sans-serif;font-weight:300}

/* 08: a personal invitation — spacious, light and direct */.start h2{font-family:JMKai,"Microsoft JhengHei",cursive;font-size:clamp(46px,6vw,104px);line-height:1.08;letter-spacing:.01em;max-width:1000px}.start-options button{
  transition:color .2s,background .2s,border .2s;letter-spacing:.03em}

/* Dialog keeps the selected package's voice: expressive package title, neutral explanation. */.solid-action{font-family:Archivo,Arial,sans-serif;font-weight:700;letter-spacing:.1em}

@media(max-width:1100px){.stage-1 .hero-sub,.stage-2 .hero-sub{border-left:2px solid var(--hero-copper);border-right:0;padding:0 0 0 12px;text-align:left}.product h3{font-size:clamp(32px,4.5vw,48px)}}
@media(max-width:760px){.start h2{font-size:clamp(43px,12vw,62px)}}

/* ── 01–05 觸控與 RWD 版面 ── */
:root{
  --hero-ivory:#fff7ed;
  --hero-copper:#b96835;
  --hero-deep:#24170f;
  --violet:#300060;
  --pink:#fc006c;
  --acid:#d0f000;
  --paper:#f4efe7;
  --surface:#e6ddd0;
  --bridge:#4a3728;
  --deep:#191310;
  --ink:#221a14;
  --muted:#6e6153;
  --line:#8a7a69;
  --ember:#c2571e;
  --emberlift:#cf5d20;
  --pad:clamp(18px,3vw,52px);
  --display:clamp(48px,8.2vw,154px);
  --h1:clamp(36px,5vw,84px);
  --h2:clamp(26px,2.8vw,45px);
  --body:clamp(15px,1.1vw,17px);
  --shadow:0 25px 70px rgba(25,19,16,.24);
  --ease:cubic-bezier(.16,1,.3,1);--focus-ring:#fff7ed;--hero-safe:clamp(18px,3vw,52px)}
.site-header{
  justify-content:space-between;
  mix-blend-mode:normal;padding:clamp(13px,2.2vw,24px) var(--hero-safe);transition:background .25s var(--ease)}
.site-header a:focus-visible,.chapter-dots button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:5px}
.hero-stage{
  isolation:isolate;min-height:100svh}
.hero-copy{
  translate:-50% -50%;
  text-align:center;
  display:flex;
  flex-direction:column;
  text-wrap:balance;z-index:4;pointer-events:none}
.hero-en{
  margin:0 0 20px}
.hero-sub{
  width:min(620px,82vw);
  margin-top:28px;
  border-left:2px solid var(--hero-copper);
  text-align:left;max-width:min(620px,72vw);text-wrap:pretty}
.object-stage{
  width:clamp(220px,23vw,390px);
  height:clamp(220px,30vw,440px);
  right:auto;
  opacity:1;isolation:isolate}
.object-stage model-viewer{opacity:1}
.object-stage model-viewer.is-loaded{opacity:1}
.object-stage model-viewer:active{cursor:grabbing}
.object-stage model-viewer.is-user-controlled{cursor:grabbing}
/* Each chapter has a distinct object hand-off: compress → spin → land at its own hero angle. */
.object-stage model-viewer.transition-stamp{--exit-turn:620deg;--entry-turn:-160deg;--exit-x:-8%;--entry-x:5%;--exit-y:4%;--entry-y:-3%}
.object-stage model-viewer.transition-measure{--exit-turn:-470deg;--entry-turn:120deg;--exit-x:10%;--entry-x:-6%;--exit-y:-8%;--entry-y:3%}
.object-stage model-viewer.transition-system{--exit-turn:760deg;--entry-turn:-205deg;--exit-x:0%;--entry-x:0%;--exit-y:-10%;--entry-y:6%}
.object-stage model-viewer.transition-reveal{--exit-turn:-540deg;--entry-turn:150deg;--exit-x:7%;--entry-x:-4%;--exit-y:7%;--entry-y:-4%}
.object-stage model-viewer.is-swapping{pointer-events:none}
.model-status{position:absolute;z-index:3;top:14%;left:8%;margin:0;max-width:180px;font:700 12px/1.35 Archivo,Arial,sans-serif;letter-spacing:.15em;color:rgba(255,247,237,.9);text-shadow:0 1px 6px rgba(0,0,0,.45);pointer-events:none;transition:opacity .25s ease}
.model-status.is-ready{opacity:0}
.model-status.is-error{color:#ffc6a7;opacity:1}
.hero-footer{gap:18px}
.chapter-dots button{
  height:5px;min-width:34px;min-height:20px;background-clip:content-box}
.wall--integrated{align-items:flex-start}

@media (max-width:1100px){
  .site-header nav{gap:10px}.nav-cta{min-height:38px;display:inline-flex;align-items:center}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-links{display:none}
  .site-header.is-menu-open .nav-links{display:flex;flex-direction:column;position:absolute;top:calc(100% - 6px);right:var(--hero-safe);min-width:200px;padding:8px;border:1px solid rgba(244,239,231,.2);border-radius:14px;background:rgba(25,19,16,.94);box-shadow:0 18px 40px rgba(0,0,0,.35);color:var(--paper);text-shadow:none}
  .site-header.is-menu-open .nav-links a{display:flex;align-items:center;min-height:44px;padding:0 14px}
  .hero-sub{max-width:min(530px,78vw)}
  .hero-footer{left:var(--hero-safe);right:var(--hero-safe)}
}

@media (max-width:760px){
  .site-header{padding:10px 18px}.site-header nav{font-size:13px}.nav-cta{padding:7px 9px}
  .model-status{font-size:12px;max-width:120px}.object-label i{width:16px}
  .hero-count{left:18px;top:76px;font-size:10px}.hero-footer{left:18px;right:18px}
  .chapter-dots{gap:3px}
}

/* 05 frame layout: the group moves responsively, while each frame keeps its own spread. */

@media (prefers-reduced-motion:reduce){
  .object-stage{display:grid}.object-stage model-viewer{opacity:1;animation:none!important;transform:none!important}.model-status{display:none}
}

/* 3D guidance is anchored to the object, and never remains on screen during a model hand-off. */
.drag-hint{top:-7px;right:auto;left:50%;translate:-50% 0;width:max-content}
.object-stage .object-label{transition:opacity .16s ease,transform .16s var(--ease)}
.object-stage.is-transitioning .object-label{opacity:0;transform:translateY(8px)}

/* Downward glyph points to the 3D object; the former label guide is intentionally removed. */
.drag-hint span{transform:none}.object-label i{display:none}

/* 3D 元件延後載入前的同角度靜態圖；第一次載入完成（.has-model）後淡出 */
.object-stage .model-poster{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;user-select:none;transition:opacity .35s ease,visibility 0s linear .35s}
.object-stage.has-model .model-poster{opacity:0;visibility:hidden}
.object-stage:not(.has-model) .model-status:not(.is-error){visibility:hidden}
/* model-viewer's internal loading bar appeared as a stray line while each GLB changed. */
.object-stage model-viewer{
  transition:opacity .35s ease;
  touch-action:pan-y;
  cursor:grab;--progress-bar-height:0px}

/* ── 01–04 Hero 與 3D 物件的 RWD ── */
@media (min-width:761px) and (max-width:1100px){
  .stage-1 .hero-sub,.stage-2 .hero-sub{border-left:2px solid var(--hero-copper);border-right:0;padding:0 0 0 12px;text-align:left}
}

@media (min-width:761px) and (max-width:1100px){
  .hero-copy{top:41%;width:min(88vw,660px)}.hero-sub{max-width:min(480px,74vw)}
  .object-stage{width:clamp(190px,31vw,270px);height:clamp(210px,35vw,310px);left:clamp(16px,4vw,34px)}
  .drag-hint{top:-10px}.model-status{top:0;left:8%}.scroll-note{max-width:220px}
}

@media (max-width:760px){
  .hero-en{font-size:clamp(25px,9vw,48px);line-height:.88}
  .hero-sub{width:min(315px,82vw);font-size:12px;line-height:1.55;margin-top:13px}
  .drag-hint{
  display:block;top:-11px;font-size:8px}.drag-hint span{font-size:15px}
  .model-status{top:1%;left:50%;translate:-50% 0;text-align:center}.chapter-dots button{
  width:25px;
  min-width:25px;min-height:16px}
}

@media (max-width:760px) and (max-height:700px){.hero-sub{display:none}
  /* 矮螢幕手機：3D 物件縮小並往下放，不碰到上方英文字 */
  .hero-stage .object-stage{bottom:clamp(64px,10vh,96px)}
  .hero-stage.stage-0 .object-stage,.hero-stage.stage-1 .object-stage,.hero-stage.stage-2 .object-stage,.hero-stage.stage-3 .object-stage{width:clamp(120px,34vw,150px);height:clamp(134px,38vw,168px)}
}

@media (max-width:1100px) and (max-height:700px) and (orientation:landscape){
  .hero-copy{left:67%;top:49%;width:min(57vw,650px);align-items:center;text-align:center}
  .hero-copy h1,.stage-0 .hero-copy h1,.stage-1 .hero-copy h1,.stage-2 .hero-copy h1,.stage-3 .hero-copy h1{font-size:clamp(27px,5.2vw,47px)}
  .hero-en{font-size:clamp(23px,5.6vw,48px)}
  .hero-sub{display:none}.object-stage{width:clamp(145px,24vw,205px);height:clamp(160px,27vw,225px);left:4vw;translate:0 0}
  .drag-hint{top:-8px}.hero-count{top:68px}.scroll-note{display:none}
}

/* ── 01–04 文字層級與 3D 物件間距 ── */
.hero-copy .hero-en{margin-bottom:clamp(12px,1.8vh,22px)}
.hero-copy h1{text-wrap:balance}
.hero-copy .hero-sub{margin-top:clamp(16px,2.3vh,28px);text-wrap:pretty}

@media (min-width:1101px){.stage-0 .hero-sub{max-width:470px}.stage-1 .hero-sub{max-width:450px;margin-top:24px}
  /* 03 reserves the entire left-lower quadrant for the system object. */.stage-2 .hero-sub{max-width:410px;margin-top:25px}.stage-3 .hero-sub{max-width:500px;margin-top:25px}
}

@media (min-width:761px) and (max-width:1100px){
  .hero-copy .hero-en{margin-bottom:16px}.hero-copy .hero-sub{margin-top:20px}
  .stage-2 .hero-copy h1{max-width:620px;line-height:1.08}.stage-2 .hero-sub{max-width:360px;margin-top:20px}
  .stage-2 .object-stage{width:clamp(190px,22vw,260px);height:clamp(215px,26vw,310px);left:clamp(12px,2vw,26px);bottom:clamp(48px,6vh,72px)}
}

@media (max-width:1100px){
  .hero-copy .hero-en{margin-bottom:14px}.hero-copy .hero-sub{margin-top:18px}
}

@media (max-width:760px){
  .hero-copy .hero-en{margin-bottom:10px}.hero-copy .hero-sub{margin-top:13px}.stage-2 .hero-sub{max-width:285px}
}

/* ── Hero 主訊息與 3D 旁的說明文字 ── */
.object-story{position:absolute;z-index:4;left:50%;translate:-50% 0;margin:0;pointer-events:none}
.object-story em{font-style:normal;color:#f4c79e}.object-label{left:50%;bottom:-62px;translate:-50% 0;justify-content:center;width:max-content;max-width:none;font-size:8px;white-space:nowrap}.object-label span:last-child{display:none}

@media (max-width:1100px){.object-label{bottom:-55px}
}

@media (max-width:760px){
  .hero-copy{width:calc(100vw - 32px)}.object-label{
  gap:7px;bottom:-51px;font-size:7px}
}

/* A text beat covers the opening portion of the currently playing film, not a fixed animation length. */
.hero-stage:not(.stage-0).is-text-entering .hero-en{animation:hero-en-enter var(--text-en-duration) cubic-bezier(.16,1,.3,1) both}
.hero-stage:not(.stage-0).is-text-entering .object-story{animation:hero-object-enter var(--text-object-duration) var(--text-object-delay) cubic-bezier(.16,1,.3,1) both}
.hero-stage:not(.stage-0).is-text-entering .object-label{animation:hero-meta-enter var(--text-object-duration) var(--text-meta-delay) cubic-bezier(.16,1,.3,1) both}
@keyframes hero-en-enter{from{opacity:0;filter:blur(9px);transform:translateY(18px) scale(.97)}to{opacity:1;filter:none;transform:none}}
@keyframes hero-object-enter{from{opacity:0;filter:blur(6px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}
@keyframes hero-meta-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){.hero-stage.is-text-entering .hero-en,.hero-stage.is-text-entering .object-story,.hero-stage.is-text-entering .object-label{animation:none}}

/* ── 01–04 主訊息層級 ── */
.hero-copy .hero-main{margin:0;font:400 clamp(36px,4.25vw,70px)/1.16 NanMing,"Microsoft JhengHei",serif;letter-spacing:-.025em;color:var(--hero-ivory);text-shadow:0 3px 24px rgba(25,19,16,.46)}
.hero-copy .hero-main em{display:inline-block;font-style:normal;color:var(--hero-ivory);background:linear-gradient(100deg,rgba(185,104,53,.98),rgba(145,65,34,.98));padding:.04em .17em .1em;box-shadow:8px 8px 0 rgba(36,23,15,.28);transform:none}
.hero-subtitle{margin:clamp(20px,2.8vh,32px) auto 0;padding:10px 14px 11px;background:rgba(185,104,53,.9);box-shadow:7px 7px 0 rgba(255,247,237,.15);color:var(--hero-ivory);font:400 clamp(15px,1.28vw,20px)/1.55 GenYo,"Microsoft JhengHei",sans-serif;letter-spacing:.02em;text-align:left;text-shadow:0 1px 8px rgba(25,19,16,.28)}
.object-story.object-index{bottom:-38px;width:min(280px,76vw);font:700 clamp(12px,1vw,15px)/1.3 Archivo,Arial,sans-serif;letter-spacing:.14em;color:#f4c79e;text-align:center;text-shadow:0 2px 9px rgba(0,0,0,.56)}
.object-stage .drag-hint,.object-stage .object-story{transition:opacity .16s ease,transform .16s var(--ease)}
.object-stage.is-transitioning .drag-hint,.object-stage.is-transitioning .object-story{opacity:0;transform:translateY(8px)}

@media (min-width:1101px){
  .hero-copy{left:50%;top:41%;width:min(84vw,940px);align-items:center;text-align:center}
  .hero-copy .hero-main{max-width:min(760px,76vw)}.hero-subtitle{max-width:min(560px,62vw)}
  /* The left-bottom 3D zone and fixed corner mark have a dedicated 84px gap. */
  .object-stage{bottom:clamp(138px,16vh,178px)}.stage-2 .object-stage{
  left:clamp(10px,2vw,30px);bottom:clamp(142px,16vh,182px)}
}

@media (max-width:1100px){
  .hero-copy .hero-main{max-width:min(660px,86vw);font-size:clamp(32px,5.4vw,52px)}.hero-subtitle{max-width:min(520px,76vw);font-size:clamp(14px,1.9vw,17px)}
  .object-stage{bottom:clamp(122px,16vh,148px)}.object-story.object-index{bottom:-32px;font-size:clamp(12px,1.5vw,13px)}
}

@media (max-width:760px){
  .hero-copy{top:31%}
  .hero-copy .hero-main{max-width:min(350px,88vw);font-size:clamp(28px,8vw,42px);line-height:1.18}.hero-copy .hero-main em{padding:.035em .12em .08em;box-shadow:5px 5px 0 rgba(36,23,15,.28)}
  .hero-subtitle{max-width:min(300px,82vw);margin-top:16px;padding:8px 10px 9px;font-size:12px;line-height:1.48;box-shadow:4px 4px 0 rgba(255,247,237,.13)}
  .object-stage{left:50%;right:auto;translate:-50% 0;bottom:clamp(112px,16vh,132px);width:clamp(142px,42vw,180px);height:clamp(160px,47vw,200px)}.object-story.object-index{bottom:-27px;font-size:12px;letter-spacing:.12em}
}

/* ── 01–04 四章各自的視覺與 3D 語言 ── */
@font-face{font-family:"Creattion Signature Script Font";src:url('../assets/font/Creattion Demo.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
.hero-stage .hero-copy,.hero-stage .hero-en,.hero-stage .hero-main,.hero-stage .hero-subtitle,.hero-stage .hero-main-line,.hero-stage .hero-sub-line{transform-style:preserve-3d;backface-visibility:visible}
.hero-stage .hero-en{position:relative;display:inline-block;transform-origin:center;will-change:transform,opacity,filter}
.hero-stage .hero-main-line,.hero-stage .hero-sub-line{will-change:transform,opacity,filter}

/* 01 / OPENING EDITORIAL — script headline, inked Chinese, clean asymmetric overprint. */
.stage-0{--s01-main:#4A3728;--s01-accent:#C2571E;--s01-paper:#F4EFE7;perspective:1700px}
.stage-0::before{content:"";position:absolute;z-index:1;left:50%;top:13%;width:min(62vw,880px);height:min(62vw,880px);border:1px solid rgba(244,239,231,.16);border-radius:50%;transform:translateX(-50%) rotate(-8deg) scale(.84);box-shadow:0 0 0 28px rgba(194,87,30,.035),0 0 90px rgba(244,239,231,.08);pointer-events:none}
.stage-0::after{content:"";position:absolute;z-index:1;left:50%;top:16%;width:min(47vw,680px);height:1px;background:linear-gradient(90deg,transparent,rgba(194,87,30,.72),transparent);transform:translateX(-50%) rotate(-3deg);pointer-events:none}
.stage-0 .hero-copy{left:50%;top:41%;bottom:auto;width:min(84vw,980px);align-items:center;text-align:center}
.stage-0 .hero-en{font-style:normal;line-height:.88}
.stage-0 .hero-en::after{content:"";position:absolute;left:10%;background:var(--s01-accent);transform:rotate(-1.8deg) translateZ(-12px)}
.stage-0 .hero-main{color:var(--s01-paper);text-shadow:0 3px 20px rgba(25,19,16,.52)}
.stage-0 .hero-main em{font-style:normal;color:var(--s01-paper);-webkit-text-fill-color:currentColor;background:none;padding:0}
.stage-0 .hero-main em::after{display:none}
.stage-0 .hero-main .s01-strong{display:inline-block;font-family:GenYo,"Microsoft JhengHei",sans-serif;font-size:.92em;font-weight:700;line-height:1;color:var(--s01-paper);-webkit-text-fill-color:currentColor;padding:.08em .16em .12em;margin-left:.08em;box-shadow:.13em .13em 0 rgba(25,19,16,.48);transform-style:preserve-3d;transform-origin:50% 50%;backface-visibility:hidden;text-shadow:0 2px 8px rgba(25,19,16,.35)}
.stage-0 .hero-main .s01-prestrong{display:inline-block}
.stage-0 .hero-subtitle{position:relative;border:0;border-left:2px solid var(--s01-accent);box-shadow:none;font-family:GenYo,"Microsoft JhengHei",sans-serif;font-weight:400;text-align:left;text-shadow:0 1px 9px rgba(25,19,16,.8)}
.stage-0 .hero-subtitle::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:100%;background:var(--s01-accent);transform-origin:top}
.stage-0 .object-stage{z-index:8;opacity:1;visibility:visible;pointer-events:auto}.stage-0 .object-stage model-viewer{display:block;visibility:visible;opacity:1;min-width:100%;min-height:100%;--poster-color:transparent}

/* 02 / LIVE BRIEF — left-anchored note, warm highlight, model slides like a measured instrument. */
.stage-1{--s02-paper:#F4EFE7;--s02-accent:#C2571E;--s02-bridge:#4A3728;perspective:1550px}
 .stage-1::before{display:none}
 .stage-1::after{display:none}
.stage-1 .hero-copy{left:43%;top:47%;bottom:auto;width:min(76vw,900px);align-items:flex-start;text-align:left}
 .stage-1 .hero-en{font-family:"Trappist",Georgia,serif;font-style:italic;line-height:.78;letter-spacing:-.025em;color:var(--s02-accent);text-shadow:.06em .06em 0 var(--s02-paper),0 0 18px rgba(244,239,231,.28)}
.stage-1 .hero-main{color:var(--s02-paper);text-shadow:0 3px 20px rgba(25,19,16,.5)}
.stage-1 .hero-main em{font-style:normal}
  .stage-1 .hero-subtitle{position:relative;margin-top:24px;border:0;box-shadow:none;font-family:WenKai,"Microsoft JhengHei",sans-serif;text-align:left}
 .stage-1 .hero-subtitle::before{content:"";position:absolute;z-index:0;left:0;top:0;width:2px;height:100%;background:linear-gradient(180deg,var(--s02-accent),rgba(194,87,30,.72));box-shadow:0 0 12px rgba(194,87,30,.22);transform-origin:top center;transform:scaleY(0);opacity:0;pointer-events:none}
 .stage-1 .hero-subtitle>.hero-sub-line{position:relative;z-index:1}
 .stage-1.is-text-entering .hero-subtitle::before{animation:s02-sub-rule-in 1.25s calc(var(--text-sub-delay) - 220ms) cubic-bezier(.16,1,.3,1) both}
 @keyframes s02-sub-rule-in{0%{opacity:0;transform:scaleY(0);filter:blur(2px)}22%{opacity:.82}68%{opacity:1;transform:scaleY(1.045);filter:blur(.3px)}86%{transform:scaleY(.985)}100%{opacity:.9;transform:scaleY(1);filter:none}}
 @media(prefers-reduced-motion:reduce){.stage-1 .hero-subtitle::before{animation:none;opacity:.9;transform:scaleY(1);filter:none}}

 /* 02 lockup adjustment: move only the English line and Chinese headline up/right; keep the explanatory note fixed. */

/* 03 / SYSTEM SPEC — right-aligned typographic grid, hard copper cuts, no soft card. */
.stage-2{--s03-paper:#F4EFE7;--s03-accent:#C2571E;--s03-bridge:#4A3728;perspective:1900px}
.stage-2::before{content:"";position:absolute;z-index:1;inset:17% 5% 14% 42%;background:linear-gradient(rgba(244,239,231,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,231,.12) 1px,transparent 1px);background-size:clamp(32px,4vw,62px) clamp(32px,4vw,62px);mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent);opacity:.42;pointer-events:none}
.stage-2::after{content:"CORE / 03";position:absolute;z-index:1;right:var(--pad);top:29%;font:700 10px/1 Archivo,Arial,sans-serif;letter-spacing:.2em;color:var(--s03-accent);transform:rotate(90deg);transform-origin:right top;pointer-events:none}
.stage-2 .hero-copy{bottom:auto}
.stage-2 .hero-en{font-family:Archivo,Arial,sans-serif;font-style:normal;font-weight:700;line-height:1.05;text-shadow:0 0 12px rgba(244,239,231,.28)}
.stage-2 .hero-main{color:var(--s03-paper);text-shadow:0 3px 18px rgba(25,19,16,.58)}
.stage-2 .hero-main em{font-style:normal}
.stage-2 .hero-subtitle{margin-top:23px;border:0;border-right:2px solid var(--s03-accent);box-shadow:none;text-align:right}

/* 04 / DELIVERY RITUAL：置中的收尾畫面、柔和浮動的文字與偏移的銅色標記 */
.stage-3{--s04-paper:#F4EFE7;--s04-accent:#C2571E;--s04-bridge:#4A3728;perspective:1800px}
.stage-3::before{content:"";position:absolute;z-index:1;left:50%;top:19%;width:min(52vw,760px);height:min(52vw,760px);border:1px solid rgba(244,239,231,.18);border-radius:50%;transform:translateX(-50%) scaleY(.62);box-shadow:0 0 0 22px rgba(194,87,30,.035),0 0 100px rgba(244,239,231,.08);pointer-events:none}
.stage-3::after{content:"";position:absolute;z-index:1;left:50%;bottom:24%;width:min(36vw,520px);height:1px;background:linear-gradient(90deg,transparent,var(--s04-accent),transparent);transform:translateX(-50%);pointer-events:none}
.stage-3 .hero-copy{left:50%;top:43%;bottom:auto;width:min(88vw,1040px);align-items:center;text-align:center}
.stage-3 .hero-en{font-family:Cormorant,Georgia,serif;font-style:italic;letter-spacing:-.045em;color:var(--s04-paper);text-shadow:.055em .055em 0 var(--s04-accent),0 0 24px rgba(244,239,231,.22)}
.stage-3 .hero-main{color:var(--s04-paper);text-shadow:0 3px 20px rgba(25,19,16,.48)}
  .stage-3 .hero-main em{font-style:normal}
  .stage-3 .hero-subtitle{position:relative;width:max-content;margin-top:22px;border:1px solid rgba(244,239,231,.18);border-top:3px solid rgba(255,247,237,.88);box-shadow:10px 10px 0 rgba(244,239,231,.12),0 12px 28px rgba(25,19,16,.24);font-family:WenKai,"Microsoft JhengHei",sans-serif;text-align:center;opacity:0;transform:translate3d(-18px,12px,0)}
 @keyframes s40-subtitle-box-in{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(-18px,12px,0);filter:blur(8px)}58%{opacity:1;clip-path:inset(0 0 0 0);transform:translate3d(4px,-2px,0);filter:blur(1px)}78%{transform:translate3d(-1px,1px,0);filter:blur(.25px)}100%{opacity:1;clip-path:inset(0);transform:none;filter:none}}

/* Each chapter has a different text entrance; no shared translate/fade template. */
.stage-0.is-text-entering .hero-main,.stage-1.is-text-entering .hero-main,.stage-1.is-text-entering .hero-subtitle,.stage-2.is-text-entering .hero-main,.stage-2.is-text-entering .hero-subtitle,.stage-3.is-text-entering .hero-main{animation:none}.stage-1.is-text-entering .hero-main-line,.stage-1.is-text-entering .hero-sub-line{opacity:0}.stage-1.is-text-entering .hero-main-line:nth-child(1){animation:s20-main-in var(--text-main-duration) var(--text-main-delay) cubic-bezier(.16,1,.3,1) both}.stage-1.is-text-entering .hero-main-line:nth-child(2){animation:s20-main-in var(--text-main-duration) calc(var(--text-main-delay) + var(--text-line-step)) cubic-bezier(.16,1,.3,1) both}.stage-1.is-text-entering .hero-sub-line:nth-child(1){animation:s20-sub-in var(--text-sub-duration) var(--text-sub-delay) cubic-bezier(.16,1,.3,1) both}.stage-1.is-text-entering .hero-sub-line:nth-child(2){animation:s20-sub-in var(--text-sub-duration) calc(var(--text-sub-delay) + var(--text-line-step)) cubic-bezier(.16,1,.3,1) both}.stage-2.is-text-entering .hero-main-line,.stage-2.is-text-entering .hero-sub-line{opacity:0}.stage-2.is-text-entering .hero-main-line:nth-child(1){animation:s30-main-in var(--text-main-duration) var(--text-main-delay) cubic-bezier(.16,1,.3,1) both}.stage-2.is-text-entering .hero-main-line:nth-child(2){animation:s30-main-in var(--text-main-duration) calc(var(--text-main-delay) + var(--text-line-step)) cubic-bezier(.16,1,.3,1) both}.stage-2.is-text-entering .hero-sub-line:nth-child(1){animation:s30-sub-in var(--text-sub-duration) var(--text-sub-delay) cubic-bezier(.16,1,.3,1) both}.stage-2.is-text-entering .hero-sub-line:nth-child(2){animation:s30-sub-in var(--text-sub-duration) calc(var(--text-sub-delay) + var(--text-line-step)) cubic-bezier(.16,1,.3,1) both}.stage-3.is-text-entering .hero-main-line,.stage-3.is-text-entering .hero-sub-line{opacity:0}.stage-3.is-text-entering .hero-main-line:nth-child(1){animation:s40-main-in var(--text-main-duration) var(--text-main-delay) cubic-bezier(.16,1,.3,1) both}.stage-3.is-text-entering .hero-main-line:nth-child(2){animation:s40-main-in var(--text-main-duration) calc(var(--text-main-delay) + var(--text-line-step)) cubic-bezier(.16,1,.3,1) both}.stage-3.is-text-entering .hero-sub-line:nth-child(1){animation:s40-sub-in var(--text-sub-duration) var(--text-sub-delay) cubic-bezier(.16,1,.3,1) both}.stage-3.is-text-entering .hero-sub-line:nth-child(2){animation:s40-sub-in var(--text-sub-duration) calc(var(--text-sub-delay) + var(--text-line-step)) cubic-bezier(.16,1,.3,1) both}
@keyframes s20-main-in{0%{opacity:0;filter:blur(10px);transform:translate3d(-190px,46px,-230px) rotateY(28deg) rotateZ(-4deg) scale(.76)}64%{opacity:1;filter:blur(0);transform:translate3d(12px,-7px,28px) rotateY(-5deg) rotateZ(1deg) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes s20-sub-in{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-40px)}100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes s30-main-in{0%{opacity:0;filter:blur(11px);transform:translate3d(180px,36px,-250px) rotateY(34deg) rotateZ(3deg) scale(.72)}58%{opacity:1;filter:none;transform:translate3d(-10px,-5px,28px) rotateY(-6deg) rotateZ(-1deg) scale(1.05)}100%{opacity:1;transform:none}}
@keyframes s30-sub-in{0%{opacity:0;clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);transform:translateX(55px)}100%{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none}}
@keyframes s40-main-in{0%{opacity:0;filter:blur(12px);transform:translate3d(0,100px,-230px) rotateX(-44deg) scale(.76)}63%{opacity:1;filter:none;transform:translate3d(0,-10px,30px) rotateX(7deg) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes s40-sub-in{0%{opacity:0;transform:translate3d(0,28px,-100px) rotateX(-28deg) scale(.9)}100%{opacity:1;transform:none}}
@keyframes s40-mark-in{0%{filter:brightness(.7)}20%{filter:brightness(1.28) drop-shadow(0 0 14px rgba(244,239,231,.42))}40%{filter:brightness(1)}100%{filter:none}}

/* The objects use four different hand-offs: press, measure, system lock, and reveal. */
.object-stage model-viewer.is-swapping.transition-stamp{animation:s10-object-exit .42s cubic-bezier(.7,0,1,.45) both}.object-stage model-viewer.is-entering.transition-stamp{animation:s10-object-enter .98s cubic-bezier(.16,1,.3,1) both}
.object-stage model-viewer.is-swapping.transition-measure{animation:s20-object-exit .48s cubic-bezier(.7,0,1,.45) both}.object-stage model-viewer.is-entering.transition-measure{animation:s20-object-enter 1.06s cubic-bezier(.16,1,.3,1) both}
.object-stage model-viewer.is-swapping.transition-system{animation:s30-object-exit .52s cubic-bezier(.7,0,1,.45) both}.object-stage model-viewer.is-entering.transition-system{animation:s30-object-enter .92s cubic-bezier(.16,1,.3,1) both}
.object-stage model-viewer.is-swapping.transition-reveal{animation:s40-object-exit .46s cubic-bezier(.7,0,1,.45) both}.object-stage model-viewer.is-entering.transition-reveal{animation:s40-object-enter 1.12s cubic-bezier(.16,1,.3,1) both}
@keyframes s10-object-exit{0%{transform:translate3d(0,0,0) rotateX(0) rotateY(0) scale(1)}100%{transform:translate3d(-8%,12%,0) rotateX(70deg) rotateY(-22deg) rotateZ(-12deg) scale(.2)}}
@keyframes s10-object-enter{0%{transform:translate3d(-18%,18%,-300px) rotateX(76deg) rotateY(-48deg) rotateZ(-12deg) scale(.2)}54%{transform:translate3d(2%,-3%,40px) rotateX(-8deg) rotateY(8deg) rotateZ(3deg) scale(1.08)}100%{transform:none}}
@keyframes s20-object-exit{0%{opacity:1;transform:translate3d(0,0,0) rotateY(0) scale(1)}100%{opacity:0;transform:translate3d(22%,0,0) rotateY(110deg) rotateZ(6deg) scale(.26)}}
@keyframes s20-object-enter{0%{opacity:0;transform:translate3d(28%,0,-340px) rotateY(-132deg) rotateZ(-8deg) scale(.22)}58%{opacity:1;transform:translate3d(-3%,2%,36px) rotateY(14deg) rotateZ(2deg) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes s30-object-exit{0%{opacity:1;transform:translate3d(0,0,0) rotateZ(0) scale(1)}100%{opacity:0;transform:translate3d(0,-10%,0) rotateZ(92deg) rotateY(35deg) scale(.18)}}
@keyframes s30-object-enter{0%{opacity:0;transform:translate3d(12%,-18%,-360px) rotateZ(-110deg) rotateY(-38deg) scale(.2)}52%{opacity:1;transform:translate3d(-2%,3%,42px) rotateZ(8deg) rotateY(8deg) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes s40-object-exit{0%{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotateY(0) scale(1)}100%{opacity:0;transform:translate3d(-4%,-13%,0) rotateX(-35deg) rotateY(-120deg) scale(.25)}}
@keyframes s40-object-enter{0%{opacity:0;transform:translate3d(0,16%,-320px) rotateX(42deg) rotateY(160deg) rotateZ(5deg) scale(.22)}62%{opacity:1;transform:translate3d(0,-4%,46px) rotateX(-5deg) rotateY(-12deg) rotateZ(-2deg) scale(1.06)}100%{opacity:1;transform:none}}

@media (max-width:1100px){
  .stage-0 .hero-copy,.stage-3 .hero-copy{left:50%;top:39%;width:min(88vw,720px);align-items:center;text-align:center}
  .stage-1 .hero-copy{left:52%;top:43%;width:min(68vw,610px);align-items:flex-start;text-align:left}.stage-1 .hero-en{font-size:clamp(30px,6.2vw,62px)}
   .stage-2::after{top:25%;}
}
@media (max-width:760px){
  .stage-1 .hero-copy{align-items:flex-start;text-align:left}.stage-0 .hero-copy,.stage-3 .hero-copy{
  top:32%;
  width:calc(100vw - 34px);left:50%;align-items:center;text-align:center}
   .stage-2::before,.stage-3::before{opacity:.55}
}
@media (prefers-reduced-motion:reduce){.object-stage model-viewer.is-swapping,.object-stage model-viewer.is-entering,.stage-0.is-text-entering .hero-main-line,.stage-1.is-text-entering .hero-en,.stage-1.is-text-entering .hero-main-line,.stage-1.is-text-entering .hero-sub-line,.stage-2.is-text-entering .hero-en,.stage-2.is-text-entering .hero-main-line,.stage-2.is-text-entering .hero-sub-line,.stage-3.is-text-entering .hero-en,.stage-3.is-text-entering .hero-main-line,.stage-3.is-text-entering .hero-sub-line{animation:none!important}.object-stage model-viewer.is-swapping,.object-stage model-viewer.is-entering,.stage-0.is-text-entering .hero-en,.stage-0.is-text-entering .hero-main-line,.stage-0.is-text-entering .hero-sub-line,.stage-1.is-text-entering .hero-en,.stage-1.is-text-entering .hero-main-line,.stage-1.is-text-entering .hero-sub-line,.stage-2.is-text-entering .hero-en,.stage-2.is-text-entering .hero-main-line,.stage-2.is-text-entering .hero-sub-line,.stage-3.is-text-entering .hero-en,.stage-3.is-text-entering .hero-main-line,.stage-3.is-text-entering .hero-sub-line{transform:none!important;filter:none!important}.object-stage model-viewer.is-swapping,.object-stage model-viewer.is-entering,.stage-0.is-text-entering .hero-en,.stage-0.is-text-entering .hero-main-line,.stage-1.is-text-entering .hero-en,.stage-1.is-text-entering .hero-main-line,.stage-1.is-text-entering .hero-sub-line,.stage-2.is-text-entering .hero-en,.stage-2.is-text-entering .hero-main-line,.stage-2.is-text-entering .hero-sub-line,.stage-3.is-text-entering .hero-en,.stage-3.is-text-entering .hero-main-line,.stage-3.is-text-entering .hero-sub-line{opacity:1!important}}

/* ── RWD：大螢幕維持編排版面，小螢幕允許上下堆疊 ── */
@media (min-width:1101px){
  .hero-stage .hero-en{max-width:none;white-space:nowrap;text-wrap:nowrap}
  .hero-stage .hero-main-line{white-space:nowrap}
  .stage-1 .hero-en{font-size:clamp(28px,4vw,68px)}
}
@media (max-width:1100px){
  .hero-stage .hero-en{max-width:100%;white-space:normal;text-wrap:balance}
  .hero-stage .hero-main-line{white-space:normal;text-wrap:balance}
}

/* ── 01 收尾與 01–05 共用章節導覽 ── */
.hero-count{display:none}
 .hero-footer{justify-content:flex-end;bottom:clamp(28px,3.8vh,46px)}
.chapter-dots{display:none}
.scroll-note{margin-left:auto;text-align:right;white-space:nowrap}
@media (max-width:760px){.hero-footer{bottom:20px}.scroll-note{max-width:calc(100vw - 36px);white-space:normal;text-align:right}}

/* Desktop 02 lockup: headline 150px up / 50px right; explanatory note 100px up / 350px right. */
@media (min-width:1101px){
  .stage-1{--s02-lockup-x:50px;--s02-lockup-y:-150px}
  .stage-1 .hero-en,.stage-1 .hero-main{translate:var(--s02-lockup-x) var(--s02-lockup-y)}
}

/* 02 responsive accent lines: the new open corner stays anchored to the lockup at every size. */
.stage-1 .hero-copy{isolation:isolate}
.stage-1 .hero-copy>.hero-en,.stage-1 .hero-copy>.hero-main,.stage-1 .hero-copy>.hero-subtitle{position:relative;z-index:1}
.stage-1 .hero-copy::before{clip-path:inset(0 100% 0 0);opacity:0}
.stage-1 .hero-copy::after{clip-path:inset(100% 0 0 0);opacity:0}

@media (min-width:1101px){
 .stage-1 .hero-copy::before{content:"";position:absolute;z-index:0;left:calc(clamp(-46px,-3vw,-20px) + 25px);top:calc(var(--s02-lockup-y) - 18px);width:clamp(280px,32vw,480px);height:1px;background:linear-gradient(90deg,var(--s02-paper),rgba(244,239,231,.74) 88%,transparent);transform:rotate(-4deg);transform-origin:left center;pointer-events:none}
 .stage-1 .hero-copy::after{content:"";position:absolute;z-index:0;left:calc(clamp(-46px,-3vw,-20px) + 25px);top:calc(var(--s02-lockup-y) - 18px);width:1px;height:clamp(150px,24vh,260px);background:linear-gradient(180deg,var(--s02-paper),rgba(244,239,231,.48) 74%,transparent);transform:rotate(7deg);transform-origin:top center;pointer-events:none}
  .stage-1.is-text-entering .hero-copy::before{animation:s02-corner-horizontal-in 1.05s 140ms cubic-bezier(.16,1,.3,1) both}
  .stage-1.is-text-entering .hero-copy::after{animation:s02-corner-vertical-in 1.1s 320ms cubic-bezier(.16,1,.3,1) both}
}

@keyframes s02-corner-horizontal-in{0%{opacity:0;clip-path:inset(0 100% 0 0);filter:blur(2px)}24%{opacity:.7}72%{opacity:1;clip-path:inset(0 0 0 0);filter:blur(.25px)}88%{clip-path:inset(0 -2% 0 0)}100%{opacity:.82;clip-path:inset(0);filter:none}}
@keyframes s02-corner-vertical-in{0%{opacity:0;clip-path:inset(100% 0 0 0);filter:blur(2px)}26%{opacity:.68}74%{opacity:1;clip-path:inset(0 0 0 0);filter:blur(.25px)}89%{clip-path:inset(-2% 0 0 0)}100%{opacity:.76;clip-path:inset(0);filter:none}}
@media(prefers-reduced-motion:reduce){.stage-1 .hero-copy::before,.stage-1 .hero-copy::after{animation:none;opacity:.82;clip-path:inset(0);filter:none}}

@media (min-width:761px) and (max-width:1100px){
  .stage-1{--s02-lockup-y:clamp(-48px,-5vh,-24px)}
  .stage-1 .hero-copy::before{content:"";position:absolute;z-index:0;left:calc(clamp(-30px,-4vw,-12px) + 25px);top:calc(var(--s02-lockup-y) - 12px);width:clamp(210px,44vw,390px);height:1px;background:linear-gradient(90deg,var(--s02-paper),rgba(244,239,231,.68) 88%,transparent);transform:rotate(-3deg);transform-origin:left center;pointer-events:none}
  .stage-1 .hero-copy::after{content:"";position:absolute;z-index:0;left:calc(clamp(-30px,-4vw,-12px) + 25px);top:calc(var(--s02-lockup-y) - 12px);width:1px;height:clamp(110px,21vh,190px);background:linear-gradient(180deg,var(--s02-paper),rgba(244,239,231,.42) 74%,transparent);transform:rotate(6deg);transform-origin:top center;pointer-events:none}
}

@media (max-width:760px){
  .stage-1{--s02-lockup-y:clamp(-48px,-5vh,-24px)}
  .stage-1 .hero-copy::before{content:"";position:absolute;z-index:0;left:calc(clamp(-18px,-4vw,-8px) + 25px);top:calc(var(--s02-lockup-y) - 10px);width:clamp(140px,46vw,220px);height:1px;background:linear-gradient(90deg,var(--s02-paper),rgba(244,239,231,.64) 86%,transparent);transform:rotate(-2deg);transform-origin:left center;pointer-events:none}
  .stage-1 .hero-copy::after{content:"";position:absolute;z-index:0;left:calc(clamp(-18px,-4vw,-8px) + 25px);top:calc(var(--s02-lockup-y) - 10px);width:1px;height:clamp(80px,18vh,135px);background:linear-gradient(180deg,var(--s02-paper),rgba(244,239,231,.38) 72%,transparent);transform:rotate(5deg);transform-origin:top center;pointer-events:none}
}

/* ── 01 文字進場時間 ── */
.hero-main-line,.hero-sub-line{display:block}
.stage-0 .hero-en::after{
  right:1%;
  border-radius:999px;height:1px;min-height:1px;bottom:-.14em;box-shadow:0 3px 8px rgba(25,19,16,.22)}
.stage-0 .hero-en-main{position:relative;z-index:1;display:inline-block;white-space:inherit}
.stage-0 .hero-en-ghost{display:inline-block}
.stage-0 .hero-en-main .hero-en-group,.stage-0 .hero-en-ghost .hero-en-group{display:inline-block;filter:blur(11px);transform:translate3d(-15px,0,-90px) rotateY(-18deg);will-change:filter,transform}
.stage-0 .hero-en-main .hero-en-letter,.stage-0 .hero-en-ghost .hero-en-letter{display:inline-block;opacity:0;filter:blur(8px);transform:translate3d(-10px,8px,-45px) rotateY(-16deg);will-change:opacity,filter,transform}
@keyframes s01-en-group-clear{0%{filter:blur(11px);transform:translate3d(-15px,0,-90px) rotateY(-18deg)}68%{filter:blur(1px);transform:translate3d(4px,-2px,12px) rotateY(3deg)}100%{filter:blur(0);transform:none}}
@keyframes s01-en-letter-in{0%{opacity:0;filter:blur(8px);transform:translate3d(-10px,8px,-45px) rotateY(-16deg)}58%{opacity:1;filter:blur(1px);transform:translate3d(2px,-1px,10px) rotateY(2deg)}100%{opacity:1;filter:none;transform:none}}
.stage-0.is-text-entering .hero-main-line:nth-child(1){animation:s01-zh-line-in 2s var(--text-main-delay) cubic-bezier(.16,1,.3,1) both}
.stage-0.is-text-entering .hero-main-line:nth-child(2){opacity:1;animation:none}
.stage-0 .hero-main-line:nth-child(2) .s01-prestrong,.stage-0 .hero-main-line:nth-child(2) .s01-strong{opacity:0}
.stage-0 .hero-main-line:nth-child(2) em{text-shadow:none}
.stage-0.is-text-entering .hero-main-line:nth-child(2) .s01-prestrong{animation:s01-zh-second-in 2s calc(var(--text-main-delay) + var(--text-line-step)) cubic-bezier(.16,1,.3,1) both}
.stage-0.is-text-entering .hero-main-line:nth-child(2) em{animation:s01-second-shadow-in 2s calc(var(--text-main-delay) + var(--text-line-step)) cubic-bezier(.16,1,.3,1) both}
@keyframes s01-zh-line-in{0%{opacity:0;letter-spacing:.2em;filter:blur(8px);transform:translate3d(0,76px,-130px) rotateX(-24deg) scale(.84)}56%{opacity:1;letter-spacing:.035em;filter:blur(1px);transform:translate3d(0,-6px,18px) rotateX(5deg) scale(1.03)}100%{opacity:1;letter-spacing:-.045em;filter:none;transform:none}}
@keyframes s01-zh-second-in{0%{opacity:0;letter-spacing:.2em;filter:blur(5px);transform:translate3d(0,42px,0) rotateX(-10deg)}56%{opacity:1;letter-spacing:.035em;filter:blur(.8px);transform:translate3d(0,-4px,0) rotateX(2deg)}100%{opacity:1;letter-spacing:-.035em;filter:none;transform:none}}
@keyframes s01-second-shadow-in{0%{text-shadow:0 0 0 rgba(25,19,16,0)}100%{text-shadow:0 3px 18px rgba(25,19,16,.58)}}
@keyframes s01-strong-flip{0%{opacity:0;filter:blur(10px) brightness(.72);transform:translate3d(0,34px,-180px) rotateY(-155deg) rotateX(26deg) rotateZ(-8deg) scale(.58)}46%{opacity:1;filter:blur(1px) brightness(1.16);transform:translate3d(0,-7px,52px) rotateY(18deg) rotateX(-6deg) rotateZ(2deg) scale(1.1)}72%{opacity:1;filter:none;transform:translate3d(0,2px,18px) rotateY(-5deg) rotateX(2deg) rotateZ(-.8deg) scale(1.02)}100%{opacity:1;filter:none;transform:none}}
.stage-0.is-text-entering .hero-sub-line{opacity:1;animation:none}
.stage-0 .hero-sub-letter{display:inline-block;opacity:0;transform:translate3d(0,.42em,-20px);clip-path:inset(0 1em 0 0);will-change:opacity,transform,clip-path}
.hero-corner{display:none}

/* 01 atmospheric marks: the ring and both orange rules enter with the composition. */
.stage-0::before,.stage-0::after,.stage-0 .hero-en::after{opacity:0;filter:blur(12px)}
.stage-0.is-text-entering::before,.stage-0.is-text-entering::after,.stage-0.is-text-entering .hero-en::after{animation:s01-atmosphere-in 1.1s .08s cubic-bezier(.16,1,.3,1) both}
@keyframes s01-atmosphere-in{0%{opacity:0;filter:blur(12px)}100%{opacity:1;filter:blur(0)}}

/* The explanation card must arrive with its typing, never sit on screen beforehand. */
.stage-0.is-text-entering .hero-subtitle{animation:s01-subtitle-box-in 2s var(--text-sub-delay) cubic-bezier(.16,1,.3,1) both}
@keyframes s01-subtitle-box-in{0%{opacity:0;filter:blur(9px);transform:translate3d(0,14px,0)}58%{opacity:.92;filter:blur(1px);transform:translate3d(0,-2px,0)}100%{opacity:1;filter:none;transform:none}}

/* ── 01 動態收尾：2 秒進場，之後是受控的光感呼吸與浮動 ── */
.stage-0 .hero-copy{height:auto;display:flex;flex-direction:column;justify-content:flex-start;translate:-50% calc(-50% + clamp(24px,6vh,64px))}
.stage-0 .hero-en,.stage-0 .hero-main,.stage-0 .hero-subtitle{margin-top:0;margin-bottom:0}
.stage-0.is-text-entering .hero-en{
  opacity:1;
  filter:none;
  transform:none;animation:s01-en-breathe 2.6s 2s ease-in-out infinite alternate}
@keyframes s01-en-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}
.stage-0.is-text-entering .hero-main-line:nth-child(2) .s01-strong{
  opacity:0;animation:s01-strong-flip 1s 2.5s cubic-bezier(.16,1,.3,1) both,s01-strong-float 2.6s 3.5s ease-in-out infinite alternate}
@keyframes s01-strong-float{0%,100%{translate:0 0}50%{translate:0 -4px}}

@font-face{font-family:"Beneficha";src:url('../assets/font/beneficha-3.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Trappist";src:url('../assets/font/Trappist-Regular-3.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* 01 layout revision: move the English lockup below the boxed description. */
.stage-0 .hero-main{order:1}
.stage-0 .hero-subtitle{
  opacity:0;
  transform:translate3d(0,14px,0);order:2}
.stage-0 .hero-en{
  color:var(--s01-paper);
  order:3;
  font-size:clamp(28px,4.25vw,70px);
  font-family:"Beneficha",cursive;
  font-weight:400;
  letter-spacing:.03em;
  isolation:isolate;
  -webkit-text-stroke:0;
  text-shadow:0 0 24px rgba(194,87,30,.24),0 0 52px rgba(194,87,30,.12);rotate:-1.5deg}
.stage-0 .hero-en-main,.stage-0 .hero-en-ghost{font-weight:400}

/* Both orange rules belong to the English lockup and travel with it. */
.stage-0::after{display:none}
.stage-0 .hero-en::before{content:"";position:absolute;z-index:-1;left:50%;top:-.62em;width:min(47vw,680px);height:1px;background:linear-gradient(90deg,transparent,rgba(194,87,30,.72),transparent);transform:translateX(-50%) rotate(-3deg) translateZ(-12px);pointer-events:none;opacity:0;filter:blur(12px)}
.stage-0 .hero-en-ghost{
  filter:blur(.12px);
  position:absolute;
  z-index:0;
  width:100%;
  color:var(--s01-main);
  pointer-events:none;
  white-space:inherit;
  text-wrap:inherit;left:1.5px;top:1.5px;opacity:.87}

/* Keep the hero video frame anchored to its top edge. */
.hero-video{
  filter:saturate(.92) contrast(1.03);
  object-fit:cover;object-position:center top}

/* 04 副標外框動畫：在共用的文字重設規則之後，保留背景進場動畫 */
.stage-3.is-text-entering .hero-subtitle{animation:s40-subtitle-box-in var(--text-sub-duration) var(--text-sub-delay) cubic-bezier(.16,1,.3,1) both}
@media(prefers-reduced-motion:reduce){.stage-3 .hero-subtitle{animation:none!important;opacity:1;clip-path:inset(0);transform:none;filter:none}}

/* 01 進場時間與菱形呼吸：英文要等中文副標打完才出現 */
@media (prefers-reduced-motion:no-preference){
  .stage-0.is-text-entering .hero-en{animation:s01-en-breathe 2.6s var(--s01-en-delay) ease-in-out infinite alternate}
  .stage-0.is-text-entering .hero-en-main .hero-en-group,.stage-0.is-text-entering .hero-en-ghost .hero-en-group{animation:s01-en-group-clear .52s calc(var(--s01-en-delay) + var(--group-delay)) cubic-bezier(.16,1,.3,1) both}
  .stage-0.is-text-entering .hero-en-main .hero-en-letter,.stage-0.is-text-entering .hero-en-ghost .hero-en-letter{animation:s01-en-letter-in .52s calc(var(--s01-en-delay) + var(--letter-delay)) cubic-bezier(.16,1,.3,1) both}
  .stage-0.is-text-entering .hero-en::before{animation:s01-atmosphere-in 1.1s var(--s01-en-delay) cubic-bezier(.16,1,.3,1) both}
  .stage-0.is-text-entering .hero-en::after{animation:s01-atmosphere-in 1.1s var(--s01-en-delay) cubic-bezier(.16,1,.3,1) both}
  .stage-0.is-text-entering .hero-en-main::before,.stage-0.is-text-entering .hero-en-main::after{content:"✦";position:absolute;z-index:3;display:block;color:rgba(255,250,244,.92);font:400 .28em/1 Georgia,serif;letter-spacing:0;pointer-events:none;opacity:0;text-shadow:0 0 4px rgba(244,239,231,.82),0 0 11px rgba(194,87,30,.58);animation:s01-diamond-twinkle 3.8s calc(var(--s01-en-delay) + .65s) ease-in-out infinite}
  .stage-0.is-text-entering .hero-en-main::before{right:-.66em;top:-.48em;transform-origin:center}
  .stage-0.is-text-entering .hero-en-main::after{left:-.48em;bottom:-.18em;animation-delay:calc(var(--s01-en-delay) + 2.05s)}
  .stage-0.is-text-entering .hero-en-main{
  position:relative;
  filter:drop-shadow(0 0 3px rgba(244,239,231,.24));
  will-change:filter;animation:s01-en-diamond-breathe 3.6s var(--s01-en-delay) ease-in-out infinite}
}
@keyframes s01-en-diamond-breathe{0%,100%{filter:drop-shadow(0 0 3px rgba(244,239,231,.24))}50%{filter:brightness(1.08) drop-shadow(0 0 7px rgba(244,239,231,.5)) drop-shadow(0 0 15px rgba(194,87,30,.28))}}
@keyframes s01-diamond-twinkle{0%,100%{opacity:0;transform:scale(.38) rotate(45deg);filter:blur(1px)}34%{opacity:.22;transform:scale(.62) rotate(45deg);filter:blur(.5px)}50%{opacity:.92;transform:scale(1) rotate(45deg);filter:none}66%{opacity:.18;transform:scale(.58) rotate(45deg);filter:blur(.5px)}}
@media (prefers-reduced-motion:reduce){.stage-0 .hero-en-main::before,.stage-0 .hero-en-main::after{display:none}.stage-0 .hero-en-main{filter:none!important;animation:none!important}}

/* 01 進場順序：英文從第 1 格移到第 4 格後，其餘圖層往前遞補 */
@media (prefers-reduced-motion:no-preference){
  .stage-0.is-text-entering{--s01-main-first-delay:0ms;--s01-main-second-delay:var(--text-line-step);--s01-sub-delay:calc(var(--text-sub-delay) - var(--text-main-delay));--s01-en-delay:calc(var(--s01-sub-delay) + 2.12s)}
  .stage-0.is-text-entering .hero-main-line:nth-child(1){animation:s01-zh-line-in 2s var(--s01-main-first-delay) cubic-bezier(.16,1,.3,1) both}
  .stage-0.is-text-entering .hero-main-line:nth-child(2) .s01-prestrong{animation:s01-zh-second-in 2s var(--s01-main-second-delay) cubic-bezier(.16,1,.3,1) both}
  .stage-0.is-text-entering .hero-main-line:nth-child(2) em{animation:s01-second-shadow-in 2s var(--s01-main-second-delay) cubic-bezier(.16,1,.3,1) both}
  .stage-0.is-text-entering .hero-main-line:nth-child(2) .s01-strong{animation:s01-strong-flip 1s calc(2.5s - var(--text-main-delay)) cubic-bezier(.16,1,.3,1) both!important,s01-strong-float 2.6s calc(3.5s - var(--text-main-delay)) ease-in-out infinite alternate}
  .stage-0.is-text-entering .hero-subtitle{animation:s01-subtitle-box-in 2s var(--s01-sub-delay) cubic-bezier(.16,1,.3,1) both}
}

/* 04 主標定位：1.5 秒進場，但一開始就到定位並亮起 */
.stage-3.is-text-entering .hero-main-line:nth-child(2) em{animation:s40-mark-in 1.5s calc(var(--text-main-delay) + var(--text-line-step)) cubic-bezier(.16,1,.3,1) both}

/* ── 01–04 3D 尺寸鎖定：共用同一個視覺框，03 保留在左側的位置 ── */
@media (min-width:1101px){
  .stage-0 .object-stage,.stage-1 .object-stage,.stage-2 .object-stage,.stage-3 .object-stage{width:clamp(250px,27vw,420px);height:clamp(280px,36vw,500px)}
}
@media (max-width:1100px){
  .stage-0 .object-stage,.stage-1 .object-stage,.stage-2 .object-stage,.stage-3 .object-stage{width:clamp(176px,42vw,265px);height:clamp(198px,49vw,310px)}
}
@media (max-width:760px){
  .stage-0 .object-stage,.stage-1 .object-stage,.stage-2 .object-stage,.stage-3 .object-stage{width:clamp(150px,43vw,190px);height:clamp(168px,48vw,212px)}
}

/* ── 01–04 拖曳提示的 RWD：提示文字跟著 3D 框，不跟著視窗 ── */
.stage-0 .drag-hint,.stage-1 .drag-hint,.stage-2 .drag-hint,.stage-3 .drag-hint{
  top:clamp(-30px,-2.8vw,-16px);right:auto;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:clamp(3px,.35vw,6px);width:max-content;max-width:calc(100% - 16px);font-size:12px;line-height:1;letter-spacing:clamp(.1em,.14vw,.15em);white-space:nowrap;text-align:center
}
.object-stage:has(.model-status.is-error) .drag-hint{display:none}
.stage-0 .drag-hint span,.stage-1 .drag-hint span,.stage-2 .drag-hint span,.stage-3 .drag-hint span{
  display:block;font-size:clamp(16px,1.5vw,22px);line-height:.72;transform:none;animation:drag-hint-pulse 2.4s ease-in-out infinite
}
@keyframes drag-hint-pulse{0%,100%{opacity:.55;transform:translateY(-1px)}50%{opacity:1;transform:translateY(3px)}}
@media (max-width:1100px){
  .stage-0 .drag-hint,.stage-1 .drag-hint,.stage-2 .drag-hint,.stage-3 .drag-hint{top:clamp(-24px,-3.4vw,-14px);gap:4px;letter-spacing:.11em}
  .stage-0 .drag-hint span,.stage-1 .drag-hint span,.stage-2 .drag-hint span,.stage-3 .drag-hint span{font-size:clamp(17px,2.2vw,21px)}
}
@media (max-width:760px){
  /* 手機：提示放進 3D 框的上緣內側，不再伸到框外去壓英文字 */
  .stage-0 .drag-hint,.stage-1 .drag-hint,.stage-2 .drag-hint,.stage-3 .drag-hint{top:6px;gap:3px;max-width:calc(100% - 8px);letter-spacing:.09em}
  .stage-0 .drag-hint span,.stage-1 .drag-hint span,.stage-2 .drag-hint span,.stage-3 .drag-hint span{font-size:clamp(15px,4.8vw,19px)}
}
@media (max-width:380px){
  .stage-0 .drag-hint,.stage-1 .drag-hint,.stage-2 .drag-hint,.stage-3 .drag-hint{top:auto;right:6px;bottom:6px;left:auto;translate:none;letter-spacing:.06em}
  /* T09：小手機時 3D 物件框往下移、縮小，不和第 1 章的英文手寫字重疊；拖曳提示放在物件框內的右下角 */
  .stage-0 .object-stage,.stage-1 .object-stage,.stage-2 .object-stage,.stage-3 .object-stage{height:clamp(140px,26vh,190px);bottom:clamp(84px,12vh,112px)}
  .stage-0 .drag-hint span,.stage-1 .drag-hint span,.stage-2 .drag-hint span,.stage-3 .drag-hint span{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .stage-0 .drag-hint span,.stage-1 .drag-hint span,.stage-2 .drag-hint span,.stage-3 .drag-hint span{animation:none}
}

/* ── 03 文字排版的 RWD：系統字組保持在右側安全欄內 ── */
@media (min-width:1101px){
  .stage-2 .hero-copy{left:auto;right:var(--hero-safe);top:41%;width:min(48vw,720px);align-items:flex-end;text-align:right}
  .stage-2 .hero-en{max-width:100%;margin-bottom:clamp(16px,2vh,24px);font-size:clamp(16px,1.45vw,25px);letter-spacing:.18em;white-space:nowrap}
  .stage-2 .hero-main-line{display:block;white-space:nowrap}
}
@media (min-width:761px) and (max-width:1100px){
  .stage-2 .hero-main{max-width:100%;font-size:clamp(34px,4.8vw,56px);line-height:1.08;letter-spacing:-.06em}
}
@media (min-width:761px) and (max-width:1100px){
  .stage-2 .hero-copy{
  width:min(47vw,560px);left:auto;right:18px;top:32%;align-items:flex-end;text-align:right}
  .stage-2 .hero-en{max-width:100%;margin-bottom:clamp(12px,2vh,18px);font-size:clamp(12px,1.9vw,18px);letter-spacing:.13em;line-height:1.12;white-space:nowrap}
  .stage-2 .hero-main-line{display:block;white-space:normal}
}
@media (max-width:760px){
  .stage-2 .hero-copy{left:auto;align-items:flex-end;text-align:right}
  .stage-2 .hero-en{max-width:100%;margin-bottom:clamp(10px,2vh,15px);line-height:1.18;white-space:normal;text-wrap:balance}
  .stage-2 .hero-main{word-break:keep-all;text-wrap:balance}
  .stage-2 .hero-main-line{display:block}
}

/* ── 05 展示牆基本樣式：實體標本盒系統 ── */

/* ── 05 展示牆：已確認的正面完整盒子構圖 ── */
/*
   These five PNGs already contain the frame, miniature image and metal plaque.
   Keep the HTML inner layer hidden so the finished artwork is rendered as one
   intact composition without a second plaque or a synthetic overlay.
*/

/* ── 頁首字標：橫式字標 ── */
.brand{
  filter:drop-shadow(0 2px 7px rgba(255,255,255,.24));width:clamp(145px,12vw,190px);height:auto;overflow:visible;display:block}
.brand img{width:100%;height:auto;max-width:none;display:block;transform:none;filter:none}
@media (max-width:1100px){
  .brand{width:clamp(132px,22vw,176px);height:auto}
}
@media (max-width:760px){
  .brand{width:clamp(118px,35vw,160px);height:auto}
}

/* ── 05 RWD：01–05 共用 Hero 舞台裡的第 5 段 ── */
@property --card-glow-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.wall--integrated{--wall-texture-opacity:0;--wall-shade-opacity:.34;position:absolute;inset:0;display:block;z-index:7;width:auto;height:auto;min-height:0;padding:0;overflow:hidden;background:transparent;color:#fff6e9;opacity:0;visibility:hidden;pointer-events:none;isolation:isolate;scroll-margin-top:0;transition:opacity .48s cubic-bezier(.16,1,.3,1),visibility 0s .48s}
.hero-stage.stage-4{overflow:hidden}
.hero-stage.stage-4 .wall--integrated{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .48s cubic-bezier(.16,1,.3,1)}
.hero-stage.stage-4 .hero-copy,.hero-stage.stage-4 .object-stage,.hero-stage.stage-4 .hero-corner,.hero-stage.stage-4 .hero-footer{opacity:0;visibility:hidden;pointer-events:none}
.hero-stage.stage-4 .hero-count{z-index:9;color:#fff6e9}
.scenario-sticky{position:relative;top:auto;height:100%;min-height:0;overflow:hidden;background:transparent}
.scenario-film{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:transparent}
.scenario-film::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(circle at 20% 8%,#f3c98c22 0,transparent 31%),radial-gradient(circle at 79% 12%,#f3c98c20 0,transparent 29%);mix-blend-mode:screen;opacity:.28;pointer-events:none}
.scenario-film .scenario-texture,.scenario-film-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-video.wall-video{filter:saturate(.82) contrast(1.04) brightness(.82);transform:scale(1);transition:filter .48s ease,transform .72s cubic-bezier(.16,1,.3,1)}
.hero-stage.stage-4 .hero-video.wall-video.active{animation:scenario-film-arrive 1s cubic-bezier(.22,.7,.24,1) both}
.hero-stage.wall-film-finished .hero-video.wall-video{filter:saturate(.76) contrast(1.05) brightness(.72);transform:scale(1.018)}
.scenario-film .scenario-texture{z-index:1;object-fit:cover;opacity:var(--wall-texture-opacity);mix-blend-mode:soft-light;filter:saturate(.72) contrast(1.08);transition:opacity .42s cubic-bezier(.16,1,.3,1)}
.scenario-film-shade{z-index:3;background:linear-gradient(180deg,#0d080552 0%,#0f090659 18%,#160d0aab 62%,#100906e8 100%),linear-gradient(90deg,#110907a3 0%,transparent 38%,transparent 65%,#11090785 100%);opacity:var(--wall-shade-opacity);transition:opacity .38s ease}
@keyframes scenario-film-arrive{0%{filter:saturate(.7) contrast(1.08) brightness(.7);transform:scale(1.035)}100%{filter:saturate(.86) contrast(1.03) brightness(.88);transform:scale(1)}}
.wall-content{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(12px,1.35vh,20px);width:min(100%,1720px);height:100%;margin:auto;padding:clamp(76px,8.6vh,104px) clamp(28px,4.8vw,92px) clamp(12px,1.4vh,22px)}
.wall--integrated .wall-head{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(380px,1.22fr);gap:clamp(40px,7vw,130px);align-items:end;width:100%;padding:0}
.wall--integrated .wall-head>div{min-width:0}
.wall--integrated .wall-head h2{margin:0;color:#fff6e9;font:600 clamp(38px,3.45vw,62px)/1.12 NotoSerifTC,serif;letter-spacing:.025em;text-shadow:0 3px 24px #0b0504e3;text-wrap:balance;opacity:0;clip-path:inset(0 0 100% 0);filter:blur(7px);transform:translateY(28px)}
.wall-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:clamp(24px,4vw,70px);align-items:end;padding-bottom:4px}
.wall-intro>p{max-width:38em;margin:0;color:#f1e4d6;font-size:clamp(15px,1.03vw,17px);line-height:1.8;text-shadow:0 2px 14px #090403e6;opacity:0;filter:blur(3px);transform:translateX(30px)}
.wall-intro .scenario-note{padding:12px 15px;border:1px solid transparent;border-radius:2px;background:#160d09b8;color:#fff1df;font-size:clamp(13px,.88vw,15px);font-weight:500;line-height:1.65;letter-spacing:.015em;text-shadow:0 1px 5px #070302;box-shadow:inset 0 0 0 1px #fff2da0a;backdrop-filter:blur(8px);filter:none;transform:translateY(18px)}
.wall--integrated.is-head-visible .wall-head h2{animation:scenario-title-rise .72s .11s cubic-bezier(.16,1,.3,1) both}
.wall--integrated.is-head-visible .wall-intro>p:first-child{animation:scenario-intro-sweep .58s .26s cubic-bezier(.16,1,.3,1) both}
.wall--integrated.is-head-visible .wall-intro .scenario-note{animation:scenario-note-settle .66s .42s cubic-bezier(.2,.75,.2,1) both}
@keyframes scenario-title-rise{0%{opacity:0;clip-path:inset(0 0 100% 0);filter:blur(7px);transform:translateY(28px)}58%{opacity:1;clip-path:inset(0);filter:blur(1px);transform:translateY(-3px)}100%{opacity:1;clip-path:inset(0);filter:none;transform:none}}
@keyframes scenario-intro-sweep{0%{opacity:0;filter:blur(3px);transform:translateX(30px)}100%{opacity:1;filter:none;transform:none}}
@keyframes scenario-note-settle{0%{opacity:0;border-color:transparent;transform:translateY(18px)}55%{opacity:.82;border-color:#e2c7aa2e}100%{opacity:1;border-color:#f0d2b45e;transform:none}}
.scenario-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);row-gap:clamp(10px,1.15vh,18px);column-gap:clamp(12px,1.5vw,24px);min-height:0;align-content:stretch}
.scenario-card{--card-accent:#8ca47b;--card-accent-2:#d6b28a;--card-ink:#102018;--card-delay:.12s;--image-duration:1.18s;position:relative;grid-column:span 2;min-height:clamp(224px,25.8vh,292px);overflow:hidden;border:clamp(6px,.54vw,10px) solid #493120;border-radius:2px;background:#160e0b;box-shadow:0 22px 48px #080403a8,0 4px 12px #080403a3,inset 0 0 0 1px #e7c9958c;opacity:0;filter:blur(10px) saturate(.72);transform:translate3d(0,52px,0) scale(.82);will-change:transform,opacity,filter;transition:box-shadow .28s ease,border-color .28s ease}
.scenario-card:nth-child(2){--card-delay:.22s;--image-duration:1.34s}.scenario-card:nth-child(3){--card-delay:.31s;--image-duration:1.12s}.scenario-card:nth-child(4){--card-delay:.43s;--image-duration:1.4s;grid-column:2/span 2}.scenario-card:nth-child(5){--card-delay:.55s;--image-duration:1.5s;grid-column:4/span 2}
.wall--integrated.is-revealed .scenario-card:nth-child(1){animation:scenario-card-open-left .76s var(--card-delay) cubic-bezier(.16,.86,.23,1.05) both}
.wall--integrated.is-revealed .scenario-card:nth-child(2){animation:scenario-card-open-depth .96s var(--card-delay) cubic-bezier(.16,1,.3,1) both}
.wall--integrated.is-revealed .scenario-card:nth-child(3){animation:scenario-card-open-right .82s var(--card-delay) cubic-bezier(.16,.86,.23,1.04) both}
.wall--integrated.is-revealed .scenario-card:nth-child(4){animation:scenario-card-open-swing .92s var(--card-delay) cubic-bezier(.18,.8,.2,1.06) both}
.wall--integrated.is-revealed .scenario-card:nth-child(5){animation:scenario-card-open-finale 1.06s var(--card-delay) cubic-bezier(.16,1,.25,1) both}
@keyframes scenario-card-open-left{0%{opacity:0;filter:blur(12px) saturate(.64);transform:translate3d(-48vw,7vh,0) scale(.72) rotate(-7deg)}72%{opacity:1;filter:blur(0) saturate(1);transform:translate3d(9px,-7px,0) scale(1.025) rotate(.6deg)}100%{opacity:1;filter:none;transform:none}}
@keyframes scenario-card-open-depth{0%{opacity:0;filter:blur(18px) saturate(.55);transform:perspective(800px) translate3d(0,17vh,-260px) scale(.58) rotateX(12deg)}62%{opacity:1;filter:blur(1px) saturate(.96);transform:perspective(800px) translate3d(0,-9px,24px) scale(1.035) rotateX(-1deg)}100%{opacity:1;filter:none;transform:none}}
@keyframes scenario-card-open-right{0%{opacity:0;filter:blur(11px) saturate(.67);transform:translate3d(48vw,5vh,0) scale(.74) rotate(6deg)}70%{opacity:1;filter:blur(0) saturate(1);transform:translate3d(-8px,-5px,0) scale(1.022) rotate(-.5deg)}100%{opacity:1;filter:none;transform:none}}
@keyframes scenario-card-open-swing{0%{opacity:0;filter:blur(9px) saturate(.7);transform-origin:0 100%;transform:translate3d(-17vw,24vh,0) scale(.7) rotate(-10deg)}66%{opacity:1;filter:blur(0) saturate(1);transform:translate3d(6px,-8px,0) scale(1.028) rotate(1.2deg)}100%{opacity:1;filter:none;transform:none}}
@keyframes scenario-card-open-finale{0%{opacity:0;filter:blur(16px) saturate(.58);transform:perspective(900px) translate3d(18vw,28vh,-180px) scale(.66) rotate(8deg)}58%{opacity:.88;filter:blur(2px) saturate(.9);transform:perspective(900px) translate3d(-4px,-13px,18px) scale(1.04) rotate(-1deg)}82%{opacity:1;filter:none;transform:translate3d(2px,2px,0) scale(.992) rotate(.2deg)}100%{opacity:1;filter:none;transform:none}}
.scenario-card--shop{--card-accent:#8ca47b;--card-accent-2:#d6b28a;--card-ink:#102018}.scenario-card--renew{--card-accent:#5f76a6;--card-accent-2:#9bb7d4;--card-ink:#18253d}
.scenario-card--event{--card-accent:#ec725d;--card-accent-2:#d7b679;--card-ink:#17243b}
.scenario-card--wedding{--card-accent:#b77b78;--card-accent-2:#8fa27e;--card-ink:#2e1e20}
.scenario-card--temple{--card-accent:#4d8977;--card-accent-2:#c2a45b;--card-ink:#192c25}
.scenario-card::before{content:"";position:absolute;inset:0;z-index:6;padding:3px;border-radius:inherit;background:conic-gradient(from var(--card-glow-angle),transparent 0 12%,#fff4c7 18%,var(--card-accent-2) 23%,transparent 31% 55%,var(--card-accent) 64%,#fff9dd 70%,transparent 78% 100%);opacity:0;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--card-accent-2) 72%,transparent));pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .25s ease}
.scenario-card-image{position:absolute;inset:0;z-index:0;overflow:hidden;background:#1b110d}
.scenario-card-image::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 76% 22%,#ffe4b43d 0,transparent 42%),linear-gradient(135deg,#f6d5a51c 0,transparent 38%);mix-blend-mode:screen;pointer-events:none;transition:opacity .35s ease}
.scenario-card-image::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#0a0504d6 0%,#0b060496 34%,#0d07042e 65%,transparent 88%),linear-gradient(180deg,#0804031a 0%,#0c06052e 34%,#0c0605ad 69%,#080403f2 100%);transition:opacity .35s ease}
.scenario-card-image img{width:100%;height:100%;object-fit:cover;opacity:.78;filter:saturate(.94) contrast(1.03) brightness(1.06);transform:scale(1.015);transition:opacity .38s ease,filter .38s ease,transform .75s cubic-bezier(.2,.72,.22,1)}
.scenario-card--renew .scenario-card-image img{object-position:62% center}.scenario-card--event .scenario-card-image img{object-position:center 48%}.scenario-card--wedding .scenario-card-image img{object-position:center 55%}.scenario-card--temple .scenario-card-image img{object-position:center 51%}
.scenario-card-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:clamp(18px,1.55vw,27px)}
.scenario-card-code{display:flex;gap:9px;align-items:center;margin:0 0 auto;padding-top:0;color:#dcc9b7;font:12px/1.3 SpaceG,sans-serif;letter-spacing:.13em;text-shadow:0 1px 8px #050201;opacity:0;transform:none}
.scenario-card-code span:first-child{display:grid;place-items:center;width:28px;height:28px;border:1px solid #f5ddbb80;border-radius:50%;background:#11090680;color:#fff6e9;font-size:12px;letter-spacing:.05em;backdrop-filter:blur(5px)}
.scenario-card h3{margin:0 0 6px;color:#fff8ed;font:400 clamp(27px,2vw,37px)/1.15 NanMing,serif;letter-spacing:.03em;text-shadow:0 2px 15px #050201;opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-12px)}
.scenario-card-benefit{margin:0;color:#fff4e6;font-size:clamp(15px,.98vw,16px);font-weight:600;line-height:1.5;text-shadow:0 2px 12px #050201;opacity:0;filter:blur(2px);transform:translateY(11px)}

.scenario-card-items{margin:6px 0 12px;color:#cdbba9;font-size:12px;line-height:1.55;letter-spacing:.04em;opacity:0;transform:translateX(13px)}
.scenario-card-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:stretch;opacity:0;visibility:hidden;transform:translateY(14px) scale(.98)}
.wall--integrated.is-revealed .scenario-card-image img{animation:scenario-image-develop var(--image-duration) var(--card-delay) cubic-bezier(.16,1,.3,1) both}
.wall--integrated.is-revealed .scenario-card-code{animation:scenario-code-drop .34s calc(var(--card-delay) + .24s) cubic-bezier(.16,1,.3,1) both}
.wall--integrated.is-revealed .scenario-card h3{animation:scenario-card-title-wipe .48s calc(var(--card-delay) + .38s) cubic-bezier(.16,1,.3,1) both}
.wall--integrated.is-revealed .scenario-card-benefit{animation:scenario-card-benefit-rise .44s calc(var(--card-delay) + .54s) ease-out both}

.wall--integrated.is-revealed .scenario-card-items{animation:scenario-card-items-slide .36s calc(var(--card-delay) + .67s) ease-out both}
.wall--integrated.is-revealed .scenario-card-actions{animation:scenario-card-actions-land .46s calc(var(--card-delay) + .78s) cubic-bezier(.16,1,.3,1) both}
@keyframes scenario-image-develop{0%{opacity:.22;filter:saturate(.55) contrast(1.12) brightness(.62) blur(9px);transform:scale(1.18) translate3d(2.5%,1.5%,0)}52%{opacity:.84;filter:saturate(.88) contrast(1.05) brightness(1.12) blur(1px)}100%{opacity:.78;filter:saturate(.94) contrast(1.03) brightness(1.06);transform:scale(1.015) translate3d(0,0,0)}}
@keyframes scenario-code-drop{0%{opacity:0;transform:none;letter-spacing:.25em}100%{opacity:1;transform:none;letter-spacing:.13em}}

@keyframes scenario-card-title-wipe{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-12px)}100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes scenario-card-benefit-rise{0%{opacity:0;filter:blur(2px);transform:translateY(11px)}100%{opacity:1;filter:none;transform:none}}
@keyframes scenario-card-items-slide{0%{opacity:0;transform:translateX(13px)}100%{opacity:1;transform:none}}
@keyframes scenario-card-actions-land{0%{opacity:0;visibility:hidden;transform:translateY(14px) scale(.98)}70%{opacity:1;visibility:visible;transform:translateY(-2px) scale(1.006)}100%{opacity:1;visibility:visible;transform:none}}
/* T08：按鈕在落下動畫開始前是 visibility:hidden（看不見就不能被 Tab 到）；減少動態時不跑動畫，直接顯示 */
@media(prefers-reduced-motion:reduce){.scenario-card-actions{visibility:visible!important}}
.scenario-card-actions a,.scenario-card-actions button{display:flex;align-items:center;min-height:43px;border:1px solid #f1d5b15c;font:600 13px/1.35 Genyo,sans-serif;cursor:pointer;transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s ease}
.scenario-card-actions a{justify-content:space-between;gap:9px;padding:8px 12px;background:color-mix(in srgb,var(--card-accent) 84%,#160d09);color:#fffaf1;text-decoration:none}
.scenario-card-actions a b{color:#fff2d8;font-size:16px}.scenario-card-actions button{justify-content:center;padding:8px 11px;background:#130a07ba;color:#ead7c4;backdrop-filter:blur(8px)}
.scenario-card:hover,.scenario-card:focus-within{border-color:color-mix(in srgb,var(--card-accent-2) 72%,#6d432b);box-shadow:0 0 0 1px #fff1ce80,0 0 24px color-mix(in srgb,var(--card-accent) 66%,transparent),0 28px 64px #080403d6,0 6px 18px #080403b8,inset 0 0 22px #fff0c31c}
.scenario-card:hover::before,.scenario-card:focus-within::before{opacity:1;animation:scenario-border-orbit 2.1s linear infinite}
.scenario-card:hover .scenario-card-image::after,.scenario-card:focus-within .scenario-card-image::after{opacity:.7}
.scenario-card:hover .scenario-card-image::before,.scenario-card:focus-within .scenario-card-image::before{opacity:1}
.scenario-card:hover .scenario-card-image img,.scenario-card:focus-within .scenario-card-image img{opacity:.96;filter:saturate(1.06) contrast(1.04) brightness(1.16);animation:scenario-image-breathe 5.8s ease-in-out infinite}
@keyframes scenario-border-orbit{to{--card-glow-angle:360deg}}
@keyframes scenario-image-breathe{0%,100%{transform:scale(1.015)}50%{transform:scale(1.105)}}
.scenario-card-actions a:hover,.scenario-card-actions button:hover{border-color:#ffe1ba9e;transform:translateY(-1px)}
.scenario-card-actions a:focus-visible,.scenario-card-actions button:focus-visible{outline:3px solid var(--card-accent-2);outline-offset:2px}
.scenario-scroll-note{display:flex;gap:12px;align-items:center;justify-self:center;margin:0;color:#dfc9b4;font-size:12px;line-height:1.4;letter-spacing:.08em;opacity:1;transition:opacity .3s ease}
.wall--integrated.is-revealed .scenario-scroll-note{opacity:0}
.scenario-scroll-note span{position:relative;width:34px;height:1px;background:#d6b99580}.scenario-scroll-note span::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-right:1px solid #e4c8a7;border-bottom:1px solid #e4c8a7;transform:rotate(-45deg)}
.scenario-scroll-note b{font-weight:400}
.wall--integrated.is-settled .scenario-card{pointer-events:auto}.wall--integrated:not(.is-settled) .scenario-card{pointer-events:none}
.wall--integrated.has-film-error .scenario-film .wall-video{display:none}.wall--integrated.has-film-error .scenario-film .scenario-texture{opacity:.12}

/* 05 RWD：展示框在平板與手機維持完整可視範圍；手機採 2＋2＋1 排列。 */
.wall-content,.wall--integrated .wall-head,.wall-intro,.scenario-grid,.scenario-card{min-width:0}
@media(max-width:1100px){
  .wall-content{width:100%;padding:clamp(62px,7vh,88px) clamp(20px,4vw,44px) clamp(18px,3vh,30px);gap:clamp(12px,1.8vh,20px)}
  .wall--integrated .wall-head{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(20px,4vw,50px)}
  .wall-intro{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(16px,2.8vw,30px)}
  .scenario-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(10px,1.8vw,18px)}
  .scenario-card{grid-column:span 2;min-height:0}
  .scenario-card-copy{padding:clamp(10px,1.55vw,18px)}
  .scenario-card-code{gap:clamp(5px,1.17vw,9px);padding-top:0;font-size:12px;line-height:1.2}
  .scenario-card-code span:first-child{width:clamp(22px,3.125vw,24px);height:clamp(22px,3.125vw,24px);font-size:12px}
  .scenario-card h3{margin-bottom:clamp(2px,.4vw,4px);font-size:clamp(24px,3.2vw,29px);line-height:1.05;letter-spacing:.02em}
  
  .scenario-card-items{margin:clamp(3px,.55vw,5px) 0 clamp(4px,.8vw,7px);font-size:12px;line-height:1.25;letter-spacing:0}
  .scenario-card-actions{gap:clamp(4px,.65vw,7px)}
  .scenario-card-actions a,.scenario-card-actions button{min-height:clamp(36px,5vw,43px);padding:clamp(5px,.75vw,8px) clamp(7px,1.2vw,12px);font-size:13px;line-height:1.2}
  .scenario-card-actions a b{font-size:clamp(12px,1.6vw,16px)}
  .scenario-card:nth-child(4){grid-column:span 2}
  .scenario-card:nth-child(5){grid-column:2/span 2}
}
@media(min-width:761px) and (max-width:1100px) and (orientation:landscape){
  .scenario-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  .scenario-card{grid-column:span 2}
  .scenario-card:nth-child(4){grid-column:2/span 2}
  .scenario-card:nth-child(5){grid-column:4/span 2}
}
@media(min-width:1101px) and (max-height:700px){
  .scenario-card-copy{padding:clamp(14px,1.3vw,20px)}
  .scenario-card-code{gap:8px}
  .scenario-card-code span:first-child{width:24px;height:24px;font-size:12px}
  .scenario-card h3{margin-bottom:4px;font-size:clamp(24px,1.8vw,30px);line-height:1.08}
  
  .scenario-card-items{margin:4px 0 8px;font-size:12px;line-height:1.35;letter-spacing:0}
  .scenario-card-actions a,.scenario-card-actions button{min-height:38px;padding:6px 10px;font-size:13px;line-height:1.2}
}
@media(max-width:760px){
  .wall-content{padding:clamp(54px,8vh,70px) 14px 12px;gap:8px}
  .wall--integrated .wall-head{grid-template-columns:minmax(0,1fr);gap:6px}
  .wall--integrated .wall-head h2{font-size:clamp(30px,8.8vw,44px);line-height:1.03;letter-spacing:.01em}
  .wall-intro{grid-template-columns:minmax(0,1fr);gap:5px;padding-bottom:0}
  .wall-intro>p:first-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.38}
  .wall-intro .scenario-note{display:none}
  .scenario-card{border-width:clamp(4px,1.2vw,6px)}
  .scenario-card-copy{padding:clamp(8px,2.5vw,13px)}
  .scenario-card-code{gap:5px;padding-top:0;font-size:12px;letter-spacing:.08em}.scenario-card-code-label{display:none}
  .scenario-card-code span:first-child{width:24px;height:24px;font-size:12px}
  .scenario-card h3{margin-bottom:4px;font-size:clamp(19px,5.8vw,29px);line-height:1.08}
  
  .scenario-card-items{display:none}
  .scenario-card-actions{grid-template-columns:minmax(0,1fr);gap:4px}
  .scenario-card-actions a,.scenario-card-actions button{min-height:31px;padding:5px 6px;font-size:13px;line-height:1.15}
  .scenario-card-actions a b{font-size:12px}
  .scenario-scroll-note{display:none}
}
/* 手機（≤760px）而且畫面矮（≤700px）：卡片不夠高，編號與品項清單會把內容擠出卡外（375×667、760×700 實測），先隱藏這兩項 */
@media(max-width:760px) and (max-height:700px){
  .scenario-card-code,.scenario-card-items{display:none}
}
@media(max-width:380px){
  .scenario-card-copy{padding:6px 7px}
  .scenario-card-code{display:none}
  .scenario-card h3{margin-bottom:2px;font-size:17px;line-height:1;letter-spacing:0;white-space:nowrap}
  
  .scenario-card-actions{gap:3px}
  .scenario-card-actions a,.scenario-card-actions button{min-height:26px;padding:4px 5px;font-size:13px;line-height:1.1}
  .scenario-card-actions a b{font-size:12px}
}

/* ── 05 方案預覽卡 ── */
.hero-stage .wall--integrated.is-preview-locked,.hero-stage .wall--integrated.is-preview-locked *{pointer-events:none}
html.is-scenario-preview-open,body.is-scenario-preview-open{overscroll-behavior:none}
.scenario-package-dialog{width:min(1080px,calc(100vw - 64px));max-width:1080px;height:min(720px,calc(100svh - 80px));max-height:calc(100svh - 80px);margin:auto;padding:0;border:0;border-radius:24px;background:transparent;box-shadow:0 32px 100px rgba(var(--preview-shadow-rgb),.58);overflow:visible;overscroll-behavior:contain;--preview-mist:#EAFBF7;--preview-aqua:#5CE3E6;--preview-cyan:#0F9CC2;--preview-deep:#274A78;--preview-paper:#F4EFE7;--preview-ink:#191310;--preview-brown:#4A3728;--preview-copper:#C2571E;--preview-coral:#F16E4B;--preview-shadow-rgb:25,19,16;--preview-card-ring:rgba(194,87,30,.55);--preview-visual-glow-a:rgba(92,227,230,.5);--preview-visual-glow-b:rgba(241,110,75,.23);--preview-flow-glow-a:rgba(241,110,75,.62);--preview-flow-glow-b:rgba(92,227,230,.62);--preview-flow-core:rgba(234,251,247,.24);--preview-flow-conic-a:rgba(241,110,75,.33);--preview-flow-conic-b:rgba(92,227,230,.48);--preview-control-bg:rgba(39,74,120,.9);--preview-border-soft:rgba(234,251,247,.66);--preview-border-strong:rgba(234,251,247,.78);--preview-offer-shadow:rgba(39,74,120,.35);--preview-price-border:rgba(39,74,120,.35);--preview-offer-small:rgba(234,251,247,.88);--preview-item-shadow:rgba(39,74,120,.12);--preview-item-base-bg:rgba(194,87,30,.1);--preview-item-advanced-bg:rgba(92,227,230,.16);--preview-item-flagship-bg:rgba(234,251,247,.86);--preview-action-shadow:rgba(194,87,30,.34);--preview-sticky-bg:rgba(234,251,247,.9);--preview-grain-a:rgba(255,255,255,.5);--preview-grain-b:rgba(255,255,255,.32)}
.scenario-package-dialog::backdrop{background:rgba(var(--preview-shadow-rgb),.72);backdrop-filter:blur(7px)}
.scenario-package-dialog[open]{display:block;animation:scenario-preview-in .36s cubic-bezier(.16,1,.3,1) both}
@keyframes scenario-preview-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.scenario-package-dialog[data-scenario="renew"]{--preview-mist:#DFFBFF;--preview-aqua:#6FD8F2;--preview-cyan:#4C5BE0;--preview-deep:#2A2450;--preview-paper:#F3FDFF;--preview-ink:#2A2622;--preview-brown:#2A2622;--preview-copper:#9420B7;--preview-coral:#D75AFB;--preview-shadow-rgb:42,36,80;--preview-card-ring:rgba(215,90,251,.72);--preview-visual-glow-a:rgba(111,216,242,.46);--preview-visual-glow-b:rgba(215,90,251,.34);--preview-flow-glow-a:rgba(215,90,251,.7);--preview-flow-glow-b:rgba(111,216,242,.62);--preview-flow-core:rgba(223,251,255,.28);--preview-flow-conic-a:rgba(215,90,251,.44);--preview-flow-conic-b:rgba(111,216,242,.48);--preview-control-bg:rgba(42,36,80,.9);--preview-border-soft:rgba(223,251,255,.76);--preview-border-strong:rgba(223,251,255,.9);--preview-offer-shadow:rgba(42,36,80,.36);--preview-price-border:rgba(76,91,224,.34);--preview-offer-small:rgba(223,251,255,.9);--preview-item-shadow:rgba(42,36,80,.14);--preview-item-base-bg:rgba(255,255,255,.88);--preview-item-advanced-bg:rgba(111,216,242,.18);--preview-item-flagship-bg:rgba(223,251,255,.82);--preview-action-shadow:rgba(42,36,80,.36);--preview-sticky-bg:rgba(223,251,255,.92);--preview-grain-a:rgba(223,251,255,.5);--preview-grain-b:rgba(223,251,255,.32)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-copy{background:linear-gradient(180deg,#FFFFFF 0%,#DFFBFF 100%)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-offer{background:linear-gradient(135deg,#DFFBFF 0%,#6FD8F2 58%,rgba(215,90,251,.42) 100%);color:var(--preview-deep);border:1px solid rgba(76,91,224,.22);box-shadow:0 15px 30px rgba(76,91,224,.2)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-offer .eyebrow{color:var(--preview-copper)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-offer-copy{color:var(--preview-deep)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-offer small{color:rgba(42,36,80,.78)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-price{background:#FFFFFF;border-color:rgba(76,91,224,.28)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-price strong{color:var(--preview-cyan)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-price.is-recommended{border-color:var(--preview-copper);box-shadow:0 0 0 2px rgba(215,90,251,.2),0 8px 16px rgba(var(--preview-shadow-rgb),.28)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-value .eyebrow{background:var(--preview-copper)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-item--base{--item-accent:var(--preview-coral);background:rgba(255,255,255,.88)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-item--advanced{background:rgba(223,251,255,.86)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-item--flagship{background:rgba(255,255,255,.94)}
.scenario-package-dialog[data-scenario="renew"] .scenario-preview-actions .solid-action{box-shadow:0 11px 20px var(--preview-action-shadow),0 0 0 2px rgba(215,90,251,.22),0 0 18px rgba(215,90,251,.34)}
.scenario-package-dialog[data-scenario="event"]{--preview-mist:#FFF4E2;--preview-aqua:#FFC65A;--preview-cyan:#FF7A2F;--preview-deep:#B8441A;--preview-paper:#FFF9EF;--preview-ink:#2D1B12;--preview-brown:#6A3B24;--preview-copper:#D94A1D;--preview-coral:#FFB13B;--preview-highlight:#47E1AB;--preview-highlight-ink:#0E6B52;--preview-highlight-2:#D847E1;--preview-highlight-2-ink:#6E1F70;--preview-highlight-3:#BDE147;--preview-highlight-3-ink:#4A5D11;--preview-shadow-rgb:184,68,26;--preview-card-ring:rgba(255,177,59,.68);--preview-visual-glow-a:rgba(255,198,90,.58);--preview-visual-glow-b:rgba(255,122,47,.38);--preview-flow-glow-a:rgba(255,177,59,.78);--preview-flow-glow-b:rgba(255,122,47,.72);--preview-flow-core:rgba(255,244,226,.3);--preview-flow-conic-a:rgba(255,177,59,.46);--preview-flow-conic-b:rgba(255,122,47,.56);--preview-control-bg:rgba(184,68,26,.92);--preview-border-soft:rgba(255,244,226,.8);--preview-border-strong:rgba(255,244,226,.94);--preview-offer-shadow:rgba(184,68,26,.34);--preview-price-border:rgba(184,68,26,.3);--preview-offer-small:rgba(255,244,226,.92);--preview-item-shadow:rgba(184,68,26,.14);--preview-item-base-bg:rgba(255,177,59,.24);--preview-item-advanced-bg:rgba(255,122,47,.2);--preview-item-flagship-bg:rgba(255,244,226,.9);--preview-action-shadow:rgba(184,68,26,.38);--preview-sticky-bg:rgba(255,244,226,.94);--preview-grain-a:rgba(255,244,226,.54);--preview-grain-b:rgba(255,177,59,.36)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-copy{background:linear-gradient(180deg,#FFFFFF 0%,#FFF4E2 100%)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-price{background:#FFF9EF;border-color:rgba(184,68,26,.24)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-price.is-recommended{border-color:var(--preview-highlight-2);box-shadow:0 0 0 2px rgba(216,71,225,.28),0 8px 16px rgba(var(--preview-shadow-rgb),.24)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-copy h2.scenario-preview-title--scene .is-focus{color:var(--preview-highlight);text-decoration-color:var(--preview-highlight)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-offer .eyebrow{color:var(--preview-highlight)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-price strong{color:var(--preview-highlight-2-ink)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-value .eyebrow{box-shadow:4px 4px 0 var(--preview-highlight-3)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-item--base{--item-accent:var(--preview-highlight-ink);border-left-color:var(--preview-highlight)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-item--advanced{--item-accent:var(--preview-highlight-2-ink);border-left-color:var(--preview-highlight-2);background:rgba(216,71,225,.16)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-item--flagship{--item-accent:var(--preview-highlight-3-ink);border-left-color:var(--preview-highlight-3);background:rgba(189,225,71,.2)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-actions .solid-action{background:var(--preview-highlight);color:var(--preview-highlight-ink);box-shadow:0 11px 20px rgba(71,225,171,.36)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-actions .solid-action span{color:var(--preview-highlight-2)}
.scenario-package-dialog[data-scenario="event"] .scenario-preview-next span{color:var(--preview-highlight-3-ink)}
.scenario-package-dialog[data-scenario="wedding"]{--preview-mist:#FFF7FB;--preview-aqua:#FFB8D7;--preview-cyan:#FF3D9A;--preview-deep:#82194F;--preview-paper:#FFFDFE;--preview-ink:#29151F;--preview-brown:#5A263B;--preview-copper:#D92B72;--preview-coral:#FF8A47;--preview-highlight:#BDE83E;--preview-highlight-ink:#3F5A0E;--preview-highlight-2:#6956E9;--preview-highlight-2-ink:#3B2E9A;--preview-highlight-3:#FF8A47;--preview-highlight-3-ink:#81380F;--preview-shadow-rgb:130,25,79;--preview-card-ring:rgba(255,122,183,.72);--preview-visual-glow-a:rgba(255,184,215,.58);--preview-visual-glow-b:rgba(255,61,154,.4);--preview-flow-glow-a:rgba(255,138,71,.72);--preview-flow-glow-b:rgba(105,86,233,.64);--preview-flow-core:rgba(255,247,251,.32);--preview-flow-conic-a:rgba(189,232,62,.38);--preview-flow-conic-b:rgba(255,61,154,.54);--preview-control-bg:rgba(130,25,79,.92);--preview-border-soft:rgba(255,247,251,.82);--preview-border-strong:rgba(255,247,251,.96);--preview-offer-shadow:rgba(130,25,79,.34);--preview-price-border:rgba(130,25,79,.3);--preview-offer-small:rgba(255,247,251,.92);--preview-item-shadow:rgba(130,25,79,.14);--preview-item-base-bg:rgba(255,255,255,.92);--preview-item-advanced-bg:rgba(105,86,233,.15);--preview-item-flagship-bg:rgba(189,232,62,.22);--preview-action-shadow:rgba(105,86,233,.38);--preview-sticky-bg:rgba(255,247,251,.94);--preview-grain-a:rgba(255,255,255,.56);--preview-grain-b:rgba(255,184,215,.38)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-copy{background:linear-gradient(180deg,#FFFFFF 0%,#FFF7FB 100%)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-offer{background:linear-gradient(135deg,#82194F 0%,#FF3D9A 58%,rgba(105,86,233,.46) 100%);color:var(--preview-paper);border:1px solid rgba(105,86,233,.24);box-shadow:0 15px 30px rgba(130,25,79,.22)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-offer .eyebrow{color:var(--preview-highlight)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-offer-copy{color:var(--preview-paper)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-offer small{color:rgba(255,247,251,.82)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-price{background:#FFFFFF;border-color:rgba(105,86,233,.28)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-price strong{color:var(--preview-highlight-2-ink)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-price.is-recommended{border-color:var(--preview-highlight-2);box-shadow:0 0 0 2px rgba(105,86,233,.24),0 8px 16px rgba(var(--preview-shadow-rgb),.24)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-copy h2.scenario-preview-title--scene .is-focus{color:var(--preview-highlight-ink);text-decoration-color:var(--preview-highlight-3)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-value .eyebrow{box-shadow:4px 4px 0 var(--preview-highlight-3)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-item--base{--item-accent:var(--preview-highlight-ink);border-left-color:var(--preview-highlight)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-item--advanced{--item-accent:var(--preview-highlight-2-ink);border-left-color:var(--preview-highlight-2);background:rgba(105,86,233,.15)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-item--flagship{--item-accent:var(--preview-highlight-3-ink);border-left-color:var(--preview-highlight-3);background:rgba(255,138,71,.18)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-actions .solid-action{background:var(--preview-highlight-2);color:var(--preview-paper);box-shadow:0 11px 20px rgba(105,86,233,.36)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-actions .solid-action span{color:var(--preview-highlight-3)}
.scenario-package-dialog[data-scenario="wedding"] .scenario-preview-next span{color:var(--preview-highlight)}
.scenario-package-dialog[data-scenario="temple"]{--preview-mist:#FFF3E5;--preview-aqua:#F29B72;--preview-cyan:#D13F32;--preview-deep:#741A1E;--preview-paper:#FFF9F0;--preview-ink:#2A1713;--preview-brown:#5D3328;--preview-copper:#B84A2F;--preview-coral:#F4C85B;--preview-highlight:#2FBF6A;--preview-highlight-ink:#0D6B43;--preview-highlight-2:#9850D1;--preview-highlight-2-ink:#5A2B83;--preview-highlight-3:#D9B53D;--preview-highlight-3-ink:#6C4B0D;--preview-shadow-rgb:116,26,30;--preview-card-ring:rgba(217,181,61,.72);--preview-visual-glow-a:rgba(242,155,114,.56);--preview-visual-glow-b:rgba(209,63,50,.42);--preview-flow-glow-a:rgba(217,181,61,.72);--preview-flow-glow-b:rgba(47,191,106,.58);--preview-flow-core:rgba(255,243,229,.3);--preview-flow-conic-a:rgba(47,191,106,.34);--preview-flow-conic-b:rgba(217,181,61,.54);--preview-control-bg:rgba(116,26,30,.92);--preview-border-soft:rgba(255,243,229,.8);--preview-border-strong:rgba(255,243,229,.95);--preview-offer-shadow:rgba(116,26,30,.36);--preview-price-border:rgba(116,26,30,.3);--preview-offer-small:rgba(255,243,229,.92);--preview-item-shadow:rgba(116,26,30,.14);--preview-item-base-bg:rgba(255,255,255,.9);--preview-item-advanced-bg:rgba(152,80,209,.15);--preview-item-flagship-bg:rgba(217,181,61,.2);--preview-action-shadow:rgba(116,26,30,.38);--preview-sticky-bg:rgba(255,243,229,.94);--preview-grain-a:rgba(255,243,229,.56);--preview-grain-b:rgba(242,155,114,.36)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-copy{background:linear-gradient(180deg,#FFFFFF 0%,#FFF3E5 100%)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-offer{background:linear-gradient(135deg,#741A1E 0%,#D13F32 58%,rgba(152,80,209,.46) 100%);color:var(--preview-paper);border:1px solid rgba(217,181,61,.3);box-shadow:0 15px 30px rgba(116,26,30,.24)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-offer .eyebrow{color:var(--preview-highlight-3)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-offer-copy{color:var(--preview-paper)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-offer small{color:rgba(255,243,229,.84)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-price{background:#FFFFFF;border-color:rgba(116,26,30,.24)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-price strong{color:var(--preview-highlight-2-ink)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-price.is-recommended{border-color:var(--preview-highlight-2);box-shadow:0 0 0 2px rgba(152,80,209,.25),0 8px 16px rgba(var(--preview-shadow-rgb),.24)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-copy h2.scenario-preview-title--scene .is-focus{color:var(--preview-highlight-ink);text-decoration-color:var(--preview-highlight-3)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-value .eyebrow{box-shadow:4px 4px 0 var(--preview-highlight-3)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-item--base{--item-accent:var(--preview-highlight-ink);border-left-color:var(--preview-highlight)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-item--advanced{--item-accent:var(--preview-highlight-2-ink);border-left-color:var(--preview-highlight-2);background:rgba(152,80,209,.15)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-item--flagship{--item-accent:var(--preview-highlight-3-ink);border-left-color:var(--preview-highlight-3);background:rgba(217,181,61,.2)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-actions .solid-action{background:var(--preview-highlight-2);color:var(--preview-paper);box-shadow:0 11px 20px rgba(152,80,209,.36)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-actions .solid-action span{color:var(--preview-highlight-3)}
.scenario-package-dialog[data-scenario="temple"] .scenario-preview-next span{color:var(--preview-highlight)}
.scenario-preview-card{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);width:100%;height:100%;max-height:100%;overflow:hidden;border:2px solid var(--preview-mist);border-radius:24px;background:var(--preview-paper);color:var(--preview-ink);box-shadow:0 0 0 1px var(--preview-card-ring),0 30px 80px rgba(var(--preview-shadow-rgb),.45)}
.close-scenario-dialog{position:absolute;z-index:12;top:14px;right:14px;display:grid;place-items:center;width:48px;height:48px;border:2px solid var(--preview-mist);border-radius:50%;background:var(--preview-deep);color:var(--preview-paper);box-shadow:0 9px 24px rgba(var(--preview-shadow-rgb),.4)}
.close-scenario-dialog span{font:400 29px/1 Arial,sans-serif}.close-scenario-dialog i{position:absolute;right:4px;bottom:4px;color:var(--preview-coral);font-size:10px;font-style:normal}
  .scenario-preview-visual{position:relative;display:flex;flex-direction:column;min-height:0;height:100%;padding:0;overflow:hidden;background:radial-gradient(circle at 17% 18%,var(--preview-visual-glow-a) 0,transparent 28%),radial-gradient(circle at 83% 76%,var(--preview-visual-glow-b) 0,transparent 26%),linear-gradient(135deg,var(--preview-mist) 0%,var(--preview-aqua) 35%,var(--preview-cyan) 68%,var(--preview-deep) 100%);color:var(--preview-paper)}
 .scenario-preview-visual:before{display:none}
  .scenario-preview-video-frame{position:relative;z-index:1;min-height:0;height:100%;flex:1 1 auto;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none;isolation:isolate}
   .scenario-preview-video-frame:before{content:"";position:absolute;inset:-16%;z-index:0;pointer-events:none;background:radial-gradient(circle at 22% 30%,var(--preview-flow-glow-a) 0,transparent 34%),radial-gradient(circle at 78% 68%,var(--preview-flow-glow-b) 0,transparent 38%),radial-gradient(circle at 48% 48%,var(--preview-flow-core) 0,transparent 46%);filter:blur(28px);opacity:0;transform:scale(.9);transition:opacity .7s ease;mix-blend-mode:screen}
   .scenario-preview-video-frame:after{content:"";position:absolute;inset:-24%;z-index:0;pointer-events:none;background:conic-gradient(from 32deg,var(--preview-flow-conic-a),transparent 27%,var(--preview-flow-conic-b) 56%,transparent 82%);filter:blur(36px);opacity:0;transform:rotate(0deg) scale(.9);transition:opacity .7s ease;mix-blend-mode:screen}
  .scenario-preview-video-frame.is-image-mode:before{opacity:1;animation:scenario-preview-breathe 5.6s ease-in-out infinite}
  .scenario-preview-video-frame.is-image-mode:after{opacity:.62;animation:scenario-preview-breathe-drift 12s linear infinite}
  @keyframes scenario-preview-breathe{0%,100%{opacity:.56;transform:scale(.9) translate3d(-2%,-1%,0)}50%{opacity:1;transform:scale(1.16) translate3d(2%,1%,0)}}
  @keyframes scenario-preview-breathe-drift{0%{opacity:.28;transform:rotate(0deg) scale(.9)}50%{opacity:.7;transform:rotate(180deg) scale(1.08)}100%{opacity:.28;transform:rotate(360deg) scale(.9)}}
  .scenario-preview-carousel-stage{position:absolute;inset:0;z-index:2;overflow:hidden}
  .scenario-preview-carousel-media{transition:opacity .52s cubic-bezier(.16,1,.3,1),transform .52s cubic-bezier(.16,1,.3,1),filter .52s ease}
  .scenario-preview-carousel-media.is-foreground{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;border:0;border-radius:0;background:transparent;filter:none;box-shadow:none;transform:translateX(0)}
  .scenario-preview-carousel-media.is-foreground.is-entering{opacity:0;transform:translateX(62px) scale(.96)}
  .scenario-preview-carousel-media.is-foreground.is-visible{opacity:1;transform:translateX(0)}
  .scenario-preview-carousel-track{position:absolute;inset:0 auto 0 0;z-index:2;display:flex;gap:var(--slide-gap,8px);width:max-content;height:100%;transform:translate3d(0,0,0);will-change:transform}
  .scenario-preview-carousel-track.is-running{animation:scenario-preview-image-marquee var(--marquee-duration) linear infinite}
  .scenario-preview-carousel-track.is-slide-left{transform:translate3d(calc(-1 * var(--entry-distance)),0,0);transition:transform .72s cubic-bezier(.16,1,.3,1)}
  @keyframes scenario-preview-image-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--marquee-distance)),0,0)}}
  .scenario-preview-video-frame.is-snap-mode .scenario-preview-carousel-stage{overflow:hidden}
   .scenario-preview-snap{--snap-height-inset:78px;--snap-frame-ratio:1;--snap-step-ratio:.76;position:absolute;inset:0;z-index:3;overflow:hidden;perspective:1200px;touch-action:pan-y}
   .scenario-preview-snap-card{position:absolute;top:50%;left:50%;display:block;width:min(94%,560px);max-width:calc(100% - 16px);height:auto;aspect-ratio:var(--snap-ratio,4 / 3);max-height:calc(100% - var(--snap-height-inset,78px));min-height:0;padding:0;border:0;border-radius:10px;box-sizing:border-box;background:transparent;overflow:hidden;color:var(--preview-paper);cursor:grab;visibility:hidden;opacity:var(--snap-opacity,0);transform:translate3d(calc(-50% + var(--snap-x,0px)),-50%,0) scale(var(--snap-scale,1)) rotateY(var(--snap-rotate,0deg)) rotateZ(var(--snap-tilt,0deg));transform-origin:center;box-shadow:none;transition:transform .72s cubic-bezier(.16,1,.3,1),opacity .42s ease;will-change:transform,opacity}
  .scenario-preview-snap-card:after{content:"";position:absolute;inset:0;z-index:2;border:2px solid var(--preview-border-soft);border-radius:inherit;box-sizing:border-box;pointer-events:none;transition:border-color .42s ease}
  .scenario-preview-snap-card.is-visible{visibility:visible}
  .scenario-preview-snap-card.is-peek{filter:none}
  .scenario-preview-snap-card.is-active:after{border-color:var(--preview-mist)}
  .scenario-preview-snap.is-dragging .scenario-preview-snap-card{transition:none;cursor:grabbing}
   .scenario-preview-snap-card:focus-visible{outline:3px solid var(--preview-mist);outline-offset:4px;z-index:12}
   .scenario-package-dialog[data-scenario="wedding"] .scenario-preview-snap-card{border:0;border-radius:0}
  .scenario-preview-snap-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;display:block;object-fit:contain;object-position:center;background:transparent;pointer-events:none}
  .scenario-preview-snap-card.is-vertical-preview{background:var(--preview-paper);box-shadow:0 14px 28px rgba(var(--preview-shadow-rgb),.24)}
  .scenario-preview-snap-card.is-vertical-preview .scenario-preview-snap-media{inset:0 auto auto 0;width:100%;height:auto;object-fit:fill;object-position:top;transform:translate3d(0,0,0);transition:none}
  @keyframes scenario-preview-vertical-pan{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-1 * var(--snap-pan-distance,0px)),0)}}
  .scenario-preview-snap-card.is-vertical-preview.is-active .scenario-preview-snap-media{animation:scenario-preview-vertical-pan var(--snap-pan-duration,3400ms) linear both}
  .scenario-preview-snap:not(.is-playing) .scenario-preview-snap-card.is-vertical-preview.is-active .scenario-preview-snap-media{animation-play-state:paused}
  .scenario-preview-carousel-slide{position:relative;display:grid;place-items:center;flex:0 0 var(--slide-width,100%);width:var(--slide-width,100%);height:100%;padding:0;overflow:hidden}
  .scenario-preview-carousel-slide>.scenario-preview-carousel-media{position:relative;inset:auto;width:100%;height:100%;max-width:none;transform:none;opacity:1;border:0;border-radius:0;background:transparent;object-fit:contain;object-position:center;filter:none;box-shadow:none}
  .scenario-preview-carousel-slide--image>.scenario-preview-carousel-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center}
  .scenario-preview-carousel-label{position:absolute;z-index:6;right:78px;top:16px;display:block;box-sizing:border-box;max-width:calc(100% - 166px);min-height:30px;padding:7px 10px;overflow:hidden;border:1px solid var(--preview-border-soft);border-radius:999px;background:var(--preview-control-bg);color:var(--preview-paper);font:600 clamp(12px,.85vw,14px)/1.2 GenYo,"Microsoft JhengHei","Noto Sans TC",sans-serif;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 5px var(--preview-ink);box-shadow:0 7px 18px rgba(var(--preview-shadow-rgb),.34);backdrop-filter:blur(6px);pointer-events:none}
  .scenario-preview-carousel-counter{position:absolute;z-index:5;left:15px;top:14px;color:var(--preview-mist);font:12px/1 SpaceG,monospace;letter-spacing:.08em;text-shadow:0 1px 5px var(--preview-ink)}
  .scenario-video-sound-toggle{position:absolute;z-index:5;left:24px;bottom:22px;padding:9px 12px;border:1px solid var(--preview-border-strong);border-radius:999px;background:var(--preview-control-bg);color:var(--preview-paper);backdrop-filter:blur(6px);font:600 13px/1 GenYo,"Microsoft JhengHei",sans-serif;box-shadow:0 7px 18px rgba(var(--preview-shadow-rgb),.34)}
 .scenario-video-sound-toggle[hidden]{display:none}
  .scenario-preview-autoplay-toggle{position:absolute;z-index:5;left:130px;bottom:22px;padding:9px 12px;border:1px solid var(--preview-border-strong);border-radius:999px;background:var(--preview-control-bg);color:var(--preview-paper);backdrop-filter:blur(6px);font:600 13px/1 GenYo,"Microsoft JhengHei",sans-serif;box-shadow:0 7px 18px rgba(var(--preview-shadow-rgb),.34);transition:background-color .22s ease,border-color .22s ease,transform .22s ease}
  .scenario-preview-autoplay-toggle:hover,.scenario-preview-autoplay-toggle:focus-visible{border-color:var(--preview-mist);transform:translateY(-1px);background:var(--preview-deep)}
  .scenario-preview-autoplay-toggle:focus-visible{outline:3px solid var(--preview-coral);outline-offset:3px}
  .scenario-preview-autoplay-toggle[hidden]{display:none}
  .scenario-preview-next{position:absolute;z-index:5;right:24px;bottom:22px;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--preview-border-strong);border-radius:999px;background:var(--preview-control-bg);color:var(--preview-paper);backdrop-filter:blur(6px);font:600 13px/1 GenYo,"Microsoft JhengHei",sans-serif;box-shadow:0 7px 18px rgba(var(--preview-shadow-rgb),.34);transition:background-color .22s ease,border-color .22s ease,transform .22s ease}
  .scenario-preview-next span{color:var(--preview-coral);font-size:16px;line-height:.7}
  .scenario-preview-next:hover,.scenario-preview-next:focus-visible{border-color:var(--preview-mist);transform:translateY(-1px);background:var(--preview-deep)}
  .scenario-preview-next:focus-visible{outline:3px solid var(--preview-coral);outline-offset:3px}
 .scenario-preview-next[hidden]{display:none}
 .scenario-preview-work-stack{position:absolute;z-index:4;left:24px;right:24px;bottom:13px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .scenario-preview-work{min-width:0;margin:0;padding:7px;border:1px solid var(--preview-mist);background:var(--preview-paper);color:var(--preview-ink);box-shadow:0 13px 25px rgba(var(--preview-shadow-rgb),.36)}
.scenario-preview-work:nth-child(1){transform:rotate(-6deg) translateY(13px)}.scenario-preview-work:nth-child(2){transform:translateY(-7px)}.scenario-preview-work:nth-child(3){transform:rotate(6deg) translateY(10px)}
 .scenario-preview-work-media{display:block;width:100%;height:72px;object-fit:cover}.scenario-preview-work figcaption{padding:6px 2px 1px}.scenario-preview-work b{display:block;color:var(--preview-deep);font:700 10px/1.2 Arial,sans-serif}.scenario-preview-work span{display:block;margin-top:3px;font-size:10px;line-height:1.35}
  .scenario-preview-copy{position:relative;min-width:0;overflow:auto;overscroll-behavior:contain;padding:24px 82px 22px 30px;background:linear-gradient(180deg,var(--preview-paper) 0%,var(--preview-mist) 100%)}
  .scenario-preview-kicker{display:inline-flex;margin:0 0 8px;padding:6px 10px;border-radius:999px;background:var(--preview-deep);color:var(--preview-mist);font:12px/1 SpaceG,monospace;letter-spacing:.08em}
  .scenario-preview-copy h2{max-width:480px;margin:0;color:var(--preview-deep);font:400 42px/1.03 NanMing,serif;letter-spacing:-.02em;text-wrap:balance}
    .scenario-preview-copy h2.scenario-preview-title--shop{max-width:520px;color:var(--preview-ink);font-family:WenKai;font-size:46px;font-weight:700;line-height:1.14;letter-spacing:-.045em;text-shadow:none}
  .scenario-preview-title--shop span{padding:0;background:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:none}
   .scenario-preview-title--shop .is-punch{display:block;margin:0 0 .2em;color:var(--preview-brown);font-size:.56em;font-weight:600;letter-spacing:.07em}
   .scenario-preview-title--shop .is-price,.scenario-preview-title--shop .is-package{color:var(--preview-ink);text-decoration:none}
  .scenario-preview-title--shop .is-kai{font-family:"標楷體"}
   .scenario-preview-title--shop .is-focus{display:inline;color:var(--preview-copper);font-size:1.14em;font-weight:700;text-decoration:underline;text-decoration-color:var(--preview-coral);text-decoration-thickness:3px;text-underline-offset:.12em;white-space:nowrap}
  .scenario-preview-title--shop .is-focus.is-long{white-space:normal}
  .scenario-preview-title--shop .is-punch .is-focus{font-size:1.18em}
   .scenario-preview-copy h2.scenario-preview-title--scene{max-width:520px;color:var(--preview-ink);font-family:WenKai,"Microsoft JhengHei",sans-serif;font-size:clamp(28px,2vw,38px);font-weight:600;line-height:1.14;letter-spacing:-.035em;text-wrap:wrap}
  .scenario-preview-title--scene .title-line{display:block;white-space:nowrap}
   .scenario-preview-title--scene .is-punch{color:var(--preview-brown);font-size:.62em;font-weight:600;letter-spacing:.04em}
   .scenario-preview-title--scene .is-price,.scenario-preview-title--scene .is-package{color:var(--preview-ink)}
  .scenario-preview-title--scene .is-kai{font-family:"標楷體"}
   .scenario-preview-title--scene .is-focus{display:inline;color:var(--preview-copper);font-size:1.08em;font-weight:700;text-decoration:underline;text-decoration-color:var(--preview-coral);text-decoration-thickness:3px;text-underline-offset:.12em;white-space:nowrap}

   .scenario-dialog-intro{margin:8px 0 0;color:var(--preview-brown);font-size:15px;line-height:1.45}
  .scenario-preview-offer{margin-top:10px;padding:11px;border-radius:15px;background:linear-gradient(135deg,var(--preview-deep),var(--preview-cyan));color:var(--preview-paper);box-shadow:0 15px 30px var(--preview-offer-shadow)}
 .scenario-preview-offer .eyebrow{margin-bottom:4px;color:var(--preview-coral);font-size:13px}
 .scenario-preview-offer-copy{margin:0 0 7px;color:var(--preview-mist);font-size:15px;line-height:1.35}
.scenario-preview-prices{display:grid;gap:5px}
.scenario-preview-price{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--preview-price-border);border-radius:10px;background:var(--preview-paper);color:var(--preview-ink)}
.scenario-preview-price.is-recommended{border:2px solid var(--preview-copper);box-shadow:0 8px 16px rgba(var(--preview-shadow-rgb),.28)}
.scenario-preview-price b{font:700 12px/1 SpaceG,monospace;color:var(--preview-deep)}.scenario-preview-price span{font-size:12px;color:var(--preview-brown);text-decoration:line-through}.scenario-preview-price strong{font-size:14px;color:var(--preview-copper);white-space:nowrap}
.scenario-preview-offer small{display:block;margin-top:7px;color:var(--preview-offer-small);font-size:12px;line-height:1.3}
 .scenario-preview-value{margin-top:14px}.scenario-preview-value .eyebrow{display:inline-block;margin-bottom:8px;padding:4px 10px;color:var(--preview-paper);background:var(--preview-deep);font:900 21px/1.2 "Microsoft JhengHei","Noto Sans TC","PingFang TC",sans-serif;letter-spacing:-.02em;box-shadow:4px 4px 0 var(--preview-coral)}
  .scenario-preview-value ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}.scenario-preview-value li{position:relative;display:flex;align-items:center;min-height:46px;padding:8px 10px 8px 29px;color:var(--preview-ink);font:600 15px/1.35 GenYo,"Microsoft JhengHei","Noto Sans TC","PingFang TC",sans-serif;letter-spacing:.01em;box-shadow:3px 3px 0 var(--preview-item-shadow)}
 .scenario-preview-value li:before{content:"✦";position:absolute;left:9px;top:50%;color:var(--item-accent);font-size:14px;line-height:1;transform:translateY(-50%)}
 .scenario-preview-item--base{--item-accent:var(--preview-copper);border-left:4px solid var(--preview-copper);background:var(--preview-item-base-bg)}
 .scenario-preview-item--advanced{--item-accent:var(--preview-cyan);border-left:4px solid var(--preview-cyan);background:var(--preview-item-advanced-bg)}
 .scenario-preview-item--flagship{--item-accent:var(--preview-deep);border-left:4px solid var(--preview-deep);background:var(--preview-item-flagship-bg)}
 .scenario-preview-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}.scenario-preview-actions .solid-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 15px;border:0;border-bottom:0;border-radius:999px;background:var(--preview-copper);color:var(--preview-paper);text-decoration:none;box-shadow:0 11px 20px var(--preview-action-shadow)}.scenario-preview-actions .solid-action span{color:var(--preview-coral)}
/* 三版 RWD：網頁／平板／手機。輪播展示區使用固定高度，避免媒體被視窗比例壓扁。 */
@media(min-width:761px) and (max-width:1100px){
  .scenario-package-dialog{width:calc(100vw - 48px);height:calc(100svh - 48px);max-height:calc(100svh - 48px);border-radius:20px}
  .scenario-preview-card{grid-template-columns:1fr;grid-template-rows:420px minmax(0,1fr);height:100%;max-height:none;border-radius:20px;overflow:hidden}
  .close-scenario-dialog{top:12px;right:12px;width:46px;height:46px}
  .scenario-preview-carousel-label{right:72px;top:14px;max-width:calc(100% - 150px);font-size:12px}
  .scenario-preview-visual{height:auto;min-height:0;flex:none}
  .scenario-preview-video-frame{height:100%;min-height:0;flex:1 1 auto}
  .scenario-preview-snap{--snap-height-inset:60px;--snap-frame-ratio:1;--snap-step-ratio:.68}
  .scenario-preview-autoplay-toggle{left:124px}
  .scenario-preview-copy{min-height:0;padding:24px 62px 24px 28px;overflow:auto}
  .scenario-preview-copy h2{font-size:38px}
  .scenario-preview-copy h2.scenario-preview-title--scene{font-size:clamp(28px,4.4vw,36px);line-height:1.12}
  .scenario-preview-copy h2.scenario-preview-title--shop{font-size:40px}
  .scenario-preview-value .eyebrow{font-size:19px}
  .scenario-preview-value li{font-size:15px}
   .scenario-preview-actions{position:sticky;bottom:0;padding-top:10px;background:linear-gradient(180deg,var(--preview-sticky-bg) 0%,var(--preview-mist) 35%)}
}
@media(max-width:760px){
  .scenario-package-dialog{width:calc(100vw - 20px);height:calc(100svh - 20px);max-height:calc(100svh - 20px);border-radius:18px}
  .scenario-preview-card{grid-template-columns:1fr;grid-template-rows:320px minmax(0,1fr);height:100%;max-height:none;border-width:2px;border-radius:18px;overflow:hidden}
  .close-scenario-dialog{top:10px;right:10px;width:43px;height:43px}
  .scenario-preview-visual{height:auto;min-height:0;flex:none}
  .scenario-preview-video-frame{height:100%;min-height:0;flex:1 1 auto}
  .scenario-preview-snap{--snap-height-inset:52px;--snap-frame-ratio:1;--snap-step-ratio:.76}
   .scenario-preview-carousel-label{right:64px;top:12px;max-width:calc(100% - 126px);min-height:28px;padding:6px 8px;font-size:12px;letter-spacing:.02em}
  .scenario-preview-carousel-counter{left:12px;top:12px;font-size:12px}
  .scenario-video-sound-toggle{left:14px;bottom:14px;padding:8px 10px;font-size:13px}
  .scenario-preview-autoplay-toggle{left:14px;bottom:48px;padding:8px 10px;font-size:13px}
  .scenario-preview-next{right:14px;bottom:14px;padding:8px 10px;font-size:13px}
  .scenario-preview-copy{min-height:0;padding:22px 18px 20px;overflow:auto}
  .scenario-preview-copy h2{font-size:32px}
  .scenario-preview-copy h2.scenario-preview-title--scene{font-size:clamp(24px,7.2vw,31px);line-height:1.12}
  .scenario-preview-copy h2.scenario-preview-title--shop{font-size:34px;line-height:1.12}
  .scenario-dialog-intro{font-size:14px}.scenario-preview-offer-copy{font-size:14px}.scenario-preview-price{grid-template-columns:auto minmax(0,1fr) auto;gap:6px}
  .scenario-preview-value .eyebrow{font-size:18px}
  .scenario-preview-value ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .scenario-preview-value li{min-width:0;min-height:52px;padding:8px 6px 8px 26px;font-size:14px;line-height:1.25}
   .scenario-preview-actions{align-items:flex-start;flex-direction:column;position:sticky;bottom:0;padding-top:10px}
}
@media(prefers-reduced-motion:reduce){
  .scenario-package-dialog[open]{animation:none}.scenario-preview-carousel-track{animation:none!important}
  .scenario-preview-video-frame.is-image-mode:before,.scenario-preview-video-frame.is-image-mode:after{animation:none;transition:none;transform:none;opacity:.58}.scenario-preview-carousel-track.is-slide-left{transition:none}
  .scenario-preview-snap-card,.scenario-preview-snap-media{transition:none!important;animation:none!important}.scenario-preview-snap-card.is-active{transform:translate3d(calc(-50% + var(--snap-x,0px)),-50%,0) scale(var(--snap-scale,1)) rotateY(var(--snap-rotate,0deg)) rotateZ(var(--snap-tilt,0deg))}
  .scenario-preview-work,.scenario-preview-price.is-recommended{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .wall--integrated{--wall-texture-opacity:.12!important;--wall-shade-opacity:.88!important;height:auto;min-height:0}
  .scenario-sticky{position:relative;height:100%;min-height:0}.hero-stage.stage-4 .hero-video.wall-video{display:none}.scenario-film .scenario-texture{opacity:.12}.wall--integrated .wall-head .eyebrow,.wall--integrated .wall-head h2,.wall-intro>p,.wall-intro .scenario-note,.scenario-card-code,.scenario-card h3,.scenario-card-benefit,.scenario-card-items,.scenario-card-actions{opacity:1!important;clip-path:inset(0)!important;filter:none!important;transform:none!important;animation:none!important}.wall-intro .scenario-note{border-left-color:#e2c7aa5c}.scenario-card,.scenario-card-image img,.scenario-card-actions a,.scenario-card-actions button{transition:none}.scenario-card{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}.wall--integrated:not(.is-preview-locked) .scenario-card{pointer-events:auto!important}.scenario-card::before{animation:none!important}.scenario-card-image img{opacity:.78!important;filter:saturate(.94) contrast(1.03) brightness(1.06)!important;transform:scale(1.015)!important;animation:none!important}.scenario-card:hover .scenario-card-image img,.scenario-card:focus-within .scenario-card-image img{transform:none;animation:none}.scenario-scroll-note{display:none}
}

/* 05 方案預覽：Lagoon Flow／Electric tide 背景。JSON 由 JS Canvas 執行，CSS 保留靜態備援。 */
.scenario-preview-visual.gradient-sangoshou,
.scenario-preview-visual.gradient-electric-tide,
.scenario-preview-visual.gradient-sunlit-orange,
.scenario-preview-visual.gradient-fluoro-pink,
.scenario-preview-visual.gradient-cinnabar-red{
  position:relative;
  isolation:isolate;
   background:linear-gradient(135deg,var(--preview-mist) 12.5%,var(--preview-aqua) 37.5%,var(--preview-cyan) 62.5%,var(--preview-deep) 87.5%);
   background:linear-gradient(135deg in oklab,var(--preview-mist) 12.5%,var(--preview-aqua) 37.5%,var(--preview-cyan) 62.5%,var(--preview-deep) 87.5%);
}
.scenario-preview-flow-canvas{display:none}
.scenario-preview-visual.gradient-sangoshou .scenario-preview-flow-canvas,
.scenario-preview-visual.gradient-electric-tide .scenario-preview-flow-canvas,
.scenario-preview-visual.gradient-sunlit-orange .scenario-preview-flow-canvas,
.scenario-preview-visual.gradient-fluoro-pink .scenario-preview-flow-canvas,
.scenario-preview-visual.gradient-cinnabar-red .scenario-preview-flow-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.scenario-preview-visual.gradient-sangoshou::after,
.scenario-preview-visual.gradient-electric-tide::after,
.scenario-preview-visual.gradient-sunlit-orange::after,
.scenario-preview-visual.gradient-fluoro-pink::after,
.scenario-preview-visual.gradient-cinnabar-red::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(circle at 18% 22%,var(--preview-grain-a) 0 1px,transparent 1.2px),radial-gradient(circle at 72% 78%,var(--preview-grain-b) 0 1px,transparent 1.2px);
  background-size:5px 5px,7px 7px;
  image-rendering:pixelated;
  mix-blend-mode:overlay;
  opacity:.05;
  pointer-events:none;
  animation:none;
}
.scenario-preview-visual.gradient-sangoshou .scenario-preview-video-frame,
.scenario-preview-visual.gradient-electric-tide .scenario-preview-video-frame,
.scenario-preview-visual.gradient-sunlit-orange .scenario-preview-video-frame,
.scenario-preview-visual.gradient-fluoro-pink .scenario-preview-video-frame,
.scenario-preview-visual.gradient-cinnabar-red .scenario-preview-video-frame{background:transparent;}
@media(prefers-reduced-motion:reduce){
  .scenario-preview-visual.gradient-sangoshou::after,.scenario-preview-visual.gradient-electric-tide::after,.scenario-preview-visual.gradient-sunlit-orange::after,.scenario-preview-visual.gradient-fluoro-pink::after,.scenario-preview-visual.gradient-cinnabar-red::after{opacity:.05}
}