/* =============================================================================
   Intro-Animation — nur Ausgangszustände, Ablauf in intro.js.
   ========================================================================== */

@scope (.intro) {
  :scope {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-green);
    background-image:
      linear-gradient(rgb(95 109 84 / 90%), rgb(95 109 84 / 90%)),
      url('../../images/logo_wasserzeichen_ivory_intro.svg');
    background-repeat: repeat, no-repeat;
    background-position:
      0 0,
      50%;
    background-size:
      auto,
      auto 120%;
    background-attachment: scroll, scroll;
    pointer-events: none;
  }

  .wrapper-inner {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  .intro-text__wrapper {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 60vw;
    color: var(--color-ivory-light);
    font-size: 3vw;
    line-height: 1;
    opacity: 0;
  }

  .intro-line {
    position: relative;
    display: block;
    text-align: start;
    opacity: 0;
    transform: translateY(25%);
  }

  .silke-wrap-outer {
    position: absolute;
    opacity: 0;
  }

  .silke-wrap-inner {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 3vw;
    line-height: 1;
    opacity: 0;
    transform: translateY(25%);
  }

  .key-letter {
    display: inline-block;
    max-width: 2ch;
    overflow: hidden;
  }

  .remove-letter {
    display: inline-block;
    max-width: 1ch;
    overflow: hidden;
  }

  @media (width <= 767px) {
    .intro-text__wrapper,
    .silke-wrap-inner {
      font-size: 6vw;
    }
  }

  @media (width <= 479px) {
    .intro-text__wrapper,
    .silke-wrap-inner {
      font-size: 8vw;
    }
  }
}