/* Homepage opening, played on every visit: on a grainy paper sheet the open green ring draws itself and the wordmark
   settles; then the sheet slides up and away while the ring flies to the homepage's background ring (.sf-ring),
   softening as it lands and blending into it. html.intro-on is set by the inline check in index.html and
   assets/intro.js runs the sequence. Without JS or with reduced motion it never shows. */
.intro-veil{display:none}
html.intro-on{overflow:hidden}
html.intro-on .intro-veil{position:fixed;inset:0;z-index:100;display:block;--ring-w:clamp(150px,22vmin,250px);--ring-y:calc(50% - 20px)}

.intro-sheet{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(60% 55% at 22% 18%,rgba(233,218,196,.6),transparent 72%),radial-gradient(55% 50% at 80% 78%,rgba(196,211,191,.55),transparent 72%),radial-gradient(40% 40% at 62% 30%,rgba(232,206,170,.35),transparent 70%),#f2efe9;
  box-shadow:0 24px 60px -30px rgba(21,22,23,.18)}
.intro-sheet .sf-grain{z-index:0}

.intro-ring{position:absolute;z-index:2;left:calc(50% - var(--ring-w) / 2);top:calc(var(--ring-y) - var(--ring-w) / 2);width:var(--ring-w);height:var(--ring-w);overflow:visible;transform-origin:50% 50%}
.intro-arc{stroke-dasharray:var(--len,1300);stroke-dashoffset:var(--len,1300)}
.intro-halo{opacity:0}
html.intro-on .intro-arc{animation:intro-draw .95s cubic-bezier(.65,0,.35,1) .15s forwards}
html.intro-on .intro-halo{animation:intro-fade .8s ease .55s forwards}
@keyframes intro-draw{to{stroke-dashoffset:0}}
@keyframes intro-fade{to{opacity:1}}

.intro-word{position:absolute;z-index:1;left:0;right:0;top:calc(var(--ring-y) + var(--ring-w) / 2 + clamp(18px,3vh,30px));margin:0;text-align:center;font-family:var(--display);font-size:clamp(20px,2.4vw,28px);font-weight:500;color:var(--ink);letter-spacing:.42em;opacity:0;transform:translateY(6px)}
html.intro-on .intro-word{animation:intro-word 1s cubic-bezier(.2,.7,.2,1) .45s forwards}
@keyframes intro-word{to{opacity:1;letter-spacing:-.01em;transform:none}}

/* Leaving: the sheet (with the wordmark) slides up; the ring flies to --fly-x/--fly-y at --fly-s (set by intro.js
   from the background ring's box), softens, and fades out as it lands on the background ring. */
.intro-veil.is-leaving .intro-sheet{transform:translateY(-104%);transition:transform 1s cubic-bezier(.76,0,.24,1)}
.intro-veil.is-leaving .intro-word{opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .3s ease;animation:none;letter-spacing:-.01em}
.intro-veil.is-leaving .intro-ring{transform:translate(var(--fly-x,0px),var(--fly-y,-70vh)) scale(var(--fly-s,1));filter:blur(var(--fly-blur,4px));opacity:0;
  transition:transform 1.05s cubic-bezier(.65,0,.25,1),filter .9s ease .15s,opacity .4s ease .78s}
.intro-veil.is-quick .intro-sheet{transform:translateY(-104%);transition:transform .45s cubic-bezier(.6,0,.3,1)}
.intro-veil.is-quick .intro-ring{opacity:0;transition:opacity .25s}

@media(prefers-reduced-motion:reduce){.intro-veil{display:none!important}html.intro-on{overflow:auto}}