/* ================================================================
   NIK BEHRENDT — Logo Loading Animation (Pre-Loader)
   Reines CSS, scoped unter .nik-loader. Loop-Länge: 7.5s.
   Wird per JS (js/loader.js) bzw. main.js ausgeblendet (.is-done / .hidden),
   sobald alle Assets geladen sind.
   ================================================================ */

.nik-loader{
  --bg:#f4f3f1;
  --ink:#111111;
  --line:rgba(16,16,16,.85);
  --band1:rgba(0,0,0,.045);
  --band2:rgba(0,0,0,.06);
  --glow:rgba(0,0,0,.10);
}
.nik-loader[data-theme="dark"]{
  --bg:#000000;
  --ink:#ffffff;
  --line:rgba(255,255,255,.92);
  --band1:rgba(255,255,255,.045);
  --band2:rgba(255,255,255,.07);
  --glow:rgba(255,255,255,.14);
}

/* full-screen overlay */
.nik-loader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--bg);
  z-index:99999;
}

/* parallax slabs */
.nik-loader .band{
  position:absolute;
  top:-30vh;
  height:160vh;
  transform:skewX(-30deg);
  will-change:transform;
}
.nik-loader .band1{ left:2vw;  width:46vw; background:var(--band1); filter:blur(44px); animation:nik-driftA 19s ease-in-out infinite; }
.nik-loader .band2{ left:60vw; width:22vw; background:var(--band2); filter:blur(36px); animation:nik-driftB 15s ease-in-out infinite; }

/* logo — clip wipe + float */
.nik-loader .logoClip{
  width:60vw;
  max-width:1180px;
  will-change:clip-path, transform, filter;
  animation:nik-reveal 7.5s linear infinite;
}
.nik-loader .logoFloat{ animation:nik-float 7.5s ease-in-out infinite; will-change:transform; }
.nik-loader svg{ display:block; width:100%; height:auto; }
.nik-loader svg .cls-1{ fill:var(--ink); }

/* the slant itself, sweeping across as a wiper */
.nik-loader .wiper{
  position:absolute;
  top:-30vh;
  left:0;
  width:4px;
  height:160vh;
  background:var(--line);
  box-shadow:0 0 70px 10px var(--glow);
  will-change:transform, opacity;
}
.nik-loader .wiper-in{  animation:nik-wipeIn  7.5s linear infinite; }
.nik-loader .wiper-out{ animation:nik-wipeOut 7.5s linear infinite; }

/* hide cleanly once the page has loaded */
.nik-loader.is-done{
  opacity:0;
  visibility:hidden;
  transition:opacity .6s ease, visibility 0s .6s;
}

/* lock scroll while the loader is visible */
html.nik-loading, html.nik-loading body{ overflow:hidden !important; }

@keyframes nik-reveal{
  0%{
    clip-path:polygon(-44.2% 0%, -44.2% 0%, -55.8% 100%, -55.8% 100%);
    transform:scale(1.05);
    filter:blur(10px);
    animation-timing-function:cubic-bezier(.4,0,.15,1);
  }
  26%{
    clip-path:polygon(-44.2% 0%, 155.8% 0%, 144.2% 100%, -55.8% 100%);
    transform:scale(1);
    filter:blur(0px);
    animation-timing-function:linear;
  }
  72%{
    clip-path:polygon(-44.2% 0%, 155.8% 0%, 144.2% 100%, -55.8% 100%);
    transform:scale(1);
    filter:blur(0px);
    animation-timing-function:cubic-bezier(.66,0,.34,1);
  }
  94%, 100%{
    clip-path:polygon(155.8% 0%, 155.8% 0%, 144.2% 100%, 144.2% 100%);
    transform:scale(1);
    filter:blur(0px);
  }
}

@keyframes nik-float{
  0%{   transform:translate3d(0,0,0); }
  25%{  transform:translate3d(-0.45%,-1.25%,0); }
  55%{  transform:translate3d(0.4%,0.35%,0); }
  80%{  transform:translate3d(0.6%,-0.85%,0); }
  100%{ transform:translate3d(0,0,0); }
}

@keyframes nik-driftA{
  0%{   transform:skewX(-30deg) translate(-2.6%,1.2%); }
  50%{  transform:skewX(-30deg) translate(2.6%,-1.2%); }
  100%{ transform:skewX(-30deg) translate(-2.6%,1.2%); }
}
@keyframes nik-driftB{
  0%{   transform:skewX(-30deg) translate(3%,-0.8%); }
  50%{  transform:skewX(-30deg) translate(-3%,0.8%); }
  100%{ transform:skewX(-30deg) translate(3%,-0.8%); }
}

@keyframes nik-wipeIn{
  0%{   transform:translateX(-10vw) skewX(-30deg); opacity:0; animation-timing-function:cubic-bezier(.4,0,.15,1); }
  3%{   opacity:.8; }
  22%{  opacity:.8; }
  26%, 100%{ transform:translateX(110vw) skewX(-30deg); opacity:0; }
}
@keyframes nik-wipeOut{
  0%, 72%{ transform:translateX(-10vw) skewX(-30deg); opacity:0; animation-timing-function:cubic-bezier(.66,0,.34,1); }
  75%{  opacity:.8; }
  90%{  opacity:.8; }
  94%, 100%{ transform:translateX(110vw) skewX(-30deg); opacity:0; }
}

/* respect reduced-motion: show the logo statically */
@media (prefers-reduced-motion: reduce){
  .nik-loader .logoClip,
  .nik-loader .logoFloat,
  .nik-loader .band,
  .nik-loader .wiper{ animation:none !important; }
  .nik-loader .logoClip{ clip-path:none; transform:none; filter:none; }
  .nik-loader .wiper{ display:none; }
}