/* Shared UI across the ASA® site (Home, Work, About, Lore). */

/* Right after arriving on a page, links ignore the pointer until it moves
   (see transitions.js) — no hover sweep replaying mid-transition */
html.vt-still a { pointer-events: none; }

/* Text selection in white */
::selection { background: #ffffff; color: #000000; }

/* No visible scrollbars anywhere (pages still scroll) */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Plain text buttons (WORK, ABOUT…): on hover a white block sweeps in from
   the left behind the label and the text turns black. Padding is cancelled
   with negative margins so nothing moves in the layout. */
.btn-sweep, .nav a:not(.btn-bracket) {
  --sweep-dur: .35s;
  --sweep-ease: cubic-bezier(.65, 0, .35, 1);
  position: relative; isolation: isolate;
  padding: 2px 3px 1px; margin: -2px -3px -1px;
  transition: color calc(var(--sweep-dur) * .5) var(--sweep-ease);
}
.btn-sweep::before, .nav a:not(.btn-bracket)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #ffffff;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--sweep-dur) var(--sweep-ease);
}
.btn-sweep:hover, .nav a:not(.btn-bracket):hover { color: #000000; transition-delay: calc(var(--sweep-dur) * .3); }
.btn-sweep:hover::before, .nav a:not(.btn-bracket):hover::before { transform: scaleX(1); }

/* [Bracketed] buttons — reference: [VIEW CASE STUDY]. Same type everywhere
   (12px, uppercase, -0.24 tracking); only the menu's contact row is smaller.
   The brackets are drawn shapes, not glyphs. On hover
   the left bracket itself fills in and stretches right until it meets the
   right one — bracket to bracket becomes the pill. Sized in em so it works
   at 10px and 12px, and kept close to the Helvetica "[" glyph. */
.btn-bracket {
  --arm: .22em;                     /* bracket arm length */
  --dur: .35s;
  --ease: cubic-bezier(.65, 0, .35, 1);
  position: relative; display: inline-block; isolation: isolate;
  padding: .1em .32em 0;
  font-size: 12px; line-height: 1; letter-spacing: -0.24px; text-transform: uppercase;
  color: inherit; text-decoration: none;
  transition: color calc(var(--dur) * .5) var(--ease);
}
.btn-bracket::before, .btn-bracket::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: -.04em;
  width: var(--arm);
  border: 1px solid #ffffff;
  transition: width var(--dur) var(--ease), background-color .08s linear calc(var(--dur) * .85);
}
.btn-bracket::before { left: 0; border-right: 0; }
.btn-bracket::after { right: 0; border-left: 0; }
.btn-bracket:hover { color: #000000; transition-delay: calc(var(--dur) * .3); }
.nav .btn-bracket { font-size: inherit; }   /* menu contact row keeps 10px */
.btn-bracket:hover::before {
  width: 100%;
  background-color: #ffffff;
  transition-delay: 0s;             /* fills straight away; on leave it empties last */
}

/* Text reveal (see reveal.js): words or lines rise from behind a mask and
   settle — the ASA® text gesture. No fade. */
.rv-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.rv-w > i { display: inline-block; font-style: normal; transform: translateY(135%); }   /* fully below the mask: no accent or @ peeks out */
.rv-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.rv-line > span { display: block; transform: translateY(135%); }
.rv-w > i, .rv-line > span { transition: transform .6s cubic-bezier(.2, .8, .2, 1) calc(var(--base, 0s) + var(--d, 0s)); }
.rv.in .rv-w > i, .rv.in .rv-line > span { transform: none; }
.rv.instant .rv-w > i, .rv.instant .rv-line > span { transition: none; }

/* [Tag] entrance (About labels, numbers): the same drawn brackets as the
   buttons; on entering, a white pill sweeps across from the left bracket,
   reveals the label and leaves — then it just stays, no hover. */
.tag {
  position: relative; display: inline-block; isolation: isolate;
  padding: .1em .32em 0;
  font-size: 12px; line-height: 1; letter-spacing: -0.24px; text-transform: uppercase;
  color: #aaaaaa;                            /* soft grey: brackets and label */
}
.tag::before, .tag::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: -.04em;
  width: .22em; border: 1px solid #aaaaaa; visibility: hidden;
}
.tag::before { left: 0; border-right: 0; }
.tag::after { right: 0; border-left: 0; }
.tag > span { visibility: hidden; }
.tag > span::before {                       /* the pill */
  content: ""; position: absolute; inset: 0 0 -.04em; z-index: 1;
  background: #ffffff; clip-path: inset(0 100% 0 0);
}
/* brackets and label are both revealed by the pill — nothing shows before it */
.tag.in::before, .tag.in::after { animation: tag-text .5s steps(1, end) forwards; }
.tag.in > span { animation: tag-text .5s steps(1, end) forwards; }
.tag.in > span::before { animation: tag-pill .5s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes tag-pill {
  0%   { clip-path: inset(0 100% 0 0); }    /* grows from the left bracket… */
  50%  { clip-path: inset(0 0 0 0); }       /* …fills bracket to bracket… */
  100% { clip-path: inset(0 0 0 100%); }    /* …and slides off, leaving the label */
}
@keyframes tag-text { 0% { visibility: hidden; } 50%, 100% { visibility: visible; } }
/* The same entrance for a [bracketed] button (e.g. [ASA® PERSPECTIVE TOOL]):
   add .btn-enter, then .in — the pill reveals its brackets and label, and
   from then on it is a normal button (hover fill) */
.btn-enter::before, .btn-enter::after, .btn-enter > span { visibility: hidden; }
.btn-enter > span::before {
  content: ""; position: absolute; inset: 0 0 -.04em; z-index: 1;
  background: #ffffff; clip-path: inset(0 100% 0 0); pointer-events: none;
}
.btn-enter.in::before, .btn-enter.in::after, .btn-enter.in > span { animation: tag-text .5s steps(1, end) forwards; }
.btn-enter.in > span::before { animation: tag-pill .5s cubic-bezier(.65, 0, .35, 1) forwards; }

/* ---------- mobile menu: only [MENU]; tapping it unfolds the links below ---------- */
.nav-toggle { display: none; pointer-events: auto; }   /* headers that ignore the pointer (Lore) still let it be tapped */
@media (max-width: 700px) {
  .nav-toggle {
    display: block; order: -1; padding: 0; border: 0; background: none; cursor: pointer;
    color: inherit; font: inherit; font-size: 12px; line-height: 1; letter-spacing: -0.24px; text-transform: uppercase;
  }
  .nav > div:not(.nav-toggle) { display: none !important; }
  /* open: the links simply drop below [CLOSE], over the page (transparent, no panel) */
  .nav.open { z-index: 100; }
  .nav.open > div:not(.nav-toggle) {
    display: flex !important; flex-direction: column; align-items: flex-end; gap: 12px;
    font-size: 12px !important; margin-top: 4px;
  }
}