/*------------------- SISSA - Icon Arrow Corner -------------------*/

:root {
  --arrow-reveal-duration: 0.2s;
  --arrow-reveal-duration-delay: 0.14s;
}

/* ATOMIC - bottom right arrow corner icon inside card */
.icon-arrow-corner {
  position: absolute;
  background-color: var(--accent);
  opacity: 0;
  bottom: 0;
  right: 0;
  width: 70px;
  height: 70px;
  display: flex;
  transition: var(--arrow-reveal-duration) ease;
  justify-content: center;
  align-items: center;
  svg {
    width: 22px;
    height: auto;
    rect {
      fill: #000;
    }
    path {
      stroke: #000;
    }
  }
}

/*------------------- Animation -------------------*/

.icon-arrow-corner .arrow-corner-fill {
  opacity: 0;
}

.icon-arrow-corner .arrow-body {
  stroke-dasharray: 43;
  stroke-dashoffset: 43;
}

.icon-arrow-corner .arrow-corner-h {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
}

.icon-arrow-corner .arrow-corner-v {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.card:hover .icon-arrow-corner,
.megamenu__left-research a:hover .icon-arrow-corner,
.megamenu__left-il a:hover .icon-arrow-corner {
  opacity: 1;
}

.card:hover .arrow-body,
.megamenu__left-research a:hover .arrow-body,
.megamenu__left-il a:hover .arrow-body {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.12s ease-out
    var(--arrow-reveal-duration-delay);
}

.card:hover .arrow-corner-h,
.card:hover .arrow-corner-v,
.megamenu__left-research a:hover .arrow-corner-h,
.megamenu__left-research a:hover .arrow-corner-v,
.megamenu__left-il a:hover .arrow-corner-h,
.megamenu__left-il a:hover .arrow-corner-v {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.1s ease-out
    calc(var(--arrow-reveal-duration-delay) + 0.1s);
}

.card:hover .arrow-corner-fill,
.megamenu__left-research a:hover .arrow-corner-fill,
.megamenu__left-il a:hover .arrow-corner-fill {
  opacity: 1;
  transition: opacity 0s calc(var(--arrow-reveal-duration-delay) + 0.09s);
}