/* Love Fine Art, the L bracket, drawing out of its corner.

   The device and its three uses, carried across from
   lfa-site-renovation/rebuild-final/assets/site.css sections 4 and 5 and
   assets/motion.css section 6: the arms are the pseudo element borders the
   site already draws, and the reveal is a scale out of the corner point,
   800 ms on the site's own expo out curve at a 100 ms delay.

   Rendered with no scripting the three devices stand complete, which is what
   the site itself does: motion.css scopes every one of these rules under
   html.m-js. */

.lfab{
  background:#faf8f3;
  color:#17171c;
  padding:clamp(24px,3.6vw,52px) clamp(20px,3.2vw,44px);
  display:flex;
  flex-direction:column;
  gap:clamp(24px,3.2vw,40px);
  /* the site's own tokens, resolved here because this plate cannot move the
     portfolio's root size */
  --navy:#061068;
  --paper:#faf8f3;
  --arm:clamp(1.5rem,3vw,2.25rem);
  --stroke:2px;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
.lfab-row{ min-width:0; }

/* -- the eyebrow, led by a small L ------------------------------------- */
.lfab-marker{
  margin:0;
  font-family:"Helvetica Neue","Libre Franklin",Helvetica,sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:0.875rem;
}
.lfab-marker::before{
  content:"";
  flex:0 0 auto;
  width:0.6875rem;
  height:0.6875rem;
  border-left:var(--stroke) solid currentColor;
  border-bottom:var(--stroke) solid currentColor;
  transform:translateY(-0.1em);
}

/* -- one L at the top left, mirroring the monogram --------------------- */
.lfab-corner{
  position:relative;
  padding:var(--arm) 0 0 var(--arm);
  margin-left:auto;
  max-width:min(38rem,100%);
}
.lfab-corner::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:var(--arm);
  height:var(--arm);
  border-top:var(--stroke) solid var(--navy);
  border-left:var(--stroke) solid var(--navy);
  pointer-events:none;
}
.lfab-lede{
  margin:0;
  font-family:"Didot","Bodoni 72","Hoefler Text",Georgia,serif;
  font-size:clamp(1.05rem,1.5vw,1.3125rem);
  line-height:1.6;
  color:#17171c;
}

/* -- two opposed corners framing a block ------------------------------- */
.lfab-frame{
  position:relative;
  display:inline-block;
  padding:var(--arm);
  max-width:100%;
}
.lfab-frame::before,
.lfab-frame::after{
  content:"";
  position:absolute;
  width:var(--arm);
  height:var(--arm);
  pointer-events:none;
}
.lfab-frame::before{
  top:0;
  left:0;
  border-top:var(--stroke) solid var(--navy);
  border-left:var(--stroke) solid var(--navy);
}
.lfab-frame::after{
  bottom:0;
  right:0;
  border-bottom:var(--stroke) solid var(--navy);
  border-right:var(--stroke) solid var(--navy);
}
.lfab-est{
  margin:0;
  font-family:"Helvetica Neue","Libre Franklin",Helvetica,sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--navy);
}

/* -- the reveal. Each arm pair draws outward from its own corner. ------ */
.m-js .lfab-corner.lfab-draw::before,
.m-js .lfab-frame.lfab-draw::before{
  transform:scale(0);
  transform-origin:top left;
  transition:transform 800ms var(--ease) 100ms;
}
.m-js .lfab-frame.lfab-draw::after{
  transform:scale(0);
  transform-origin:bottom right;
  transition:transform 800ms var(--ease) 100ms;
}
.m-js .lfab-marker.lfab-draw::before{
  transform:scale(0);
  transform-origin:left bottom;
  transition:transform 800ms var(--ease) 100ms;
}
.m-js .lfab-corner.lfab-draw.is-in::before,
.m-js .lfab-frame.lfab-draw.is-in::before,
.m-js .lfab-frame.lfab-draw.is-in::after{ transform:scale(1); }
.m-js .lfab-marker.lfab-draw.is-in::before{
  transform:scale(1) translateY(-0.1em);
}

@media (prefers-reduced-motion:reduce){
  .lfab-corner::before,
  .lfab-frame::before,
  .lfab-frame::after{ transform:none!important; transition:none!important; }
  .lfab-marker::before{
    transform:translateY(-0.1em)!important;
    transition:none!important;
  }
}