/* Fokus Mühendislik — loading animation (CSS only, no JS)
   The O is rebuilt from four divs so it can spin on its own centre.
   Tune with the custom properties on .fokus-loader. */

.fokus-loader {
  --fokus-width: 800px;        /* wordmark width; everything scales from it */
  --fokus-accent: #9d8fc9;     /* purple bracket */
  --fokus-ink: #ffffff;        /* white bracket */
  --fokus-cycle: 2.6s;         /* one full cycle: two turns + short hold */
  --fokus-gap: 8.25%;          /* space under FOKUS, as % of wordmark width */

  position: relative;
  width: var(--fokus-width);
  max-width: 100%;
  user-select: none;
}

.fokus-loader__mark {
  position: relative;
  width: 100%;
  aspect-ratio: 804 / 166;
}

.fokus-loader__mark img {
  display: block;
  width: 100%;
  height: auto;
}

/* the O: a tilted rectangle ring, purple top-left bracket + white bottom-right */
.fokus-loader__o {
  position: absolute;
  left: 20.81%;
  top: 11.17%;
  width: 18.06%;
  height: 73.55%;
  animation: fokus-spin var(--fokus-cycle) infinite;
  will-change: transform;
}

.fokus-loader__o span {
  position: absolute;
  display: block;
}

.fokus-loader__o span:nth-child(1) {           /* top arm */
  left: 0; top: 0; width: 83.47%; height: 19.66%;
  background: var(--fokus-accent);
}
.fokus-loader__o span:nth-child(2) {           /* left arm */
  left: 0; top: 0; width: 16.53%; height: 80.34%;
  background: var(--fokus-accent);
}
.fokus-loader__o span:nth-child(3) {           /* right arm */
  left: 83.47%; top: 19.66%; width: 16.53%; height: 80.34%;
  background: var(--fokus-ink);
}
.fokus-loader__o span:nth-child(4) {           /* bottom arm */
  left: 16.53%; top: 80.34%; width: 83.47%; height: 19.66%;
  background: var(--fokus-ink);
}

.fokus-loader__subline {
  display: block;
  width: 95.77%;
  height: auto;
  margin: var(--fokus-gap) auto 0;
}

/* two turns: slow acceleration in, deceleration out, then a short hold */
@keyframes fokus-spin {
  0%   { transform: rotate(-20.1deg); animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }
  80%  { transform: rotate(699.9deg); }
  100% { transform: rotate(699.9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fokus-loader__o { animation: none; transform: rotate(-20.1deg); }
}

/* boot-loader integration: fixed full-screen host, same navy as the sprinkler
   intro's own background (#0c1720) so removing this element never shows a
   seam — only the mark itself needs to animate away. */
#boot-loader { background: #0c1720; }
#boot-loader .fokus-loader {
  transition: opacity .45s cubic-bezier(.33,0,.5,1), transform .45s cubic-bezier(.33,0,.5,1);
}
#boot-loader.is-leaving .fokus-loader {
  opacity: 0;
  transform: scale(1.16);
}
@media (prefers-reduced-motion: reduce) {
  #boot-loader .fokus-loader { transition: opacity .3s linear; transform: none !important; }
}