/* =========================================================
   KRBN — animacja wejścia: logo składa się od zera
   0.0s  punkt → linie konstrukcyjne (krzyżyk, ramka)
   0.75s obrysy brył rysują się, w wierzchołkach zapalają się węzły
   1.45s bryły „wskakują” na miejsce (zielona ostatnia + fala)
   2.0s  konstrukcja gaśnie → 2.45s (JS) logo leci do menu, zasłona się rozsuwa
   Czysto CSS (działa jeszcze przed JS); JS tylko odpala wyjście i przekazuje pałeczkę do hero.
   ========================================================= */
.intro{display:none}
.has-intro .intro{
  display:grid;place-items:center;position:fixed;inset:0;z-index:300;overflow:hidden;
  --isz:min(50vmin,480px);
  animation:intro-failsafe 0s linear 8s forwards; /* zabezpieczenie, gdyby JS nie wystartował */
}
@keyframes intro-failsafe{to{visibility:hidden;pointer-events:none}}
html.intro-lock{overflow:hidden}
.has-intro .nav{transform:none}

/* zasłona: dwie połówki rozsuwane po szwie (na wysokości krzyżyka) */
.intro__half{position:absolute;left:0;right:0;height:50.3%;background:#080808;will-change:transform;
  transition:transform .95s cubic-bezier(.7,0,.2,1) .05s}
.intro__half--t{top:0}
.intro__half--b{bottom:0}
.intro.is-out .intro__half--t{transform:translateY(-101%)}
.intro.is-out .intro__half--b{transform:translateY(101%)}

/* zero: punkt, z którego wszystko wyrasta */
.intro__dot{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--signal);
  opacity:0;transform:scale(0);animation:i-dot 1s cubic-bezier(.22,.7,.1,1) .05s forwards}
@keyframes i-dot{0%{opacity:0;transform:scale(0)}22%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(.1)}}

/* krzyżyk konstrukcyjny na cały ekran */
.intro__hair{position:absolute;background:rgba(243,241,235,.16)}
.intro__hair--h{left:0;right:0;top:50%;height:1px;transform:scaleX(0);animation:i-hx .8s cubic-bezier(.7,0,.2,1) .15s forwards}
.intro__hair--v{top:0;bottom:0;left:50%;width:1px;transform:scaleY(0);animation:i-hy .8s cubic-bezier(.7,0,.2,1) .25s forwards}
@keyframes i-hx{to{transform:scaleX(1)}}
@keyframes i-hy{to{transform:scaleY(1)}}
.intro.is-out .intro__hair{opacity:0;transition:opacity .3s}

/* scena z logo */
.intro__stage{position:relative;width:var(--isz);aspect-ratio:576/560;overflow:visible;will-change:transform;
  transform:translate(0,0) scale(1);transform-origin:50% 50%}
.intro.is-out .intro__stage{transform:translate(var(--fx,0),var(--fy,0)) scale(var(--fs,.1));transition:transform 1s cubic-bezier(.7,0,.2,1)}

.intro .cons{animation:i-cons .4s ease 2s forwards}
@keyframes i-cons{to{opacity:0}}

.intro .bb,.intro .ol{fill:none;stroke-dasharray:1;stroke-dashoffset:1;stroke-linejoin:miter}
.intro .bb{stroke:rgba(243,241,235,.32);stroke-width:1.3;animation:i-draw 1.05s cubic-bezier(.7,0,.2,1) .45s forwards}
.intro .ol{stroke:#F3F1EB;stroke-width:2.1;animation:i-draw .6s cubic-bezier(.6,0,.25,1) forwards}
.intro .ol--l{animation-delay:.75s}
.intro .ol--r{animation-delay:.88s}
.intro .ol--g{stroke:var(--signal);animation-delay:1s}
@keyframes i-draw{to{stroke-dashoffset:0}}

.intro .nd{fill:#F3F1EB;opacity:0;transform-box:fill-box;transform-origin:center;animation:i-nd .35s cubic-bezier(.22,.7,.1,1) var(--d,0s) forwards}
.intro .nd--g{fill:var(--signal)}
@keyframes i-nd{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}

/* bryły: wskakują z lekkim przesunięciem, zielona na końcu z „zatrzaśnięciem” i błyskiem */
.intro .pc{fill:#F3F1EB;opacity:0}
.intro .pc--l{animation:i-pl .5s cubic-bezier(.2,.9,.25,1) 1.45s both}
.intro .pc--r{animation:i-pr .5s cubic-bezier(.2,.9,.25,1) 1.55s both}
.intro .pc--g{fill:var(--signal);animation:i-pg .6s cubic-bezier(.2,.9,.25,1) 1.7s both,i-flash .7s ease 2.05s forwards}
@keyframes i-pl{from{opacity:0;transform:translate(0,38px)}to{opacity:1;transform:none}}
@keyframes i-pr{from{opacity:0;transform:translate(38px,14px)}to{opacity:1;transform:none}}
@keyframes i-pg{0%{opacity:0;transform:translate(40px,-40px)}65%{opacity:1;transform:translate(-5px,5px)}100%{opacity:1;transform:none}}
@keyframes i-flash{from{fill:#F7FFD6}to{fill:#C8FF32}}

/* fala uderzeniowa przy zatrzaśnięciu zielonej bryły */
.intro .ring{fill:none;stroke:var(--signal);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:i-ring .85s cubic-bezier(.22,.7,.1,1) 2.05s forwards}
@keyframes i-ring{from{opacity:.75;transform:scale(1)}to{opacity:0;transform:scale(18)}}

/* pominięcie: dociągnij wszystko do stanu końcowego */
.intro.is-skip *{animation-duration:.001s!important;animation-delay:0s!important}

@media (max-width:719px){.has-intro .intro{--isz:min(64vw,340px)}}
@media (prefers-reduced-motion:reduce){.intro,.has-intro .intro{display:none}}