/* =========================================================
   Bird Loader – natürlicher Gleitflug (Motion Path)
   ========================================================= */

/* Container für den Vogel */
.bird-loader-motion {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  display: block;
  z-index: 2;
  animation: bird-float 13s cubic-bezier(0.33, 0, 0.67, 1) infinite;
  will-change: transform;
  opacity: 1;
}

.bird-loader {
  width: 100%;
  height: 100%;
  display: block;
  filter: none;
}

/* =========================================================
   Bewegung entlang des Pfades
   ========================================================= */
@keyframes bird-float {
  /* Einfaden links unten */
  0% {
    transform: translate(-240px, 0px) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  /* mittelschnelles Aufsteigen */
  30% {
    transform: translate(-120px, -90px) rotate(-2deg);
    opacity: 1;
  }
  /* Stabilisieren und Schweben in der Mitte */
  45% {
    transform: translate(-10px, -75px) rotate(5deg);
    opacity: 1;
  }
  55% {
    transform: translate(10px, -80px) rotate(7deg);
    opacity: 1;
  }
  /* Kopfneigung nach unten */
  70% {
    transform: translate(30px, -70px) rotate(9deg);
    opacity: 1;
  }
  /* sanfter Abstieg */
  80% {
    transform: translate(80px, -10px) rotate(6deg);
    opacity: 1;
  }
  /* Schweben ohne weiter zu fallen */
  100% {
    transform: translate(240px, -30px) rotate(2deg);
    opacity: 0;
  }
}

/* =========================================================
   Neigung des Vogels (Kopf nach unten beim Sinkflug)
   ========================================================= */

/* =========================================================
   Optional: Overlay (falls genutzt)
   ========================================================= */
.dashboard-overlay {
  position: fixed;
  inset: calc(var(--dashboard-overlay-top, 0px) - 1px) 0 var(--dashboard-overlay-bottom, 0px) 0;
  z-index: 3000;
  background-color: #E8F1F3;
  background-image:
    /* Nahtloser Übergang zum Header (shearia-primary #9ED6D0) – solid + Fade */
    linear-gradient(180deg, rgba(158,214,208,1.00) 0%, rgba(158,214,208,1.00) 4%, rgba(158,214,208,0.00) 30%),
    /* Sanfter Übergang zum Footer (schwarz) – weich ausgeleitet */
    linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 10%, rgba(0,0,0,0.08) 20%, rgba(0,0,0,0.00) 32%),
    /* Sonne – warmer Kern – Horizont bei 94% */
    radial-gradient(52% 38% at 50% 94%, rgba(232,218,205,1.00) 0%, rgba(220,200,186,0.92) 22%, rgba(168,110,140,0.62) 52%, transparent 78%),
    /* Sonne – weicher rosa Halo */
    radial-gradient(84% 58% at 50% 94%, rgba(168,110,140,0.60) 0%, rgba(168,110,140,0.28) 50%, transparent 74%),
    /* Sonne – atmosphärischer Schein */
    radial-gradient(120% 82% at 50% 94%, rgba(142,85,114,0.28) 0%, rgba(142,85,114,0.08) 52%, transparent 72%),
    /* Himmels-Gradient */
    linear-gradient(
      180deg,
      rgba(167, 187, 194, 0.20) 28%,
      rgba(167, 187, 194, 0.50) 40%,
      rgba(216, 207, 196, 0.60) 55%,
      rgba(216, 207, 196, 1.00) 70%,
      rgba(168, 110, 140, 0.40) 82%,
      rgba(168, 110, 140, 0.18) 100%
    );
  backdrop-filter: blur(6px) saturate(1.15);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.03);
  animation: dawn-brighten 8s ease-out forwards;
  display: block;
}

.dashboard-overlay.is-hidden {
  display: none;
}

.dashboard-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12%;
  right: -12%;
  pointer-events: none;
  opacity: 0.055;
  z-index: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(48, 68, 74, 0.28) 0px,
      rgba(48, 68, 74, 0.28) 11px,
      rgba(48, 68, 74, 0) 36px,
      rgba(48, 68, 74, 0) 110px
    );
  filter: blur(14px);
  mix-blend-mode: soft-light;
  animation: wind-stream 5.5s linear infinite, wind-clarify 14s ease-in-out infinite;
}

.dashboard-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12%;
  right: -12%;
  pointer-events: none;
  opacity: 0.92;
  z-index: 0;
  background:
    /* === Wolkengruppe 1 – links === */
    radial-gradient(340px 105px at 14% 32%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.65) 36%, rgba(255,255,255,0.14) 60%, transparent 76%),
    radial-gradient(255px  78px at 22% 24%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.46) 40%, transparent 65%),
    radial-gradient(190px  62px at  6% 42%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.30) 42%, transparent 65%),
    /* === Rosa Wolke – Mitte-links === */
    radial-gradient(300px  88px at 35% 40%, rgba(255,248,252,0.94) 0%, rgba(255,240,248,0.56) 38%, rgba(255,230,242,0.12) 60%, transparent 76%),
    radial-gradient(225px  68px at 46% 32%, rgba(255,248,252,0.84) 0%, rgba(255,240,248,0.38) 40%, transparent 64%),
    /* === Wolkengruppe 2 – rechts === */
    radial-gradient(380px 110px at 79% 32%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.62) 36%, rgba(255,255,255,0.12) 60%, transparent 76%),
    radial-gradient(275px  84px at 90% 24%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.44) 40%, transparent 64%),
    radial-gradient(210px  68px at 68% 42%, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.26) 42%, transparent 64%);
  filter: blur(5px);
  mix-blend-mode: normal;
  animation: cloud-drift 12s ease-in-out infinite, cloud-clarify 14s ease-in-out infinite;
}

.bird-loader-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.dashboard-overlay-text {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate(-50%, 140px);
  color: var(--shearia-secondary);
  font-size: var(--shearia-font-size-h2);
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  opacity: 1;

}

.dashboard-overlay-text::after {
  content: ' ...';
  display: inline-block;
  width: 1.6em;
  text-align: left;
  overflow: hidden;
  vertical-align: bottom;
  animation: loading-dots 2.4s steps(1, end) infinite;
}

@keyframes loading-dots {
  0%,  24% { content: ''; }
  25%, 49% { content: ' .'; }
  50%, 74% { content: ' ..'; }
  75%, 99% { content: ' ...'; }
}

/* =========================================================
   Sanfte Hügel – Silhouette am Horizont, Parallax mit Vogel
   ========================================================= */
.hills-silhouette {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 20%;
  min-height: 90px;
  max-height: 175px;
  pointer-events: none;
  z-index: 1;
  animation: hill-parallax 13s cubic-bezier(0.33, 0, 0.67, 1) infinite;
}

.hills-silhouette svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Parallax: Hügel folgen dem Vogel bei ~10% seiner Horizontalbewegung */
@keyframes hill-parallax {
  0%   { transform: translateX(-24px); }
  30%  { transform: translateX(-12px); }
  45%  { transform: translateX(-2px);  }
  55%  { transform: translateX(2px);   }
  70%  { transform: translateX(4px);   }
  80%  { transform: translateX(10px);  }
  100% { transform: translateX(24px);  }
}

/* =========================================================
   Vordergrundwolke – zieht langsam über den Vogel
   ========================================================= */
.cloud-foreground {
  position: absolute;
  /* Vogel-Peak liegt bei ~35–42% von oben → Wolke greift dort hinein */
  top: 28%;
  left: 0;
  width: 100%;
  height: 180px;
  pointer-events: none;
  z-index: 4;   /* über Vogel (z-index: 2), unter Text (z-index: 6) */
  background:
    /* Dichter Kern – rechts schwerer, zieht von rechts nach links */
    radial-gradient(50% 95px at 60% 52%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.58) 38%, rgba(255,255,255,0.12) 62%, transparent 78%),
    radial-gradient(42% 75px at 38% 36%, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.46) 40%, rgba(255,255,255,0.08) 64%, transparent 78%),
    radial-gradient(36% 60px at 76% 68%, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.34) 42%, transparent 70%),
    radial-gradient(30% 52px at 18% 60%, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.24) 44%, transparent 68%);
  filter: blur(13px);
  animation: cloud-fg-drift 28s linear infinite;
}

@keyframes cloud-fg-drift {
  0%   { transform: translateX(110%); opacity: 0; }
  8%   { opacity: 0.90; }
  85%  { opacity: 0.90; }
  100% { transform: translateX(-110%); opacity: 0; }
}

/* =========================================================
   Aufklaren – Overlay startet dunkler, wird hell (Sonnenaufgang)
   ========================================================= */
@keyframes dawn-brighten {
  0%   { filter: brightness(0.54) saturate(0.70); }
  30%  { filter: brightness(0.74) saturate(0.88); }
  70%  { filter: brightness(0.92) saturate(1.05); }
  100% { filter: brightness(1.00) saturate(1.15); }
}

@keyframes wind-drift {
  0% {
    transform: translate(18%, 0%) rotate(0.6deg);
    background-position: 80% 45%, 95% 60%, 70% 55%, 60% 50%, 75% 40%, 55% 55%;
  }
  50% {
    transform: translate(0%, 2%) rotate(-0.4deg);
    background-position: 55% 50%, 70% 60%, 45% 55%, 35% 50%, 55% 45%, 40% 55%;
  }
  100% {
    transform: translate(-18%, 0%) rotate(0.6deg);
    background-position: 20% 45%, 35% 60%, 15% 55%, 5% 50%, 25% 40%, 10% 55%;
  }
}

@keyframes wind-stream {
  0% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(-20%);
  }
}

@keyframes wind-clarify {
  0% {
    opacity: 0.055;
  }
  40% {
    opacity: 0.07;
  }
  70% {
    opacity: 0.045;
  }
  100% {
    opacity: 0.055;
  }
}

@keyframes cloud-drift {
  0% {
    transform: translateX(6%);
  }
  50% {
    transform: translateX(-4%);
  }
  100% {
    transform: translateX(6%);
  }
}

@keyframes cloud-clarify {
  0% {
    opacity: 0.88;
  }
  40% {
    opacity: 0.93;
  }
  70% {
    opacity: 0.83;
  }
  100% {
    opacity: 0.88;
  }
}