/* ============================================================
   NUNO SARMENTO — BOTTOM-LEFT INTERACTIVE MARK

   Header text stays as "Nuno Sarmento".
   The Lottie animation is a separate fixed mark at bottom-left.

   SIZE CONTROLS:
   Change --corner-logo-width / --corner-logo-height only.

   POSITION CONTROLS:
   Change --corner-logo-left / --corner-logo-bottom only.
   ============================================================ */

:root {
  /* Approximately 5 cm larger than the previous desktop mark. */
  --corner-logo-width: clamp(calc(118px + 5cm), calc(7vw + 5cm), calc(190px + 5cm));
  --corner-logo-height: calc(var(--corner-logo-width) * .4461);

  /* Compensate for the transparent left side of the Lottie canvas so the
     visible stroke, rather than the SVG box, follows the site's margin. */
  --corner-logo-left: var(--pad);
  --corner-logo-bottom: calc(var(--pad) * 0.65);
}


/* ------------------------------------------------------------
   ANIMATED MARK
   ------------------------------------------------------------ */

.corner-logo-mark {
  position: fixed;
  left: var(--corner-logo-left);
  bottom: var(--corner-logo-bottom);

  width: var(--corner-logo-width);
  height: var(--corner-logo-height);

  display: block;
  margin: 0;
  padding: 0;

  line-height: 0;
  text-decoration: none;

  z-index: 120;
  pointer-events: auto;

  /*
    The embedded Lottie stroke is white.
    Difference makes it:
      light background -> black
      black background  -> white
  */
  mix-blend-mode: difference;
}


/* ------------------------------------------------------------
   LOTTIE CONTAINER
   ------------------------------------------------------------ */

.corner-logo-mark #logo-animation {
  position: absolute;
  inset: 0;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block;
  overflow: hidden;

  pointer-events: none;

  /* The revised composition keeps its leftmost stroke at a stable 6.3% of
     the canvas. Offset that transparent safety area so the stroke itself is
     anchored to the page margin while remaining inside the Lottie bounds. */
  transform: translateX(-6.3%);
}


/* ------------------------------------------------------------
   GENERATED SVG
   ------------------------------------------------------------ */

.corner-logo-mark #logo-animation svg {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
  overflow: hidden !important;
}

/* Match the 1px project-list rules and retain that weight at every size/frame. */
.corner-logo-mark #logo-animation svg path,
.corner-logo-mark #logo-animation svg * {
  vector-effect: non-scaling-stroke !important;
  stroke-width: 1px !important;
}


/* ------------------------------------------------------------
   MOBILE
   Keep the same idea, just slightly smaller.
   ------------------------------------------------------------ */

@media (max-width: 780px) {
  :root {
    /* Approximately 2 cm larger than the previous mobile mark. */
    --corner-logo-width: clamp(calc(88px + 2cm), calc(25vw + 2cm), calc(108px + 2cm));
    --corner-logo-height: calc(var(--corner-logo-width) * .4461);
    --corner-logo-left: var(--pad);
    --corner-logo-bottom: var(--pad);
  }
}

/* The artwork occupies only part of its Lottie canvas. These desktop values
   produce an approximately 8 cm visible mark and compensate for the canvas's
   transparent left/bottom area. The curve meets the existing mobile size at
   the breakpoint, so the mobile composition remains unchanged. */
@media (min-width: 781px) {
  .home-page {
    --corner-logo-width: clamp(184px, calc(37.2vw - 106px), 12.8cm);
    --corner-logo-height: calc(var(--corner-logo-width) * .4461);
    --corner-logo-left: var(--pad);
    --corner-logo-bottom: var(--pad);
  }
}

/* While project information is open, the animated mark is solid black
   rather than using difference blending. */
.project-body.project-info-open .corner-logo-mark {
  mix-blend-mode: normal !important;
}

.project-body.project-info-open .corner-logo-mark #logo-animation svg path,
.project-body.project-info-open .corner-logo-mark #logo-animation svg * {
  stroke: #000 !important;
}