/* =====================================================================
   Nagy Works — Lade-Intro (Loader v8, nur Startseite)
   Quelle: nagyworks-loader-final-v8 (Betreiber-Vorgabe), angepasst:
   - Overflow-Sperre nur über body.nw-loading (JS-gesteuert, kein
     globales overflow:hidden)
   - Logo-Pfade auf assets/logo/nagyworks-loader-logo.png
   - Demo-Styles entfernt
   Verhalten (assets/js/loader.js): nur beim direkten Einstieg; interne
   Rücknavigation und prefers-reduced-motion überspringen den Loader.
   ===================================================================== */

body.nw-loading{overflow:hidden}

#nw-loader{
  position:fixed;inset:0;z-index:99999;
  display:grid;place-items:center;
  overflow:hidden;
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at 50% 42%,rgba(0,119,197,.18),transparent 34%),
    linear-gradient(180deg,#01060a 0%,#031018 58%,#010508 100%);
  transition:opacity .75s ease,visibility .75s ease;
}
#nw-loader.is-finished{opacity:0;visibility:hidden;pointer-events:none}

#nw-loader .grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(49,151,214,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(49,151,214,.10) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at center,#000 15%,transparent 80%);
}
#nw-loader .grid::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(56,177,255,.08),transparent);
  transform:translateX(-100%);
  animation:nwGridSweep 3.6s linear infinite;
}
@keyframes nwGridSweep{to{transform:translateX(100%)}}

#nw-loader .frame{
  position:absolute;inset:24px;border:1px solid rgba(64,167,230,.18);pointer-events:none
}
#nw-loader .frame::before,#nw-loader .frame::after{
  content:"";position:absolute;width:70px;height:70px;border-color:#2a9fe4;border-style:solid;opacity:.65
}
#nw-loader .frame::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
#nw-loader .frame::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}

#nw-loader .stage{
  position:relative;
  width:min(76vw,980px);
  aspect-ratio:1.38/1;
  perspective:1200px;
  transform-style:preserve-3d;
}
#nw-loader .ring{
  position:absolute;left:50%;top:48%;width:68%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(47,170,250,.18);border-radius:50%;
  animation:nwRing 18s linear infinite
}
#nw-loader .ring::before,#nw-loader .ring::after{
  content:"";position:absolute;border-radius:50%;border:1px dashed rgba(47,170,250,.2)
}
#nw-loader .ring::before{inset:12%}
#nw-loader .ring::after{inset:29%;border-style:solid}
@keyframes nwRing{to{transform:translate(-50%,-50%) rotate(360deg)}}

#nw-loader .logo-area{
  position:absolute;inset:7% 3% 11%;
  transform-style:preserve-3d;
}

#nw-loader .logo-tile{
  position:absolute;
  z-index:2;
  inset:-0.35%;
  background-image:url("../logo/nagyworks-loader-logo.png?v=20260728");
  background-image:image-set(
    url("../logo/nagyworks-loader-logo.webp?v=20260728") type("image/webp"),
    url("../logo/nagyworks-loader-logo.png?v=20260728") type("image/png")
  );
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  clip-path:inset(
    calc(var(--row) * 25% - 0.55%)
    calc((3 - var(--col)) * 25% - 0.55%)
    calc((3 - var(--row)) * 25% - 0.55%)
    calc(var(--col) * 25% - 0.55%)
  );
  opacity:0;
  transform:
    translate3d(var(--x),var(--y),var(--z))
    rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))
    scale(.9);
  /* 2026-07-28, Stufe 2 (Betreiber-Meldung: auf iOS ruckelte es weiter).
     Die 16 Kacheln animieren jetzt AUSSCHLIESSLICH transform + opacity —
     die beiden einzigen Eigenschaften, die der Compositor allein abwickelt.
     Kein filter mehr: Stufe 1 hatte drop-shadow entfernt und den Blur nur
     halbiert; iOS/Safari rastert bei animiertem filter aber weiterhin jede
     der 16 Ebenen pro Bild neu. Der Scharfstell-Effekt lebt in
     .seamless-logo weiter (blur 1.4px -> 0) — ein EINZELNES Element,
     dessen Filterkosten nicht mit 16 multipliziert werden.
     Rueckgaengig: git revert <dieser Commit>. */
  animation:
    nwAssemble 3.1s cubic-bezier(.16,1,.3,1) var(--delay) forwards,
    nwTileMerge .45s ease 3.95s forwards;
  will-change:transform,opacity;
  transform-origin:center;
  backface-visibility:hidden;
}
@keyframes nwAssemble{
  0%{
    opacity:0;
    transform:
      translate3d(var(--x),var(--y),var(--z))
      rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))
      scale(.86)
  }
  35%{opacity:.92}
  78%{
    transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1.008)
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1)
  }
}
@keyframes nwTileMerge{
  0%{opacity:1}
  100%{opacity:0}
}

#nw-loader .seamless-logo{
  position:absolute;
  z-index:3;
  inset:-0.35%;
  background:url("../logo/nagyworks-loader-logo.png?v=20260728") center/contain no-repeat;
  background-image:image-set(
    url("../logo/nagyworks-loader-logo.webp?v=20260728") type("image/webp"),
    url("../logo/nagyworks-loader-logo.png?v=20260728") type("image/png")
  );
  opacity:0;
  transform:scale(.996);
  filter:blur(1.4px) drop-shadow(0 0 10px rgba(53,174,255,.22));
  animation:nwSeamlessReveal .55s cubic-bezier(.16,1,.3,1) 3.88s forwards;
  pointer-events:none;
}
@keyframes nwSeamlessReveal{
  0%{opacity:0;filter:blur(1.4px) drop-shadow(0 0 10px rgba(53,174,255,.22));transform:scale(.996)}
  100%{opacity:1;filter:blur(0) drop-shadow(0 0 5px rgba(53,174,255,.14));transform:scale(1)}
}

#nw-loader .scan{
  position:absolute;
  z-index:4;left:3%;right:3%;height:2px;top:10%;
  opacity:0;
  background:linear-gradient(90deg,transparent,#35b6ff,#fff,#35b6ff,transparent);
  box-shadow:0 0 14px #2aaeff,0 0 34px rgba(41,169,255,.55);
  animation:nwScan 1.45s ease-in-out 4.18s forwards
}
@keyframes nwScan{
  0%{top:10%;opacity:0}
  12%,88%{opacity:1}
  100%{top:91%;opacity:0}
}

#nw-loader .status{
  position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);
  width:min(48vw,700px);min-width:300px
}
#nw-loader .status-row{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  gap:10px;
  margin-bottom:14px;
  text-align:center;
}
#nw-loader .status-label{
  width:100%;
  font-size:clamp(13px,1.25vw,18px);
  line-height:1.45;
  letter-spacing:.015em;
  text-transform:none;
  color:#e8f6ff;
  text-shadow:0 0 14px rgba(53,174,255,.32);
  opacity:0;
  transform:translateY(7px);
  animation:nwJokeFadeIn .85s cubic-bezier(.22,1,.36,1) .25s forwards;
}
@keyframes nwJokeFadeIn{
  to{opacity:1;transform:translateY(0)}
}
#nw-loader .percent{font:500 clamp(22px,2.2vw,34px)/1 monospace;color:#eef8ff}
#nw-loader .track{height:3px;background:rgba(170,210,236,.18);position:relative}
#nw-loader .bar{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,#ff2118,#ff433a 70%,white);
  box-shadow:0 0 12px #ff2118
}
#nw-loader .bar::after{
  content:"";position:absolute;right:-3px;top:-2px;width:7px;height:7px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px #fff,0 0 22px #ff2118
}

#nw-loader .skip{
  display:block;margin:18px auto 0;
  padding:8px 18px;
  background:none;
  border:1px solid rgba(170,210,236,.35);border-radius:4px;
  font:500 13px/1 Inter,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#e8f6ff;cursor:pointer
}
#nw-loader .skip:hover,
#nw-loader .skip:focus-visible{border-color:#ff2118;color:#fff}

@media(max-width:720px){
  #nw-loader .stage{width:96vw}
  #nw-loader .logo-area{inset:13% 1% 16%}
  #nw-loader .frame{inset:12px}
  #nw-loader .status{width:80vw;bottom:8vh}
}