/* Shared homepage footer: desktop artwork and intentional mobile layout. */

.final-section{position:relative;z-index:1;isolation:isolate;overflow:visible;aspect-ratio:1920/792;background:#78853c;color:#fff}
@media(min-width:1101px){.final-section{margin-top:calc(83.6667px - clamp(35px,2.9vw,55px) - 7.6895833333vw)}}
.final-design{position:absolute;z-index:0;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.final-wordmark{position:absolute;z-index:1;top:40%;left:9.5%;width:81%;height:36%;margin:0;isolation:isolate}
.final-wordmark::before{content:"";position:absolute;inset:auto 0 0;height:26%;border-radius:50%;background:#3f4727}
.final-wordmark-window{position:absolute;inset:0;overflow:hidden;display:grid;align-items:end;justify-items:center;clip-path:url(#footer-wordmark-clip)}
.final-wordmark img{display:block;width:86%;height:auto;transform:translateY(9%)}
@media(prefers-reduced-motion:no-preference){
  .final-wordmark::before{transform:scale(0)}
  .final-wordmark img{transform:translateY(110%)}
  .final-section.is-visible .final-wordmark::before{animation:footer-hole-open .55s cubic-bezier(.2,.75,.28,1) both}
  .final-section.is-visible .final-wordmark img{animation:footer-mark-rise 1.15s linear 1.05s both}}
@keyframes footer-hole-open{to{transform:scale(1)}}
@keyframes footer-mark-rise{
  0%{transform:translateY(110%);animation-timing-function:cubic-bezier(.12,.72,.25,1)}
  48%{transform:translateY(-10%);animation-timing-function:cubic-bezier(.55,0,.8,.4)}
  74%{transform:translateY(12%);animation-timing-function:ease-out}
  88%{transform:translateY(5%);animation-timing-function:ease-in-out}
  100%{transform:translateY(9%)}
}
.final-pistachios{position:absolute;z-index:2;inset:40% 9.5% 24%;pointer-events:none}
.final-pistachios span{position:absolute;left:var(--x);top:var(--y);width:var(--size);aspect-ratio:121/153;background:url("../images/home-revision/footer-pistachio.svg") center/contain no-repeat;transform:rotate(var(--tilt))}
.final-pistachios span:nth-child(1){--x:3%;--y:66%;--size:clamp(10px,1.6vw,31px);--tilt:-36deg;--launch-x:60%;--wait:1.05s}
.final-pistachios span:nth-child(2){--x:5%;--y:91%;--size:clamp(6px,.85vw,16px);--tilt:24deg;--launch-x:90%;--wait:1.05s}
.final-pistachios span:nth-child(3){--x:93%;--y:52%;--size:clamp(9px,1.25vw,24px);--tilt:-24deg;--launch-x:-80%;--wait:1.05s}
.final-pistachios span:nth-child(4){--x:97%;--y:30%;--size:clamp(12px,1.9vw,36px);--tilt:32deg;--launch-x:-125%;--wait:1.05s}
@media(prefers-reduced-motion:no-preference){
  .final-pistachios span{opacity:0}
  .final-section.is-visible .final-pistachios span{animation:footer-pistachio-pop 1.15s linear var(--wait) both}}
@keyframes footer-pistachio-pop{
  0%{opacity:0;transform:translate(var(--launch-x),140%) rotate(0) scale(.6);animation-timing-function:cubic-bezier(.12,.72,.25,1)}
  16%{opacity:1}
  48%{opacity:1;transform:translate(0,-65%) rotate(var(--tilt)) scale(1);animation-timing-function:cubic-bezier(.55,0,.8,.4)}
  74%{opacity:1;transform:translateY(15%) rotate(var(--tilt));animation-timing-function:ease-out}
  88%{opacity:1;transform:translateY(-15%) rotate(var(--tilt));animation-timing-function:ease-in-out}
  100%{opacity:1;transform:translateY(0) rotate(var(--tilt))}
}
@media(max-width:760px){.final-pistachios{inset:185px 4% auto;height:25vw}}
.final-nav{position:absolute;z-index:1;left:15.3%;bottom:10%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:32%;min-height:48px;gap:8px;padding:6px 8px;background:#78853c}
.final-section.is-visible .final-nav{opacity:1;transform:translateY(0)}
.final-nav :is(a,button){display:grid;place-items:center;appearance:none;border:0;background:none;padding:3px 0;color:#f7f4f2;text-decoration:none;text-align:center;cursor:pointer;font:700 21.3333px/1.15 "Quality Lato","Lato","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",sans-serif;letter-spacing:.2em;white-space:nowrap}
@media(min-width:761px){
  .final-nav{justify-content:flex-start;min-width:max-content;gap:clamp(6px,.52vw,10px)}
  .final-nav :is(a,button){font-family:var(--font-en);font-size:clamp(12px,.8333vw,16px);font-weight:900;line-height:1.1;letter-spacing:.15em;padding:3px 6px}}
.final-nav :is(.final-label-en,.final-label-zh){grid-area:1/1;transition:opacity .2s ease}
.final-nav .final-label-zh{opacity:0}
.final-nav :is(a,button):is(:hover,:focus-visible,:active) .final-label-en{opacity:0}
.final-nav :is(a,button):is(:hover,:focus-visible,:active) .final-label-zh{opacity:1}
.final-nav :is(a,button):focus-visible{outline:1px solid #f7f4f2;outline-offset:5px}
.final-copyright{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){
  .final-section{aspect-ratio:auto;min-height:570px;padding:190px 24px 38px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
  .final-design{display:none}
  .final-wordmark{position:relative;inset:auto;width:100%;height:25vw}
  .final-nav{position:relative;left:auto;bottom:auto;justify-content:center;flex-wrap:wrap;gap:6px;width:min(410px,100%);margin-top:auto;padding:0;background:transparent;opacity:0;transform:translateY(14px);transition:opacity .7s ease .75s,transform .7s ease .75s}
  .final-nav :is(a,button){color:#fff;font-family:var(--font-en);font-size:12px;font-weight:900;line-height:1.1;letter-spacing:.15em;padding:3px 6px}
  .final-copyright{position:relative;right:auto;bottom:auto;width:auto;height:auto;padding:0;margin:24px 0 0;overflow:visible;clip:auto;font:700 9px var(--font-en);letter-spacing:.08em;opacity:.9}}
@media(prefers-reduced-motion:reduce){.final-nav,.final-wordmark{transition:none;animation:none;opacity:1}.final-nav,.final-wordmark{transform:none}}