/* v12: motion and interaction (loaded after site.css) */
button.arch{display:block;padding:0;border:0;cursor:zoom-in;font:inherit;color:inherit;background:var(--deep2)}
.cat button.arch,.strip button.arch{width:calc(100% - 14px)}

/* the header casts a soft shadow once you scroll. (Until 0.9.0 it also got shorter, which pulled
   the whole page up by 14px mid-scroll; it now keeps its height.) */
.top{transition:box-shadow .4s var(--ease)}
.top.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.28)}
.lang a{transition:background .3s var(--ease),color .3s var(--ease)}

/* lightbox: the whole photo, uncropped */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(14,28,31,.92);display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:8px;padding:64px 10px 20px;opacity:0;transition:opacity .35s var(--ease)}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1}
.lightbox figure{margin:0;display:grid;gap:14px;justify-items:center;min-height:0}
.lightbox img{max-width:100%;max-height:calc(100vh - 250px);object-fit:contain;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:scale(.96);transition:transform .45s var(--ease)}
.lightbox.open img{transform:none}
.lightbox figcaption{color:var(--on);text-align:center;display:grid;gap:2px}
.lightbox .lb-n{font-family:var(--disp);font-weight:800;font-size:40px;color:var(--gold);line-height:1}
.lightbox .lb-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.lb-prev,.lb-next{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--gold);background:transparent;color:var(--gold);display:grid;place-items:center;cursor:pointer}
.lb-prev svg,.lb-next svg{width:22px;height:22px}
.lb-close{position:absolute;top:12px;right:12px;color:var(--on)}
@media (max-width:600px){.lightbox{grid-template-columns:1fr;padding-top:60px}.lb-prev,.lb-next{display:none}}

/* search opens with a soft drop */
.search .box{transform:translateY(-12px);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.search.open .box{transform:none;opacity:1}

@media (prefers-reduced-motion:no-preference){
  /* the one authored moment: the hero arch opens like a doorway while the name rises */
  .anim .hero h1{animation:rise 1s var(--ease) both}
  .anim .hero h1 span{animation:rise 1s .12s var(--ease) both}
  .anim .hero .say,.anim .hero .lede{animation:rise 1s .22s var(--ease) both}
  .anim .hero .acts{animation:rise 1s .32s var(--ease) both}
  .anim .hero .thumbs li{animation:pop .7s calc(.45s + var(--i,0)*.06s) var(--ease) both}
  .anim .hero .arch img{animation:doorway 1.4s .1s var(--ease) both}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}}
  @keyframes pop{from{opacity:0;transform:scale(.6)}}
  @keyframes doorway{from{clip-path:inset(100% 0 0 0);transform:scale(1.08)}to{clip-path:inset(0 0 0 0);transform:none}}

  /* scroll reveals: visible by default; only pages running the script hide things first */
  .reveal-on [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
  .reveal-on [data-reveal].in{opacity:1;transform:none}
  .reveal-on .menucard[data-reveal]{transform:translateY(50px) rotate(-1.6deg)}
  .reveal-on .menucard[data-reveal].in{transform:none}
  /* the gold line around each arch draws outward as it appears */
  .reveal-on [data-reveal] .arch{outline-offset:0;outline-color:transparent;transition:outline-offset 1s .25s var(--ease),outline-color 1s .25s var(--ease)}
  .reveal-on [data-reveal].in .arch{outline-offset:6px;outline-color:var(--ochre)}

  /* hover: a wider frame and a slight lift on buttons */
  .arch{transition:outline-offset .5s var(--ease)}
  .occ:hover .arch,.lb-open:hover,.lb-open:focus-visible{outline-offset:11px}
  .btn:hover{transform:translateY(-2px)}
}