/* Home page intro, "The Lockup": a seam of ember light rises, the mark's facets build up from it in brushed
   silver, a sheen crosses the metal, the wordmark settles into place and the firm's line types in. Then it
   waits for the visitor: a wheel, a swipe, a key or a click opens the logo. Its facets turn into windows onto
   the site, ember light runs along the cracks, the typed line travels to the hero's label and the view flies
   through the mark into the home page. Shown only while <html> has .intro (decided in the page head). The
   build beats are CSS animations, so they start with the first frame; intro.js draws the opening from one
   progress value. The shared .hv-scrub rule (the hero mark assembling with the opening) is in walkthrough.css. */
.hv-intro{display:none}
html.intro{overscroll-behavior-y:none}
.intro .hv-intro{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.hv-intro .bg{position:absolute;inset:0;background:radial-gradient(56% 50% at 50% 46%,color-mix(in oklch,var(--accent) 6%,var(--bg-page)) 0%,var(--bg-page) 72%)}
.hv-intro .lg{position:relative;display:flex;flex-direction:column;align-items:center}
.hv-intro .mk{width:min(184px,44vw);transform-origin:0 0}

/* the seam: a line of ember light rising to the base of the mark */
.hv-intro .seam{position:absolute;left:50%;bottom:0;width:1px;height:var(--h,40vh);margin-left:-.5px;background:linear-gradient(to top,transparent,color-mix(in oklch,var(--accent) 80%,transparent) 55%,var(--ember-300));transform-origin:50% 100%;animation:hv-seam .75s var(--ease-fracture) .1s both,hv-out .5s var(--ease-standard) 1.05s forwards}
.hv-intro .seam::after{content:"";position:absolute;top:-4px;left:-3.5px;width:8px;height:8px;background:#fff4ec;box-shadow:0 0 14px 5px color-mix(in oklch,var(--accent) 65%,transparent);animation:hv-spark .4s var(--ease-standard) .78s both}
@keyframes hv-seam{from{transform:scaleY(0)}}
@keyframes hv-out{to{opacity:0}}
@keyframes hv-spark{from{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}

/* the mark builds up from the seam, facet by facet, then a sheen crosses the metal */
.hv-intro .mark .fct{transition:none;animation:hv-build .8s var(--ease-fracture) calc(var(--o,0) * 65ms + 500ms) both}
@keyframes hv-build{from{transform:translateY(34px);opacity:0}40%{opacity:1}to{transform:none;opacity:1}}
.hv-intro .sheen{animation:hv-sheen 1.05s cubic-bezier(.45,0,.25,1) 1.55s both}
@keyframes hv-sheen{from{transform:skewX(-22deg) translateX(0)}to{transform:skewX(-22deg) translateX(1000px)}}

/* the wordmark settles from wide and soft to sharp; a rule draws; the firm's line types in */
.hv-intro .wm{width:min(164px,40vw);margin-top:34px;animation:hv-name 1.05s var(--ease-fracture) 1.35s both}
@keyframes hv-name{from{opacity:0;transform:scaleX(1.16);filter:blur(7px)}60%{opacity:1;filter:blur(0)}to{opacity:1;transform:none;filter:none}}
.hv-intro .wm img{display:block;width:100%;height:auto}
.hv-intro .rule{display:block;width:96px;height:1px;margin-top:24px;background:var(--accent);animation:hv-rule .7s var(--ease-fracture) 1.8s both}
@keyframes hv-rule{from{transform:scaleX(0)}}
/* the line hangs under the rule (out of flow, so the Lockup never shifts as it types or wraps); it breaks where
   the hero's label breaks, one block per line, so each line can travel to its own place */
.hv-intro .tagline{position:absolute;top:100%;left:50%;width:max-content;max-width:88vw;transform:translateX(-50%);margin:18px 0 0;font:500 11px/1.5 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;text-align:center;color:var(--text-muted)}
.hv-intro .tagline .tl{display:block;min-height:1.5em}
[lang=ar] .hv-intro .tagline{font:500 14px/1.5 var(--font-sans);letter-spacing:0}

/* built (or fast-forwarded): the beats hold their final state as plain styles, so the opening can drive them */
.hv-intro:is(.built,.ff) :is(.seam,.wm,.rule){animation:none}
.hv-intro:is(.built,.ff) .seam{opacity:0}
.hv-intro:is(.built,.ff) .mark .fct{animation:none;transform:none;opacity:1}
.hv-intro.ff .seam::after{animation:none}
.hv-intro.ff .sheen{animation:none;opacity:0}
.hv-intro.ff .hv-caret{animation:none;opacity:0}

/* the cue: drawn once under the Lockup, a hairline down to an ember chevron; no text, no loop */
.hv-intro .cue{position:absolute;left:50%;top:var(--cue-top,70%);bottom:max(28px,calc(env(safe-area-inset-bottom,0px) + 16px));width:9px;margin-left:-4.5px;align-self:stretch;justify-self:start;pointer-events:none}
.hv-intro .cue::before{content:"";position:absolute;left:4px;top:0;bottom:7px;width:1px;background:linear-gradient(var(--border-strong),transparent);transform-origin:50% 0;animation:hv-cue .7s var(--ease-fracture) both}
.hv-intro .cue::after{content:"";position:absolute;left:1px;bottom:2px;width:7px;height:7px;box-sizing:border-box;border:solid var(--accent);border-width:0 1px 1px 0;transform:rotate(45deg);animation:hv-chev .3s var(--ease-enter) .6s both}
.hv-intro .cue.short::before{display:none}
@keyframes hv-cue{from{transform:scaleY(0)}}
@keyframes hv-chev{from{opacity:0;transform:translateY(-4px) rotate(45deg)}}

/* the opening (intro.js cuts the facets out of the screen and flies through them): ember light on the cracks */
.hv-intro .edges{position:absolute;inset:0;overflow:visible;pointer-events:none;opacity:0}
.hv-intro .edges path{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linejoin:round}
.hv-intro .edges path.glow{stroke-width:7;opacity:.2}

/* instant finish: everything fades together and the page is live at once */
.hv-intro.fading{pointer-events:none}
.hv-intro.fading .bg{opacity:0;transition:opacity .6s var(--ease-standard)}
.hv-intro.fading :is(.mk,.edges){opacity:0;transition:opacity .4s var(--ease-exit)}
.hv-intro.fading :is(.tagline,.wm,.rule,.cue,.seam){animation:none;opacity:0;transition:opacity .2s var(--ease-exit)}

/* The hero waits for the landing. Its label is the typed line (intro.js), its photo settles with the opening,
   and its words and buttons rise once html gets .hv-hero-go (from p = 0.55, or on an instant finish). */
.intro .hdr{opacity:0}
.intro .hero .photo{animation:none;scale:1.08}
.intro:not(.hv-hero-go) .hero .copy>:not(.hmark):not(.display){animation:none;opacity:0}
.intro:not(.hv-hero-go) .hero .words .w>span{transition:none;transform:translateY(112%)}
.intro:not(.hv-hero-go)[lang=ar] .hero .words .w>span{opacity:0;transform:translateY(.4em)}
.hv-hero-go .hero .words{--d0:0ms}
.js.hv-hero-go .hero .copy>:not(.hmark):not(.display){animation-delay:calc(var(--k,0) * 110ms + 100ms)}