/* ==========================================================================
   _animation.css - canonical Animation-SVG component styles
   Split from _components.css in phase 2 (see scripts/split-components.mjs).
   Loaded once in _document.tsx after base/layout files and before
   page-specific CSS.
   ========================================================================== */

.svgAnimationBox span, .svgAnimationHeroBox span {
  position: absolute;
  white-space: nowrap;
  top: 0;
  left: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  color: deeppink;
  font-family: monospace;
  font-size: 3rem;
  transform: translate(-50%, -100%);
}

.triggered.svgAnimationBox span, .triggered.svgAnimationHeroBox span {
  color: blue;
}

.animate #Umbrella-Line {
  animation: strokeDashoffsetZero 4s ease both;
}

.animate #Umbrella #Fill-Left {
  animation: shadow 0.5s 1.5s ease both;
}

.animate #Umbrella #Fill-Right {
  animation: shadow 0.5s 1.5s ease both;
}

.animate #Umbrella-Shadow {
  animation: shadow 0.4s ease both;
}

.animate #Umbrella #Rain {
  opacity: 1;
}

.animate #Umbrella #Rain path {
  animation: animateUmbrellaRain 1.25s linear infinite, fadeInUmbrellaRain 1.25s infinite ease;
}

.animate #Umbrella #Rain path:nth-child(odd) {
  animation: animateUmbrellaRain 1.25s 0.625s linear infinite, fadeInUmbrellaRain 1.25s 0.625s infinite ease;
}

.animate #Umbrella-Inside-Line {
  animation: drawUmbrellaLine 0.3s 1.5s ease forwards;
}

.SkylineSVGBox {
  position: relative;
  width: 1000px;
  --scrollProgress: 0%;
}

@media (min-width: 768px) {
  .SkylineSVGBox {
  width: 1500px;
  }
}

@media (min-width: 1024px) {
  .SkylineSVGBox {
  width: 2000px;
  }
}

.SkylineSVGBox svg {
  display: block;
  width: 100%;
  animation: popUpSkylineScale 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform: translateX(0%) scale(0.75);
  transform-origin: bottom center;
}

.SkylineSVGBox g.soren, .SkylineSVGBox #Export > g {
  transform-box: fill-box;
  transform-origin: bottom center;
  transition: 0.3s ease-out;
  transform: translateY(var(--scrollProgress));
  animation: popUpSkyline 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.loadin {
  transform: translate3d(0%, 25%, 0) scale(0.5);
}

[grid-large-cards] .loadin {
  transform: none;
  opacity: 0;
}