/* Shared motion for both pages: page curtain, phone menu, phone action bar, touch sizes. */

/* page curtain between pages */
.curtain{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--gold2);color:#0A090D;pointer-events:none;
  clip-path:inset(100% 0 0 0);transition:clip-path .75s cubic-bezier(.76,0,.24,1)}
.curtain span{font:700 clamp(2rem,7vw,5.5rem)/1 var(--sans);letter-spacing:-.035em;text-transform:uppercase;opacity:0;transform:translateY(24px);
  transition:opacity .4s .25s,transform .7s .2s cubic-bezier(.16,1,.3,1)}
html.leaving .curtain{clip-path:inset(0 0 0 0);pointer-events:auto}
html.leaving .curtain span,html.arriving .curtain span{opacity:1;transform:none}
html.arriving .curtain{clip-path:inset(0 0 0 0);transition:none}
html.arriving .curtain span{transition:none}
html.arrived .curtain{clip-path:inset(0 0 100% 0)}
html.arrived .curtain span{opacity:0;transform:translateY(-24px);transition:opacity .3s,transform .6s cubic-bezier(.16,1,.3,1)}

/* phone menu: full screen, links slide in, contact buttons at the bottom */
.menu-foot{display:none}
@media (max-width:980px){
  .links.open{animation:menuIn .55s cubic-bezier(.76,0,.24,1)}
  .links.open>a{animation:menuLink .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--n,0) * 55ms + 120ms)}
  .links.open .menu-foot{display:flex;flex-wrap:wrap;gap:10px;position:absolute;left:var(--gut);right:var(--gut);bottom:calc(36px + env(safe-area-inset-bottom));animation:menuLink .8s cubic-bezier(.16,1,.3,1) .5s both}
  .links.open .menu-foot a{font:500 .95rem var(--sans);letter-spacing:0;padding:14px 20px}
  .links.open .menu-foot .btn-primary{background:var(--text);color:var(--bg)}
}
@keyframes menuIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes menuLink{from{opacity:0;transform:translateY(42px)}}

/* phone action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:flex;gap:6px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:95;padding:6px;border-radius:999px;
    background:rgba(26,23,32,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.5);
    transform:translateY(160%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
  .mbar.on{transform:none}
  .mbar a{flex:1;display:grid;place-items:center;min-height:44px;padding:0 6px;border-radius:999px;text-decoration:none;font:500 .86rem var(--sans);color:var(--text);white-space:nowrap;transition:background .3s,color .3s}
  .mbar a.pri{background:var(--gold2);color:var(--bg)}
  .mbar a.now{background:var(--gold2);color:var(--bg)}
}

/* touch friendly controls */
.mini{min-height:44px}
.opt{min-height:52px}

@media (prefers-reduced-motion:reduce){
  .links.open,.links.open>a,.links.open .menu-foot{animation:none}
  .curtain{display:none}
}