/* $HEDGE: first-load intro (js/intro.js). Only transform / opacity / stroke-dashoffset animate,
   and nothing here takes part in layout, so the page underneath never shifts. */
html.intro-lock{overflow:hidden;scrollbar-gutter:stable}   /* scrollbar keeps its gutter: no width jump */
html.intro-hold [data-hero]{animation-play-state:paused}   /* hero stagger waits for the exit */
html.intro-logo #nav .brand img{opacity:0}                 /* the pfp lands here, then it is revealed */

.intro{position:fixed;inset:0;z-index:1000;--intro-size:160px;pointer-events:auto;cursor:default}
.intro.leaving{pointer-events:none}
.intro-bg{position:absolute;inset:0;background:var(--bg);will-change:transform,opacity}
.intro-fly{position:absolute;left:50%;top:50%;width:var(--intro-size);height:var(--intro-size);
  margin:calc(var(--intro-size) / -2) 0 0 calc(var(--intro-size) / -2);transform-origin:0 0;will-change:transform}
.intro-pop{position:absolute;inset:0;opacity:0;transform:scale(.85);will-change:transform,opacity}
.intro-shadow{position:absolute;inset:0;border-radius:50%;
  box-shadow:0 22px 44px -22px rgba(34,54,13,.42),0 2px 8px rgba(34,54,13,.07)}
.intro-pfp{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#fcfcfc;
  box-shadow:inset 0 0 0 1px rgba(34,54,13,.06)}
.intro-pfp img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .22s var(--ease)}
.intro-pfp img.ok{opacity:1}
.intro-pfp.is-logo img{padding:16.65%;object-fit:contain}   /* bush-logo fallback, sized like the pfp's bush */
.intro-ring{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);
  overflow:visible;transform:rotate(-90deg);opacity:0;pointer-events:none}
.intro-ring circle{fill:none;stroke:var(--leaf-900);stroke-width:1.15}
.intro-ring .track{opacity:.1}
.intro-ring .arc{stroke-dasharray:1 1;stroke-dashoffset:1;stroke-linecap:round}
.intro-tick{position:absolute;left:50%;top:calc(50% + var(--intro-size) / 2 + 26px);width:12px;height:10px;
  margin-left:-6px;color:var(--short);opacity:0;line-height:0}

@media (max-width:640px){
  .intro{--intro-size:120px}
  .intro-ring{inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px)}
  .intro-ring circle{stroke-width:1.4}
  .intro-tick{top:calc(50% + var(--intro-size) / 2 + 22px)}
}
@media (prefers-reduced-motion:reduce){ .intro{display:none} } /* intro.js never builds it then; belt and braces */