/* 拓衍全站轉場：依目的地頁面使用不同的轉場。只動 transform / opacity / mask，交給顯示卡處理。
   portal 光圈傳送門（首頁）｜wave 液態波浪（關於）｜blinds 百葉（服務）｜tiles 磁磚（產業與範例）
   editorial 雜誌標題（文章）｜doors 雙門（作品與案例）｜slant 斜切（其他） */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.pt{position:fixed;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden;--ink:#0B1C33;--gold:#C6A46C}
.pt *{position:absolute;box-sizing:border-box}
.ptMark{left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:10px;color:#F2E3C6;opacity:0;transform:translate(-50%,-40%);z-index:3}
.ptMark b,.ptMark i,.ptMark u{position:static}
.ptMark b{font:600 30px/1 "Noto Serif TC","Songti TC","STSong","PMingLiU",serif;letter-spacing:.32em;padding-left:.32em}
.ptMark i{font-style:normal;font-size:11px;letter-spacing:.5em;padding-left:.5em;color:var(--gold)}
.ptMark u{display:block;width:120px;height:1px;background:#C6A46C40;text-decoration:none;position:relative;overflow:hidden}
.ptMark u::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.pt.out .ptMark{animation:ptMk .32s .3s ease forwards}.pt.out .ptMark u::after{animation:ptLn .45s .32s cubic-bezier(.6,0,.2,1) forwards}
.pt.in .ptMark{opacity:1;transform:translate(-50%,-50%);animation:ptMkOut .25s ease forwards}
@keyframes ptMk{to{opacity:1;transform:translate(-50%,-50%)}}@keyframes ptMkOut{to{opacity:0;transform:translate(-50%,-62%)}}@keyframes ptLn{to{transform:scaleX(1)}}

/* portal：光圈。離開時從四周向點擊處收攏，進入時從中心張開 */
.pt.portal .ptFill{inset:0;background:radial-gradient(circle at var(--x) var(--y),transparent var(--r),#FFF3D6 calc(var(--r) + 1px),#E2C48A calc(var(--r) + 4px),#C6A46C99 calc(var(--r) + 14px),#0B1C33 calc(var(--r) + 70px))}
.pt.portal.out .ptFill{--r:150vmax;animation:ptClose .62s cubic-bezier(.76,0,.24,1) forwards}
.pt.portal.in .ptFill{animation:ptOpen .95s .08s cubic-bezier(.65,0,.15,1) forwards}
@keyframes ptClose{from{--r:150vmax}to{--r:0px}}@keyframes ptOpen{from{--r:0px}to{--r:150vmax}}

/* wave：液態波浪幕 */
.pt.wave .ptFill{left:0;right:0;top:0;height:100%;background:var(--ink)}
.pt.wave .ptFill::before{content:"";position:absolute;left:-10%;right:-10%;height:28vh;background:var(--ink);border-radius:50%}
.pt.wave.out .ptFill{transform:translateY(130%);animation:ptWaveUp .7s cubic-bezier(.7,0,.25,1) forwards}.pt.wave.out .ptFill::before{top:-13vh;animation:ptCapFlat .7s cubic-bezier(.7,0,.25,1) forwards}
.pt.wave.in .ptFill{animation:ptWaveOff .85s .05s cubic-bezier(.7,0,.25,1) forwards}.pt.wave.in .ptFill::before{bottom:-13vh;transform:scaleY(0);animation:ptCapGrow .85s .05s cubic-bezier(.7,0,.25,1) forwards}
@keyframes ptWaveUp{to{transform:translateY(0)}}@keyframes ptWaveOff{to{transform:translateY(-130%)}}
@keyframes ptCapFlat{0%{transform:scaleY(1)}to{transform:scaleY(0)}}@keyframes ptCapGrow{to{transform:scaleY(1)}}

/* blinds：百葉幕 */
.pt.blinds .ptB{top:0;bottom:0;width:calc(100%/6 + 1px);background:var(--ink)}
.pt.blinds .ptB:nth-child(even){background:#0E2340}
.pt.blinds.out .ptB{transform:scaleY(0);transform-origin:bottom;animation:ptGrow .48s cubic-bezier(.7,0,.25,1) forwards}
.pt.blinds.in .ptB{transform-origin:top;animation:ptShrinkY .6s cubic-bezier(.7,0,.25,1) forwards}
@keyframes ptGrow{to{transform:scaleY(1)}}@keyframes ptShrinkY{from{transform:scaleY(1)}to{transform:scaleY(0)}}

/* tiles：磁磚 */
.pt.tiles .ptT{background:var(--ink);border:.5px solid #0E2340}
.pt.tiles.out .ptT{transform:scale(0) rotate(-12deg);animation:ptTileIn .42s cubic-bezier(.5,0,.2,1) forwards}
.pt.tiles.in .ptT{animation:ptTileOut .5s cubic-bezier(.6,0,.4,1) forwards}
@keyframes ptTileIn{to{transform:scale(1.02) rotate(0)}}@keyframes ptTileOut{from{transform:scale(1.02)}to{transform:scale(0) rotate(12deg)}}

/* editorial：雜誌標題橫掃 */
.pt.editorial .ptFill{inset:0;background:var(--ink)}
.pt.editorial .ptWord{top:50%;left:0;white-space:nowrap;font:600 clamp(64px,13vw,190px)/1 "Noto Serif TC","Songti TC","STSong","PMingLiU",serif;color:transparent;-webkit-text-stroke:1px #C6A46C;transform:translate(100vw,-55%);z-index:2}
.pt.editorial .ptWord em{font-style:normal;color:#F2E3C6;-webkit-text-stroke:0}
.pt.editorial.out .ptFill{transform:translateX(100%);animation:ptSlideIn .55s cubic-bezier(.7,0,.25,1) forwards}
.pt.editorial.out .ptWord{animation:ptWordIn 1.1s cubic-bezier(.2,.6,.2,1) forwards}
.pt.editorial.out .ptMark{display:none}
.pt.editorial.in .ptFill{animation:ptSlideOut .7s .2s cubic-bezier(.7,0,.25,1) forwards}
.pt.editorial.in .ptWord{transform:translate(-8vw,-55%);animation:ptWordOut .9s cubic-bezier(.6,0,.4,1) forwards}
@keyframes ptSlideIn{to{transform:translateX(0)}}@keyframes ptSlideOut{to{transform:translateX(-100%)}}
@keyframes ptWordIn{to{transform:translate(-8vw,-55%)}}@keyframes ptWordOut{to{transform:translate(-110%,-55%);opacity:.4}}

/* doors：雙門 */
.pt.doors .ptL,.pt.doors .ptR{top:0;bottom:0;width:50.5%;background:var(--ink)}
.pt.doors .ptL{left:0}.pt.doors .ptR{right:0;background:#0E2340}
.pt.doors .ptSeam{left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(transparent,var(--gold),transparent);box-shadow:0 0 18px #C6A46C;z-index:2}
.pt.doors.out .ptL{transform:translateX(-101%);animation:ptToZero .55s cubic-bezier(.7,0,.25,1) forwards}.pt.doors.out .ptR{transform:translateX(101%);animation:ptToZero .55s cubic-bezier(.7,0,.25,1) forwards}
.pt.doors.out .ptSeam{transform:scaleY(0);animation:ptGrow .4s .42s ease forwards}
.pt.doors.in .ptL{animation:ptDoorL .8s .12s cubic-bezier(.7,0,.25,1) forwards}.pt.doors.in .ptR{animation:ptDoorR .8s .12s cubic-bezier(.7,0,.25,1) forwards}.pt.doors.in .ptSeam{animation:ptFadeOut .25s forwards}
@keyframes ptToZero{to{transform:translateX(0)}}@keyframes ptDoorL{to{transform:translateX(-101%)}}@keyframes ptDoorR{to{transform:translateX(101%)}}

/* slant：斜切幕 */
.pt.slant .ptFill{top:-30%;bottom:-30%;left:-25%;width:150%;background:var(--ink);border-left:2px solid var(--gold)}
.pt.slant.out .ptFill{transform:translateX(110%) skewX(-14deg);animation:ptSlantIn .55s cubic-bezier(.7,0,.25,1) forwards}
.pt.slant.in .ptFill{transform:skewX(-14deg);animation:ptSlantOut .7s .05s cubic-bezier(.7,0,.25,1) forwards}
@keyframes ptSlantIn{to{transform:translateX(0) skewX(-14deg)}}@keyframes ptSlantOut{to{transform:translateX(-115%) skewX(-14deg)}}
@keyframes ptFadeOut{to{opacity:0}}

/* 進入後，內容依序浮現 */
html.ptIn main,html.ptIn #main{animation:ptRise .9s .2s cubic-bezier(.16,1,.3,1) both}
@keyframes ptRise{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}

/* 首頁開場 */
.tyIntro{position:fixed;inset:0;z-index:2147483001;background:#060C19;color:#F2E3C6;display:grid;place-items:center;overflow:hidden;--r:0px;-webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1px));mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1px));animation:tyFailsafe .6s 4.5s forwards}
.tyIntro::before{content:"";position:absolute;inset:-60px;background:url(/assets/nightmap/grain.webp);opacity:.04}
.tyIntro::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 50%,#13305A55,transparent 70%)}
.tyRings{position:absolute;left:50%;top:50%;width:min(68vmin,560px);height:min(68vmin,560px);transform:translate(-50%,-50%)}
.tyRings circle{fill:none;stroke:#C6A46C;stroke-linecap:round;transform-origin:50% 50%}
.tyRings .r1{stroke-width:1.2;stroke-dasharray:4 10;animation:tySpin 14s linear infinite,tyDraw 1.6s cubic-bezier(.6,0,.2,1) both}
.tyRings .r2{stroke-width:1;stroke-dasharray:640;stroke-dashoffset:640;opacity:.8;animation:tyDash 1.5s .15s cubic-bezier(.6,0,.2,1) forwards,tySpinR 20s linear infinite}
.tyRings .r3{stroke-width:2;stroke-dasharray:90 900;opacity:.9;animation:tySpin 3.2s linear infinite}
.tyRings .r4{stroke-width:.6;stroke-dasharray:980;stroke-dashoffset:980;opacity:.5;animation:tyDash 1.8s .3s ease forwards}
@keyframes tySpin{to{transform:rotate(360deg)}}@keyframes tySpinR{to{transform:rotate(-360deg)}}@keyframes tyDash{to{stroke-dashoffset:0}}@keyframes tyDraw{from{opacity:0;transform:scale(.8)}}
.tyBrand{position:relative;z-index:2;text-align:center}
.tyBrand b{display:block;font:600 clamp(46px,9vmin,84px)/1 "Noto Serif TC","Songti TC","STSong","PMingLiU",serif;letter-spacing:.38em;padding-left:.38em}
.tyBrand b span{display:inline-block;opacity:0;transform:translateY(40%);filter:blur(6px);animation:tyChar .9s cubic-bezier(.16,1,.3,1) forwards}
.tyBrand b span:nth-child(2){animation-delay:.12s}
.tyBrand i{display:block;margin-top:18px;font-style:normal;font-size:12px;letter-spacing:.55em;padding-left:.55em;color:#C6A46C;opacity:0;animation:tyFade .8s .5s forwards}
.tyBrand small{display:block;margin-top:10px;font-size:13px;letter-spacing:.3em;color:#8FA2BE;opacity:0;animation:tyFade .8s .7s forwards}
@keyframes tyChar{to{opacity:1;transform:none;filter:none}}@keyframes tyFade{to{opacity:1}}
.tyCount{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(16px,4vh,40px);z-index:2;font:500 clamp(40px,8vmin,92px)/1 ui-monospace,monospace;color:#F2E3C6;font-variant-numeric:tabular-nums}
.tyCount::after{content:"%";font-size:.32em;color:#C6A46C;margin-left:6px;vertical-align:top}
.tyBar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#C6A46C;transform-origin:left;transform:scaleX(var(--p,0));z-index:2;box-shadow:0 0 12px #C6A46C}
.tySkip{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(16px,4vh,40px);z-index:2;background:none;border:1px solid #C6A46C66;color:#F2E3C6;border-radius:999px;padding:8px 16px;font-size:13px;letter-spacing:.1em;cursor:pointer;pointer-events:auto}
.tyIntro.go{animation:tyIris 1.15s cubic-bezier(.7,0,.2,1) forwards}
.tyIntro.go .tyRings{animation:tyBurst 1.15s cubic-bezier(.7,0,.2,1) forwards}
.tyIntro.go .tyBrand,.tyIntro.go .tyCount,.tyIntro.go .tySkip{transition:opacity .35s,transform .6s;opacity:0;transform:scale(1.08)}
@keyframes tyIris{from{--r:0px}to{--r:150vmax}}
@keyframes tyBurst{to{transform:translate(-50%,-50%) scale(5);opacity:0}}
@keyframes tyFailsafe{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:reduce){.pt *{animation-duration:.01s!important;animation-delay:0s!important}.tyIntro{display:none}html.ptIn main,html.ptIn #main{animation:none}}
.pt .ptWord em{position:static}

/* 捲動特效（fx.js）需要的樣式 */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:clip}
html.fx .innerHero h1,html.fx .v2heroCopy h1{visibility:hidden;animation:fxShow 0s 2.5s forwards}
html.fx.fxReady .innerHero h1,html.fx.fxReady .v2heroCopy h1{visibility:visible;animation:none}
@keyframes fxShow{to{visibility:visible}}
.fxMarquee{overflow:hidden;margin:-10px 0 50px;pointer-events:none;user-select:none}
.fxRow{display:flex;gap:.5em;white-space:nowrap;font:700 clamp(54px,9vw,140px)/1.08 "Noto Serif TC","Songti TC","STSong","PMingLiU",serif;will-change:transform}
.fxRow span{color:transparent;-webkit-text-stroke:1.2px #0B1C3333}.fxRow i{font-style:normal;color:#C6A46C;font-size:.4em;align-self:center}
.fxRow2 span{color:#0B1C330d;-webkit-text-stroke:0}
#method .steps{position:relative}.fxLine{position:absolute;left:0;right:0;top:-14px;height:2px;background:linear-gradient(90deg,#C6A46C,#F2D49A);transform-origin:left;transform:scaleX(0)}
html .fxNoT{transition:none!important}

/* shutter：上下兩片快門（工作卡在哪） */
.pt.shutter .ptTop,.pt.shutter .ptBot{left:0;right:0;height:50.5%;background:var(--ink)}
.pt.shutter .ptTop{top:0}.pt.shutter .ptBot{bottom:0;background:#0E2340}
.pt.shutter .ptSeamH{left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 18px #C6A46C;z-index:2}
.pt.shutter.out .ptTop{transform:translateY(-101%);animation:ptToZeroY .5s cubic-bezier(.7,0,.25,1) forwards}.pt.shutter.out .ptBot{transform:translateY(101%);animation:ptToZeroY .5s cubic-bezier(.7,0,.25,1) forwards}
.pt.shutter.out .ptSeamH{transform:scaleX(0);animation:ptGrowX .4s .38s ease forwards}
.pt.shutter.in .ptTop{animation:ptUpOff .75s .1s cubic-bezier(.7,0,.25,1) forwards}.pt.shutter.in .ptBot{animation:ptDownOff .75s .1s cubic-bezier(.7,0,.25,1) forwards}.pt.shutter.in .ptSeamH{animation:ptFadeOut .25s forwards}
@keyframes ptToZeroY{to{transform:translateY(0)}}@keyframes ptGrowX{to{transform:scaleX(1)}}@keyframes ptUpOff{to{transform:translateY(-101%)}}@keyframes ptDownOff{to{transform:translateY(101%)}}
/* bars：五條橫幕左右交錯（怎麼合作） */
.pt.bars .ptBar{left:0;right:0;height:calc(20% + 1px);background:var(--ink);border-bottom:1px solid #C6A46C33}
.pt.bars .ptBar.odd{background:#0E2340}
.pt.bars.out .ptBar{transform:translateX(-101%);animation:ptBarIn .5s cubic-bezier(.7,0,.25,1) forwards}.pt.bars.out .ptBar.odd{transform:translateX(101%)}
.pt.bars.in .ptBar{animation:ptBarOutR .6s cubic-bezier(.7,0,.25,1) forwards}.pt.bars.in .ptBar.odd{animation-name:ptBarOutL}
@keyframes ptBarIn{to{transform:translateX(0)}}@keyframes ptBarOutR{to{transform:translateX(101%)}}@keyframes ptBarOutL{to{transform:translateX(-101%)}}
/* rings：從點擊處擴散的金色漣漪（免費健檢） */
.pt.rings .ptDisc{left:var(--x);top:var(--y);width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;border-radius:50%;background:var(--ink)}
.pt.rings .ptRingX{left:var(--x);top:var(--y);width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 30px #C6A46C88;z-index:2;opacity:0}
.pt.rings.out .ptDisc{transform:scale(0);animation:ptDiscIn .62s cubic-bezier(.7,0,.25,1) forwards}
.pt.rings.out .ptRingX{animation:ptRipple .8s cubic-bezier(.2,.6,.2,1) forwards}
.pt.rings.in .ptDisc{left:50%;top:50%;animation:ptDiscOut .75s .08s cubic-bezier(.7,0,.25,1) forwards}
.pt.rings.in .ptRingX{left:50%;top:50%;animation:ptRipple .9s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes ptDiscIn{to{transform:scale(1)}}@keyframes ptDiscOut{from{transform:scale(1)}to{transform:scale(0)}}
@keyframes ptRipple{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}

/* 防止動畫中的元素暫時超出畫面右側，造成手機左右晃動（用 clip 不會影響 sticky 與捲動） */
@supports (overflow:clip){html,body{overflow-x:clip}}
@supports not (overflow:clip){html{overflow-x:hidden}}