/* AlltagsPilot V12.2 — Premium Motion
   Deliberately restrained, cosmetic-only motion for the existing header.
   No JS, no extra requests, no changes to routing or stored data.
   Honor reduced motion, light mode and the user's device performance. */
.ap-header {
  position: relative;
  isolation: isolate;
  /* Do not clip focus rings of the search/profile controls. */
}
/* A small ambient mint/ice-blue light moves gently *behind* the header text. */
.ap-header::before {
  content: "";
  position: absolute;
  inset: 2px 0 2px;
  z-index: -1;
  pointer-events: none;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 38% 100% at 18% 50%, rgba(85, 220, 196, .095), transparent 77%),
    radial-gradient(ellipse 34% 110% at 85% 40%, rgba(112, 166, 235, .085), transparent 76%);
  opacity: .88;
  transform: translate3d(0,0,0);
  animation: ap122-ambient 15s ease-in-out infinite alternate;
}
/* A barely visible travel of light across the separator: never flashes. */
.ap-header::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -1px;
  left: 0;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141, 238, 215, .63), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-120%,0,0);
  animation: ap122-line 13s linear infinite;
}
.ap-header .brand, .ap-header .bar-right {
  position: relative;
  z-index: 1;
}
/* Brief, one-time entrance — no layout movement or jumping. */
.ap-header .brand {
  animation: ap122-entrance .72s cubic-bezier(.21,.73,.3,1) both;
}
.ap-header .bar-right {
  animation: ap122-entrance .76s .10s cubic-bezier(.21,.73,.3,1) both;
}
/* Logo floats only ~1px: subtle enough to remain visually stable. */
.ap-header .brand-mark {
  position: relative;
  transform: translate3d(0,0,0);
  animation: ap122-logo 7s ease-in-out 1s infinite;
  box-shadow: 0 7px 20px rgba(67, 160, 165, .16), 0 0 0 1px rgba(205, 255, 248, .08) inset;
}
.ap-header .brand-mark::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  right: 8px;
  top: 8px;
  border-radius: 50%;
  background: #f6fffe;
  opacity: .15;
  box-shadow: 0 0 6px rgba(246,255,254,.6);
  pointer-events: none;
  animation: ap122-sparkle 8s ease-in-out infinite;
}
/* Calm breathing border: same size and contrast throughout. */
.ap-header .badge {
  border-color: rgba(127, 205, 192, .33);
  animation: ap122-badge 6s ease-in-out 1s infinite;
}
.ap-header .beta-dot {
  box-shadow: 0 0 0 3px rgba(129, 228, 207, .09);
  animation: ap122-dot 5s ease-in-out infinite;
}
@keyframes ap122-ambient {
  0% { opacity: .58; transform: translate3d(-2%,0,0); }
  100% { opacity: .93; transform: translate3d(2%,0,0); }
}
@keyframes ap122-line {
  0%, 17% {opacity: 0; transform: translate3d(-120%,0,0)}
  25% {opacity: .34}
  55% {opacity: .34}
  69%, 100% {opacity: 0; transform: translate3d(310%,0,0)}
}
@keyframes ap122-entrance {
  from {opacity: 0; transform: translate3d(0,5px,0)}
  to {opacity: 1; transform: translate3d(0,0,0)}
}
@keyframes ap122-logo {
  0%, 100% {transform: translate3d(0,0,0)}
  50% {transform: translate3d(0,-1.5px,0)}
}
@keyframes ap122-sparkle {
  0%, 36%, 76%, 100% {opacity: .12}
  47% {opacity: .56}
}
@keyframes ap122-badge {
  0%, 100% {border-color: rgba(127, 205, 192, .33); box-shadow: 0 0 0 rgba(116,232,210,0)}
  50% {border-color: rgba(140, 230, 213, .58); box-shadow: 0 0 13px rgba(116,232,210,.075)}
}
@keyframes ap122-dot {
  0%, 100% {box-shadow: 0 0 0 3px rgba(129,228,207,.09)}
  50% {box-shadow: 0 0 0 5px rgba(129,228,207,.13)}
}
/* Theme compatibility: soft color treatment in light mode. */
html[data-v8-theme="light"] .ap-header::before {
  background: radial-gradient(ellipse 38% 100% at 20% 50%, rgba(49,158,143,.075), transparent 80%),
              radial-gradient(ellipse 32% 110% at 85% 40%, rgba(80,135,202,.055), transparent 78%);
}
html[data-v8-theme="light"] .ap-header .badge {border-color: rgba(63,141,129,.35)}
/* Always respect system motion preferences; leave a beautiful static header. */
@media (prefers-reduced-motion: reduce) {
  .ap-header::before, .ap-header::after,
  .ap-header .brand, .ap-header .bar-right,
  .ap-header .brand-mark, .ap-header .brand-mark::after,
  .ap-header .badge, .ap-header .beta-dot {
    animation: none !important;
    transform: none !important;
  }
  .ap-header::after {opacity: 0 !important}
  .ap-header .brand, .ap-header .bar-right {opacity: 1 !important}
}