/* Logo-Loader „Atelier Klitzeklein" (/assets/logo-loader/) — gemeinsame Quelle für den Buchungs-Wizard
   (client/index.html, #initial-loader) und die Galerie (gallery-client LoadingScreen).
   Aus dem Claude-Design-Export „Logo Loader" übernommen: Modus „Einmal zeichnen, dann
   Welle", Tempo 1×, Größe 1,2×. Die Ebenen sind 287×192-PNGs, die exakt übereinander
   liegen; Punkt- und Aufhänger-Werte stehen nur hier, das Markup ist in beiden Apps gleich. */

/* @property macht die Custom Properties animierbar — ohne sie springen die Masken
   (älteres Safari/Firefox) statt zu zeichnen; das Logo steht am Ende trotzdem. */
@property --ak-sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ak-wipe { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes ak-draw { from { --ak-sweep: 0deg; } to { --ak-sweep: 222deg; } }
@keyframes ak-write { from { --ak-wipe: 2%; } to { --ak-wipe: 108%; } }
@keyframes ak-write-by { from { --ak-wipe: 56%; } to { --ak-wipe: 106%; } }
@keyframes ak-dot-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ak-dot-wave { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.9); } }
@keyframes ak-drop { 0% { opacity: 0; transform: translateY(-12px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes ak-swing { 0%, 100% { transform: rotate(var(--sw)); } 50% { transform: rotate(calc(var(--sw) * -1)); } }
@keyframes ak-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ak-caption { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.ak-loader { position: relative; width: 344.4px; height: 230.4px; flex-shrink: 0; }
.ak-loader__stage { position: absolute; left: 0; top: 0; width: 287px; height: 192px; transform: scale(1.2); transform-origin: 0 0; }
/* max-width/height überschreiben die img-Vorgaben aus Tailwind-Preflight und dem Wizard. */
.ak-loader__stage img,
.ak-loader__hanger {
  position: absolute; left: 0; top: 0; width: 287px; height: 192px;
  max-width: none; max-height: none; margin: 0; border: 0;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}

.ak-loader__arc {
  -webkit-mask-image: conic-gradient(from 250deg at 136px 100px, #000 var(--ak-sweep), transparent calc(var(--ak-sweep) + 1deg));
  mask-image: conic-gradient(from 250deg at 136px 100px, #000 var(--ak-sweep), transparent calc(var(--ak-sweep) + 1deg));
  animation: ak-draw 1s cubic-bezier(.5, 0, .2, 1) both;
}
.ak-loader__arc--mauve { animation-delay: .12s; }
.ak-loader__arc--inner { animation-delay: .24s; }

.ak-loader__dot {
  position: absolute; width: 3.2px; height: 3.2px; border-radius: 50%; background: #5C4136;
  animation: ak-dot-in .3s ease both, ak-dot-wave 1.8s ease-in-out infinite;
}
.ak-loader__dot:nth-of-type(1){left:67.2px;top:86.8px;opacity:0.22;animation-delay:0.1s,2.4s}
.ak-loader__dot:nth-of-type(2){left:68.9px;top:80.3px;opacity:0.43;animation-delay:0.13s,2.48s}
.ak-loader__dot:nth-of-type(3){left:71.2px;top:73.3px;opacity:0.67;animation-delay:0.17s,2.55s}
.ak-loader__dot:nth-of-type(4){left:74.4px;top:67.3px;opacity:0.83;animation-delay:0.2s,2.62s}
.ak-loader__dot:nth-of-type(5){left:78.6px;top:61px;opacity:0.93;animation-delay:0.24s,2.7s}
.ak-loader__dot:nth-of-type(6){left:82.9px;top:55.6px;opacity:0.96;animation-delay:0.27s,2.77s}
.ak-loader__dot:nth-of-type(7){left:88.2px;top:50.5px;opacity:0.98;animation-delay:0.31s,2.85s}
.ak-loader__dot:nth-of-type(8){left:94.1px;top:45.3px;opacity:0.99;animation-delay:0.34s,2.92s}
.ak-loader__dot:nth-of-type(9){left:101.4px;top:40.9px;opacity:0.99;animation-delay:0.38s,3s}
.ak-loader__dot:nth-of-type(10){left:109px;top:37.1px;opacity:1;animation-delay:0.41s,3.07s}
.ak-loader__dot:nth-of-type(11){left:117.3px;top:34.1px;opacity:1;animation-delay:0.45s,3.15s}
.ak-loader__dot:nth-of-type(12){left:126.4px;top:32.3px;opacity:1;animation-delay:0.48s,3.23s}
.ak-loader__dot:nth-of-type(13){left:136.8px;top:31.2px;opacity:1;animation-delay:0.52s,3.3s}
.ak-loader__dot:nth-of-type(14){left:146px;top:31.6px;opacity:1;animation-delay:0.55s,3.38s}
.ak-loader__dot:nth-of-type(15){left:157.6px;top:33.1px;opacity:1;animation-delay:0.59s,3.45s}
.ak-loader__dot:nth-of-type(16){left:166px;top:35.9px;opacity:1;animation-delay:0.62s,3.52s}
.ak-loader__dot:nth-of-type(17){left:174.4px;top:40.2px;opacity:1;animation-delay:0.66s,3.6s}
.ak-loader__dot:nth-of-type(18){left:183px;top:44.7px;opacity:0.99;animation-delay:0.69s,3.67s}
.ak-loader__dot:nth-of-type(19){left:188.2px;top:49.6px;opacity:0.99;animation-delay:0.73s,3.75s}
.ak-loader__dot:nth-of-type(20){left:192.6px;top:55px;opacity:0.96;animation-delay:0.76s,3.83s}
.ak-loader__dot:nth-of-type(21){left:196.3px;top:61.4px;opacity:0.93;animation-delay:0.8s,3.9s}
.ak-loader__dot:nth-of-type(22){left:198.8px;top:68.4px;opacity:0.78;animation-delay:0.83s,3.98s}
.ak-loader__dot:nth-of-type(23){left:200.7px;top:75.4px;opacity:0.52;animation-delay:0.87s,4.05s}
.ak-loader__dot:nth-of-type(24){left:201.8px;top:82px;opacity:0.26;animation-delay:0.9s,4.12s}

.ak-loader__hanger { animation: ak-drop .7s cubic-bezier(.3, 1.5, .5, 1) both; }
.ak-loader__hanger img { animation: ak-swing 3s ease-in-out infinite; }
.ak-loader__hanger:nth-of-type(1){animation-delay:1s}
.ak-loader__hanger:nth-of-type(1) img{transform-origin:61px 111px;--sw:4deg;animation-duration:3.4s;animation-delay:-0.4s}
.ak-loader__hanger:nth-of-type(2){animation-delay:1.1s}
.ak-loader__hanger:nth-of-type(2) img{transform-origin:71px 111px;--sw:5deg;animation-duration:2.8s;animation-delay:-1.3s}
.ak-loader__hanger:nth-of-type(3){animation-delay:1.2s}
.ak-loader__hanger:nth-of-type(3) img{transform-origin:81px 111px;--sw:3.5deg;animation-duration:3.8s;animation-delay:-2.1s}
.ak-loader__hanger:nth-of-type(4){animation-delay:1.3s}
.ak-loader__hanger:nth-of-type(4) img{transform-origin:90.5px 111px;--sw:5.5deg;animation-duration:3.1s;animation-delay:-0.9s}

.ak-loader__text,
.ak-loader__by {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--ak-wipe) - 8%), transparent var(--ak-wipe));
  mask-image: linear-gradient(90deg, #000 calc(var(--ak-wipe) - 8%), transparent var(--ak-wipe));
}
.ak-loader__text { animation: ak-write 1.2s cubic-bezier(.45, .05, .35, 1) .75s both; }
.ak-loader__by { animation: ak-write-by .7s ease-out 1.75s both; }

.ak-loader-caption {
  margin: 0; font-family: Roboto, sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: #736558;
  animation: ak-fade .6s ease 1.9s both, ak-caption 1.8s ease-in-out 2.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ak-loader *, .ak-loader-caption {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  }
}