/* =====================================================================
   SHERIFF — warstwa HUD / optyka
   Ładowana PO style.css. Cold-open intro, oprawa hero i podstron,
   karty programów. Ton: powściągliwy, kinowy, zero ozdób bez funkcji.
   ===================================================================== */

:root{
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hud-line:rgba(201,162,75,.42);
}

/* ---------------------------------------------------------------
   1. COLD OPEN — intro przez optykę (raz na sesję)
   --------------------------------------------------------------- */
html.no-intro #intro{display:none!important}
body.intro-lock{overflow:hidden}

#intro{position:fixed;inset:0;z-index:9999;background:var(--ink);
  display:grid;place-items:center;overflow:hidden}
#intro.gone{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}


.scope-vig{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 50% 50%,transparent 34%,rgba(0,0,0,.55) 62%,#000 88%)}
#intro .grain{z-index:1}
.reticle,.hud,.intro-status{z-index:2}

.reticle{position:relative;width:min(76vmin,720px);aspect-ratio:1;
  transform:translate(var(--sx,0px),var(--sy,0px))}
.reticle svg{width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.95)) drop-shadow(0 0 1px rgba(0,0,0,1))}
.reticle .dr{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  animation:hudDraw .85s var(--ease) forwards}
.reticle .dr.d1{animation-delay:.12s}
.reticle .dr.d2{animation-delay:.24s}
.reticle .dr.d3{animation-delay:.36s}
.reticle .dr.d4{animation-delay:.46s}
@keyframes hudDraw{to{stroke-dashoffset:0}}
.reticle .tick{stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;animation:hudTick .4s ease forwards .55s}
@keyframes hudTick{to{opacity:.5}}
.reticle .dot{fill:var(--blood);opacity:0;animation:hudDot 1.8s ease-in-out infinite .8s}
@keyframes hudDot{0%,100%{opacity:.3}50%{opacity:.85}}

.lock{position:absolute;inset:22%;pointer-events:none}
.lock i{position:absolute;width:32px;height:32px;border:2px solid var(--gold-bright);
  opacity:0;filter:drop-shadow(0 0 5px rgba(201,162,75,.6))}
.lock i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;transform:translate(-44px,-44px)}
.lock i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;transform:translate(44px,-44px)}
.lock i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;transform:translate(-44px,44px)}
.lock i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;transform:translate(44px,44px)}
#intro.lockon .lock i{opacity:1;transform:translate(0,0);
  transition:transform .42s var(--ease),opacity .22s ease}

.hud{position:absolute;inset:0;pointer-events:none;text-shadow:0 0 6px rgba(0,0,0,.95);font-family:var(--f-mono);
  font-size:clamp(.55rem,1.05vw,.7rem);letter-spacing:.16em;color:var(--gold);
  text-transform:uppercase}
.hud b{display:block;font-weight:500;opacity:0;transform:translateY(6px);
  animation:hudIn .5s var(--ease) forwards}
.hud .tl{position:absolute;top:clamp(18px,4vh,40px);left:clamp(18px,4vw,48px)}
.hud .tr{position:absolute;top:clamp(18px,4vh,40px);right:clamp(18px,4vw,48px);text-align:right}
.hud .bl{position:absolute;bottom:clamp(18px,4vh,40px);left:clamp(18px,4vw,48px)}
.hud .br{position:absolute;bottom:clamp(18px,4vh,40px);right:clamp(18px,4vw,48px);text-align:right}
.hud .tl b:nth-child(1){animation-delay:.5s} .hud .tl b:nth-child(2){animation-delay:.6s}
.hud .tr b:nth-child(1){animation-delay:.66s} .hud .tr b:nth-child(2){animation-delay:.76s}
.hud .bl b:nth-child(1){animation-delay:.82s} .hud .bl b:nth-child(2){animation-delay:.92s}
.hud .br b{animation-delay:1s;color:var(--gold-bright)}
@keyframes hudIn{to{opacity:.85;transform:translateY(0)}}

.intro-status{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);text-shadow:0 0 8px rgba(0,0,0,.95);
  font-family:var(--f-mono);font-size:clamp(.6rem,1.2vw,.76rem);letter-spacing:.3em;
  color:var(--gold-bright);text-transform:uppercase;white-space:nowrap;opacity:0;
  animation:hudStatus .4s ease forwards .95s}
@keyframes hudStatus{to{opacity:.9}}
.intro-status::after{content:"_";animation:hudBlink .7s steps(1) infinite}
@keyframes hudBlink{50%{opacity:0}}

/* flash i wstrząs — wyciszone, bez efekciarstwa */
.flash{position:fixed;inset:0;z-index:10000;background:#fff;opacity:0;pointer-events:none}
.flash.fire{animation:hudFire .46s ease-out forwards}
@keyframes hudFire{0%{opacity:0}7%{opacity:.68}22%{opacity:.1}100%{opacity:0}}
@keyframes hudShake{0%{transform:translate(0,0)}14%{transform:translate(5px,-4px)}
  32%{transform:translate(-4px,3px)}52%{transform:translate(3px,2px)}
  74%{transform:translate(-2px,-1px)}100%{transform:translate(0,0)}}
body.shake{animation:hudShake .42s cubic-bezier(.36,.07,.19,.97)}

#intro.fired .reticle{animation:hudBlow .55s var(--ease) forwards}
@keyframes hudBlow{to{transform:scale(2.2);opacity:0;filter:blur(6px)}}
#intro.fired .hud,#intro.fired .intro-status,#intro.fired .scope-vig{opacity:0;
  transition:opacity .3s}

.skip{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:10001;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line-soft);
  padding:9px 14px;cursor:pointer}
.skip:hover,.skip:focus-visible{color:var(--gold);border-color:var(--line);outline:none}

/* ---------------------------------------------------------------
   1b. Menu mobilne — domknięcie stanu ukrytego
   Samo translateY(-100%) wypycha je za ekran, ale linki zostają
   w drzewie fokusu: Tab na desktopie wchodził w niewidoczne menu.
   --------------------------------------------------------------- */
.mobile-menu{visibility:hidden;pointer-events:none;
  transition:transform .6s var(--ease),visibility .6s var(--ease)}
.mobile-menu.open{visibility:visible;pointer-events:auto}

/* ---------------------------------------------------------------
   2. Wspólna oprawa HUD — hero i nagłówki podstron
   --------------------------------------------------------------- */
.frame{position:absolute;inset:clamp(14px,2.4vw,30px);z-index:3;pointer-events:none}
.frame i{position:absolute;width:clamp(24px,3.2vw,44px);height:clamp(24px,3.2vw,44px);
  border:1px solid var(--hud-line)}
.frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

.rail{position:absolute;left:clamp(14px,2.4vw,34px);top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:12px;align-items:center;
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.2em;
  color:rgba(201,162,75,.65);pointer-events:none}
.rail span{writing-mode:vertical-rl;text-orientation:mixed;text-transform:uppercase}
.rail em{display:block;width:1px;height:clamp(36px,8vh,84px);font-style:normal;
  background:linear-gradient(to bottom,transparent,var(--gold),transparent)}
@media(max-width:900px){.rail{display:none}}

.scanline{position:absolute;left:0;right:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.42),transparent);
  animation:hudScan 8s linear infinite}
@keyframes hudScan{0%{top:-2%;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:102%;opacity:0}}

.grain{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.grain::after,#intro .grain::after{content:"";position:absolute;inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.04;mix-blend-mode:overlay;animation:hudGrain 1.1s steps(3) infinite}
@keyframes hudGrain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

/* metaliczny przesuw światła po złocie */
.metal,.hero h1 em,.phero h1 .gold{background:linear-gradient(100deg,
    #6f5a28 0%,var(--gold) 18%,#fff6dc 32%,var(--gold-bright) 44%,
    var(--gold) 58%,#5c4a20 78%,var(--gold) 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:hudSheen 7s ease-in-out infinite}
@keyframes hudSheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------------------------------------------------------------
   3. HERO (strona główna)
   --------------------------------------------------------------- */
/* Zdjęcie zostaje czytelne — przyciemniamy KIERUNKOWO, nie równomiernie:
   ciemno po lewej (tam siedzi tytuł), jasno po prawej (broń i zachód słońca). */
.hero__media video,.hero__media img{height:110%;
  transform:scale(1.06);filter:saturate(.9) contrast(1.05) brightness(.92)}
.hero__media::after{background:
  linear-gradient(to right,rgba(8,9,11,.94) 0%,rgba(8,9,11,.82) 30%,
                  rgba(8,9,11,.42) 58%,rgba(8,9,11,.2) 78%,rgba(8,9,11,.4) 100%),
  linear-gradient(to top,var(--ink) 3%,rgba(8,9,11,.55) 26%,
                  rgba(8,9,11,.1) 58%,rgba(8,9,11,.5) 100%)!important}

.hero__inner{padding:clamp(100px,14vh,140px) 0 clamp(36px,6vh,76px)!important}
.hero h1{font-family:var(--f-stencil);font-weight:400;line-height:.88;
  font-size:clamp(2.5rem,min(9.4vw,15.5vh),8rem)!important;text-transform:uppercase}
.hero__coords{font-family:var(--f-mono);letter-spacing:.2em;
  font-size:clamp(.55rem,1vw,.68rem)!important}
.hero__coords span::before{animation:hudPulse 2.4s ease-in-out infinite}
@keyframes hudPulse{50%{opacity:.3}}

/* ---------------------------------------------------------------
   4. NAGŁÓWEK PODSTRONY (.phero) — ta sama oprawa co hero
   --------------------------------------------------------------- */
.phero{position:relative;overflow:hidden}
.phero .eyebrow{font-family:var(--f-mono);letter-spacing:.28em}
.phero h1{font-family:var(--f-stencil);font-weight:400;text-transform:uppercase;
  line-height:.92;letter-spacing:-.005em}
.phero .wrap{position:relative;z-index:4}

/* ---------------------------------------------------------------
   5. KARTY PROGRAMÓW (.ocard) — akta operacyjne
   --------------------------------------------------------------- */
.ocard{position:relative;overflow:hidden;transition:transform .45s var(--ease),
  border-color .45s ease,box-shadow .45s ease}
.ocard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% -8%,rgba(201,162,75,.13),transparent 58%);
  opacity:0;transition:opacity .45s}
.ocard:hover,.ocard:focus-within{transform:translateY(-7px);border-color:var(--line);
  box-shadow:0 28px 60px -26px rgba(0,0,0,.9)}
.ocard:hover::after,.ocard:focus-within::after{opacity:1}
.ocard__no{font-family:var(--f-mono);letter-spacing:.24em;color:var(--gold);opacity:.78}

/* rozpiska strzalow w karcie pakietu */
.ocard__specs{list-style:none;margin:16px 0 18px;padding:0;
  border-top:1px solid var(--line-soft);padding-top:14px}
.ocard__specs li{position:relative;padding-left:18px;margin:7px 0;
  font-size:.83rem;color:var(--bone-dim);line-height:1.45}
.ocard__specs li::before{content:"";position:absolute;left:0;top:.6em;
  width:6px;height:6px;background:var(--gold);opacity:.75;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.ocard__foot{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ocard__go{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--line);color:var(--gold);
  text-decoration:none;font-size:1.05rem;transition:.3s var(--ease);flex:0 0 auto}
.ocard__go:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* lista "co w cenie" */
.incl{list-style:none;margin:0;padding:0;display:grid;gap:12px 26px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.incl li{position:relative;padding-left:26px;color:var(--bone-dim);font-size:.95rem}
.incl li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--gold);font-weight:700}
.incl--tight{margin-top:20px;gap:8px 20px}
.incl--tight li{font-size:.88rem}
.ocard__price{font-family:var(--f-display);font-weight:600;color:var(--gold)}
.ocard__media{position:relative;overflow:hidden}
.ocard__media img{transition:transform .7s var(--ease)}
.ocard:hover .ocard__media img{transform:scale(1.05)}

/* ---------------------------------------------------------------
   5b. Reel — materiał z osi jest teraz poziomy 16:9
   Stara ramka byla pionowa 9/16 pod nagranie z social mediow.
   --------------------------------------------------------------- */
.reel__frame{width:min(620px,100%)!important;aspect-ratio:16/9!important;justify-self:stretch!important}
@media(max-width:900px){.reel__frame{width:100%!important}}

/* ---------------------------------------------------------------
   6. Kursor-celownik z zatrzaskiem
   --------------------------------------------------------------- */
.cur{position:fixed;top:0;left:0;width:30px;height:30px;z-index:9998;pointer-events:none;
  mix-blend-mode:difference;opacity:0;
  transition:width .25s var(--ease),height .25s var(--ease),opacity .3s}
.cur.on{opacity:1}
.cur::before,.cur::after{content:"";position:absolute;background:var(--gold-bright)}
.cur::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.cur::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.cur i{position:absolute;inset:0;border:1px solid var(--gold-bright);opacity:0;
  transform:scale(1.7) rotate(45deg);transition:.3s var(--ease)}
.cur.lock{width:50px;height:50px}
.cur.lock i{opacity:.85;transform:scale(1) rotate(0deg)}
@media(hover:none),(max-width:900px){.cur{display:none!important}}

/* ---------------------------------------------------------------
   7. Dostępność — pełne wyciszenie ruchu
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #intro,.flash{display:none!important}
  .scanline,.grain::after,.metal,.reticle,.hud b{animation:none!important}
  .metal,.hero h1 em,.phero h1 .gold{-webkit-text-fill-color:var(--gold);background:none}
  body.shake{animation:none!important}
}

/* ---------------------------------------------------------------
   8. HERO — wideo w tle
   Zdjęcie z zachodem zostaje jako warstwa zapasowa: widać je, gdy
   przeglądarka zablokuje autoodtwarzanie albo gdy użytkownik ma
   włączone ograniczenie ruchu. Wideo kładzie się na nim.
   --------------------------------------------------------------- */
.hero__media{position:absolute;inset:0;z-index:0}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__media .hero__vid,.hero__media .hero__fallback{
  transform:scale(1.04);filter:saturate(.82) contrast(1.05) brightness(.78)}
/* Nakładka przyciemniająca to pseudoelement .hero__media — musi leżeć NAD
   wideo, inaczej tytuł robi się nieczytelny. */
.hero__media::after{z-index:2}

@media (prefers-reduced-motion:reduce){
  .hero__vid{display:none}
}