/* Brama Studio — efekty specjalne (patrz fx.js). Czarno-biało, bez dodatkowych kolorów. */

section[id] { scroll-margin-top: 60px; }

/* Płótna efektów leżą pod treścią sekcji. */
.fx-host { overflow: hidden; }
.fx-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.fx-host > *:not(.fx-layer):not(.fx-bgword) { position: relative; z-index: 1; }
.fx-cube { inset: auto; top: 70px; right: 3%; width: 340px; height: 340px; opacity: .9; }
@media (max-width: 1000px) { .fx-cube { width: 220px; height: 220px; right: -20px; top: 30px; opacity: .45; } }

/* Hero: poświata podążająca za kursorem. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 38%), rgba(255, 255, 255, .11), transparent 62%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55));
}

/* Nagłówki: słowa wjeżdżają spod maski. */
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.fx-wi { display: inline-block; transform: translateY(115%); transition: transform .85s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 55ms); will-change: transform; }
.fx-in .fx-wi { transform: none; }
.hero h1.fx-split .fx-wi { transition-delay: calc(.25s + var(--i, 0) * 70ms); }

/* Pasy z napisami: konturowe i pełne litery. */
.fx-marquee { position: relative; z-index: 2; overflow: hidden; white-space: nowrap; padding: 26px 0; border-top: 1px solid var(--line-on-white); border-bottom: 1px solid var(--line-on-white); user-select: none; }
.fx-marquee__track { display: inline-flex; align-items: center; will-change: transform; }
.fx-marquee span { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(2.6rem, 8.4vw, 6.6rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; padding: 0 .35em; }
.fx-marquee i { width: .5em; height: .5em; flex: 0 0 auto; border-radius: 50%; margin: 0 .1em; }
.fx-marquee--light { background: #fff; border-color: rgba(10, 10, 10, .14); }
.fx-marquee--light span.is-fill { color: #0a0a0a !important; }
.fx-marquee--light span.is-line { color: transparent !important; -webkit-text-stroke: 1.5px #0a0a0a; }
.fx-marquee--light i { background: #0a0a0a; }
.fx-marquee--dark { background: #0a0a0a; border-color: rgba(255, 255, 255, .16); }
.fx-marquee--dark span.is-fill { color: #fff !important; }
.fx-marquee--dark span.is-line { color: transparent !important; -webkit-text-stroke: 1.5px #fff; }
.fx-marquee--dark i { background: #fff; }

/* Pasek postępu i kursor (mieszają się z tłem: biały na czarnym, czarny na białym). */
.fx-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 120; background: #fff; mix-blend-mode: difference; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.fx-cursor { position: fixed; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .2s ease; will-change: transform; }

/* Karty pochylane pod kursorem. */
.fx-tilt { transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; will-change: transform; }
.price-card.fx-tilt:hover { box-shadow: 0 24px 50px rgba(10, 10, 10, .16); position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .fx-wi { transform: none !important; transition: none !important; }
  .fx-marquee__track { transform: none !important; }
}

/* ===== Podkręcenie: napisy w tle, ślad, ziarno, glitch, pulsujące przyciski ===== */
.fx-bgword { position: absolute; left: 0; top: 50%; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap; font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(9rem, 34vw, 30rem); line-height: .9; text-transform: uppercase; letter-spacing: -.03em; color: transparent !important; will-change: transform; }
.fx-bgword--dark { -webkit-text-stroke: 1.5px rgba(255, 255, 255, .11); }
.fx-bgword--light { -webkit-text-stroke: 1.5px rgba(10, 10, 10, .09); }

.fx-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9990; pointer-events: none; mix-blend-mode: difference; }
.fx-grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 9980; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-size: 120px 120px; animation: fxGrain .9s steps(6) infinite; }
@keyframes fxGrain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-7%, 4%); } 34% { transform: translate(5%, -9%); }
  51% { transform: translate(-3%, 8%); } 68% { transform: translate(9%, 2%); } 85% { transform: translate(-8%, -5%); } 100% { transform: translate(0, 0); }
}

/* Glitch nagłówka co kilka sekund. */
.hero h1.fx-in { animation: fxGlitch 7s steps(1, end) 2.5s infinite; }
@keyframes fxGlitch {
  0%, 91%, 100% { transform: none; filter: none; }
  92% { transform: translate(-4px, 0) skewX(-3deg); filter: drop-shadow(3px 0 0 rgba(255, 255, 255, .35)); }
  93% { transform: translate(5px, 1px) skewX(2deg); filter: drop-shadow(-3px 0 0 rgba(255, 255, 255, .3)); }
  94% { transform: translate(-2px, -1px); filter: none; }
  95% { transform: none; }
}

/* Pulsujący pierścień przy głównych przyciskach. */
.hero .btn-primary, .cta-final .btn-primary { position: relative; }
.hero .btn-primary::after, .cta-final .btn-primary::after {
  content: ""; position: absolute; inset: -2px; border: 1.5px solid #fff; border-radius: 2px; pointer-events: none;
  animation: fxPing 2.6s ease-out infinite;
}
@keyframes fxPing { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.22, 1.7); opacity: 0; } }

/* Linie w usługach rysują się po wejściu w ekran; wiersze reagują na najechanie. */
.svc-row { position: relative; border-bottom-color: transparent; }
.svc-row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: rgba(255, 255, 255, .55); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.svc-row.rv-in::after { transform: scaleX(1); }
.svc-row h3 { transition: letter-spacing .35s ease; }
@media (hover: hover) {
  .svc-row:hover h3 { letter-spacing: .02em; }
  .why-item { transition: background .3s ease, transform .3s ease; }
  .why-item:hover { background: #0a0a0a; }
  .sec-light .why-item:hover h3, .sec-light .why-item:hover p, .sec-light .why-item:hover .num { color: #fff !important; }
}

/* Karty realizacji: powolne "oddychanie" zdjęć (działa też na telefonie) + połysk. */
.port-img img { animation: fxKB 16s ease-in-out infinite alternate; }
.port-item:nth-child(even) .port-img img { animation-duration: 20s; animation-direction: alternate-reverse; }
.port-item:nth-child(3n) .port-img img { animation-delay: -6s; }
@keyframes fxKB { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.09) translate(-1.5%, -1%); } }
.port-img { position: relative; }
.port-img::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); animation: fxShine 6.5s ease-in-out infinite; pointer-events: none; }
.port-item:nth-child(2n) .port-img::after { animation-delay: 2.2s; }
.port-item:nth-child(3n) .port-img::after { animation-delay: 4.1s; }
@keyframes fxShine { 0%, 62% { left: -60%; } 100% { left: 130%; } }

.port-sub { margin: 14px 0 0; max-width: 640px; font-size: 15.5px; color: #4a4a4a; }
.port-head .port-sub { color: #4a4a4a !important; }

@media (prefers-reduced-motion: reduce) {
  .fx-grain, .hero h1.fx-in, .hero .btn-primary::after, .cta-final .btn-primary::after,
  .port-img img, .port-img::after { animation: none !important; }
  .svc-row::after { transform: scaleX(1); transition: none; }
}
/* Naprawa najechania na przyciski: kolor tekstu miał !important i znikał na tle po zmianie koloru. */
.sec-dark .btn-primary:hover { background: #0a0a0a !important; color: #fff !important; border-color: #fff !important; }
.sec-dark .btn-ghost:hover, .sec-dark .btn-outline:hover { background: #fff !important; color: #0a0a0a !important; border-color: #fff !important; }
.sec-light .btn-primary:hover { background: #fff !important; color: #0a0a0a !important; border-color: #0a0a0a !important; }
.sec-light .btn-ghost:hover, .sec-light .btn-outline:hover { background: #0a0a0a !important; color: #fff !important; border-color: #0a0a0a !important; }
.nav .btn-primary:hover { background: transparent !important; color: #fff !important; border-color: #fff !important; }
.btn { transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease; }
.fx-cursor.is-hover { background: transparent; border: 1.5px solid #fff; }