/* Home intro: the name is typed, folds into the gold infinity drawn in light, then the logo appears.
   Timeline (s): 0.1 frame draws · 0.25-1.05 letters with cursor · 0.85 kicker · 1.5 letters fold ·
   1.6 seal rings · 1.7 infinity stroke · 2.3 logo · 2.4-3.5 light runs the loop · 2.75 tagline.
   Shown only while <html> has .intro-on (set in the head); .intro-leaving runs the exit, a circle closing over the logo. */
.intro{display:none}
html.intro-on .intro{
  --ig:#d7ab49;--ig2:#f3d37a;--ig-rgb:215 171 73;
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;overflow:hidden;cursor:pointer;
  background:radial-gradient(ellipse 70% 60% at 50% 52%,#17120a 0%,#0a0805 48%,#000 100%);
  clip-path:circle(150% at 50% 50%);transition:clip-path .85s cubic-bezier(.7,0,.25,1),visibility 0s linear .85s
}
html.intro-leaving .intro{clip-path:circle(0% at 50% 50%);visibility:hidden}
/* the hero paints under the opaque intro (so it still counts as the page content) and slides in as the circle opens */
html.intro-on:not(.intro-leaving) .hero .reveal{transform:translateY(24px)!important}
/* the timeline waits for the font (script adds .is-ready, at most 400 ms) */
html.intro-on .intro:not(.is-ready) *,html.intro-on .intro:not(.is-ready) *::after{animation-play-state:paused!important}

.intro__progress{position:absolute;left:0;top:0;width:100%;height:2px;overflow:visible;filter:drop-shadow(0 0 4px var(--ig))}
.intro__progress path{fill:none;stroke:var(--ig2);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:in-trace 3.4s cubic-bezier(.4,0,.2,1) forwards}
/* certificate-style frame: four corner brackets and two fine rules that open from the centre */
.intro__frame{position:absolute;inset:clamp(18px,4vw,44px);pointer-events:none}
.intro__frame i{position:absolute;width:clamp(36px,7vw,72px);aspect-ratio:1;border:0 solid rgb(var(--ig-rgb) / .55);transform:scale(0);animation:in-grow .9s .1s cubic-bezier(.4,0,.2,1) forwards}
.intro__frame i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px;transform-origin:0 0}
.intro__frame i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px;transform-origin:100% 0}
.intro__frame i:nth-child(3){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;transform-origin:100% 100%}
.intro__frame i:nth-child(4){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;transform-origin:0 100%}
.intro__frame b{position:absolute;left:50%;width:min(56vw,460px);height:1px;translate:-50% 0;background:linear-gradient(90deg,transparent,rgb(var(--ig-rgb) / .6),transparent);transform:scaleX(0);animation:in-grow 1.3s .4s cubic-bezier(.4,0,.2,1) forwards}
.intro__frame b:nth-of-type(1){top:0}
.intro__frame b:nth-of-type(2){bottom:0}
.intro__frame b::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;translate:-50% -50%;rotate:45deg;background:var(--ig2);box-shadow:0 0 10px var(--ig)}

.intro__stage{--mw:min(64vw,340px,44vh);position:relative;display:grid;place-items:center;width:min(92vw,620px);height:min(78vh,520px)}
.intro__kicker{
  position:absolute;top:calc(50% - min(21vw,92px));max-width:88vw;font-family:Montserrat,Arial,sans-serif;font-size:clamp(11px,2.6vw,13px);font-weight:700;
  letter-spacing:min(.38em,1.1vw);text-transform:uppercase;text-align:center;color:var(--ig);opacity:0;
  animation:in-kicker .5s .85s ease-out both,in-fade-out .3s 1.5s ease-in forwards
}
.intro__word{
  --mid:0;--len:8;--step:min(.1s,calc(.8s / var(--len)));
  position:absolute;display:flex;margin:0;white-space:nowrap;
  font-family:Montserrat,Arial,sans-serif;font-weight:800;letter-spacing:.3em;margin-right:-.3em;
  font-size:min(clamp(38px,9vw,84px),calc(118vw / var(--len) / 1.3));
  filter:drop-shadow(0 0 22px rgb(var(--ig-rgb) / .35))
}
.intro__word span{
  position:relative;display:inline-block;opacity:0;color:var(--ig2);
  background:linear-gradient(180deg,#fff4cc 0%,#f3d37a 45%,#b8862b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:in-type .18s cubic-bezier(.2,.8,.2,1) both,in-fold .5s cubic-bezier(.6,0,.4,1) forwards;
  animation-delay:calc(.25s + var(--i) * var(--step)),calc(1.5s + (var(--mid) - var(--a)) * .04s)
}
.intro__word span::after{
  content:"";position:absolute;top:.1em;right:-.36em;width:.12em;height:.86em;border-radius:2px;
  background:var(--ig2);box-shadow:0 0 14px var(--ig);opacity:0;-webkit-text-fill-color:initial;
  animation:in-cursor .11s linear;animation-delay:calc(.25s + var(--i) * var(--step))
}
.intro__word span:last-child::after{animation:in-blink .3s linear 2;animation-delay:calc(.25s + var(--i) * var(--step))}

.intro__mark{position:absolute;width:var(--mw);aspect-ratio:680/574;opacity:0;transform:scale(.6);animation:in-mark .7s 1.6s cubic-bezier(.2,.9,.3,1.15) forwards}
/* seal rings behind the logo, like a notary stamp */
.intro__seal{position:absolute;left:50%;top:50%;width:132%;height:auto;aspect-ratio:1;translate:-50% -50%;overflow:visible;fill:none;stroke:var(--ig)}
.intro__seal circle{stroke-width:.5;stroke-dasharray:1;stroke-dashoffset:1;opacity:.5;animation:in-trace 1s 1.6s cubic-bezier(.65,0,.35,1) forwards}
.intro__seal circle:nth-child(2){stroke-width:.35;opacity:.32;animation-delay:1.75s}
.intro__seal .intro__ticks{stroke-width:2.2;stroke-dasharray:.6 3.4;stroke-dashoffset:0;opacity:0;transform-box:view-box;transform-origin:center;animation:in-ticks .8s 2s ease-out forwards,in-spin 24s 2s linear infinite}
.intro__logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.94);filter:drop-shadow(0 0 18px rgb(var(--ig-rgb) / .45));animation:in-logo .8s 2.3s ease-out forwards}
.intro__draw{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgb(var(--ig-rgb) / .9)) drop-shadow(0 0 30px rgb(var(--ig-rgb) / .5))}
/* the infinity drawn in light; it dims as the real logo takes its place */
.intro__loop{stroke:#fff2c8;stroke-width:16;opacity:0;stroke-dasharray:1;stroke-dashoffset:1;animation:in-neon 1s 1.7s cubic-bezier(.65,0,.35,1) forwards,in-dim .7s 2.45s ease-out forwards}
.intro__comet{stroke:#fffaf0;stroke-width:12;stroke-dasharray:.12 .88;stroke-dashoffset:.12;opacity:0;animation:in-comet 1.1s 2.4s cubic-bezier(.4,0,.2,1) forwards}
.intro__tagline{
  position:absolute;top:calc(50% + var(--mw) * .7);max-width:90vw;margin:0;font-family:Montserrat,Arial,sans-serif;font-size:clamp(11px,2.5vw,12px);font-weight:600;
  letter-spacing:min(.42em,.5vw);text-transform:uppercase;text-align:center;color:#cfc4a8;opacity:0;animation:in-kicker .6s 2.75s ease-out both
}
.intro__skip{position:absolute;bottom:calc(clamp(18px,4vw,44px) + 16px + env(safe-area-inset-bottom,0px));font:600 11px/1 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8d8576;opacity:0;animation:in-fade-in .5s 1s ease-out forwards}

@keyframes in-trace{to{stroke-dashoffset:0}}
@keyframes in-grow{to{transform:none}}
@keyframes in-fade-in{to{opacity:1}}
@keyframes in-fade-out{from{opacity:1}to{opacity:0}}
@keyframes in-type{from{opacity:0;transform:translateY(.18em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes in-fold{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translate(calc(var(--c) * -.6em),.08em) scale(.5);filter:blur(8px)}}
@keyframes in-cursor{from,to{opacity:1}}
@keyframes in-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes in-kicker{from{opacity:0;letter-spacing:.8em;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes in-mark{to{opacity:1;transform:none}}
@keyframes in-ticks{to{opacity:.55}}
@keyframes in-spin{to{rotate:360deg}}
@keyframes in-logo{to{opacity:1;transform:none}}
@keyframes in-neon{from{stroke-dashoffset:1;opacity:0}4%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes in-dim{to{opacity:0}}
@keyframes in-comet{0%{stroke-dashoffset:.12;opacity:0}12%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-.88;opacity:0}}

@media(max-width:560px){.intro__stage{height:min(72vh,460px)}}
@media(max-height:480px){.intro__skip{display:none}}
@media(prefers-reduced-motion:reduce){html.intro-on .intro{display:none}html.intro-on .hero .reveal{transform:none!important}}
@media print{.intro{display:none!important}}