/* ==========================================================================
   Brama, wejscie przez czarne oko z logotypu. Ladowana tylko na stronie glownej.
   Zasada: rusza sie wylacznie transform i opacity, kamera jedzie przez viewBox SVG.
   ========================================================================== */

:root{
  --vh:100vh;
  --gate-scroll:120vh;   /* ile scrolla zajmuje przejscie */
  --hold:70vh;           /* przystanek: baner stoi w miejscu, zeby ped nie przewinal go od razu */
}
@supports (height:100svh){:root{--vh:100svh}}
@media (max-width:720px){:root{--gate-scroll:90vh;--hold:55vh}}

html.ma-brame{background:var(--granat-900)}
.gate{position:relative;height:calc(var(--vh) + var(--gate-scroll));z-index:10}
.gate-stage{position:sticky;top:0;height:var(--vh);overflow:hidden;background:var(--granat-900);isolation:isolate}
.gate-stage > *{position:absolute;inset:0}

.gate-bg{background:radial-gradient(120% 90% at 50% 60%,#2a1c6a 0%,var(--granat-900) 55%,#150d3a 100%)}
.gate-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 44%,rgba(252,203,0,.13),rgba(252,203,0,.04) 45%,transparent 70%);pointer-events:none}
.gate-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(75% 75% at 50% 50%,transparent 55%,rgba(8,5,25,.7) 100%);pointer-events:none}
.grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px;opacity:.09;mix-blend-mode:overlay;pointer-events:none}
.gate-wm{display:grid;place-items:center;pointer-events:none;will-change:opacity}
.gate-wm svg{width:min(105vw,130vh);height:auto;opacity:.032;transform:translateY(-4%)}
.gate-shadow{pointer-events:none;will-change:opacity}
.gate-shadow::before{content:"";position:absolute;left:50%;top:60%;width:min(52vw,360px);height:56px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,.25) 55%,transparent)}
.gate-shadow::after{content:"";position:absolute;left:50%;top:46%;width:min(70vw,520px);height:min(70vw,520px);transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(252,203,0,.14);box-shadow:0 0 80px rgba(252,203,0,.08),inset 0 0 80px rgba(252,203,0,.05)}
.fog{will-change:transform,opacity;pointer-events:none}
.fog i{position:absolute;border-radius:50%;display:block}
.fog-1 i{width:110vmax;height:70vmax;left:-20vmax;top:10vh;background:radial-gradient(closest-side,rgba(246,241,231,.11),rgba(20,58,132,.10) 45%,transparent 72%)}
.fog-2 i{width:90vmax;height:60vmax;right:-25vmax;top:35vh;background:radial-gradient(closest-side,rgba(20,58,132,.28),rgba(246,241,231,.05) 50%,transparent 72%)}
.fog-3 i{width:120vmax;height:50vmax;left:-10vmax;bottom:-15vh;background:radial-gradient(closest-side,rgba(246,241,231,.08),transparent 70%)}
.glow{background:radial-gradient(38vmin 30vmin at 50% 46%,rgba(252,203,0,.11),transparent 70%);pointer-events:none;will-change:opacity}
.veil{background:var(--granat-900);opacity:0;pointer-events:none}

.gate-logo{pointer-events:none}
.gate-logo svg{display:block;width:100%;height:100%}
.gate-logo .tag{position:absolute;left:0;right:0;top:68%;font-family:var(--f-mark);font-weight:600;letter-spacing:.32em;text-indent:.32em;font-size:clamp(11px,1.5vw,15px);color:var(--zloto-300);text-transform:uppercase;margin:0;text-align:center;padding:0 24px;will-change:opacity}

.gate-ui{pointer-events:none}
.gate-ui > *{pointer-events:auto}
.prompt{position:absolute;left:0;right:0;bottom:max(28px,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:10px;font-family:var(--f-mark);font-weight:600;letter-spacing:.22em;text-indent:.22em;font-size:clamp(10px,1.2vw,12px);color:rgba(246,241,231,.72);text-transform:uppercase;text-align:center;padding:0 24px;will-change:opacity}
.prompt .hint{width:22px;height:36px;border:1.5px solid rgba(246,241,231,.45);border-radius:12px;position:relative}
.prompt .hint::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--zloto-500);animation:wilkor-kolko 2.2s ease-in-out infinite}
@keyframes wilkor-kolko{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.enter{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;background:none;border:0;padding:0}
.enter:focus-visible{outline:2px solid var(--zloto-500);outline-offset:-6px}

.corner{position:absolute;top:max(16px,env(safe-area-inset-top));display:flex;gap:8px;font-family:var(--f-body);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.corner.left{left:16px}
.corner.right{right:16px}
.corner button,.corner a{padding:9px 13px;border:1px solid rgba(246,241,231,.28);border-radius:999px;color:rgba(246,241,231,.82);text-decoration:none;background:rgba(33,20,83,.45);cursor:pointer;font:inherit}
.corner button:hover,.corner a:hover{border-color:var(--zloto-500);color:var(--zloto-100,#FFF7AB)}
.snd .ico{display:inline-block;width:1em;height:1em;vertical-align:-2px;margin-right:6px}
.snd[aria-pressed="true"] .off,.snd[aria-pressed="false"] .on{display:none}

.gate.is-done .gate-stage{visibility:hidden}
.gate.is-static{height:var(--vh)}
.gate.is-static .gate-stage{position:relative}
.gate.is-static .prompt{display:none}
.gate.is-static .enter{cursor:default}
.gate.is-off{display:none}

/* strona lezy pod ostatnim ekranem bramy; po przejsciu brama znika z ukladu */
html.ma-brame .site{position:relative;z-index:5;margin-top:calc(var(--vh) * -1);background:#fff}
html.ma-brame .gate.is-static + .site,html.ma-brame .gate.is-off + .site{margin-top:0}
html.ma-brame .gate.is-done + .site{z-index:20}

/* przystanek na banerze */
html.ma-brame .landing-wrap{height:calc(var(--vh) - var(--hdr-h) + var(--hold))}
html.ma-brame .landing{position:sticky;top:var(--hdr-h)}
html.ma-brame [data-hero-in]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease-out .12s,transform .8s var(--ease) .12s}
html.ma-brame [data-hero-in].is-in{opacity:1;transform:none}
html.ma-brame .gate.is-static + .site .landing-wrap{height:auto}
html.ma-brame .gate.is-static + .site .landing{position:static}
html.ma-brame .gate.is-static + .site [data-hero-in]{opacity:1;transform:none;transition:none}

@media (prefers-reduced-motion:reduce){
  .gate{height:var(--vh)}
  .gate-stage{position:relative}
  .prompt .hint::after{animation:none}
  html.ma-brame .site{margin-top:0}
  html.ma-brame .landing-wrap{height:auto}
  html.ma-brame .landing{position:static}
  html.ma-brame [data-hero-in]{opacity:1;transform:none;transition:none}
}