<template>
  <header class="welcome">
    <div class="welcome__image">
      <div class="welcome__image-wrapper">
        <picture>
          <source
            srcset="@/assets/viktor-avatar.png?w=400;800&avif&quality=75&srcset"
          />
          <source
            srcset="
              @/assets/viktor-avatar.png?w=400;800&webp&quality=100&srcset
            "
          />
          <img
            class="welcome__image-img"
            src="@/assets/viktor-avatar.png?w=400&png"
            alt="Viktor Avatar"
          />
        </picture>
      </div>
    </div>

    <div class="welcome__heading">
      <h1 class="welcome__main">
        <slot name="main"></slot>
      </h1>
      <h2 class="welcome__sub">
        <slot name="sub"></slot>
      </h2>
    </div>
  </header>
</template>

<style lang="scss">
.welcome {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

  max-width: 50rem;
  margin: 2rem auto;
  padding: var(--textblock-padding);
  transition: 0.2s ease-out;

  &:hover &__image-wrapper {
    @media (min-width: 50em) {
      transform: scale(0.84) translateX(15%) rotateZ(0);
    }
  }

  &:hover &__image-img {
    @media (min-width: 50em) {
      transform: scale(1.2) rotateZ(0);
    }
  }

  &:hover &__heading {
    @media (min-width: 50em) {
      margin: 4.75rem 0 0 2rem;
    }
  }

  &__image {
    flex: 0 0 15rem;
  }

  &__heading {
    flex: 1 0 0;
    text-align: center;
    line-height: 1.6;
    margin: 2rem 0 0 0;
    transition: 0.2s ease-out;

    @media (min-width: 50em) {
      text-align: left;
      margin: 2rem 0 0 4rem;
    }
  }

  &__image-wrapper {
    background-color: var(--theme-c-desert-sand-translucent);
    border: 0.5rem solid var(--theme-c-walnut-brown);
    border-radius: 2rem;
    transform: scale(0.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
    transform-origin: 0 100%;
    overflow: hidden;
    transition: transform 0.2s ease-out;
  }

  &__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.2) rotateZ(calc(11 * 1deg));
    transition: transform 0.2s ease-out;
  }

  &__main {
    margin: 1rem 0;
    line-height: 1;
  }
}
</style>
