/* Schwarzer Regen — brama warp (intro)
   Scoped w .sr-gate, żeby nic nie kolidowało z home CSS.
   Fonty self-hosted (JetBrains Mono / Newsreader / Inter Tight) — ładowane osobno przez fonts.css.
*/

.sr-gate{
  --gate-bg:#000;
  --gate-text-1:#ece8e0;
  --gate-text-2:#c4bfb4;
  --gate-text-3:#8e8a82;
  --gate-line-2:#3d3d45;
  --gate-silver:#c4c0b8;
  --gate-fm:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gate-fs:"Inter Tight",system-ui,sans-serif;
  --gate-fd:"Newsreader",ui-serif,Georgia,serif;

  position:fixed;inset:0;z-index:9999;background:var(--gate-bg);color:var(--gate-text-1);
  font-family:var(--gate-fs);overflow:hidden;
}
.sr-gate.hidden{display:none}
.sr-gate:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:9000;
  background-image:repeating-linear-gradient(#0000 0 2px,#ffffff03 2px 3px)}

/* ── księżyc główny (bliższy, prawy górny) ── */
.sr-gate .sr-moon{position:absolute;z-index:1;width:min(44vmin,400px);aspect-ratio:1;border-radius:50%;right:7%;top:12%;
  background:radial-gradient(circle at 36% 34%,#4c4e58 0%,#2c2f38 36%,#1a1b21 62%,#0a0b0f 100%);
  box-shadow:0 0 130px #2a2d3888, inset -34px -26px 70px #000000aa, inset 20px 16px 54px #6a70842a;
  opacity:0;filter:saturate(.65)}
.sr-gate.launched .sr-moon{animation:sr-moonIn 5s ease .8s forwards}
@keyframes sr-moonIn{to{opacity:.7}}
/* ── księżyc drugi (dalszy, mniejszy, w lewym dolnym — daje głębię "kosmiczną") ── */
.sr-gate .sr-moon2{position:absolute;z-index:1;width:min(20vmin,180px);aspect-ratio:1;border-radius:50%;left:8%;bottom:14%;
  background:radial-gradient(circle at 40% 38%,#3a3d46 0%,#1e2027 42%,#111217 70%,#08090c 100%);
  box-shadow:0 0 70px #1c1e2666, inset -18px -14px 40px #00000088;
  opacity:0;filter:saturate(.5) blur(.5px)}
.sr-gate.launched .sr-moon2{animation:sr-moon2In 6s ease 1.6s forwards}
@keyframes sr-moon2In{to{opacity:.4}}
@media (max-width:680px){
  .sr-gate .sr-moon{width:54vmin;right:-6%;top:8%;opacity:0}
  .sr-gate .sr-moon2{width:26vmin;left:-8%;bottom:8%;opacity:0}
  .sr-gate.launched .sr-moon{animation:sr-moonIn 5s ease .8s forwards}
  .sr-gate.launched .sr-moon2{animation:sr-moon2In 6s ease 1.6s forwards}
}

/* ── pole gwiazd (lot warp) ── */
.sr-gate .sr-void{position:absolute;inset:0;perspective:460px;perspective-origin:50% 50%;z-index:0}
.sr-gate .sr-layer{position:absolute;inset:-50%;transform-origin:50% 50%;will-change:transform,opacity;background-repeat:repeat;opacity:.22}
.sr-gate .sr-l1{background-image:
  radial-gradient(1.4px 1.4px at 12% 22%,#fff,#0000),radial-gradient(1.4px 1.4px at 78% 14%,#fff,#0000),
  radial-gradient(1.2px 1.2px at 33% 67%,#dfe6ff,#0000),radial-gradient(1.6px 1.6px at 61% 81%,#fff,#0000),
  radial-gradient(1.2px 1.2px at 89% 52%,#cdd6ff,#0000),radial-gradient(1.3px 1.3px at 45% 38%,#fff,#0000);
  background-size:340px 340px}
.sr-gate .sr-l2{background-image:
  radial-gradient(1.1px 1.1px at 25% 40%,#fff,#0000),radial-gradient(1px 1px at 70% 60%,#bcd0ff,#0000),
  radial-gradient(1.2px 1.2px at 50% 18%,#fff,#0000),radial-gradient(1px 1px at 15% 80%,#fff,#0000),
  radial-gradient(1.1px 1.1px at 88% 30%,#e7ecff,#0000);background-size:240px 240px}
.sr-gate .sr-l3{background-image:
  radial-gradient(.9px .9px at 35% 28%,#fff,#0000),radial-gradient(.9px .9px at 65% 72%,#cfd9ff,#0000),
  radial-gradient(1px 1px at 18% 55%,#fff,#0000),radial-gradient(.9px .9px at 82% 48%,#fff,#0000);background-size:170px 170px}
/* Warp gwiazd: 6s per przelot infinite, 3 warstwy w fazie — spokojniejsze niż 3.3s, bez wyraźnych "przeskoków" */
.sr-gate.launched .sr-l1{animation:sr-rush 6s linear infinite;opacity:1}
.sr-gate.launched .sr-l2{animation:sr-rush 6s linear infinite;animation-delay:-2s;opacity:1}
.sr-gate.launched .sr-l3{animation:sr-rush 6s linear infinite;animation-delay:-4s;opacity:1}
@keyframes sr-rush{
  0%{opacity:0;transform:translateZ(-560px) scale(.5)}
  10%{opacity:.95}
  70%{opacity:1}
  85%{opacity:0;transform:translateZ(880px) scale(6)}
  /* 85→100%: niewidoczna teleportacja z powrotem na start — eliminuje wizualny skok przy restarcie infinite */
  100%{opacity:0;transform:translateZ(-560px) scale(.5)}
}
/* KOSMICZNE PRZYSPIESZENIE po kliku CTA — gwiazdy uciekają w biel jednym pędem (klasyczny warp jump) */
.sr-gate.go .sr-l1,
.sr-gate.go .sr-l2,
.sr-gate.go .sr-l3{
  animation:sr-rush-go 1.6s ease-in 1 forwards !important;
  animation-delay:0s !important
}
@keyframes sr-rush-go{
  0%{opacity:1;transform:translateZ(0) scale(1)}
  60%{opacity:1;transform:translateZ(600px) scale(4)}
  100%{opacity:0;transform:translateZ(1400px) scale(9)}
}
.sr-gate .sr-fade{position:absolute;inset:0;z-index:8;background:radial-gradient(circle at 50% 50%,#fff 0%,#eef1ff 58%,#dfe4ff 100%);opacity:0;pointer-events:none}
.sr-gate.go .sr-fade{animation:sr-toLight 2.3s ease-in forwards}
@keyframes sr-toLight{0%{opacity:0}30%{opacity:.12}100%{opacity:1}}
.sr-gate.go .sr-stage{animation:sr-zoomOut 2.3s ease-in forwards}
@keyframes sr-zoomOut{to{opacity:0;transform:scale(1.4);filter:blur(8px)}}

/* fade out całej bramy po wyjściu (kiedy zostajemy na tej samej stronie) */
.sr-gate.leaving{animation:sr-leave .55s ease forwards}
@keyframes sr-leave{to{opacity:0;visibility:hidden}}

/* ── górny pasek (Impressum/Datenschutz — Impressumspflicht) ── */
.sr-gate .sr-top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:18px;
  padding:16px 26px;font-family:var(--gate-fm);font-size:12px;letter-spacing:.04em}
.sr-gate .sr-top .sr-nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.sr-gate .sr-top .sr-nav a{color:var(--gate-text-3);transition:.15s;text-decoration:none}
.sr-gate .sr-top .sr-nav a:hover{color:var(--gate-text-1)}

/* ── scena ── */
.sr-gate .sr-stage{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}

/* krok 1: wybór języka */
.sr-gate .sr-pick{display:flex;flex-direction:column;align-items:center;gap:28px;opacity:0;animation:sr-fadeIn 1s ease .2s forwards}
.sr-gate .sr-pick .sr-q{display:flex;flex-direction:column;gap:4px;line-height:1.25}
.sr-gate .sr-pick .sr-q span{font-family:var(--gate-fd);font-style:italic;font-size:clamp(22px,4vw,38px);color:var(--gate-text-1)}
.sr-gate .sr-pick .sr-q span:nth-child(2){color:var(--gate-text-2)}
.sr-gate .sr-pick .sr-q span:nth-child(3){color:var(--gate-text-3)}
.sr-gate .sr-pick .sr-langs{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.sr-gate .sr-pick .sr-langs button{font-family:var(--gate-fm);font-size:15px;letter-spacing:.08em;color:var(--gate-text-1);
  border:1px solid var(--gate-line-2);background:#0e0e12;padding:14px 26px;cursor:pointer;transition:.15s}
.sr-gate .sr-pick .sr-langs button:hover,
.sr-gate .sr-pick .sr-langs button:focus-visible{
  background:var(--gate-silver);color:#06070a;border-color:var(--gate-silver);transform:translateY(-1px);outline:none}

/* krok 2: tytuł + ścianka tekstów + CTA */
.sr-gate .sr-reveal{display:none;flex-direction:column;align-items:center;width:100%;perspective:1000px}
.sr-gate.launched .sr-pick{display:none}
.sr-gate.launched .sr-reveal{display:flex}
.sr-gate .sr-title{font-family:var(--gate-fd);font-style:italic;font-weight:500;font-size:clamp(28px,6vw,64px);color:#fff;
  letter-spacing:.01em;text-shadow:0 0 30px #9fb4ff55;margin-bottom:12px;animation:sr-titleIn 2.4s ease-out forwards}
@keyframes sr-titleIn{0%{opacity:0;letter-spacing:.3em;filter:blur(10px);transform:scale(.92)}100%{opacity:1;letter-spacing:.01em;filter:blur(0);transform:none}}
.sr-gate .sr-sub{font-family:var(--gate-fs);font-weight:400;font-size:clamp(13.5px,1.5vw,16px);letter-spacing:.05em;color:var(--gate-silver);opacity:0;animation:sr-lightIn 1.7s ease 1.4s forwards}
@keyframes sr-lightIn{0%{opacity:0;transform:translateZ(-180px) scale(.82);filter:blur(7px);text-shadow:0 0 0 #fff0}45%{opacity:1;text-shadow:0 0 26px #ffffffcc,0 0 60px #aab4ff88}100%{opacity:1;transform:none;filter:blur(0);text-shadow:0 0 10px #9fb4ff33}}

.sr-gate .sr-wall{display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);
  column-gap:64px;row-gap:30px;align-items:start;max-width:940px;margin:36px auto 40px;text-align:left;perspective:900px}
.sr-gate .sr-wall p{margin:0;transform-origin:50% 50%;
  font-family:var(--gate-fd);font-style:italic;font-size:clamp(15.5px,2vw,19px);line-height:1.55;color:var(--gate-text-1);
  opacity:0;animation:sr-warpIn 1.6s cubic-bezier(.2,.7,.2,1) 2.4s forwards}
@keyframes sr-warpIn{0%{opacity:0;transform:translateZ(-150px) scale(.86)}60%{opacity:1}100%{opacity:1;transform:none}}

.sr-gate .sr-cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.sr-gate .sr-enter{font-family:var(--gate-fm);font-size:14px;letter-spacing:.06em;color:#06070a;background:var(--gate-silver);
  border:1px solid var(--gate-silver);padding:15px 30px;cursor:pointer;opacity:0;animation:sr-fadeIn 1.2s ease 4.6s forwards;transition:transform .15s,background .15s}
.sr-gate .sr-enter:hover,.sr-gate .sr-enter:focus-visible{transform:translateY(-1px);background:#fff;outline:none}
.sr-gate .sr-enter-ghost{font-family:var(--gate-fm);font-size:14px;letter-spacing:.06em;color:var(--gate-text-1);background:transparent;cursor:pointer;
  border:1px solid var(--gate-line-2);padding:15px 26px;opacity:0;animation:sr-fadeIn 1.2s ease 4.6s forwards;transition:.15s}
.sr-gate .sr-enter-ghost:hover,.sr-gate .sr-enter-ghost:focus-visible{border-color:var(--gate-silver);color:#fff;transform:translateY(-1px);outline:none}
@keyframes sr-fadeIn{to{opacity:1}}

@media (max-width:680px){
  .sr-gate .sr-wall{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none;max-width:48ch;row-gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .sr-gate .sr-layer,.sr-gate .sr-moon{animation:none !important}
  .sr-gate .sr-moon{opacity:.4 !important}
  .sr-gate .sr-title,.sr-gate .sr-sub,.sr-gate .sr-enter,.sr-gate .sr-enter-ghost,
  .sr-gate .sr-pick,.sr-gate .sr-wall p{animation:none !important;opacity:1 !important}
}