/* Signature / aperture: the supplied wordmark becomes the route into the hero. */
.brand-opening{
  display:none;--intro-logo-width:clamp(240px,46vw,620px);
  --ink-end:1.23s;
  --caption-start:calc(var(--ink-end) + .01s);
  --exit-start:calc(var(--caption-start) + .16s + 1s);
  --zoom-start:calc(var(--exit-start) + .12s);--zoom-duration:.88s;
  --intro-duration:calc(var(--zoom-start) + var(--zoom-duration));
}
.opening-active .brand-opening{position:fixed;inset:0;z-index:10000;display:block;overflow:hidden;pointer-events:none;animation:none}
.brand-opening__cover,.brand-opening__portal{position:absolute;inset:0;background:#ff6b00}
.brand-opening__portal{
  -webkit-mask-image:linear-gradient(#000,#000),url('./logo.png');
  mask-image:linear-gradient(#000,#000),url('./logo.png');
  -webkit-mask-size:100% 100%,var(--intro-logo-width) auto;
  mask-size:100% 100%,var(--intro-logo-width) auto;
  -webkit-mask-position:center,center;mask-position:center,center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude;
  transform:scale(1);transform-origin:50% 50%;will-change:transform,opacity;
}
.brand-opening__signature{position:absolute;left:50%;top:50%;width:var(--intro-logo-width);transform:translate(-50%,-50%)}
.brand-opening__mark{display:block;width:100%;height:auto;aspect-ratio:2465/944;overflow:visible;filter:brightness(0) invert(1)}
.opening-ink{stroke-dasharray:var(--stroke-length,2000);stroke-dashoffset:var(--stroke-length,2000);opacity:0}
.brand-opening__caption{position:absolute;left:50%;top:calc(50% + var(--intro-logo-width)*.19148 + 32px);margin:0;transform:translateX(-50%);color:#fff;white-space:nowrap;font:600 13px/1.3 var(--latin);letter-spacing:.19em;opacity:0}
.brand-opening.is-playing{animation:signature-opening-end var(--intro-duration) step-end both}
.brand-opening.is-playing .brand-opening__cover{animation:signature-depart .12s var(--exit-start) linear both}
.brand-opening.is-playing .brand-opening__portal{animation:signature-aperture var(--zoom-duration) var(--zoom-start) linear both,signature-aperture-fade .3s calc(var(--intro-duration) - .3s) linear both}
.brand-opening.is-playing .brand-opening__signature{animation:signature-depart .12s var(--exit-start) linear both}
/* Every stroke uses the same distance-per-second rate, measured from the SVG. */
.brand-opening.is-playing .opening-ink{animation:signature-ink var(--stroke-duration) var(--stroke-delay) linear forwards}
.brand-opening.is-playing .brand-opening__caption{animation:signature-caption .16s var(--caption-start) linear both,signature-depart .12s var(--exit-start) linear forwards}
@keyframes signature-ink{from{opacity:1;stroke-dashoffset:var(--stroke-length)}to{opacity:1;stroke-dashoffset:0}}
@keyframes signature-depart{from{opacity:1}to{opacity:0}}
@keyframes signature-caption{from{opacity:0}to{opacity:1}}
@keyframes signature-aperture{
  /* Keep the mask raster fixed. Scale its layer instead of repainting it per frame. */
  0%{transform:scale(1);animation-timing-function:cubic-bezier(.7,0,1,.4);animation-timing-function:linear(0,.00028,.00114,.00262,.00480,.00780,.01181,.01706,.02391,.03282,.04446,.05978,.08007,.10724,.14401,.19436,.26418,.36230,.50207,.70401,1)}
  100%{transform:scale(32)}
}
@keyframes signature-aperture-fade{from{opacity:1}to{opacity:0}}
@keyframes signature-opening-end{0%{visibility:visible}100%{visibility:hidden}}
.opening-active:not(.opening-reveal) [data-wipe] .wipe-text,.opening-active:not(.opening-reveal) [data-wipe] .wipe-line::after,.opening-active:not(.opening-reveal) .hero-copy-jp{animation-play-state:paused!important}
.opening-active:not(.opening-reveal).motion-ready .site-v58 .hero-wall-column{animation-play-state:paused!important}
.opening-active:not(.opening-reveal) .site-header,.opening-active:not(.opening-reveal) .floating-consult{opacity:0;pointer-events:none}
.site-header,.floating-consult{transition:opacity .45s ease}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .brand-opening.is-playing .brand-opening__portal{animation:signature-depart .12s var(--exit-start) linear both}
}
@media(max-width:700px){
  .brand-opening{--intro-logo-width:clamp(235px,74vw,400px)}
  .brand-opening__caption{font-size:12px;top:calc(50% + var(--intro-logo-width)*.19148 + 25px)}
}
@media(prefers-reduced-motion:reduce){
  .opening-active .brand-opening{display:none!important}
  .opening-active:not(.opening-reveal) .site-header,.opening-active:not(.opening-reveal) .floating-consult{opacity:1;pointer-events:auto}
  .site-header,.floating-consult{transition:none}
}