/* LOADING INTRO (landing page only): black screen, the monogram pulsing at the centre, a circular opening grows
   from it and reveals the page. Plays once per visit; skipped for reduced motion, a tap or a key.
   The opening animates a registered custom property (--r) used by a radial mask. Browsers without @property
   just fade the overlay out instead. */
@property --r{syntax:"<length>";inherits:false;initial-value:0px}
html.no-intro #intro{display:none}
#intro{position:fixed;inset:0;z-index:9999;background:#000;color:#fff;--r:0px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 2px));
          mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 2px));
  transition:opacity .5s ease}
#intro.open{animation:introOpen 1.3s cubic-bezier(.45,0,.3,1) forwards}
@keyframes introOpen{from{--r:0px}to{--r:78vmax}}
#intro.gone{opacity:0;pointer-events:none}
html.intro-on{overflow:hidden}
#intro .i-mark{position:absolute;left:50%;top:50%;width:84px;height:auto;aspect-ratio:52/40;margin:-32px 0 0 -42px;object-fit:contain;
  opacity:0;animation:iMark .6s .1s ease forwards,iPulse 1.6s .8s ease-in-out infinite}
#intro.open .i-mark{animation:none;opacity:0;transform:scale(.6);transition:opacity .45s ease,transform .45s ease}
@keyframes iMark{to{opacity:1}}
@keyframes iPulse{50%{opacity:.45}}
#intro .i-lab{position:absolute;font-family:var(--font,"Space Grotesk",sans-serif);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:0;animation:iLab .5s .2s ease forwards}
#intro.open .i-lab{animation:none;opacity:0;transition:opacity .4s ease}
@keyframes iLab{to{opacity:.6}}
#intro .tl{top:18px;left:20px}#intro .tr{top:18px;right:20px}#intro .bl{bottom:18px;left:20px}#intro .br{bottom:18px;right:20px}
/* the hero eases back from a slight zoom as the opening grows */
.hero{transform-origin:50% 50%}
html.intro-on .hero{transform:scale(1.12)}
html.intro-open .hero{transform:scale(1);transition:transform 1.9s cubic-bezier(.22,.7,.2,1)}
@media(max-width:640px){#intro .i-lab{font-size:.54rem;letter-spacing:.16em}#intro .i-mark{width:70px;margin:-27px 0 0 -35px}}
@media(prefers-reduced-motion:reduce){#intro{display:none}html.intro-on .hero{transform:none}}