@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;

.wrapper {
  --logo-size: clamp(#{fun.convert-px(68)}, 18vw, #{fun.convert-px(100)});

  display: grid;
  grid-template-columns:
    var(--logo-size)
    minmax(0, 1fr);
  grid-template-rows: repeat(2, max-content);
  align-items: center;
  column-gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-fg-inverted);
}

.logo {
  --branding-logo-animation: none;

  grid-column: 1;
  grid-row: 1 / -1;
  justify-self: center;
  display: flex;
  place-content: center;
  width: var(--logo-size);
  height: var(--logo-size);
  position: relative;
  border-radius: 50%;
  transition: all 0.6s linear 0s;
  transform-style: preserve-3d;
  animation: var(--branding-logo-animation);

  &__front,
  &__back {
    width: 100%;
    height: 100%;
    padding: clamp(fun.convert-px(2), 0.8vw, fun.convert-px(5));
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    background: var(--color-bg);
    border: fun.convert-px(2) solid var(--color-primary-dark);
    border-radius: 50%;
    transition: all 0.6s linear 0s;
  }

  &__front {
    box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
        var(--color-shadow-light),
      fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
        var(--color-shadow-light);
  }

  &__back {
    transform: rotateY(180deg);
  }

  img,
  svg {
    border-radius: 50%;
  }

  &:hover {
    transform: rotateY(180deg);
  }

  &:hover & {
    &__front {
      box-shadow: none;
    }

    &__back {
      box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
          var(--color-shadow-light),
        fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
          var(--color-shadow-light);
    }
  }
}

.name {
  --branding-name-animation: none;

  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-family-secondary);
  font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-2xl));
  font-weight: 500;
  letter-spacing: 0.01ex;
  position: relative;
  overflow: hidden;

  &::after {
    content: "|";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-bg);
    color: var(--color-primary-darker);
    font-weight: 400;
    visibility: hidden;
    transform: translateX(100%);
    transform-origin: right;
    animation: var(--branding-name-animation);
  }
}

.job {
  --branding-job-animation: none;

  grid-column: 2;
  grid-row: 2;
  width: max-content;
  margin: 0;
  color: var(--color-fg-light);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-lg);
  font-weight: 500;
  position: relative;
  overflow: hidden;

  &::after {
    content: "|";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-bg);
    color: var(--color-primary-darker);
    font-weight: 400;
    visibility: hidden;
    transform: translateX(100%);
    transform-origin: right;
    animation: var(--branding-job-animation);
  }
}

.link {
  background: linear-gradient(
      to top,
      var(--color-primary-light) fun.convert-px(5),
      transparent fun.convert-px(5)
    )
    left / 0 100% no-repeat;
  text-decoration: none;
  transition: all 0.6s ease-out 0s;

  &:hover,
  &:focus {
    background-size: 100% 100%;
  }

  &:focus {
    color: var(--color-primary-light);
  }

  &:active {
    background-size: 0 100%;
    color: var(--color-primary-dark);
  }
}