/* This file layers only the requested review changes over the production CSS. */
/* Font files are declared once in demo-local-fonts.css. */
:root{--demo-mx:50vw;--demo-my:40vh;font-family:'Noto Sans TC',sans-serif;scrollbar-gutter:stable}
.type-demo-switcher{position:fixed;z-index:100;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:5px;border:1px solid rgba(255,255,255,.95);border-radius:24px;background:rgba(247,249,248,.88);box-shadow:0 10px 30px rgba(63,83,86,.14),inset 0 1px 2px #fff;backdrop-filter:blur(14px);white-space:nowrap}.type-demo-switcher>span{padding:0 10px;font-size:11px;letter-spacing:.12em;color:#64706f}.type-demo-switcher button{min-height:34px;padding:7px 12px;border-radius:18px;background:transparent;font:500 11px/1.2 'Noto Sans TC',sans-serif;color:#536162}.type-demo-switcher button b{font:700 12px/1 'Manrope',sans-serif;margin-right:5px}.type-demo-switcher button[aria-current="true"]{background:#fff;border:1px solid #fff;box-shadow:0 3px 12px rgba(62,82,86,.14),inset 0 -1px 2px rgba(95,116,120,.12);color:#263536}
body,.statement,.work-heading h2,.card strong,.card small,.stack-trigger,.deck-controls,.liquid-nav button,.viewer-bar h2,#information h2,#info-body{font-family:'Noto Sans TC',sans-serif}
body{font-weight:300}
header .identity{gap:6px!important;transform:translateX(clamp(-22px,-1.3vw,-12px))!important}
header .identity span{font-family:'Noto Sans TC',sans-serif;font-weight:500;letter-spacing:.075em}
.introduction .micro,.edition,.studio-signature,.viewer-bar small,.card-number,.deck-controls #counter{font-family:'Manrope',sans-serif;font-weight:500}
.introduction h1,.introduction h1 i{font-family:'Manrope',sans-serif;font-weight:800;font-style:normal;letter-spacing:-.055em}
.statement{font-weight:300}.card strong,.work-heading h2,.viewer-bar h2{font-weight:500}.card small,.deck-controls p,#info-body{font-weight:300}.stack-trigger,.liquid-nav button{font-weight:400}

/* Replace the accumulated white flare layers only inside this demo. The
   porcelain remains the production image and stays fully visible. */
.demo-ambient,body:before{display:none}
.demo-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3;isolation:isolate}
.demo-ambient i{position:absolute;display:block;width:62vmax;height:42vmax;border-radius:50%;filter:blur(76px);mix-blend-mode:multiply;opacity:.035;will-change:transform,opacity}
.demo-ambient i:nth-child(1){left:-34vmax;top:-20vmax;background:#bad4d8;animation:demo-aurora-a 18s ease-in-out infinite alternate}
.demo-ambient i:nth-child(2){right:-36vmax;bottom:-24vmax;background:#ead9c1;animation:demo-aurora-b 16s ease-in-out -5s infinite alternate}
.demo-ambient i:nth-child(3){left:24%;top:22%;background:#c9d9d7;opacity:.025;animation:demo-aurora-c 20s ease-in-out -9s infinite alternate}
.demo-ambient b{display:none}
body:before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(430px circle at var(--demo-mx) var(--demo-my),rgba(168,196,201,.07),transparent 72%);opacity:.45}
@keyframes demo-aurora-a{to{transform:translate3d(23vw,14vh,0) scale(1.12);opacity:.11}}
@keyframes demo-aurora-b{to{transform:translate3d(-18vw,-12vh,0) scale(.95);opacity:.1}}
@keyframes demo-aurora-c{to{transform:translate3d(-9vw,17vh,0) scale(1.16);opacity:.075}}
@keyframes demo-moving-radial{from{transform:translate3d(-4vw,-3vh,0) scale(.92)}to{transform:translate3d(54vw,9vh,0) scale(1.08)}}

/* Low-frequency card light sweep, below content legibility. */
.card:after{display:block;content:'';position:absolute;inset:-42%;border-radius:0;background:linear-gradient(120deg,transparent 42%,#ffffff9c 49%,transparent 57%);opacity:.18;mix-blend-mode:screen;pointer-events:none;transform:translateX(-72%) rotate(7deg);animation:demo-card-sweep 10s ease-in-out infinite}
@keyframes demo-card-sweep{0%,72%{transform:translateX(-72%) rotate(7deg)}100%{transform:translateX(72%) rotate(7deg)}}

/* Preserve every physical card during state interpolation. */
.cards{--drag-x:0px;transform:translate3d(var(--drag-x),0,0);transition:transform .42s cubic-bezier(.22,.78,.18,1);touch-action:pan-y}
.cards.dragging{transition:none}.deck-transitioning .card{pointer-events:none}

html[data-study="a"] .introduction h1,html[data-study="a"] .introduction h1 i{font-family:'Manrope',sans-serif;font-weight:800}
html[data-study="a"] .introduction .micro,html[data-study="a"] .edition,html[data-study="a"] .studio-signature,html[data-study="a"] .viewer-bar small,html[data-study="a"] .card-number,html[data-study="a"] .deck-controls #counter{font-family:'Manrope',sans-serif}
html[data-study="b"] .introduction h1,html[data-study="b"] .introduction h1 i{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.06em}
html[data-study="b"] .introduction .micro,html[data-study="b"] .edition,html[data-study="b"] .studio-signature,html[data-study="b"] .viewer-bar small,html[data-study="b"] .card-number,html[data-study="b"] .deck-controls #counter{font-family:'Inter',sans-serif}
html[data-study="c"] .introduction h1,html[data-study="c"] .introduction h1 i{font-family:'Neue Montreal',sans-serif;font-weight:760;letter-spacing:-.048em}
html[data-study="c"] .introduction .micro,html[data-study="c"] .edition,html[data-study="c"] .studio-signature,html[data-study="c"] .viewer-bar small,html[data-study="c"] .card-number,html[data-study="c"] .deck-controls #counter{font-family:'Neue Montreal',sans-serif;font-weight:480}
html[data-study="c"] header .identity span{font-weight:500;letter-spacing:.075em}

@media(max-width:700px){
  .deck-transitioning .card.omit-opening{display:none!important}
  .type-demo-switcher{top:max(6px,env(safe-area-inset-top));max-width:calc(100vw - 12px);gap:2px;padding:4px}.type-demo-switcher>span{display:none}.type-demo-switcher button{padding:7px 8px;font-size:9px}.type-demo-switcher button b{display:block;margin:0 0 2px;font-size:12px}
  header .identity{gap:5px!important;transform:translateX(-10px)!important}
  .backlight:after,.backlight:before,.world:after,.world:before,.window-light,.mobile-light-engine{display:none!important}
  .demo-ambient{display:block}
  body:before{display:block}
  .demo-ambient i{filter:blur(42px);opacity:.055}
  .demo-ambient b{width:108vmax;height:56vmax;left:-66vmax;top:28%;filter:blur(28px);opacity:.4;animation-duration:16s}
  html[data-study="a"] .card{transition-duration:.92s,.5s,.4s;transition-timing-function:cubic-bezier(.16,.84,.23,1),ease,ease}
  html[data-study="b"] .card{transition-duration:1.06s,.58s,.4s;transition-timing-function:cubic-bezier(.22,1,.36,1),ease,ease}
  html[data-study="b"].deck-transitioning .card:nth-child(2){transition-delay:.035s}html[data-study="b"].deck-transitioning .card:nth-child(3){transition-delay:.07s}html[data-study="b"].deck-transitioning .card:nth-child(4){transition-delay:.105s}
  html[data-study="c"] .card{transition-duration:1.14s,.62s,.45s;transition-timing-function:cubic-bezier(.34,1.24,.45,1),ease,ease}
}
@media(prefers-reduced-motion:reduce){.demo-ambient i,.demo-ambient b,.card:after{animation:none}}

@media(max-width:700px){
  /* Preserve the original 01 / 06 control row.  The fold control is taken
     out of that grid and floats above it, so no other control is displaced. */
  .deck-controls{grid-template-areas:'previous counter next' 'spacer spacer spacer';grid-template-rows:auto 36px;row-gap:5px}
  .deck-controls #previous{grid-area:previous}
  .deck-controls > div{grid-area:counter}
  .deck-controls #next{grid-area:next}
  .deck-controls #fold{position:absolute;top:-48px;left:50%;grid-area:auto;transform:translateX(-50%);margin:0;white-space:nowrap}
  /* Keep the approved mobile card sweep visible and contained. */
  .card:after{display:block!important;opacity:.46!important}
}

/* On fold, replay only the Hero copy.  Work controls remain untouched. */
.introduction.copy-returning .micro{animation:copy-return .62s cubic-bezier(.16,.85,.18,1) both}
.introduction.copy-returning .word-reveal>span,.introduction.copy-returning .word-reveal>i{animation:headline-return .88s cubic-bezier(.16,.85,.18,1) both;animation-delay:calc(.06s + var(--entry-order)*.1s)}
.introduction.copy-returning .statement{animation:copy-return .7s cubic-bezier(.16,.85,.18,1) .36s both}
@keyframes copy-return{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes headline-return{from{opacity:0;transform:translateY(105%) rotateX(-26deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}