/*
 * About page hero: draw the card's frame with the cursor, like the homepage intro.
 *
 * The "About Animation" component (.framer-2NhXN) steps through five variants,
 * each marked by a class on its root:
 *   1 .framer-v-y0ivp6   start: nothing drawn yet
 *   2 .framer-v-l0emp4   cursor moves to the top-left corner
 *   3 .framer-v-1815flf  cursor drags the frame out to full size
 *   4 .framer-v-crhwcq   text fades in
 *   5 .framer-v-w5hihw   idle, cursor floats
 */

/* The cursor moves on Framer's spring (stiffness 400, damping 60, mass 1). The
   frame uses the same curve, sampled into linear(), so its corner stays under
   the cursor. */
:root {
  --av-draw: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --av-draw: 0.835s linear(0, 0.168, 0.383, 0.551, 0.673, 0.762, 0.827, 0.874, 0.909, 0.934,
      0.952, 0.965, 0.975, 0.981, 0.987, 0.99, 0.993, 0.995, 0.996, 0.997, 1);
  }
}

/* Use the finished padding from the start so the page doesn't shift. */
.framer-2NhXN.framer-y0ivp6.framer-y0ivp6 {
  padding: var(--1omp6vu) !important;
}

/* The frame is the card's border (::after). It is hidden in steps 1-2, grows from
   a 12px square in step 3 with a white fill, then the card's own background takes over. */
.framer-2NhXN.framer-y0ivp6::after {
  transition: width var(--av-draw), height var(--av-draw), opacity 0.15s ease;
}
.framer-2NhXN.framer-y0ivp6:is(.framer-v-y0ivp6, .framer-v-l0emp4, .framer-v-1815flf) {
  background-color: transparent !important;
}
.framer-2NhXN.framer-y0ivp6:is(.framer-v-y0ivp6, .framer-v-l0emp4)::after {
  width: 12px;
  height: 12px;
  opacity: 0;
}
.framer-2NhXN.framer-y0ivp6.framer-v-1815flf::after {
  background-color: var(--token-ff14f010-34c5-4ada-b047-4cbbbdde5f72, rgb(255, 255, 255));
}

/* Corner handles appear in step 3 and travel with the frame's edges. */
@keyframes av-corner-x {
  from { right: calc(100% - 16px); }
}
@keyframes av-corner-y {
  from { bottom: calc(100% - 16px); }
}
@keyframes av-corner-xy {
  from { right: calc(100% - 16px); bottom: calc(100% - 16px); }
}
.framer-2NhXN.framer-v-1815flf .framer-14xte56 { animation: av-corner-x var(--av-draw) both; }
.framer-2NhXN.framer-v-1815flf .framer-19ez96s { animation: av-corner-y var(--av-draw) both; }
.framer-2NhXN.framer-v-1815flf .framer-1cp6nak { animation: av-corner-xy var(--av-draw) both; }

/* Cursor: grab the tiny square at the top-left, then drag to the bottom-right corner. */
.framer-2NhXN.framer-v-l0emp4 .framer-1y4si4v {
  top: 6px !important;
  left: 6px !important;
}
.framer-2NhXN.framer-v-1815flf .framer-1y4si4v {
  bottom: -68px !important;
  right: -188px !important;
}

/* The layer icon above the card has nothing to label before the frame exists. */
.framer-2NhXN .framer-fosjid {
  opacity: 0 !important;
}

/* "About me" label pops in with the frame. */
@keyframes av-fade-in {
  from { opacity: 0; }
}
.framer-2NhXN .framer-n3ij87 {
  animation: av-fade-in 0.3s ease both;
}

/* Headline and intro fade up once the frame is drawn. Framer sets opacity inline
   on these, hence !important. */
.framer-2NhXN .framer-jbqpyg,
.framer-2NhXN .framer-1di9sib {
  transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.framer-2NhXN .framer-1di9sib {
  transition-delay: 0.15s;
}
.framer-2NhXN:is(.framer-v-y0ivp6, .framer-v-l0emp4, .framer-v-1815flf) :is(.framer-jbqpyg, .framer-1di9sib) {
  opacity: 0 !important;
  translate: 0 20px;
}