/* Intro-Vorhang: Logo zoomt herein und spielt, dann erscheint die Seite */
.intro{display:none}
html.intro-running .intro{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:100;
  background:#26323a;
  transition:opacity 1.6s cubic-bezier(.4,0,.2,1);
}
.intro.is-leaving{opacity:0;pointer-events:none}
.intro-logo{
  width:min(72vw,760px);height:auto;
  transform:scale(.55);opacity:0;
  animation:intro-zoom 1.4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes intro-zoom{to{transform:scale(1);opacity:1}}
html.intro-running{overflow:hidden}
/* Header-Logo wartet, bis das Intro durch ist, und spielt dann seine eigene Animation */
html.intro-running .brand .lid,html.intro-running .brand .iris,html.intro-running .brand .g,html.intro-running .brand .tag{animation-play-state:paused}

  .intro .lid{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.16,1,.3,1) forwards}
  .intro .iris{transform-origin:100px 65px;transform:scale(0);animation:pop .6s cubic-bezier(.2,1.4,.3,1) .7s forwards,blink 5s ease-in-out 4s infinite}
  .intro .g{opacity:0;transform:translateY(14px);animation:rise .5s cubic-bezier(.16,1,.3,1) forwards}
  .intro .g.lime{transform:translateY(-14px)}
  .intro .g0{animation-delay:1.05s}.intro .g1{animation-delay:1.12s}.intro .g2{animation-delay:1.19s}.intro .g3{animation-delay:1.26s}.intro .g4{animation-delay:1.33s}.intro .g5{animation-delay:1.40s}
  .intro .g6{animation-delay:1.62s}.intro .g7{animation-delay:1.69s}.intro .g8{animation-delay:1.76s}.intro .g9{animation-delay:1.83s}.intro .g10{animation-delay:1.90s}
  .intro .tag{opacity:0;animation:fade .7s ease-out 2.25s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes pop{to{transform:scale(1)}}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  @keyframes fade{to{opacity:1}}
  @keyframes blink{0%,92%,100%{transform:scale(1)}96%{transform:scale(1,.12)}}
  @media (prefers-reduced-motion:reduce){.lid,.iris,.g,.intro .tag{animation:none;opacity:1;transform:none;stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){html.intro-running .intro{display:none}}