/* ==========================================
   TUCHOK — HERO CORNER IMAGES
========================================== */


/*
 * El Hero que contenga estas imágenes
 * debe tener position: relative;
 * y overflow: hidden;
 */


.hero-corner-decoration {
  position: absolute;
  display: block;

  height: auto;
  max-width: none;

  z-index: 6;

  pointer-events: none;
  user-select: none;

  will-change: transform;
}


/* ==========================================
   SUPERIOR IZQUIERDA
========================================== */

.hero-corner-decoration--top_left {
  top: 0;
  left: 0;

  width: clamp(
    90px,
    13vw,
    240px
  );

  transform:
    translate3d(
      var(--corner-x, 0px),
      var(--corner-y, 0px),
      0
    )
    scale(
      var(--corner-scale, 1)
    );

  transform-origin:
    top left;
}


/* ==========================================
   INFERIOR DERECHA
========================================== */

.hero-corner-decoration--bottom_right {
  right: 0;
  bottom: 0;

  width: clamp(
    110px,
    16vw,
    290px
  );

  transform:
    translate3d(
      var(--corner-x, 0px),
      var(--corner-y, 0px),
      0
    )
    scale(
      var(--corner-scale, 1)
    );

  transform-origin:
    bottom right;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

  .hero-corner-decoration--top_left {

    width: clamp(
      70px,
      29vw,
      150px
    );

    transform:
      translate3d(
        var(--corner-mx, 0px),
        var(--corner-my, 0px),
        0
      )
      scale(
        var(--corner-ms, 1)
      );
  }


  .hero-corner-decoration--bottom_right {

    width: clamp(
      90px,
      38vw,
      190px
    );

    transform:
      translate3d(
        var(--corner-mx, 0px),
        var(--corner-my, 0px),
        0
      )
      scale(
        var(--corner-ms, 1)
      );
  }
}