/* ===== Design tokens (reużywalne zmienne) ===== */
:root {
--bg: #060705;
--text: #ededeb; /* neutralna biel (bez niebieskiego) */
--text-dim: #9b9996; /* neutralny szary (bez niebieskiego) */
--hud: rgb(219, 57, 76); /* czerwony brandowy */
--line: rgba(255, 255, 255, 0.16); /* cienkie kreski / ramki */
--glass: rgba(255, 255, 255, 0.04);
--glass-border: rgba(255, 255, 255, 0.12);
--font-display: "Unica One", sans-serif; /* główny font — nagłówki, tytuły, przyciski */
--font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif; /* treść — San Francisco */
--radius: 16px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--nav-top: 16px; /* odsunięcie nava od góry */
--nav-h: 54px; /* wysokość nava */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ===== Kursor: pikselowa dłoń CONFLICT (biała; czerwona nad elementami klikalnymi) =====
Dłoń pionowa, punkt kliknięcia = czubek palca (8 3). 1x/2x — ostry na Retinie. Pola tekstowe zachowują I-beam. */
html {
cursor: url("../../materials/cursor/white-base.png") 8 3, auto;
cursor: -webkit-image-set(url("../../materials/cursor/white-base.png") 1x, url("../../materials/cursor/white-base@2x.png") 2x) 8 3, auto;
cursor: image-set(url("../../materials/cursor/white-base.png") 1x, url("../../materials/cursor/white-base@2x.png") 2x) 8 3, auto;
}
a, button, summary, select, label[for], [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"] {
cursor: url("../../materials/cursor/red-base.png") 8 3, pointer;
cursor: -webkit-image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
cursor: image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
}
/* glitch kursora — krótkie serie klatek (JS: src/scripts/cursor-glitch.js ustawia html[data-cursor-glitch]) */
html[data-cursor-glitch="g1"], html[data-cursor-glitch="g1"] * {
cursor: url("../../materials/cursor/white-g1.png") 8 3, auto !important;
cursor: -webkit-image-set(url("../../materials/cursor/white-g1.png") 1x, url("../../materials/cursor/white-g1@2x.png") 2x) 8 3, auto !important;
cursor: image-set(url("../../materials/cursor/white-g1.png") 1x, url("../../materials/cursor/white-g1@2x.png") 2x) 8 3, auto !important;
}
html[data-cursor-glitch="g1"] :is(a, button, summary, select, label[for], [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], .carousel__btn, .carousel__slide, .nav__burger, .nav__item, .nav__sound, .sp-chip, .svc__row, .testi__btn), html[data-cursor-glitch="g1"] :is(a, button, summary, select, label[for], [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], .carousel__btn, .carousel__slide, .nav__burger, .nav__item, .nav__sound, .sp-chip, .svc__row, .testi__btn) * {
cursor: url("../../materials/cursor/red-g1.png") 8 3, pointer !important;
cursor: -webkit-image-set(url("../../materials/cursor/red-g1.png") 1x, url("../../materials/cursor/red-g1@2x.png") 2x) 8 3, pointer !important;
cursor: image-set(url("../../materials/cursor/red-g1.png") 1x, url("../../materials/cursor/red-g1@2x.png") 2x) 8 3, pointer !important;
}
html[data-cursor-glitch="g2"], html[data-cursor-glitch="g2"] * {
cursor: url("../../materials/cursor/white-g2.png") 8 3, auto !important;
cursor: -webkit-image-set(url("../../materials/cursor/white-g2.png") 1x, url("../../materials/cursor/white-g2@2x.png") 2x) 8 3, auto !important;
cursor: image-set(url("../../materials/cursor/white-g2.png") 1x, url("../../materials/cursor/white-g2@2x.png") 2x) 8 3, auto !important;
}
html[data-cursor-glitch="g2"] :is(a, button, summary, select, label[for], [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], .carousel__btn, .carousel__slide, .nav__burger, .nav__item, .nav__sound, .sp-chip, .svc__row, .testi__btn), html[data-cursor-glitch="g2"] :is(a, button, summary, select, label[for], [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], .carousel__btn, .carousel__slide, .nav__burger, .nav__item, .nav__sound, .sp-chip, .svc__row, .testi__btn) * {
cursor: url("../../materials/cursor/red-g2.png") 8 3, pointer !important;
cursor: -webkit-image-set(url("../../materials/cursor/red-g2.png") 1x, url("../../materials/cursor/red-g2@2x.png") 2x) 8 3, pointer !important;
cursor: image-set(url("../../materials/cursor/red-g2.png") 1x, url("../../materials/cursor/red-g2@2x.png") 2x) 8 3, pointer !important;
}
html[data-cursor-glitch] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-cursor-glitch] textarea { cursor: text !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea { cursor: text; }
html {
scroll-behavior: smooth;
/* RWD: nic nie poszerza strony w poziomie (telefony rozszerzają viewport przy każdym wystającym pikselu).
clip, nie hidden — nie tworzy kontenera scrolla, więc position: sticky (piny sekcji) działa dalej */
overflow-x: clip;
}
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
overflow-x: clip;
line-height: 1.5;
}
/* ===== Komponent: przycisk (płaski, kwadratowy, bez efektów) ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.02em;
text-decoration: none;
border-radius: 0; /* kwadratowe, ostre rogi */
}
.btn__arrow { margin-left: 8px; }
/* Primary — pełny czerwony */
.btn--primary {
color: #fff;
background: var(--hud);
border: 1px solid var(--hud);
}
.btn--primary:hover { background: #c23040; border-color: #c23040; }
/* Ghost — obrys czerwony */
.btn--ghost {
color: var(--hud);
background: transparent;
border: 1px solid var(--hud);
}
.btn--ghost:hover { color: #fff; background: var(--hud); }
/* Glitch — mocne rozszczepienie RGB + rwanie całego buttona */
.btn--glitch { position: relative; overflow: visible; animation: btn-glitch-main 3.5s steps(1) infinite; }
.btn--glitch::before,
.btn--glitch::after {
content: attr(data-text);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.btn--glitch::before {
color: #2de2ff; /* cyan */
background: var(--hud);
mix-blend-mode: screen;
animation: btn-glitch-a 3.5s steps(1) infinite;
}
.btn--glitch::after {
color: #ff2d6a; /* magenta */
background: var(--hud);
mix-blend-mode: screen;
animation: btn-glitch-b 3.5s steps(1) infinite;
}
/* rwanie/cięcie całego buttona */
@keyframes btn-glitch-main {
0%, 84%, 100% { transform: translate(0, 0) skewX(0); clip-path: none; }
85% { transform: translate(6px, 0) skewX(-10deg); clip-path: inset(0 0 62% 0); }
87% { transform: translate(-8px, 0) skewX(6deg); clip-path: inset(40% 0 24% 0); }
89% { transform: translate(5px, 0); clip-path: inset(72% 0 0 0); }
91% { transform: translate(-4px, 0) skewX(-4deg); clip-path: inset(18% 0 50% 0); }
93% { transform: translate(0, 0); clip-path: none; }
}
/* kopia kanału — duże przesunięcia */
@keyframes btn-glitch-a {
0%, 84%, 100% { transform: translate(0, 0); clip-path: inset(0 0 100% 0); }
85% { transform: translate(-9px, -2px); clip-path: inset(0 0 55% 0); }
87% { transform: translate(7px, 2px); clip-path: inset(28% 0 30% 0); }
89% { transform: translate(-6px, 1px); clip-path: inset(58% 0 8% 0); }
91% { transform: translate(9px, -2px); clip-path: inset(8% 0 68% 0); }
}
@keyframes btn-glitch-b {
0%, 84%, 100% { transform: translate(0, 0); clip-path: inset(100% 0 0 0); }
85% { transform: translate(9px, 2px); clip-path: inset(55% 0 0 0); }
87% { transform: translate(-7px, -2px); clip-path: inset(32% 0 28% 0); }
89% { transform: translate(6px, -1px); clip-path: inset(8% 0 58% 0); }
91% { transform: translate(-9px, 2px); clip-path: inset(68% 0 10% 0); }
}
/* na hover — ciągły, intensywny glitch */
.btn--glitch:hover,
.btn--glitch:hover::before,
.btn--glitch:hover::after { animation-duration: 0.9s; }
/* ===== Komponent: media-video (reużywalny) ===== */
.media-video {
position: relative;
border-radius: var(--radius);
overflow: hidden;
}
.media-video__el {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===== Komponent: fx-glitch (dwa tryby, przełączane w JS) ===== */
.fx-glitch { position: relative; }
/* Tryb A: displacement + RGB split + przeskoki slice'ów */
.fx-glitch.is-mode-a .media-video__el {
filter: url(#fx-glitch);
animation: glitch-jolt 6s steps(1) infinite;
}
/* Tryb B: poziomy smear / pixel-stretch */
.fx-glitch.is-mode-b .media-video__el {
filter: url(#fx-glitch-2);
animation: glitch-smear 5s steps(1) infinite;
}
/* Okresowe przeskoki slice'ów (tryb A) */
@keyframes glitch-jolt {
0%, 86%, 100% { clip-path: none; transform: translate(0, 0); }
87% { transform: translate(-6px, 0); clip-path: inset(8% 0 82% 0); }
89% { transform: translate(8px, 0); clip-path: inset(38% 0 42% 0); }
91% { transform: translate(-4px, 0); clip-path: inset(66% 0 12% 0); }
93% { transform: translate(5px, 0); clip-path: inset(20% 0 60% 0); }
95% { transform: translate(0, 0); clip-path: none; }
}
/* Poziome rwanie (tryb B) */
@keyframes glitch-smear {
0%, 100% { transform: translate(0, 0); }
20% { transform: translate(14px, 0); clip-path: inset(30% 0 55% 0); }
21% { transform: translate(-10px, 0); clip-path: none; }
55% { transform: translate(-18px, 0); clip-path: inset(62% 0 20% 0); }
56% { transform: translate(0, 0); clip-path: none; }
}
/* Krótki błysk przy zmianie trybu */
.fx-glitch.is-switching .media-video__el {
filter: brightness(1.6) contrast(1.4) url(#fx-glitch-2);
}
/* Skanlinie */
.fx-glitch::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.35) 2px 4px);
mix-blend-mode: multiply;
opacity: 0.45;
animation: scanroll 7s linear infinite;
}
@keyframes scanroll { to { background-position: 0 200px; } }
/* ===== NAV (obramowany box nad hero, wyrównany z ramką) ===== */
.nav {
position: sticky; /* zostaje na górze podczas scrolla */
top: var(--nav-top);
margin: var(--nav-top) 4vw -1px; /* -1px: dolna krawędź nava zlewa się z górną ramki */
z-index: 50;
display: flex;
align-items: center;
gap: 24px; /* odstęp logo ↔ menu; reszta spychana przez margin-right:auto na .nav__menu */
padding: 10px clamp(16px, 2.4vw, 32px);
background: rgba(6, 7, 5, 0.86);
border: 1px solid var(--line);
backdrop-filter: blur(12px);
transition: transform 0.45s var(--ease), opacity 0.35s ease;
}
.nav.is-hidden {
opacity: 0;
pointer-events: none;
transform: translate3d(0, calc(-100% - var(--nav-top) - 2px), 0);
}
.nav.is-open { opacity: 1; pointer-events: auto; transform: none; }
@media (prefers-reduced-motion: reduce) {
.nav { transition: none; }
}
.nav__logo {
flex-shrink: 0;
display: inline-flex;
align-items: center;
text-decoration: none;
}
.nav__logo img {
display: block;
height: clamp(20px, 2vw, 28px);
width: auto;
}
.nav__menu { display: flex; align-items: center; gap: 6px; margin-right: auto; } /* menu po lewej, reszta spychana w prawo */
/* Przełącznik dźwięku (prawa strona nava) */
.nav__sound {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
padding: 0;
background: var(--glass);
border: 1px solid var(--glass-border);
color: var(--text-dim);
cursor: url("../../materials/cursor/red-base.png") 8 3, pointer;
cursor: -webkit-image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
cursor: image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__sound:hover { color: var(--text); border-color: rgba(219, 57, 76, 0.5); }
.nav__sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav__sound .nav__sound-off { display: none; }
.nav__sound.is-muted { color: var(--hud); }
.nav__sound.is-muted .nav__sound-on { display: none; }
.nav__sound.is-muted .nav__sound-off { display: block; }
.nav__item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 0.95rem;
letter-spacing: 0.03em;
color: var(--text-dim);
text-decoration: none;
background: none;
border: none;
font-family: var(--font-body);
cursor: url("../../materials/cursor/red-base.png") 8 3, pointer;
cursor: -webkit-image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
cursor: image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
transition: color 0.25s var(--ease);
}
.nav__item:hover { color: var(--text); }
.nav__caret { font-size: 0.7em; transition: transform 0.25s var(--ease); }
/* Grupa z panelem */
.nav__group { position: relative; }
.nav__panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 220px;
display: flex;
flex-direction: column;
padding: 10px;
background: rgba(10, 11, 9, 0.92);
border: 1px solid var(--line);
backdrop-filter: blur(14px);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
z-index: 60;
}
.nav__panel a {
padding: 9px 12px;
color: var(--text-dim);
text-decoration: none;
font-size: 0.92rem;
border-left: 2px solid transparent;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav__panel a:hover {
color: var(--text);
border-left-color: var(--hud);
background: rgba(255, 255, 255, 0.03);
}
/* Mega: siatka */
.nav__panel--mega {
display: grid;
grid-template-columns: repeat(2, minmax(160px, 1fr));
gap: 2px 18px;
min-width: 420px;
}
.nav__panel--cols { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
/* ===== MEGA MENU (glass z poświatą) ===== */
.nav__group--mega { position: static; } /* panel pełnej szerokości */
.megamenu {
/* .nav ma backdrop-filter → fixed liczy się względem nava; -1px = krawędzie ramki nava */
position: fixed;
top: calc(100% + 8px);
left: -1px;
right: -1px;
}
/* mostek hover między navem a panelem (nie zamyka się po drodze) */
.megamenu::before {
content: "";
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 14px;
}
.megamenu {
min-width: 0;
max-height: calc(100vh - var(--nav-top) - var(--nav-h) - 32px);
display: flex;
flex-direction: column;
overflow: hidden; /* grid scrolluje wewnątrz, pasek przypięty na dole */
padding: 0;
/* ramka panelu (jak w inspiracji) */
border: 1px solid var(--line);
background: rgba(10, 11, 13, 0.86);
backdrop-filter: blur(22px);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.megamenu__grid {
display: grid;
grid-template-columns: 1fr clamp(240px, 22vw, 320px);
gap: 0;
padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2vw, 30px) 0; /* górny padding na tekst; dół przy pasku */
flex: 1;
min-height: 0;
overflow-y: auto; /* kategorie scrollują, pasek zostaje na dole */
}
.megamenu__bar { flex-shrink: 0; }
/* kolumny wypełniają wysokość → pionowe linie (column-rule, border) sięgają dołu */
.megamenu__main { height: 100%; }
.megamenu__cats { min-height: 100%; padding-bottom: clamp(16px, 1.8vw, 26px); }
/* pionowe linie między kolumnami kategorii */
.megamenu__cats { column-rule: 1px solid var(--line); }
/* ===== wariant prosty (Company, Solutions) — bez showcase, kolumny flex z dividerami ===== */
.megamenu--simple .megamenu__grid { grid-template-columns: 1fr; }
.megamenu--simple .megamenu__main { padding-right: 0; }
.megamenu--simple .megamenu__cats { columns: initial; column-rule: none; display: flex; align-items: stretch; }
.megamenu--simple .mcat {
flex: 1;
min-width: 0;
margin-bottom: 0;
padding: 0 clamp(20px, 2.4vw, 48px);
border-right: 1px solid var(--line);
}
.megamenu--simple .mcat:first-child { padding-left: 0; }
.megamenu--simple .mcat:last-child { border-right: none; padding-right: 0; }
/* szeroka kolumna (np. Problems) — więcej miejsca + linki w 2 pod-kolumnach */
.megamenu--simple .mcat--wide { flex: 2.6; }
/* Problems: 3 kolumny, przepływ pionowy (7 wierszy × 3) */
.mcat--wide .mcat__links--cols {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(7, auto);
grid-auto-columns: minmax(0, 1fr);
gap: 3px clamp(18px, 2vw, 44px);
}
/* linia oddzielająca showcase od kategorii */
.megamenu__main { padding-right: clamp(20px, 2.4vw, 40px); }
.megamenu__showcase { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.4vw, 40px); }
.megamenu__head { margin-bottom: 20px; }
.megamenu__eyebrow {
display: block;
font-family: var(--font-display);
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hud);
margin-bottom: 8px;
}
.megamenu__head p { color: var(--text-dim); font-size: 1.02rem; max-width: 70ch; }
/* link do pełnej podstrony Services */
.megamenu__all {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 2px;
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text);
text-decoration: none;
transition: color 0.2s var(--ease);
}
.megamenu__all em { font-style: normal; color: var(--hud); display: inline-block; transition: transform 0.2s var(--ease); }
.megamenu__all:hover { color: var(--hud); }
.megamenu__all:hover em { transform: translateX(4px); }
/* dolny pasek sekcji (full-width, komórki z pionowymi liniami) */
.megamenu__bar {
display: flex;
align-items: stretch;
flex-wrap: wrap;
border-top: 1px solid var(--line);
}
.mmbar {
display: inline-flex;
align-items: center;
gap: 10px;
padding: clamp(13px, 1.3vw, 18px) clamp(16px, 1.6vw, 26px);
border-left: 1px solid var(--line);
color: var(--text-dim);
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.mmbar:first-child { border-left: none; }
.mmbar svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mmbar:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.mmbar--primary { color: var(--text); background: var(--glass); }
.mmbar--primary em { font-style: normal; color: var(--hud); margin-left: 4px; display: inline-block; transition: transform 0.2s var(--ease); }
.mmbar--primary:hover em { transform: translateX(4px); }
/* kategorie — płyną w kolumny */
.megamenu__cats { columns: 3; column-gap: clamp(20px, 2vw, 40px); }
.mcat { break-inside: avoid; margin-bottom: 26px; }
.mcat__head { display: flex; gap: 12px; margin-bottom: 18px; }
.mcat__icon { display: none; } /* bez ikonek przy tytułach */
.mcat__head h4 { font-family: var(--font-body); font-weight: 300; font-size: 0.92rem; color: var(--hud); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.08em; }
.mcat__head p { display: none; } /* bez podpisów kategorii */
/* nagłówek kategorii = link do sekcji podstrony usług */
.mcat__head h4 a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
.mcat__head h4 a:hover, .mcat__head h4 a:focus-visible { color: var(--hud); }
.mcat__links { list-style: none; display: flex; flex-direction: column; gap: 2px; padding-left: 0; }
.mcat__links a {
display: inline-block;
color: #a6a4a0;
font-weight: 300;
text-decoration: none;
font-size: 0.9rem;
padding: 3px 4px;
border-left: none; /* bez czerwonego paska (z .nav__panel a) */
transition: color 0.18s var(--ease);
}
/* strzałka tuż za tekstem (podstrona) — pokazuje się na hover */
.mcat__links a::after {
content: "→";
display: inline-block;
margin-left: 8px;
color: var(--hud);
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.mcat__links a:hover { color: var(--text); font-weight: 700; background: none; }
.mcat__links a:hover::after { opacity: 1; transform: translateX(0); }
/* showcase — bento feature boxy */
.megamenu__showcase {
--pink: rgb(219, 57, 76);
display: flex;
flex-direction: column;
gap: 12px;
}
.showcase__title {
font-family: var(--font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hud);
font-size: 1.1rem;
margin-bottom: 4px;
}
/* dwa boxy akcji pod produktami — „Let's talk" + „All Services" */
.showcase__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2px; }
.showcase__cta {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 16px;
text-decoration: none;
border: 1px solid var(--line);
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.showcase__cta span { color: var(--text-dim); font-size: 0.82rem; line-height: 1.35; }
.showcase__cta strong { color: var(--text); font-weight: 600; font-size: 1rem; }
.showcase__cta strong em { font-style: normal; color: var(--hud); display: inline-block; transition: transform 0.25s var(--ease); }
.showcase__cta:hover { border-color: rgba(219, 57, 76, 0.5); background: rgba(219, 57, 76, 0.06); }
.showcase__cta:hover strong { color: var(--hud); }
.showcase__cta:hover strong em { transform: translateX(4px); }
.feat {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 132px;
padding: 16px;
border-radius: 0;
text-decoration: none;
overflow: hidden;
background: #0d0a0d;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.feat:hover { border-color: rgba(219, 57, 76, 0.5); background: #120c10; }
/* ===== Glitch boxów (tylko gdy mega menu otwarte) ===== */
.nav__group.is-open .megamenu__showcase .feat { animation: feat-glitch 6s steps(1) infinite; }
.nav__group.is-open .megamenu__showcase .feat:nth-child(2) { animation-delay: -0.4s; }
.nav__group.is-open .megamenu__showcase .feat:nth-child(3) { animation-delay: -2.1s; }
.nav__group.is-open .megamenu__showcase .feat:nth-child(4) { animation-delay: -3.6s; }
.nav__group.is-open .megamenu__showcase .feat:nth-child(5) { animation-delay: -4.9s; }
/* hover — częstszy, mocniejszy glitch + RGB split tytułu */
.nav__group.is-open .megamenu__showcase .feat:hover { animation-duration: 1.1s; }
.feat:hover .feat__body strong {
animation: feat-title-rgb 0.3s steps(1) infinite;
}
@keyframes feat-glitch {
0%, 88%, 100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
89% { clip-path: inset(10% 0 66% 0); transform: translateX(-5px) skewX(-6deg); }
90.5% { clip-path: inset(46% 0 30% 0); transform: translateX(6px); }
92% { clip-path: inset(72% 0 8% 0); transform: translateX(-3px) skewX(4deg); }
93.5% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}
@keyframes feat-title-rgb {
0% { text-shadow: -2px 0 #2de2ff, 2px 0 var(--hud); }
50% { text-shadow: 2px 0 #2de2ff, -2px 0 var(--hud); }
100% { text-shadow: -1px 0 var(--hud), 1px 0 #2de2ff; }
}
.feat__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.feat__body strong { font-family: var(--font-body); font-weight: 600; color: var(--text); font-size: 1.12rem; }
.feat__body span { color: var(--text-dim); font-size: 0.82rem; line-height: 1.35; }
.feat__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* 1 — Project Management: różowa poświata + „+ New Task" pill + kursory */
.feat--pm { background:
radial-gradient(60% 55% at 22% 20%, rgba(219, 57, 76, 0.28), transparent 62%),
#0d0a0d; }
.feat__pill {
position: absolute; top: 16px; left: 16px;
padding: 6px 12px; border-radius: 999px;
font-size: 0.74rem; font-weight: 600; color: #fff;
background: linear-gradient(180deg, #e85565, #c22c3f);
box-shadow: 0 6px 18px rgba(219, 57, 76, 0.45);
}
.feat__cursors { position: absolute; top: 44px; left: 70px; }
.feat__cursors i {
position: absolute; width: 0; height: 0;
border-left: 5px solid transparent; border-right: 5px solid transparent;
border-top: 10px solid var(--pink);
transform: rotate(-30deg); opacity: 0.9;
}
.feat__cursors i:nth-child(1) { left: 0; top: 0; }
.feat__cursors i:nth-child(2) { left: 14px; top: 6px; opacity: 0.6; }
.feat__cursors i:nth-child(3) { left: 6px; top: 16px; opacity: 0.35; }
/* 2 — Automation: planeta z poświatą po prawej + orbita */
.feat--auto { background:
radial-gradient(45% 80% at 102% 42%, rgba(219, 57, 76, 0.55), rgba(150, 20, 80, 0.18) 42%, transparent 70%),
#0d0a0d; }
.feat--auto .feat__orbit {
position: absolute; top: 50%; right: -30%;
width: 150px; height: 150px; margin-top: -75px;
border: 1px solid rgba(219, 57, 76, 0.35);
border-radius: 50%;
transform: rotate(-18deg) scaleY(0.42);
}
/* 3 — Analytics: koncentryczne okręgi (radar) + dymek */
.feat--analytics { background:
radial-gradient(50% 70% at 12% 85%, rgba(219, 57, 76, 0.18), transparent 60%),
#0d0a0d; }
.feat__art--radar {
background:
radial-gradient(circle at 10% 92%, transparent 22px, rgba(219, 57, 76, 0.22) 23px, transparent 24px),
radial-gradient(circle at 10% 92%, transparent 44px, rgba(219, 57, 76, 0.16) 45px, transparent 46px),
radial-gradient(circle at 10% 92%, transparent 66px, rgba(219, 57, 76, 0.1) 67px, transparent 68px);
}
.feat__msg {
position: absolute; top: 18px; left: 40px;
width: 92px; height: 18px; border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.feat__msg::before {
content: ""; position: absolute; left: -24px; top: -1px;
width: 18px; height: 18px; border-radius: 50%;
background: rgba(219, 57, 76, 0.35);
}
/* 4 — Collaboration: siatka + delikatna poświata */
.feat--collab { background:
radial-gradient(45% 70% at 88% 40%, rgba(219, 57, 76, 0.2), transparent 62%),
#0d0a0d; }
.feat__art--grid {
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
}
/* scrim — cała strona rozmywa się pod otwartym mega menu */
.nav-scrim {
position: fixed;
inset: 0;
z-index: 48; /* nad treścią/dockiem, pod navem (50) i mega menu */
pointer-events: none;
opacity: 0;
visibility: hidden;
background: rgba(6, 7, 5, 0.42);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.nav-scrim.is-active { opacity: 1; visibility: visible; }
/* kaskadowe pojawianie treści mega menu — jeden po drugim, z rozmycia (blur-in) */
.megamenu__head,
.megamenu .mcat,
.megamenu__showcase > * {
opacity: 0;
transform: translateY(12px);
filter: blur(10px);
transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), filter 0.45s var(--ease);
}
.nav__group.is-open .megamenu__head { opacity: 1; transform: none; filter: none; transition-delay: 0.05s; }
.nav__group.is-open .mcat { opacity: 1; transform: none; filter: none; }
.nav__group.is-open .mcat:nth-child(1) { transition-delay: 0.10s; }
.nav__group.is-open .mcat:nth-child(2) { transition-delay: 0.15s; }
.nav__group.is-open .mcat:nth-child(3) { transition-delay: 0.20s; }
.nav__group.is-open .mcat:nth-child(4) { transition-delay: 0.25s; }
.nav__group.is-open .mcat:nth-child(5) { transition-delay: 0.30s; }
.nav__group.is-open .megamenu__showcase > * { opacity: 1; transform: none; filter: none; }
.nav__group.is-open .megamenu__showcase > *:nth-child(1) { transition-delay: 0.16s; }
.nav__group.is-open .megamenu__showcase > *:nth-child(2) { transition-delay: 0.22s; }
.nav__group.is-open .megamenu__showcase > *:nth-child(3) { transition-delay: 0.28s; }
.nav__group.is-open .megamenu__showcase > *:nth-child(4) { transition-delay: 0.34s; }
.nav__group.is-open .megamenu__showcase > *:nth-child(5) { transition-delay: 0.40s; }
@media (max-width: 1080px) {
.megamenu { position: static; max-height: none; border: none; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none; padding: 0; }
.nav-scrim { display: none; }
.megamenu::after { display: none; }
/* bez kaskady na mobile (rozwijane w akordeonie) */
.megamenu__head, .megamenu .mcat, .megamenu__showcase > * { opacity: 1; transform: none; }
.megamenu__grid { grid-template-columns: 1fr; gap: 20px; }
.megamenu__cats { columns: 1; }
.megamenu__showcase { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
/* wariant prosty — kolumny w pionie na mobile */
.megamenu--simple .megamenu__cats { display: block; }
.megamenu--simple .mcat { border-right: none; padding: 0 0 18px; }
.megamenu--simple .megamenu__bar { flex-wrap: wrap; }
}
.nav__col { display: flex; flex-direction: column; }
.nav__col-title {
padding: 8px 12px 4px;
font-family: var(--font-display);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hud);
}
/* Otwarcie panelu — sterowane .is-open (JS: hover z intencją / klik) */
.nav__group.is-open > .nav__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav__group.is-open .nav__caret { transform: rotate(180deg); color: var(--hud); }
.nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav__cta { height: 40px; padding: 0 22px; }
/* Hamburger */
.nav__burger {
display: none;
flex-direction: column;
gap: 5px;
width: 34px;
padding: 6px;
background: none;
border: none;
cursor: url("../../materials/cursor/red-base.png") 8 3, pointer;
cursor: -webkit-image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
cursor: image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
}
.nav__burger span {
height: 2px;
width: 100%;
background: var(--text);
transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mcat__toggle, .mcat__all { display: none; }
@media (max-width: 1080px) { .mcat__all { display: list-item; } }
/* ===== NAV mobile — pełnoekranowe menu: akordeon, jedna kolumna, CTA na dole ===== */
@media (max-width: 1080px) {
/* rozmycie w pseudo-elemencie: backdrop-filter na .nav robiłby z niego blok zawierający
dla position:fixed — panel menu miałby wtedy wysokość paska i wystawał poza stronę */
.nav { backdrop-filter: none; gap: 10px; }
.nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
backdrop-filter: blur(12px);
pointer-events: none;
}
.nav__actions, .nav__search { display: none; }
/* pasek: logo po lewej, dźwięk + burger po prawej — zawsze nad panelem */
.nav__logo { position: relative; z-index: 3; }
.nav__sound { margin-left: auto; position: relative; z-index: 3; width: 44px; height: 44px; }
.nav__burger {
display: flex; position: relative; z-index: 3;
width: 44px; height: 44px; justify-content: center; padding: 0 9px;
border: 1px solid var(--glass-border); background: var(--glass);
}
.nav.is-open .nav__burger { border-color: var(--hud); }
.nav.is-open .nav__burger span { background: var(--hud); }
/* panel na cały ekran (pod paskiem) */
.nav__menu {
position: fixed;
inset: 0;
z-index: 2;
width: 100%;
height: 100dvh;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
padding: calc(var(--nav-bottom, 100px) + 16px) 6vw calc(120px + env(safe-area-inset-bottom));
background: #070806;
border: 0;
backdrop-filter: none;
clip-path: inset(0 0 100% 0);
visibility: hidden;
transition: clip-path 0.5s var(--ease), visibility 0s linear 0.5s;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.nav.is-open .nav__menu {
clip-path: inset(0 0 0 0);
visibility: visible;
transition: clip-path 0.55s var(--ease);
}
/* pełne tło pod paskiem, gdy menu otwarte — przewijana lista nie wchodzi pod logo */
.nav.is-open::after {
content: "";
position: fixed;
left: 0; right: 0; top: 0;
height: calc(var(--nav-bottom, 100px) + 8px);
z-index: 2;
background: #070806;
border-bottom: 1px solid var(--line);
pointer-events: none;
}
/* pozycje 1. poziomu: duże, numerowane, z linią — cały wiersz to cel dotyku */
.nav__menu { counter-reset: navi; }
.nav__menu > .nav__item,
.nav__group > .nav__trigger {
counter-increment: navi;
position: relative;
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-height: 64px;
padding: 0 48px 0 0;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: none;
font-family: var(--font-display);
font-size: clamp(1.7rem, 8vw, 2.3rem);
line-height: 1;
letter-spacing: 0.01em;
text-transform: uppercase;
text-align: left;
color: var(--text);
}
.nav__menu > .nav__item::before,
.nav__group > .nav__trigger::before {
content: counter(navi, decimal-leading-zero);
flex: 0 0 auto;
min-width: 2ch;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
color: var(--hud);
transform: translateY(-0.6em);
}
.nav__menu > .nav__item:active,
.nav__group > .nav__trigger:active { color: var(--hud); }
.nav__menu > .nav__item::after { display: none; }
/* plus → krzyżyk zamiast małego trójkąta */
.nav__group > .nav__trigger .nav__caret { display: none; }
.nav__group > .nav__trigger::after {
content: "";
position: absolute;
right: 6px; top: 50%;
width: 16px; height: 16px;
margin-top: -8px;
background: currentColor;
clip-path: polygon(7px 0, 9px 0, 9px 7px, 16px 7px, 16px 9px, 9px 9px, 9px 16px, 7px 16px, 7px 9px, 0 9px, 0 7px, 7px 7px);
transition: transform 0.35s var(--ease), color 0.25s;
}
.nav__group.is-open > .nav__trigger { color: var(--hud); border-bottom-color: transparent; }
.nav__group.is-open > .nav__trigger::after { transform: rotate(135deg); }
/* kaskada pozycji przy otwarciu */
.nav__menu > * {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.nav.is-open .nav__menu > * {
opacity: 1;
transform: none;
transition-delay: calc(0.12s + var(--i, 0) * 0.05s);
}
/* akordeon: wysokość liczona w JS (płynne otwieranie/zamykanie) */
.nav__group { position: static; width: 100%; }
.nav__panel,
.nav__panel.megamenu {
position: static;
display: block;
opacity: 1;
visibility: visible;
transform: none;
min-width: 0;
max-height: 0;
overflow: hidden;
padding: 0;
margin: 0;
background: transparent;
border: none;
box-shadow: none;
backdrop-filter: none;
transition: max-height 0.45s var(--ease);
}
.nav__group.is-open > .nav__panel { border-bottom: 1px solid var(--line); }
/* treść panelu: bez ozdobników desktopu, jedna kolumna */
.megamenu__grid { display: block; padding: 4px 0 8px calc(2ch + 14px); }
.megamenu__showcase, .megamenu__spartan, .mcat__icon, .mcat__head p, .megamenu__head { display: none !important; }
.megamenu__cats, .megamenu--simple .megamenu__cats { display: block; columns: auto; }
.megamenu .mcat, .megamenu--simple .mcat { margin: 0; padding: 14px 0 6px; border: 0; opacity: 1; transform: none; filter: none; }
.megamenu .mcat + .mcat { border-top: 1px dashed var(--line); }
.mcat__head { display: block; margin: 0 0 6px; }
.mcat__head h4, .mcat__head h4 a {
margin: 0;
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hud);
}
.mcat__links, .mcat--wide .mcat__links--cols { display: flex; flex-direction: column; columns: auto; gap: 0; }
.mcat__links a {
display: flex;
align-items: center;
min-height: 44px;
padding: 6px 0;
font-size: 1rem;
line-height: 1.3;
color: var(--text-dim);
}
.mcat__links a::after { display: none; }
.mcat__toggle + .mcat__head + .mcat__links, .mcat__links { padding-left: 0; }
.mcat__links a:active { color: var(--text); }
/* Services: kategorie jako drugi poziom akordeonu (przycisk wstrzykuje nav.js) */
.mcat__toggle {
display: flex; align-items: center; gap: 10px; width: 100%;
min-height: 48px; padding: 0; border: 0; background: none;
font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.02em;
text-transform: uppercase; text-align: left; color: var(--text);
}
.mcat__toggle b { font-weight: 400; font-family: var(--mono); font-size: 0.66rem; color: var(--text-dim); letter-spacing: 0.08em; }
.mcat__toggle i {
margin-left: auto; width: 9px; height: 9px; flex: 0 0 9px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: translateY(-3px) rotate(45deg); transition: transform 0.35s var(--ease);
}
.mcat.is-open > .mcat__toggle { color: var(--hud); }
.mcat.is-open > .mcat__toggle i { transform: translateY(2px) rotate(-135deg); }
.mcat:has(.mcat__toggle) .mcat__head { display: none; }
.mcat:has(.mcat__toggle) { padding: 4px 0; }
.mcat:has(.mcat__toggle) .mcat__links { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.mcat__all a { color: var(--text); gap: 8px; }
.mcat__all a em { font-style: normal; color: var(--hud); }
/* pasek skrótów panelu → lista linków ze strzałką */
.megamenu__bar, .megamenu--simple .megamenu__bar {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 0 10px calc(2ch + 14px);
padding: 0;
border: 0;
background: none;
}
.mmbar, .mmbar--urgent {
min-height: 44px;
margin: 0;
padding: 0;
border: 0;
border-top: 1px dashed var(--line);
background: none;
font-size: 0.95rem;
color: var(--text);
}
.mmbar svg { display: none; }
.mmbar--urgent { margin-left: 0; }
/* wyrównanie do jednej linii (nadpisuje wcięcia z desktopu) */
.nav__menu .mcat__head, .nav__menu .mcat__head > div, .nav__menu .mcat__head h4,
.nav__menu .mcat__head h4 a, .nav__menu .mmbar { padding-left: 0; margin-left: 0; }
.nav__menu .mmbar { padding-right: 0; }
/* CTA przyklejone do dołu ekranu, gdy menu otwarte (te same linki co na desktopie) */
.nav.is-open .nav__actions {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 10px;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 3;
padding: 14px 6vw calc(14px + env(safe-area-inset-bottom));
background: #070806;
border-top: 1px solid var(--line);
animation: nav-cta-in 0.5s var(--ease) 0.25s both;
}
.nav.is-open .nav__contact,
.nav.is-open .nav__cta {
display: flex; align-items: center; justify-content: center;
height: 52px; padding: 0 16px;
font-size: 0.95rem;
}
.nav.is-open .nav__contact { border: 1px solid var(--glass-border); }
}
@keyframes nav-cta-in { from { opacity: 0; transform: translateY(100%); } }
html.nav-locked, html.nav-locked body { overflow: hidden; }
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
.nav__menu, .nav.is-open .nav__menu, .nav__panel, .nav__menu > * { transition: none !important; }
.nav.is-open .nav__actions { animation: none; }
}
/* ===== DOCK: pionowa nawigacja sekcji (glassmorphism + scroll-spy) ===== */
.dock {
position: fixed;
left: clamp(12px, 2vw, 28px);
top: 50%;
transform: translateY(-50%);
z-index: 45;
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line);
backdrop-filter: blur(16px);
}
.dock__item {
position: relative;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--text-dim);
transition: color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.dock__item svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.dock__item:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.dock__item.is-active {
color: #fff;
background: var(--hud);
transform: scale(1.06);
}
/* etykieta (tooltip) po prawej, na hover */
.dock__item::after {
content: attr(data-label);
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(-6px);
padding: 6px 14px;
font-family: var(--font-display);
font-size: 0.72rem;
letter-spacing: 0.06em;
white-space: nowrap;
color: var(--text);
background: rgba(10, 11, 9, 0.92);
border: 1px solid var(--line);
border-radius: 999px;
backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.dock__item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 860px) { .dock { display: none; } }
/* ===== Pasek logo (marquee) — przyklejony do dolnej linii boxa ===== */
.logos {
position: relative;
margin-top: -1px; /* styk z dolną krawędzią ramki hero */
overflow: hidden;
display: flex;
align-items: center; /* logosy na środku wolnej przestrzeni (nie przy górnym marginie) */
min-height: clamp(140px, 20vh, 240px);
padding: 0;
background: #060705;
border-top: 1px solid var(--line);
/* wygaszenie brzegów — wąska strefa, logosy widoczne blisko krawędzi */
-webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
.logos__viewport { width: 100%; overflow: hidden; }
.logos__track {
display: flex;
align-items: center;
width: max-content;
gap: clamp(40px, 6vw, 96px);
animation: logos-marquee 46s linear infinite;
}
.logos:hover .logos__track { animation-play-state: paused; }
/* wszystkie logo jednakowe: biały kolor, ta sama wysokość */
.logos__item {
height: clamp(24px, 2.6vw, 34px);
width: auto;
flex: 0 0 auto;
filter: brightness(0) invert(1); /* ujednolicenie na biało */
opacity: 0.55;
transition: opacity 0.3s var(--ease);
}
.logos__item--publicis { height: clamp(44px, 4.2vw, 56px); }
.logos__item--das { height: clamp(23px, 2.3vw, 30px); }
.logos__item--team-one { height: clamp(54px, 5vw, 68px); }
.logos__item:hover { opacity: 1; }
@keyframes logos-marquee { to { transform: translateX(-50%); } }
/* ===== WORK — pajacyki na sznurkach (cała sekcja mieści się w ekranie) ===== */
.puppets {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
background: #060705;
padding: clamp(24px, 4vh, 56px) 6vw clamp(16px, 2.5vh, 36px);
overflow: hidden;
--card-scale: 1; /* większe karty na większych ekranach */
}
@media (min-width: 1200px) { .puppets { --card-scale: 1.25; } }
@media (min-width: 1600px) { .puppets { --card-scale: 1.5; } }
@media (min-width: 2000px) { .puppets { --card-scale: 1.75; } }
.puppets__head { flex: none; text-align: center; margin-bottom: clamp(8px, 2vh, 24px); }
.puppets__stage {
position: relative;
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* rig = box w rozmiarze ręki; sznurki liczone względem niego (zostają na palcach) */
.puppets__rig {
position: relative;
width: clamp(340px, 46vw, 620px);
margin: 0 auto;
z-index: 2;
}
.puppets__hand {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 3; /* ręka nad węzełkami */
pointer-events: none;
/* glitch jak postać w hero: displacement + RGB split + przeskoki */
filter: url(#fx-glitch) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
animation: glitch-jolt 6s steps(1) infinite;
}
/* pojedynczy pajacyk: węzełek + sznurek + okno; kołysze się wokół opuszka */
.puppet {
position: absolute;
left: var(--fx); /* opuszek palca, w % ręki */
top: var(--fy);
width: 0; /* zero szerokości → string i okno centrują się na opuszku */
display: flex;
flex-direction: column;
align-items: center;
transform-origin: top center; /* pivot = opuszek */
z-index: 2;
will-change: transform;
}
/* węzełek — pętelka zawiązana na palcu */
.puppet__knot {
width: 8px;
height: 8px;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
margin-bottom: -1px;
}
.puppet__string { display: none; } /* linę rysuje SVG (wygina się) */
/* karta wisi na końcu liny (pozycjonowana przez JS) */
.puppet__weight {
position: absolute;
top: 0;
left: 0;
transform-origin: top center;
will-change: transform;
}
/* warstwa z linami */
.puppets__ropes {
position: absolute;
inset: 0;
overflow: visible;
pointer-events: none;
z-index: 1;
}
.puppets__ropes path {
fill: none;
stroke: rgba(255, 255, 255, 0.42);
stroke-width: 1;
}
@keyframes puppet-sway {
from { transform: rotate(var(--a1, -2deg)); }
to { transform: rotate(var(--a2, 2deg)); }
}
/* okno (retro window z portfolio) — większe na większych ekranach */
.win {
width: calc(var(--w, 220px) * var(--card-scale, 1));
margin: 0;
background: #0c0d10;
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.win:active { cursor: grabbing; }
.puppet.is-dragging { z-index: 20; }
.win__bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 20px;
padding: 0 8px;
background: linear-gradient(to bottom, #2a2d33, #1b1d22);
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.win__dots { position: relative; width: 34px; height: 8px; }
.win__dots::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: #8a8f98;
box-shadow: 12px 0 #8a8f98, 24px 0 #8a8f98;
}
.win__ctrls { font-size: 0.6rem; letter-spacing: 2px; color: #aeb3bd; }
.win img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
filter: grayscale(1) contrast(1.25) brightness(0.95);
}
/* dot-matrix na obrazie w oknie */
.win { position: relative; }
.win::after {
content: "";
position: absolute;
inset: 20px 0 0 0; /* pod paskiem */
pointer-events: none;
background-image: radial-gradient(rgba(6, 7, 5, 0.85) 1px, transparent 1.5px);
background-size: 4px 4px;
mix-blend-mode: multiply;
}
.win.is-empty img { display: none; }
.win.is-empty { min-height: 140px; }
@media (prefers-reduced-motion: reduce) {
.puppet { animation: none; }
}
@media (max-width: 860px) {
.puppets__stage { height: clamp(560px, 150vw, 900px); }
}
/* ===== Puste sekcje (reużywalny komponent .panel) ===== */
.panel {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
scroll-margin-top: 0;
padding: 80px 6vw;
}
.panel__inner { text-align: center; }
.panel__index {
display: block;
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.3em;
color: var(--hud);
margin-bottom: 12px;
}
.panel__title {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(2.5rem, 8vw, 7rem);
text-transform: uppercase;
color: var(--text);
}
/* ===== FOOTER (jak inspiracja) ===== */
/* wrapper — trzyma margines ramki i pozwala logo wystać poza box (footer ma overflow:hidden) */
.footer-wrap {
position: relative;
margin: 0 4vw 4vw; /* w ramce, równo z nav/hero */
}
.footer {
--fpad-x: clamp(28px, 4vw, 64px);
position: relative;
z-index: 1; /* box zasłania symbol, zostaje tylko wystający dół */
overflow: hidden;
background: #090a09;
border: 1px solid var(--line);
padding: clamp(40px, 6vh, 90px) var(--fpad-x) clamp(28px, 4vh, 48px);
}
/* pełna pozioma linia — dotyka bocznych krawędzi ramki */
.footer__rule {
height: 1px;
border: 0;
background: var(--line);
margin: clamp(28px, 4vw, 52px) calc(-1 * var(--fpad-x));
}
/* nagłówek + CTA */
.footer__hero { text-align: center; max-width: 820px; margin: 0 auto; }
.footer__headline {
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
line-height: 0.95;
font-size: clamp(2.4rem, 7vw, 5.5rem);
color: var(--text);
}
.footer__tagline {
margin: clamp(14px, 2vh, 22px) auto clamp(20px, 3vh, 30px);
max-width: 48ch;
color: #a8a6a2;
font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}
/* symbol [O] — góra wystaje pod Contact us, dół chowa się za glass-paskiem social */
.footer__symbol {
position: relative;
z-index: 0; /* pod paskiem social (ten ma z-index 2) → glass go rozmazuje */
display: flex;
justify-content: center;
margin: clamp(28px, 6vh, 72px) 0 0;
pointer-events: none;
}
.footer__symbol::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: clamp(520px, 72vw, 940px);
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(219, 57, 76, 0.45), transparent 62%);
filter: blur(24px);
pointer-events: none;
}
.footer__symbol img {
position: relative;
height: clamp(300px, 46vh, 560px); /* większy */
width: auto;
/* glitch bez niebieskiego ghosta (dedykowany filtr) + przeskoki */
filter: url(#fx-glitch-logo) drop-shadow(0 0 28px rgba(219, 57, 76, 0.55));
animation: glitch-jolt 6s steps(1) infinite;
}
/* jeden glass-box: social + kolumny (nachodzi na dolną połowę symbolu) */
.footer__box {
position: relative;
z-index: 2;
margin: clamp(-130px, -13vh, -85px) 0 clamp(28px, 4vh, 48px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0; /* ostre rogi */
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* social — górny rząd boxa */
.footer__social {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__soc {
display: flex;
align-items: center;
gap: 10px;
padding: clamp(14px, 2vw, 22px);
color: var(--text);
text-decoration: none;
border-right: 1px solid rgba(255, 255, 255, 0.1);
transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.footer__soc:last-child { border-right: none; }
.footer__soc svg {
width: 20px; height: 20px; flex-shrink: 0;
fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.footer__soc span:nth-child(2) { font-family: var(--font-display); letter-spacing: 0.04em; }
.footer__arrow { margin-left: auto; color: var(--text-dim); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
.footer__soc:hover { background: rgba(219, 57, 76, 0.1); }
.footer__soc:hover .footer__arrow { color: var(--hud); transform: translateX(4px); }
/* kolumny linków — dolna część tego samego boxa */
.footer__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.footer__col {
display: flex;
flex-direction: column;
gap: 8px;
padding: clamp(18px, 2vw, 28px);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__col:last-child { border-right: none; }
.footer__col h4 {
font-family: var(--font-display);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 8px;
}
.footer__col a {
color: #c7c5c1;
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s var(--ease);
}
.footer__col a:hover { color: var(--hud); }
/* dół: logo + opis + subskrypcja */
.footer__bottom {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(24px, 4vw, 64px);
align-items: end;
}
.footer__logo img { height: clamp(26px, 3vw, 40px); width: auto; display: block; margin-bottom: 16px; }
.footer__desc { color: #8f8d8a; font-size: 0.92rem; max-width: 42ch; line-height: 1.6; }
.footer__subscribe { display: flex; gap: 10px; }
.footer__subscribe input {
flex: 1;
min-width: 0;
padding: 14px 18px;
background: transparent;
border: 1px solid var(--line);
color: var(--text);
font-family: var(--font-display);
letter-spacing: 0.08em;
font-size: 0.85rem;
}
.footer__subscribe input::placeholder { color: var(--text-dim); }
.footer__subscribe input:focus { outline: none; border-color: var(--hud); }
.footer__subscribe .btn { white-space: nowrap; }
.footer__copy {
margin-top: clamp(24px, 3vh, 36px);
color: var(--text-dim);
font-size: 0.82rem;
letter-spacing: 0.02em;
}
@media (max-width: 860px) {
.footer__social { grid-template-columns: 1fr 1fr; }
.footer__soc:nth-child(2) { border-right: none; }
.footer__soc:nth-child(1), .footer__soc:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer__cols { grid-template-columns: 1fr 1fr; }
.footer__col:nth-child(2) { border-right: none; }
.footer__col:nth-child(1), .footer__col:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer__bottom { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 560px) {
.footer__subscribe { flex-direction: column; }
}
/* ===== HERO ===== */
/* ===== HERO scroll-jack (pin + poziomy track) ===== */
.hero-scroll { position: relative; height: 200vh; }
.hero-pin {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden;
}
.hero-track {
display: flex;
width: 200%; /* 2× szerokość pina (= body, bez scrollbara) */
height: 100%;
will-change: transform;
}
.hero-slide {
flex: 0 0 50%; /* jeden slajd = szerokość body */
width: 50%;
height: 100%;
min-height: 0;
}
/* podpowiedź „Scroll →" */
.hero-hint {
position: absolute;
right: 4vw;
bottom: clamp(26px, 3.4vw, 44px);
z-index: 6;
pointer-events: none;
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
}
.hero-hint em { font-style: normal; color: var(--hud); display: inline-block; animation: hint-arrow 1.4s var(--ease) infinite; }
@keyframes hint-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.hero {
position: relative;
height: 100%;
min-height: 0;
display: flex;
align-items: stretch; /* ramka wypełnia hero — dolna linia na samym dole */
padding: 0 4vw;
background: #060705;
}
/* ===== Slajd 2 hero (lustro slajdu 1: copy po lewej, postać po prawej) ===== */
/* Grid i divider dziedziczą 1:1 po slajdzie 1 — desktop w @media ≥861px (poniżej) */
.hero2__left {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(24px, 3vw, 48px);
min-width: 0;
}
.hero2__part { min-width: 0; }
.hero2__title {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
line-height: 0.92;
font-size: clamp(2.2rem, 4.4vw, 4.6rem);
color: var(--text);
margin-bottom: clamp(14px, 1.8vw, 22px);
}
/* główny akapit */
.hero2__sub {
color: #a8a6a2;
font-size: 22px; /* primary — spójne ze slajdem 1 */
line-height: 1.55;
max-width: none; /* rozstrzel na pełną szerokość kolumny (jak linia) */
letter-spacing: 0.015em;
margin-bottom: clamp(14px, 1.8vw, 22px);
}
.hero2__sub strong { color: #ecebe8; }
/* secondary — mniejszy, przygaszony */
.hero2__sub--sm {
font-size: 19px; /* secondary — spójne ze slajdem 1 */
color: #8f8d8a;
margin-bottom: clamp(18px, 2.4vw, 28px);
}
/* dolna część: statystyki */
.hero2__stats {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center; /* wycentrowane dane */
gap: clamp(20px, 3vw, 44px);
padding-top: clamp(18px, 2.4vw, 28px);
}
.hero2__stat { text-align: center; }
/* pozioma linia dzieląca copy / statystyki — jak .hero__portfolio::before w slajdzie 1 */
.hero2__stats::before {
content: "";
position: absolute;
top: 0;
left: calc(-1 * var(--frame-pad));
right: calc(-1 * var(--frame-pad));
height: 1px;
background: var(--line);
}
.hero2__stat strong {
display: block;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.8rem, 3vw, 2.8rem);
color: var(--text);
line-height: 1;
margin-bottom: 4px;
}
.hero2__stat span { color: var(--text-dim); font-size: 0.82rem; }
/* prawa: postać / wideo — bazowo (mobile); desktop lustrzany w @media ≥861px */
.hero2__figure {
position: relative;
min-width: 0;
overflow: visible;
z-index: 5;
animation: float 6s ease-in-out infinite; /* jak slajd 1 */
}
.hero2__figure-inner {
position: absolute;
inset: 0;
z-index: 1; /* wideo nad matrixem */
}
/* matrix za kostką (jak w slajdzie 1), pełna szerokość figury */
.hero2__figure .code-rain {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.4;
pointer-events: none;
}
.hero2__figure .media-video__el {
width: 100%;
height: 100%;
object-fit: contain; /* cała postać widoczna (przezroczysty webm) */
object-position: 50% 100%; /* postać stoi przy dole */
}
/* Desktop: lustro slajdu 1 — równe połowy, postać w prawej, copy w lewej */
@media (min-width: 861px) {
/* dokładny podział na pół (50/50) */
.hero__body.hero__body--rev { grid-template-columns: 1fr 1fr; align-items: stretch; }
/* lewa połowa: copy w dwóch rzędach (lustro hero__right) */
.hero2__left {
grid-column: 1;
align-self: stretch;
display: grid;
grid-template-rows: 1fr;
gap: 0;
min-height: 0;
z-index: 6;
}
.hero2__copy {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding-bottom: clamp(16px, 2vw, 28px);
}
.hero2__stats { align-content: center; padding-top: clamp(16px, 2vw, 28px); }
/* prawa połowa: postać (lustro hero__figure, grid-column 2) */
.hero2__figure {
grid-column: 2;
justify-self: center;
align-self: end;
width: min(100%, clamp(300px, 42vw, 860px));
height: clamp(460px, 92vh, 1180px);
margin-bottom: calc(-1 * var(--frame-pad)); /* dół przy dolnej ramce */
}
/* podnieś wideo wyżej, żeby kostka nachodziła na tytuł */
.hero2__figure-inner { transform: translateY(clamp(-300px, -22vh, -130px)); }
}
.hero2__figure-ph {
font-family: var(--font-display);
letter-spacing: 0.22em;
text-transform: uppercase;
font-size: 0.82rem;
color: var(--text-dim);
}
/* mobile: brak scroll-jacka — slajdy w pionie, normalny scroll */
@media (max-width: 860px) {
.hero-scroll { height: auto; }
.hero-pin { position: static; height: auto; overflow: visible; }
.hero-track { flex-direction: column; width: 100%; transform: none !important; }
.hero-slide { flex: none; width: 100%; height: auto; }
.hero { min-height: calc(100svh - var(--nav-h) - var(--nav-top)); height: auto; }
.hero-hint { display: none; }
.hero__body.hero__body--rev { grid-template-columns: minmax(0, 1fr); }
.hero2__figure { min-height: 42vh; order: 2; }
.hero-slide--2 { min-height: calc(100svh - var(--nav-h) - var(--nav-top)); }
}
/* Ramka z cienkich kresek — mieści się na ekranie */
.hero__frame {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-width: 0; /* nie rozpychaj ramki do min-content tytułu */
max-width: none;
margin: 0 auto;
--frame-pad: clamp(18px, 3.2vw, 56px);
padding: var(--frame-pad);
border: 1px solid var(--line);
}
.hero__title {
font-family: var(--font-display);
font-weight: 900;
line-height: 0.9;
text-transform: uppercase;
white-space: nowrap; /* tytuł w jednej linii */
overflow: hidden; /* nic nie wystaje poza ramkę */
/* full-bleed: kreska na 100% szerokości boxa */
margin: 0 calc(-1 * var(--frame-pad)) clamp(24px, 4vw, 48px);
padding: 0 var(--frame-pad) clamp(20px, 3vw, 36px);
border-bottom: 1px solid var(--line);
}
/* SVG skaluje tekst do 100% szerokości (viewBox ustawiany w JS) */
.hero__title-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.hero__title-text {
font-family: var(--font-display);
font-weight: 400; /* Unica One ma jedną grubość */
font-size: 100px; /* baza do pomiaru bbox; finalnie skaluje viewBox */
fill: var(--text);
/* pogrubienie liter obrysem w tym samym kolorze (bez faux-bold) */
stroke: var(--text);
stroke-width: 3;
paint-order: stroke;
stroke-linejoin: round;
dominant-baseline: text-before-edge;
}
.hero__body {
position: relative;
flex: 1;
min-height: 0;
min-width: 0;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: clamp(24px, 5vw, 72px);
align-items: center;
}
/* Pionowa linia między wideo a opisem (tylko desktop) */
.hero__divider { display: none; }
/* Lecący kod — ograniczony do boxu wytyczonego liniami */
.code-rain {
position: absolute;
top: 0;
left: 0;
width: 100%; /* jawny rozmiar — canvas nie zostaje przy domyślnych 300×150 */
height: 100%;
z-index: 0;
opacity: 0.4;
pointer-events: none;
}
.hero__figure {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
width: 100%;
height: clamp(220px, 46vh, 620px);
animation: float 6s ease-in-out infinite;
perspective: 900px; /* dla lekkiego 3D przy ruchu myszą */
}
/* warstwa podążająca za kursorem — cała postać w lewo/prawo */
.hero__figure-inner {
position: absolute;
inset: 0;
will-change: transform;
transition: transform 180ms ease-out;
}
/* Wideo w hero — wtopione w czerń, najeżdża na tytuł */
.hero__figure.media-video {
border-radius: 0;
overflow: visible;
animation: float 6s ease-in-out infinite;
z-index: 5;
margin-top: clamp(-260px, -22vh, -90px);
height: clamp(380px, 82vh, 1000px);
}
.hero__figure.media-video .media-video__el {
position: absolute;
inset: 0;
z-index: 1; /* wideo nad kodem */
object-fit: contain; /* postać przezroczysta — bez maski/gradientu */
}
/* czerwone halo za postacią (slajd 1) — duże, rozmyte, prześwituje dookoła sylwetki */
.hero__figure::after {
content: "";
position: absolute;
left: 50%;
bottom: 6%;
transform: translateX(-50%);
width: 125%;
height: 85%;
background: radial-gradient(50% 50% at 50% 60%, rgba(219, 57, 76, 0.6), rgba(219, 57, 76, 0.2) 42%, transparent 72%);
filter: blur(34px);
z-index: -1; /* za wideo (inner ma z-index 1) */
pointer-events: none;
}
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-18px); }
}
.hero__subtitle {
font-size: 22px; /* primary */
line-height: 1.55;
letter-spacing: 0.015em;
color: #a8a6a2; /* neutralna szarość zamiast niebieskawej */
max-width: 48ch;
margin-bottom: 36px;
}
.hero__subtitle strong { color: #ecebe8; } /* nazwa — jaśniejsza, neutralna */
.text-brand { color: var(--hud); } /* akcent brandowy */
/* loga partnerów nad opisem */
.hero__partners {
display: flex;
align-items: center;
gap: clamp(16px, 2.4vw, 32px);
margin-bottom: 24px;
flex-wrap: wrap;
}
.hero__partners img {
height: clamp(28px, 3.4vw, 44px);
width: auto;
display: block;
opacity: 0.9;
}
/* drugi akapit — mniejszy, uzupełniający */
.hero__subtitle--sm {
font-size: 19px; /* secondary */
color: #8f8d8a;
margin-bottom: 28px;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* ===== Portfolio: rząd małych miniatur ===== */
.hero__portfolio {
position: relative;
min-width: 0; /* nie rozpychaj kolumny szerokością karuzeli */
display: flex;
flex-wrap: wrap;
gap: 10px;
align-content: center;
}
/* pozioma linia dzieląca — full-bleed, dotyka boków (bez paddingów) */
.hero__portfolio::before {
content: "";
position: absolute;
top: 0;
left: calc(-1 * var(--frame-pad));
right: calc(-1 * var(--frame-pad));
height: 1px;
background: var(--line);
}
/* ===== Komponent: carousel (coverflow — każdy slajd to mały telewizor CRT) ===== */
.carousel { position: relative; width: 100%; min-width: 0; }
.carousel__viewport { overflow: hidden; width: 100%; min-width: 0; padding: 14px 0; }
.carousel__track {
display: flex;
align-items: center;
gap: 14px;
width: max-content; /* track dopasowany do slajdów; centruje go JS */
transition: transform 0.5s var(--ease);
will-change: transform;
}
/* --- crt-tile: kineskop. Obraz → zimny fosfor, siatka RGB, skanlinie, rolling bar, tracking noise, winieta --- */
.carousel__slide {
--crt-tint: grayscale(1) sepia(0.55) hue-rotate(168deg) saturate(1.7) contrast(1.4) brightness(0.8);
--crt-tint-on: grayscale(1) sepia(0.5) hue-rotate(168deg) saturate(2) contrast(1.6) brightness(0.92);
flex: 0 0 auto;
width: clamp(140px, 22vw, 240px);
aspect-ratio: 16 / 10;
margin: 0;
position: relative;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--line);
background: #04060a;
box-shadow: inset 0 0 0 2px #0a0c10, inset 0 0 26px rgba(0, 0, 0, 0.9);
transform: scale(0.82);
opacity: 0.5;
transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
cursor: url("../../materials/cursor/red-base.png") 8 3, pointer;
cursor: -webkit-image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
cursor: image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
}
.carousel__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.04);
filter: var(--crt-tint);
animation: crt-flicker 5s steps(1) infinite;
}
.carousel__slide--das iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
pointer-events: none;
}
/* Hero: spokojniejszy podgląd realizacji — tylko subtelna tekstura ekranu. */
.hero__portfolio .carousel__slide img {
filter: grayscale(0.25) contrast(1.06) brightness(0.9);
animation: none;
transform: scale(1.02);
}
.hero__portfolio .carousel__slide.is-active img {
filter: grayscale(0.08) contrast(1.04) brightness(1);
animation: none;
transform: scale(1.02);
}
.hero__portfolio .carousel__slide::before {
opacity: 0.16;
animation: none;
}
.hero__portfolio .carousel__slide::after {
opacity: 0.1;
animation: none;
}
/* maska fosforów (pionowe kolumny R/G/B) + skanlinie — przewijają się jak w kineskopie */
.carousel__slide::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image:
repeating-linear-gradient(90deg, rgba(255, 70, 70, 0.22) 0 1px, rgba(70, 255, 110, 0.16) 1px 2px, rgba(80, 120, 255, 0.26) 2px 3px),
repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0 1px, transparent 1px 3px);
mix-blend-mode: multiply;
animation: scanroll 6s linear infinite;
}
/* rolling bar (jasna wstęga sunąca w dół) + szum trackingu na dole + winieta szkła */
.carousel__slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background-image:
linear-gradient(180deg, transparent 0 38%, rgba(255, 255, 255, 0.11) 38% 44%, rgba(255, 255, 255, 0.04) 44% 60%, transparent 60%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0 2px, transparent 2px 5px, rgba(255, 255, 255, 0.35) 5px 6px, transparent 6px 12px, rgba(255, 255, 255, 0.5) 12px 13px, transparent 13px 19px),
radial-gradient(120% 120% at 50% 50%, transparent 56%, rgba(0, 0, 0, 0.78) 100%);
background-size: 100% 60%, 200% 5px, 100% 100%;
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: 0 -160%, 0 100%, 0 0;
mix-blend-mode: screen;
animation: crt-roll 4.5s linear infinite;
}
@keyframes crt-roll {
from { background-position: 0 -160%, 0 100%, 0 0; }
to { background-position: 0 260%, -90px 100%, 0 0; }
}
/* aktywny slajd — „włączony" telewizor: jaśniejszy, rwanie + RGB split z filtra SVG, power-on przy wejściu */
.carousel__slide.is-active {
transform: scale(1.12);
opacity: 1;
border-color: var(--hud);
box-shadow: inset 0 0 0 2px #0a0c10, inset 0 0 26px rgba(0, 0, 0, 0.9), 0 0 22px rgba(219, 57, 76, 0.22);
z-index: 2;
}
.carousel__slide.is-active img {
filter: var(--crt-tint-on) url(#crt-tile);
animation: crt-on 0.55s var(--ease) both, crt-flicker 5s steps(1) 0.55s infinite;
}
@keyframes crt-on {
0% { transform: scale(1.5, 0.004); filter: brightness(8) grayscale(1); }
28% { transform: scale(1.3, 0.012); filter: brightness(5) grayscale(1); }
46% { transform: scale(1.04, 1.04); filter: brightness(2.2) grayscale(1) contrast(1.3); }
62% { transform: scale(1.04, 1.04); filter: var(--crt-tint-on) brightness(0.65) url(#crt-tile); }
100% { transform: scale(1.04, 1.04); filter: var(--crt-tint-on) url(#crt-tile); }
}
.carousel__slide--case img { object-position: center 45%; }
/* podpis jako OSD telewizora — monospace'owy rytm, chromatic aberration */
.carousel__slide--case figcaption {
position: absolute;
z-index: 4;
inset: auto 0 5px;
display: flex;
flex-direction: column;
gap: 3px;
padding: 9px 12px;
background: rgba(3, 5, 8, 0.86);
color: var(--text);
text-align: left;
opacity: 0;
transition: opacity 0.3s var(--ease) 0.4s;
}
.carousel__slide--case.is-active figcaption { opacity: 1; }
.carousel__slide--case figcaption strong {
font-family: var(--font-display);
font-size: clamp(0.75rem, 1vw, 0.95rem);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.1;
text-shadow: -1px 0 rgba(255, 60, 90, 0.7), 1px 0 rgba(60, 170, 255, 0.7);
}
.carousel__slide--case figcaption span {
color: var(--text-dim);
font-size: 0.65rem;
letter-spacing: 0.06em;
line-height: 1.1;
}
/* placeholder gdy brak obrazka — „NO SIGNAL": śnieg telewizyjny */
.carousel__slide.is-empty::after {
content: "NO SIGNAL";
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: clamp(0.7rem, 1vw, 0.9rem);
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.75);
text-shadow: -1px 0 rgba(255, 60, 90, 0.8), 1px 0 rgba(60, 170, 255, 0.8);
background-color: #1a1d22;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
background-repeat: repeat;
background-position: 0 0;
mix-blend-mode: normal;
animation: crt-snow 0.5s steps(5) infinite;
}
@keyframes crt-snow {
from { background-position: 0 0; }
to { background-position: 80px -60px; }
}
/* Nawigacja ‹ › */
.carousel__nav {
display: none; /* bez strzałek — karuzela auto + klik w slajdy */
}
.carousel__btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
line-height: 1;
color: var(--text);
background: transparent;
border: 1px solid var(--line);
cursor: url("../../materials/cursor/red-base.png") 8 3, pointer;
cursor: -webkit-image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
cursor: image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.carousel__btn:hover { color: #fff; border-color: var(--hud); background: var(--hud); }
/* ===== Reveal on scroll (reużywalny) ===== */
[data-reveal] {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* ===== Desktop: opis w prawym dolnym rogu ramki ===== */
@media (min-width: 861px) {
/* dwie połowy: wideo | opis — minmax(0,…) by karuzela nie rozpychała kolumn */
.hero__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* wideo wyśrodkowane w lewej połowie, skaluje się z rozdzielczością ekranu */
.hero__figure {
grid-column: 1;
justify-self: center;
align-self: end; /* dół wideo przy dolnej linii */
width: min(100%, clamp(300px, 42vw, 860px));
}
.hero__figure.media-video {
height: clamp(460px, 92vh, 1180px);
margin-bottom: calc(-1 * var(--frame-pad)); /* dół sięga dolnej linii ramki */
}
/* pionowa linia na środku — łączy kreskę pod tytułem z dolną krawędzią ramki */
.hero__divider {
display: block;
position: absolute;
left: 50%;
top: calc(-1 * clamp(24px, 4vw, 48px)); /* dociąga do kreski pod tytułem */
bottom: calc(-1 * var(--frame-pad)); /* dociąga do dolnej krawędzi ramki */
width: 1px;
background: var(--line);
}
/* prawa połowa: podział pół/pół w poziomie */
.hero__right {
grid-column: 2;
align-self: stretch;
display: grid;
grid-template-rows: 1fr 1fr;
min-height: 0;
min-width: 0;
z-index: 6;
}
.hero__copy {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0; /* opis zawija się w swojej połowie */
padding-bottom: clamp(16px, 2vw, 28px);
}
.hero__subtitle { overflow-wrap: anywhere; }
.hero__portfolio { padding-top: clamp(16px, 2vw, 28px); }
/* lewy koniec linii dociąga do pionowej kreski na środku */
.hero__portfolio::before { left: calc(clamp(24px, 5vw, 72px) / -2); }
/* opis na całą szerokość swojej połowy */
.hero__subtitle { margin: 0 0 20px; max-width: none; }
/* kod wypełnia lewy box — od lewej do pionowej kreski na środku */
.code-rain { width: calc(50% - clamp(12px, 2.5vw, 36px)); height: 100%; }
}
/* ===== Mobile ===== */
@media (max-width: 860px) {
/* hero rośnie z treścią, strona się scrolluje */
.hero {
min-height: auto;
align-items: stretch;
/* Stały minimalny gutter + safe area: Chrome nie przycina ramki przy krawędzi viewportu. */
padding-inline:
max(16px, calc(env(safe-area-inset-left) + 4vw))
max(16px, calc(env(safe-area-inset-right) + 4vw));
}
.hero__frame {
max-height: none;
min-width: 0;
--frame-pad: clamp(14px, 4.5vw, 24px);
}
/* czysty stack: wideo → opis → karuzela, bez nakładających się marginesów */
.hero__body {
grid-template-columns: minmax(0, 1fr); /* minmax(0,…) — karuzela nie rozpycha kolumny poza ekran */
gap: 24px;
text-align: center;
}
.hero__figure { order: 1; height: auto; }
.hero__figure.media-video {
height: clamp(260px, 46vh, 440px);
margin-top: clamp(-56px, -7vh, -24px); /* lekko najeżdża na tytuł */
margin-bottom: 0;
overflow: visible;
}
/*
* Chrome potrafi rasteryzować przezroczysty VP9/WebM na czarnym tle,
* gdy wideo przechodzi przez animowany filtr SVG. W mobilnym hero zachowujemy
* alpha i spokojny ruch całej figury, ale wyłączamy filtr/cięcie samego wideo.
*/
.hero__figure.fx-glitch .hero__figure-inner {
inset: 0 clamp(10px, 3vw, 22px);
}
.hero__figure.fx-glitch .media-video__el,
.hero__figure.fx-glitch.is-mode-a .media-video__el,
.hero__figure.fx-glitch.is-mode-b .media-video__el,
.hero__figure.fx-glitch.is-switching .media-video__el {
filter: none;
animation: none;
clip-path: none;
transform: none;
background: transparent;
object-fit: contain;
object-position: 50% 100%;
}
.hero__figure.fx-glitch::before { display: none; }
.hero__right {
order: 2;
position: relative;
z-index: 6;
margin-top: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.hero__portfolio { padding-top: 20px; }
.hero__title { text-align: center; }
.hero__subtitle { margin: 0 auto 20px; max-width: 100%; }
.hero__actions { justify-content: center; }
/* karuzela: aktywny slajd wygodnej wielkości */
.carousel__slide { width: clamp(160px, 62vw, 260px); }
/* kod w obszarze wideo (góra body) */
.code-rain { width: 100%; height: clamp(260px, 46vh, 440px); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
[data-reveal] { opacity: 1; transform: none; }
}
/* ===== LAB — pas 3 bloków (HUD): INFO · manifest · experiments feed ===== */
.lab {
--mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
min-height: 100svh; /* cała sekcja na pełną wysokość ekranu */
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 4vw clamp(48px, 7vh, 100px); /* mały górny padding → logosy wyśrodkowane w przerwie */
background: #060705;
}
.lab__grid { flex: 1; } /* boxy wypełniają wysokość sekcji */
.lab__grid {
display: grid;
grid-template-columns: minmax(0, 1000px); /* tylko manifest, wyśrodkowany */
justify-content: center;
gap: clamp(12px, 1.4vw, 20px);
align-items: stretch;
}
/* INFO — treść w dwóch kolumnach */
.lab__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(18px, 2.4vw, 40px);
}
.lab__block {
position: relative;
border: 1px solid var(--line);
padding: clamp(22px, 2.2vw, 38px);
min-width: 0;
min-height: clamp(400px, 54vh, 640px); /* wyższe boxy — cała sekcja większa w pionie */
}
.lab__tag {
display: block;
font-family: var(--mono);
font-size: clamp(0.92rem, 1.05vw, 1.1rem);
letter-spacing: 0.1em;
color: var(--hud);
margin-bottom: 18px;
}
/* --- INFO --- */
.lab__list, .lab__spec { list-style: none; font-family: var(--mono); font-size: clamp(0.92rem, 1vw, 1.05rem); letter-spacing: 0.02em; }
.lab__listwrap { position: relative; padding-left: 20px; }
.lab__list li { color: var(--text); height: 2.3em; display: flex; align-items: center; }
.lab__list span { color: var(--text); }
/* czerwony prompt „>" sam schodzi w dół po wierszach */
.lab__cursor {
position: absolute;
left: 0; top: 0;
height: 2.3em;
display: flex;
align-items: center;
font-family: var(--mono);
font-weight: 700;
color: var(--hud);
animation: lab-cursor 2.8s var(--ease) infinite;
}
@keyframes lab-cursor {
0%, 24% { transform: translateY(0); }
33%, 57% { transform: translateY(2.3em); }
66%, 90% { transform: translateY(4.6em); }
100% { transform: translateY(0); }
}
.lab__spec { margin: 2px 0 22px; padding-left: 14px; }
.lab__spec li { color: var(--text); margin-bottom: 8px; }
.lab__spec li::before { content: ""; }
.lab__note { display: flex; gap: 14px; align-items: center; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
/* morfujący blob zamiast globu */
.lab__blob {
flex-shrink: 0;
width: 54px;
height: 54px;
background: radial-gradient(circle at 34% 28%, #ff7183, var(--hud) 58%, #7e1b26);
border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
box-shadow: 0 0 18px rgba(219, 57, 76, 0.55), inset 0 0 14px rgba(255, 255, 255, 0.12);
animation: lab-blob 9s ease-in-out infinite;
}
@keyframes lab-blob {
0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg) scale(1); }
33% { border-radius: 62% 38% 34% 66% / 56% 68% 32% 44%; transform: rotate(120deg) scale(1.06); }
66% { border-radius: 38% 62% 56% 44% / 64% 36% 64% 36%; transform: rotate(240deg) scale(0.96); }
}
.lab__note p { font-family: var(--mono); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.55; color: var(--text); letter-spacing: 0.04em; }
/* INFO — podział na pół poziomą linią */
.lab__info { display: grid; grid-template-rows: 1fr 1fr; }
.lab__info-top { min-height: 0; display: flex; flex-direction: column; }
.lab__info-bottom {
min-height: 0;
border-top: 1px solid var(--line);
margin-top: clamp(18px, 2.4vw, 32px);
padding-top: clamp(18px, 2.4vw, 32px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: clamp(16px, 2vw, 28px);
}
.lab__info-bottom .lab__blob { width: clamp(72px, 8vw, 120px); height: clamp(72px, 8vw, 120px); }
.lab__info-bottom p {
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(1.1rem, 1.7vw, 1.8rem);
line-height: 1.12;
letter-spacing: 0.04em;
color: var(--text);
}
/* specjalizacje w dwóch kolumnach (żeby zmieściły się w górnej połowie) */
.lab__spec { columns: 2; column-gap: clamp(16px, 2vw, 32px); }
/* --- MANIFEST (czerwona przezroczysta ramka, z logo) --- */
.lab__manifest {
background: none;
border: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: clamp(20px, 2.4vw, 32px);
}
.lab__statement {
position: relative;
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
line-height: 1.02;
font-size: clamp(2.2rem, 6.2vw, 7rem);
color: #fff;
animation: lab-glitch 3s steps(1) infinite;
}
/* glitch: rozszczepienie RGB (text-shadow) + przeskoki slice'ów, co kilka sekund */
@keyframes lab-glitch {
0%, 80%, 100% { text-shadow: none; transform: translate(0, 0); clip-path: none; }
82% { text-shadow: -2px 0 #2de2ff, 2px 0 #ff2d6a; transform: translate(-2px, 0); clip-path: inset(0 0 62% 0); }
85% { text-shadow: 2px 0 #2de2ff, -2px 0 #ff2d6a; transform: translate(3px, 0); clip-path: inset(40% 0 24% 0); }
88% { text-shadow: -1px 0 #ff2d6a, 1px 0 #2de2ff; transform: translate(-2px, 0); clip-path: inset(70% 0 6% 0); }
91% { text-shadow: 2px 0 #2de2ff, -2px 0 #ff2d6a; transform: translate(2px, 0); clip-path: inset(14% 0 54% 0); }
93% { text-shadow: none; transform: translate(0, 0); clip-path: none; }
}
.lab__logo { width: clamp(120px, 12vw, 190px); height: auto; filter: brightness(0) invert(1); } /* białe logo na czerwonym */
/* link „ask why →" pod statementem */
.lab__ask {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--hud);
text-decoration: none;
font-family: var(--mono);
font-size: 0.95rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.lab__ask em { font-style: normal; display: inline-block; transition: transform 0.2s var(--ease); }
.lab__ask:hover em { transform: translateX(6px); }
/* reveal słowo-po-słowie przy scrollu — wygaszone/rozmyte → zapalają się */
.lab__word {
display: inline-block;
color: rgba(255, 255, 255, 0.22);
filter: blur(5px);
transition: color 0.4s var(--ease), filter 0.4s var(--ease);
}
.lab__word.is-lit { color: #fff; filter: blur(0); }
/* --- EXPERIMENTS FEED --- */
.lab__feed { display: flex; flex-direction: column; }
.lab__files { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.lab__files li { display: flex; align-items: center; gap: 14px; }
.lab__thumb {
flex-shrink: 0;
width: 66px; height: 44px;
background:
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 8px 8px,
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 8px 8px,
radial-gradient(60% 80% at 50% 50%, rgba(219,57,76,0.3), transparent 70%),
#101012;
border: 1px solid var(--line);
}
.lab__file { display: flex; flex-direction: column; min-width: 0; font-family: var(--mono); }
.lab__file strong { font-weight: 500; font-size: clamp(0.9rem, 0.95vw, 1rem); color: var(--text); letter-spacing: 0.02em; }
.lab__file span { font-size: 0.82rem; color: #b7b5b1; }
.lab__more {
margin-top: auto;
padding-top: 20px;
font-family: var(--mono);
font-size: clamp(0.86rem, 0.95vw, 0.98rem);
letter-spacing: 0.04em;
color: var(--hud);
text-decoration: none;
transition: opacity 0.2s var(--ease);
}
.lab__more:hover { opacity: 0.7; }
@media (max-width: 860px) {
.lab { min-height: auto; display: block; }
.lab__grid { grid-template-columns: 1fr; flex: none; }
.lab__block { min-height: clamp(320px, 50vh, 440px); }
.lab__manifest { order: -1; padding: clamp(32px, 10vw, 56px) 20px; }
.lab__statement { font-size: clamp(2.2rem, 5.6vw, 4.6rem); }
}
@media (max-width: 560px) { .lab__cols { grid-template-columns: 1fr; } }
/* telefon: statement duży — bez wymuszonego
łamie się na 3 krótsze linie, więc może mieć ~15vw */
@media (max-width: 560px) {
.lab__manifest { padding-left: 16px; padding-right: 16px; }
.lab__statement { font-size: clamp(2.6rem, 15vw, 5rem); line-height: 0.98; }
.lab__statement br { display: none; }
}
/* ===== SERVICES — rozsuwany akordeon ===== */
.svc { padding: clamp(56px, 9vh, 130px) 4vw; background: var(--bg); }
.svc__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(28px, 4vw, 56px); }
.svc__title {
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(2rem, 5vw, 4.2rem);
line-height: 0.95;
color: var(--text);
}
.svc__acc { border-top: 1px solid var(--line); }
.svc__item { border-bottom: 1px solid var(--line); }
.svc__row {
width: 100%;
display: flex;
align-items: center;
gap: clamp(14px, 3vw, 48px);
padding: clamp(18px, 2.4vw, 34px) 0;
background: none;
border: none;
cursor: url("../../materials/cursor/red-base.png") 8 3, pointer;
cursor: -webkit-image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
cursor: image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
text-align: left;
font-family: inherit;
}
.svc__num {
flex-shrink: 0;
width: 3ch;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.9rem;
color: var(--hud);
}
.svc__name {
flex: 1;
min-width: 0;
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(1.5rem, 3.6vw, 2.8rem);
line-height: 1;
color: var(--text-dim);
transition: color 0.25s var(--ease);
}
.svc__row:hover .svc__name,
.svc__item.is-open .svc__name { color: var(--text); }
/* +/− toggle */
.svc__plus { position: relative; flex-shrink: 0; width: 24px; height: 24px; }
.svc__plus::before,
.svc__plus::after { content: ""; position: absolute; background: var(--hud); transition: transform 0.3s var(--ease); }
.svc__plus::before { left: 0; top: 11px; width: 24px; height: 2px; }
.svc__plus::after { left: 11px; top: 0; width: 2px; height: 24px; }
.svc__item.is-open .svc__plus::after { transform: scaleY(0); } /* „+" → „−" */
/* panel animowany (grid 0fr → 1fr) */
.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.svc__item.is-open .svc__panel { grid-template-rows: 1fr; }
.svc__inner { overflow: hidden; min-height: 0; }
.svc__content {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
grid-template-areas: "desc list";
align-content: start;
align-items: start;
gap: clamp(18px, 2vw, 32px) clamp(24px, 4vw, 72px);
padding: 4px 0 clamp(30px, 3.2vw, 52px) calc(3ch + clamp(14px, 3vw, 48px));
}
/* miejsce na obrazek (po lewej, spina oba wiersze) */
.svc__media {
grid-area: media;
align-self: stretch;
min-height: clamp(180px, 20vw, 300px);
border: 1px solid var(--line);
overflow: hidden;
background:
radial-gradient(60% 70% at 50% 40%, rgba(219, 57, 76, 0.22), transparent 70%),
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
#0d0a0d;
}
.svc__media img, .svc__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* wideo nie dyktuje wysokości kafla (pionowe 9:16) — wypełnia go i jest kadrowane na „monitor-głowę" */
.svc__media { position: relative; }
.svc__media:has(.svc__vid) { background: #000; } /* bez siatki tła za wideo/grafiką */
/* fx-glitch--soft: wariant komponentu fx-glitch do małych kafli — rwanie + RGB split (#crt-tile)
i krótkie przeskoki pasków; obraz pozostaje czytelny (bez poziomego smear z trybu B) */
.fx-glitch--soft.is-mode-a .media-video__el,
.fx-glitch--soft.is-mode-b .media-video__el {
filter: url(#crt-tile);
animation: glitch-jolt-soft 6s steps(1) infinite;
}
/* szarpnięcia bez wycinania pasów — obraz nigdy nie znika (w małym kaflu wycięcie = czarny ekran) */
@keyframes glitch-jolt-soft {
0%, 86%, 100% { transform: none; }
87% { transform: translate(-6px, 0) skewX(-2deg); }
89% { transform: translate(7px, 0); }
91% { transform: translate(-3px, 1px) skewX(1.5deg); }
93% { transform: translate(4px, 0); }
95% { transform: none; }
}
.fx-glitch--soft.is-mode-b .media-video__el { animation-duration: 4.5s; }
.fx-glitch--soft.is-switching .media-video__el { filter: brightness(1.5) contrast(1.3) url(#crt-tile); }
/* wideo „oddalone": pionowe 9:16 wyśrodkowane w kaflu, widać ~55% wysokości kadru zamiast wąskiego pasa */
.svc__vid {
position: absolute;
left: 50%;
top: 50%;
height: 180%;
aspect-ratio: 9 / 16;
transform: translate(-50%, -47%);
border-radius: 0;
overflow: visible; /* glitch (displacement) może wyjść poza wideo — przycina dopiero kafel */
}
.svc__media .media-video__el { position: absolute; inset: 0; }
/* warianty kadru: grafika pionowa 3:4 (oddalona jak wideo) i pozioma — wypełnia kafel */
.svc__vid--portrait { aspect-ratio: 3 / 4; height: 150%; transform: translate(-50%, -46%); }
.svc__vid.svc__vid--fill { inset: 0; left: 0; top: 0; height: auto; aspect-ratio: auto; transform: none; }
.svc__vid--fill .media-video__el { object-position: 70% 50%; }
/* boki wideo wtopione w czerń kafla — wewnętrzny cień, bez gradientu */
.svc__vid::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
box-shadow: inset 0 0 28px 18px #000;
}
/* delikatne skanlinie CRT nad wideo — spójne z resztą strony, maskują artefakty kompresji */
.svc__media:has(.svc__vid)::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85); /* winieta — krawędzie gasną w czerń */
}
.svc__desc { grid-area: desc; }
.svc__list { grid-area: list; }
.svc__desc p {
color: var(--text-dim);
font-size: clamp(1rem, 1.25vw, 1.18rem);
line-height: 1.6;
max-width: 46ch;
margin-bottom: 22px;
}
.svc__cta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--hud);
text-decoration: none;
font-weight: 600;
}
.svc__cta em { font-style: normal; display: inline-block; transition: transform 0.2s var(--ease); }
.svc__cta:hover em { transform: translateX(5px); }
.svc__list { list-style: none; columns: 2; column-gap: clamp(20px, 2.4vw, 44px); }
.svc__list li {
position: relative;
break-inside: avoid;
padding: 7px 0 7px 16px;
color: var(--text);
font-size: 1rem;
}
.svc__list li::before {
content: "";
position: absolute;
left: 0; top: 0.95em;
width: 5px; height: 5px;
background: var(--hud);
}
/* wiersz-CTA pod akordeonem */
.svc__all {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: clamp(22px, 2.8vw, 42px) 0;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--text);
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(1.4rem, 3.2vw, 2.6rem);
line-height: 1;
transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.svc__all:hover { color: var(--hud); padding-left: 14px; }
.svc__all em { font-style: normal; color: var(--hud); display: inline-block; transition: transform 0.25s var(--ease); }
.svc__all:hover em { transform: translateX(10px); }
@media (max-width: 760px) {
.svc__content {
grid-template-columns: 1fr;
grid-template-areas: "desc" "list";
padding-left: 0;
gap: 20px;
}
.svc__list { columns: 1; }
.svc__media:has(.svc__vid) { aspect-ratio: 4 / 5; min-height: 0; } /* telefon: pionowe wideo/grafika prawie w całości */
.svc__vid { height: 115%; transform: translate(-50%, -50%); }
.svc__vid.svc__vid--fill { height: auto; transform: none; }
}
/* ===== Footer: logo CONFLICT + partnerzy pod CTA (w ramce) ===== */
.footer__badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: clamp(18px, 2.4vw, 34px);
margin: 0 0 clamp(12px, 1.4vw, 20px); /* full-width, nad socialami */
padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.4vw, 34px);
border: 1px solid var(--line);
}
.footer__brand { height: clamp(18px, 2vw, 26px); width: auto; display: block; }
/* ===== Footer: mapa strony (logo+adresy | kolumny) ===== */
.footer__map {
position: relative;
z-index: 2; /* nad symbolem → glass rozmazuje jego dolną część */
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: clamp(32px, 6vw, 80px);
align-items: start;
/* pełna szerokość boxa, stykający się z paskiem social → ciągłe szkło */
margin: 0 calc(-1 * var(--fpad-x));
padding: clamp(28px, 4vw, 48px) var(--fpad-x) clamp(10px, 2vw, 24px);
background: rgba(10, 11, 10, 0.5);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.footer__map-brand { min-width: 0; max-width: 44ch; }
.footer__addresses {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: clamp(22px, 3vw, 48px);
margin-top: clamp(22px, 3vw, 36px);
}
.footer__addresses li { display: flex; flex-direction: column; gap: 3px; }
.footer__addresses strong { color: var(--text); font-weight: 600; font-size: 0.95rem; }
.footer__addresses span { color: var(--text-dim); font-size: 0.86rem; }
@media (max-width: 760px) {
.footer__map { grid-template-columns: 1fr; gap: 32px; }
}
.footer__badges img:not(.footer__brand) { height: clamp(28px, 3.4vw, 44px); width: auto; display: block; opacity: 0.9; }
.footer__badges-sep { width: 1px; height: clamp(24px, 3vw, 40px); background: var(--line); }
/* ===== CASE STUDIES ===== */
.cases { padding: clamp(56px, 9vh, 130px) 4vw; background: var(--bg); }
.cases__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(28px, 4vw, 52px); flex-wrap: wrap; }
.cases__title {
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(2rem, 5vw, 4.2rem);
line-height: 0.95;
color: var(--text);
}
.cases__all {
margin-left: auto;
display: inline-flex; align-items: center; gap: 8px;
color: var(--hud); text-decoration: none; font-weight: 600;
}
.cases__all em { font-style: normal; display: inline-block; transition: transform 0.2s var(--ease); }
.cases__all:hover em { transform: translateX(5px); }
.cases__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 1.6vw, 24px);
}
.case {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
overflow: hidden;
background: #0b0a0b;
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.case:hover { border-color: rgba(219, 57, 76, 0.5); transform: translateY(-3px); }
.case__media {
aspect-ratio: 16 / 10;
border-bottom: 1px solid var(--line);
background:
radial-gradient(60% 80% at 70% 30%, rgba(219, 57, 76, 0.28), transparent 65%),
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 24px 24px,
#0d0a0d;
}
.case__media--2 { background:
radial-gradient(55% 70% at 30% 60%, rgba(219, 57, 76, 0.3), transparent 62%),
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 24px 24px, #0d0a0d; }
.case__media--3 { background:
radial-gradient(60% 80% at 50% 90%, rgba(219, 57, 76, 0.32), transparent 66%),
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 24px 24px, #0d0a0d; }
.case__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 1.8vw, 28px); flex: 1; }
.case__meta { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--hud); }
.case__name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.2rem, 1.8vw, 1.7rem); line-height: 1.05; color: var(--text); }
.case__result { color: var(--text-dim); font-size: 0.98rem; line-height: 1.5; }
.case__link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; color: var(--hud); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.case__link em { font-style: normal; display: inline-block; transition: transform 0.2s var(--ease); }
.case:hover .case__link em { transform: translateX(5px); }
/* ===== REFERRALS ===== */
.refs { padding: clamp(56px, 9vh, 130px) 4vw; background: #060705; border-top: 1px solid var(--line); }
.refs__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(28px, 4vw, 52px); }
.refs__title {
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(2rem, 5vw, 4.2rem);
line-height: 0.95;
color: var(--text);
}
.refs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); }
.ref {
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(24px, 3vw, 40px);
border: 1px solid var(--line);
padding: clamp(24px, 2.4vw, 36px);
background: #0b0a0b;
}
.ref blockquote { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--text); }
.ref blockquote::before { content: "\201C"; color: var(--hud); margin-right: 2px; }
.ref figcaption { display: flex; align-items: center; gap: 14px; }
.ref__ava { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7183, var(--hud) 60%, #7e1b26); }
.ref figcaption > span { display: flex; flex-direction: column; gap: 2px; }
.ref figcaption strong { color: var(--text); font-weight: 600; font-size: 0.98rem; }
.ref figcaption span span { color: var(--text-dim); font-size: 0.85rem; }
@media (max-width: 860px) {
.cases__grid, .refs__grid { grid-template-columns: 1fr; }
}
/* ===== TESTIMONIALS (carousel na czarnym) ===== */
.testi { padding: clamp(56px, 9vh, 130px) 4vw; background: #060705; border-top: 1px solid var(--line); }
.testi__title {
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(2rem, 5vw, 4.4rem);
line-height: 0.95;
color: var(--text);
margin-bottom: clamp(32px, 5vw, 60px);
}
.testi__track {
display: flex;
border: 1px solid var(--line);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.testi__track::-webkit-scrollbar { display: none; }
.testi__card {
flex: 0 0 clamp(280px, 30vw, 380px);
scroll-snap-align: start;
padding: clamp(28px, 2.6vw, 44px);
border-left: 1px solid var(--line);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(24px, 3vw, 44px);
min-height: clamp(320px, 40vh, 460px);
}
.testi__card:first-child { border-left: none; }
.testi__card--rating { align-items: center; justify-content: center; text-align: center; gap: 8px; }
.testi__score { font-family: var(--font-display); font-size: clamp(3.4rem, 7vw, 6rem); line-height: 1; color: var(--text); }
.testi__stars { color: var(--hud); letter-spacing: 4px; font-size: 1.1rem; }
.testi__reviews { color: var(--text); font-weight: 600; margin-top: 8px; }
.testi__sources { color: var(--text-dim); font-size: 0.85rem; }
.testi__card blockquote { margin: 0; font-size: clamp(1.08rem, 1.5vw, 1.4rem); line-height: 1.45; color: var(--text); }
.testi__card blockquote::before { content: "\201C"; color: var(--hud); margin-right: 2px; }
.testi__foot { display: flex; flex-direction: column; gap: 18px; }
.testi__author { display: flex; align-items: center; gap: 12px; }
.testi__ava { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7183, var(--hud) 60%, #7e1b26); }
.testi__author > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testi__author strong { color: var(--text); font-weight: 600; font-size: 0.95rem; }
.testi__author span span { color: var(--text-dim); font-size: 0.82rem; }
.testi__read {
align-self: flex-start;
padding: 10px 18px;
border: 1px solid var(--line);
color: var(--text);
text-decoration: none;
font-size: 0.9rem;
transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.testi__read:hover { border-color: rgba(219, 57, 76, 0.5); color: var(--hud); }
.testi__nav { display: flex; gap: 10px; margin-top: clamp(24px, 3vw, 40px); }
.testi__btn {
width: 48px; height: 48px;
border: 1px solid var(--line);
background: none;
color: var(--text);
cursor: url("../../materials/cursor/red-base.png") 8 3, pointer;
cursor: -webkit-image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
cursor: image-set(url("../../materials/cursor/red-base.png") 1x, url("../../materials/cursor/red-base@2x.png") 2x) 8 3, pointer;
font-size: 1.2rem;
transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.testi__btn:hover { border-color: rgba(219, 57, 76, 0.5); background: rgba(219, 57, 76, 0.06); }
/* RWD: na telefonie jedna karta = cała szerokość (bez uciętego w pół słowa „podglądu" następnej) */
@media (max-width: 560px) {
.testi__card { flex-basis: 100%; min-height: 0; }
}
/* ===== CASE STUDIES — duże poziome karty (text | image) ===== */
.cases__stack { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); }
.cs {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
border: 1px solid var(--line);
overflow: hidden;
background: #0b0a0b;
transition: border-color 0.25s var(--ease);
}
.cs:hover { border-color: rgba(219, 57, 76, 0.45); }
.cs__left { padding: clamp(28px, 3vw, 52px); display: flex; flex-direction: column; min-width: 0; }
.cs__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2vw, 28px); }
.cs__client { color: var(--text); font-weight: 600; font-size: 0.98rem; margin-right: 4px; }
.cs__tag { font-size: 0.78rem; padding: 4px 10px; color: var(--text-dim); background: rgba(255,255,255,0.05); border: 1px solid var(--line); }
.cs__tag--accent { color: var(--hud); background: rgba(219,57,76,0.1); border-color: rgba(219,57,76,0.4); }
.cs__date { margin-left: auto; color: var(--text-dim); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; }
.cs__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2.4rem); line-height: 1.06; color: var(--text); margin-bottom: 16px; }
.cs__desc { color: var(--text-dim); font-size: 1.02rem; line-height: 1.55; max-width: 52ch; margin-bottom: clamp(18px, 2.2vw, 30px); }
.cs__link {
align-self: flex-start;
color: var(--text);
text-decoration: none;
font-weight: 600;
border-bottom: 2px solid var(--hud);
padding-bottom: 2px;
transition: color 0.2s var(--ease);
}
.cs__link:hover { color: var(--hud); }
.cs__quote {
margin: clamp(24px, 3vw, 40px) 0 0;
border: 1px solid var(--line);
background: rgba(255,255,255,0.025);
padding: clamp(18px, 1.8vw, 26px);
}
.cs__quote p { margin: 0 0 14px; color: var(--text); font-size: 0.98rem; line-height: 1.5; }
.cs__quote footer { display: flex; flex-direction: column; gap: 2px; }
.cs__quote strong { color: var(--text); font-weight: 600; font-size: 0.9rem; }
.cs__quote span { color: var(--text-dim); font-size: 0.82rem; }
.cs__media {
position: relative;
min-height: clamp(280px, 30vw, 480px);
border-left: 1px solid var(--line);
background:
radial-gradient(60% 70% at 70% 30%, rgba(219,57,76,0.28), transparent 62%),
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 26px 26px,
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 26px 26px,
#0d0a0d;
}
.cs__media--2 { background:
radial-gradient(55% 70% at 30% 65%, rgba(219,57,76,0.3), transparent 60%),
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 26px 26px,
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 26px 26px, #0d0a0d; }
.cs__stat {
position: absolute;
right: clamp(18px, 2vw, 32px);
bottom: clamp(18px, 2vw, 32px);
padding: 12px 20px;
background: rgba(13,10,13,0.85);
border: 1px solid var(--line);
backdrop-filter: blur(6px);
font-family: var(--font-display);
font-size: clamp(1.4rem, 2vw, 2rem);
color: var(--text);
}
@media (max-width: 860px) {
.cs { grid-template-columns: 1fr; }
.cs__media { border-left: none; order: -1; }
}
/* ===== Partners (ramka nad testimonialami) ===== */
.partners { padding: clamp(32px, 5vh, 64px) 4vw 0; background: var(--bg); }
.partners .footer__badges { margin: 0; }
/* ===== Social (ramka w footerze, pod Contact us, nad mapą) ===== */
.connect__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--line);
}
.footer__connect {
position: relative;
z-index: 2;
/* 100% szerokości boxa — do krawędzi ramki footera */
margin-left: calc(-1 * var(--fpad-x));
margin-right: calc(-1 * var(--fpad-x));
/* nachodzi na symbol i rozmazuje go (glass) — mocniej schowany pod spodem */
margin-top: clamp(-210px, -22vh, -140px);
border-left: none;
border-right: none;
background: rgba(10, 11, 10, 0.5);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.connect__row .footer__soc { border-right: 1px solid var(--line); border-bottom: none; }
.connect__row .footer__soc:last-child { border-right: none; }
/* ===== Legal (pod stopką) ===== */
.legal {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: clamp(16px, 2.4vw, 36px);
padding: clamp(24px, 3vh, 40px) 4vw clamp(70px, 11vh, 150px);
background:
radial-gradient(100% 150% at 50% 160%, rgba(219, 57, 76, 0.3), transparent 66%),
var(--bg); /* czerwona poświata na samym dole, pod legal */
}
.legal a { color: var(--text-dim); text-decoration: none; font-size: 0.85rem; transition: color 0.2s var(--ease); }
.legal a:hover { color: var(--text); }
@media (max-width: 680px) {
.connect__row { grid-template-columns: 1fr 1fr; }
.connect .footer__soc:nth-child(2) { border-right: none; }
}
/* ===== Partners doklejony do boxa karuzeli testimoniali ===== */
.testi__partners {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: clamp(18px, 2.4vw, 34px);
padding: clamp(16px, 1.8vw, 26px) clamp(20px, 2.4vw, 34px);
border: 1px solid var(--line);
border-bottom: none; /* łączy się z górnym borderem karuzeli */
}
.testi__partners .footer__brand { height: clamp(18px, 2vw, 26px); width: auto; display: block; }
.testi__partners img:not(.footer__brand) { height: clamp(28px, 3.4vw, 44px); width: auto; display: block; opacity: 0.9; }
/* partnerzy (AWS/Google) maksymalnie w prawo; CONFLICT zostaje po lewej */
.testi__partners .footer__badges-sep { margin-left: auto; }
/* ===== PLACES → TEAM (reveal słowo-po-słowie, wyłania się czerwony gradient) ===== */
.places {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(28px, 6vh, 80px);
padding: clamp(90px, 16vh, 220px) clamp(18px, 3vw, 44px);
overflow: hidden;
background: var(--bg);
}
/* gradient wyłaniający się w miarę reveal (sterowany --p z JS) */
.places::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(130% 90% at 50% 125%, var(--hud) 0%, rgba(219, 57, 76, 0) 58%);
opacity: var(--p, 0);
transition: opacity 0.25s linear;
pointer-events: none;
z-index: 0;
}
.places__kicker {
position: relative;
z-index: 1;
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.26em;
font-size: 0.82rem;
color: var(--text-dim);
}
.places__statement {
position: relative;
z-index: 1;
width: 100%;
text-align: justify;
text-align-last: justify; /* nazwy się łamią → równe wypełnienie do obu krawędzi */
font-family: var(--font-display);
text-transform: uppercase;
line-height: 1.16;
font-size: clamp(1.1rem, 2.5vw, 2.6rem);
color: var(--text-dim);
}
.place__word {
display: inline;
color: rgba(255, 255, 255, 0.12);
transition: color 0.45s var(--ease);
}
.place__word.is-lit { color: #b7b5b2; } /* bardziej szare, nie czysto białe */
.places__team { position: relative; z-index: 1; margin: clamp(-34px, -2.2vw, -16px) 0 0; } /* karty nachodzą na napis, delikatnie podniesiony */
.place__word--team {
position: relative;
margin: 0;
font-size: clamp(4rem, 16vw, 15rem);
letter-spacing: 0.02em;
color: transparent;
-webkit-text-fill-color: transparent; /* realny tekst niewidoczny — rysują go dwie warstwy */
opacity: 0.1;
filter: blur(12px);
transition: opacity 0.6s var(--ease), filter 0.6s var(--ease);
}
.place__word--team.is-lit {
opacity: 1;
filter: blur(0);
}
/* dwie kopie napisu: ostra góra + rozmyty dół gasnący do przezroczystości */
.place__word--team::before,
.place__word--team::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
color: #fff; /* czysta biel, bez czerwieni */
-webkit-text-fill-color: #fff;
}
/* ostra warstwa — widoczna u góry, znika wcześniej (więcej miejsca na rozmycie) */
.place__word--team::before {
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 60%);
mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 60%);
}
/* rozmyta warstwa — mocniej rozmyta, gaśnie do przezroczystości od dołu */
.place__word--team::after {
filter: blur(18px);
-webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 52%, transparent 96%);
mask-image: linear-gradient(to bottom, transparent 30%, #000 52%, transparent 96%);
}
/* --- karty zespołu: poziomy pas pionowych prostokątów, przesuwany scrollem --- */
.team__marquee {
position: relative;
z-index: 3; /* karty nad napisem „One team." */
width: 100%;
margin-top: clamp(-280px, -17vw, -130px); /* mocno podciągnięte — „One team." mocno wchodzi na karty */
/* przycinamy tylko w poziomie — przechylona karta (fx-tilt) i jej cień nie są ścinane krawędzią pasa */
overflow-x: clip;
overflow-y: visible;
touch-action: pan-y; /* pionowy scroll dla strony, poziomy przejmuje pas */
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.team__marquee.is-dragging { cursor: grabbing; }
.team__marquee.is-dragging .team__card { pointer-events: none; }
.team__marquee img { -webkit-user-drag: none; }
.team__cards {
list-style: none;
margin: 0;
padding: 2px;
display: flex;
gap: clamp(10px, 1.2vw, 18px);
width: max-content;
will-change: transform;
}
.team__card {
position: relative;
flex: 0 0 auto;
width: clamp(190px, 15vw, 230px);
min-height: 390px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
aspect-ratio: auto; /* stała minimalna wysokość chroni treść odwrotu */
padding: clamp(14px, 1.3vw, 20px);
border: 1px solid var(--glass-border);
background: var(--glass);
border-radius: 14px;
overflow: hidden;
transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.team__card::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 2px;
background: var(--hud);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s var(--ease);
}
.team__card:hover { border-color: rgba(219, 57, 76, 0.5); } /* ruch na hover robi komponent fx-tilt */
/* ===== Komponent: fx-tilt — karta pochyla się w 3D za kursorem (reużywalny: [data-tilt], JS: tilt.js) ===== */
.fx-tilt {
transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ts, 1));
transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.25s var(--ease);
will-change: transform;
}
/* podczas ruchu kursora — szybka, „przyklejona" reakcja; cień ucieka od kursora */
.fx-tilt.is-tilting {
transition: transform 0.12s linear, box-shadow 0.12s linear, border-color 0.25s var(--ease);
/* cień miękki i blisko karty (ujemne rozlanie) + delikatna czerwona poświata — bez ciemnej „plamy" pod kartą */
box-shadow:
var(--sx, 0px) var(--sy, 18px) 34px -14px rgba(0, 0, 0, 0.75),
0 0 26px -6px rgba(219, 57, 76, 0.35),
0 0 0 1px rgba(219, 57, 76, 0.25);
z-index: 2;
}
/* odblask: rozmyta jednolita plama światła pod kursorem (bez gradientu) */
.fx-tilt__glare {
position: absolute;
left: var(--gx, 50%);
top: var(--gy, 50%);
z-index: -1;
width: 90%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
filter: blur(36px);
translate: -50% -50%;
opacity: 0;
transition: opacity 0.4s var(--ease);
pointer-events: none;
}
.fx-tilt.is-tilting .fx-tilt__glare { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fx-tilt { transform: none !important; } }
.team__card:hover::after { transform: scaleX(1); }
.team__num {
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.1em;
color: var(--text-dim);
}
.team__meta { display: flex; flex-direction: column; gap: 8px; }
.team__cert {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.6rem;
line-height: 1.3;
color: var(--hud);
}
.team__name {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
line-height: 1.02;
font-size: clamp(1.1rem, 1.5vw, 1.7rem);
color: #fff;
}
/* karty ze zdjęciem (lider + zespół) — zdjęcie na całą kartę, czarno-białe; po najechaniu barwi się na czerwono */
.team__card--lead { border-color: rgba(219, 57, 76, 0.55); }
.team__photo-wrap {
position: absolute;
inset: 0;
z-index: -2;
border-radius: inherit;
overflow: hidden;
transition: transform 0.6s var(--ease);
}
.team__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 18%;
filter: contrast(1.05);
}
/* glitch zdjęcia (komponent fx-glitch, tryby przełącza glitch.js): czerń-biel + rwanie i RGB split (#crt-tile) */
.team__card--photo .fx-glitch.is-mode-a .team__photo,
.team__card--photo .fx-glitch.is-mode-b .team__photo {
filter: contrast(1.02);
animation: team-glitch-subtle 13s steps(1) infinite;
}
.team__card--photo .fx-glitch.is-switching .team__photo { filter: contrast(1.04) brightness(1.08); }
@keyframes team-glitch-subtle {
0%, 90%, 100% { transform: none; }
91% { transform: translateX(-2px); }
93% { transform: translateX(2px); }
95% { transform: translateX(-1px); }
}
.team__card--photo:hover .team__photo-wrap { transform: scale(1.04); }
.team__card--photo { isolation: isolate; }
/* karty bez zdjęcia — duże konturowe inicjały (zapalają się na hover) */
.team__card--initials { isolation: isolate; }
.team__initials {
position: absolute;
inset: 0;
z-index: -1;
display: grid;
place-items: center;
padding-bottom: 22%;
font-family: var(--font-display);
font-size: clamp(4.5rem, 7vw, 7.5rem);
line-height: 1;
letter-spacing: 0.02em;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
transition: -webkit-text-stroke-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.5s var(--ease);
pointer-events: none;
}
.team__card--initials:hover .team__initials { -webkit-text-stroke-color: var(--hud); color: rgba(219, 57, 76, 0.12); transform: scale(1.06); }
/* ===== Komponent: flip — karta obraca się po kliknięciu (reużywalny: [data-flip] + [data-flip-back], JS: flip.js) ===== */
@property --flip { syntax: ""; inherits: false; initial-value: 0deg; }
[data-flip] {
--flip: 0deg;
transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip))) scale(var(--ts, 1));
transition: --flip 0.75s cubic-bezier(0.65, 0, 0.25, 1), transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.25s var(--ease);
}
[data-flip].is-tilting {
transition: --flip 0.75s cubic-bezier(0.65, 0, 0.25, 1), transform 0.12s linear, box-shadow 0.12s linear, border-color 0.25s var(--ease);
}
[data-flip].is-flipped { --flip: 180deg; }
[data-flip]:focus-visible { outline: 2px solid var(--hud); outline-offset: 4px; }
/* odwrót: pojawia się dokładnie w połowie obrotu (90°); scaleX(-1) — tekst nie jest lustrzany */
[data-flip-back] {
position: absolute;
inset: 0;
z-index: 2;
transform: scaleX(-1);
opacity: 0;
visibility: hidden;
transition: opacity 0s linear 0.375s, visibility 0s linear 0.375s;
}
[data-flip].is-flipped [data-flip-back] { opacity: 1; visibility: visible; }
/* obrót z „podniesieniem": karta odrywa się od pasa w połowie obrotu (scale/translate składają się z transform) */
[data-flip].is-flipping { animation: flip-lift 0.75s cubic-bezier(0.65, 0, 0.25, 1); z-index: 3; }
@keyframes flip-lift {
0%, 100% { scale: 1; translate: 0 0; box-shadow: none; }
50% { scale: 1.06; translate: 0 -12px; box-shadow: 0 28px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(219, 57, 76, 0.6); }
}
/* skan: czerwona linia przelatuje przez kartę w trakcie obrotu (span wstrzykuje flip.js) */
.flip-sweep {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
border-radius: inherit;
overflow: hidden;
opacity: 0;
}
.flip-sweep::before {
content: "";
position: absolute;
left: -10%; right: -10%;
top: 0;
height: 2px;
background: var(--hud);
box-shadow: 0 0 14px 3px rgba(219, 57, 76, 0.7);
}
.flip-sweep::after { content: ""; position: absolute; inset: 0; background: rgba(219, 57, 76, 0.14); }
[data-flip].is-flipping .flip-sweep { animation: flip-sweep-fade 0.75s steps(1) both; }
[data-flip].is-flipping .flip-sweep::before { animation: flip-sweep-move 0.75s cubic-bezier(0.65, 0, 0.25, 1) both; }
@keyframes flip-sweep-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flip-sweep-move { from { transform: translateY(0); } to { transform: translateY(var(--sweep-h, 440px)); } }
/* odwrót: elementy wjeżdżają po kolei, gdy karta skończy się obracać */
[data-flip].is-flipped [data-flip-back] > * { animation: flip-back-in 0.45s var(--ease) both; }
[data-flip].is-flipped [data-flip-back] > :nth-child(1) { animation-delay: 0.36s; }
[data-flip].is-flipped [data-flip-back] > :nth-child(2) { animation-delay: 0.42s; }
[data-flip].is-flipped [data-flip-back] > :nth-child(3) { animation-delay: 0.48s; }
[data-flip].is-flipped [data-flip-back] > :nth-child(4) { animation-delay: 0.54s; }
[data-flip].is-flipped [data-flip-back] > :nth-child(5) { animation-delay: 0.6s; }
@keyframes flip-back-in { from { opacity: 0; transform: translateX(-14px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
/* dotyk: brak hovera → ikona obrotu pulsuje, zaprasza do tapnięcia */
@media (hover: none) {
.team__flip-hint { width: 32px; height: 32px; font-size: 1rem; background: var(--hud); border-color: var(--hud); }
.team__flip-hint::after {
content: ""; position: absolute; inset: -1px; border-radius: 50%;
border: 1px solid var(--hud); animation: flip-ping 2.2s var(--ease) infinite;
}
[data-flip].is-flipped .team__flip-hint::after { animation: none; opacity: 0; }
}
@keyframes flip-ping { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
[data-flip].is-flipping, [data-flip].is-flipping .flip-sweep, [data-flip].is-flipping .flip-sweep::before,
[data-flip].is-flipped [data-flip-back] > *, .team__flip-hint::after { animation: none !important; }
}
.team__flip-hint {
position: absolute;
top: clamp(12px, 1.2vw, 18px);
right: clamp(12px, 1.2vw, 18px);
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
color: #fff;
font-size: 0.85rem;
background: rgba(6, 7, 5, 0.55);
transition: transform 0.5s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.team__card--photo:hover .team__flip-hint { transform: rotate(180deg); background: var(--hud); border-color: var(--hud); }
/* treść odwrotu */
.team__back {
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(14px, 1.3vw, 20px);
background: #0b0a0b;
border-top: 2px solid var(--hud);
border-radius: inherit;
text-align: left;
}
.team__back-name { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.15rem, 1.5vw, 1.6rem); line-height: 1; color: #fff; }
.team__back-tag { margin: 0; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hud); line-height: 1.4; }
.team__stats { list-style: none; margin: 4px 0 0; padding: 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.team__stats li { display: flex; flex-direction: column; gap: 2px; }
.team__stats b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1.4vw, 1.5rem); line-height: 1; color: #fff; }
.team__stats span { font-size: 0.62rem; color: var(--text-dim); line-height: 1.2; }
.team__skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.team__skills li { position: relative; padding-left: 12px; font-size: clamp(0.7rem, 0.8vw, 0.82rem); line-height: 1.25; color: var(--text); }
.team__skills li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 5px; height: 5px; background: var(--hud); }
.team__back-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.team__back-links a { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: #fff; text-decoration: none; border-bottom: 1px solid var(--hud); padding-bottom: 1px; transition: color 0.2s var(--ease); }
.team__back-links a:hover { color: var(--hud); }
@media (prefers-reduced-motion: reduce) {
[data-flip] { transition: none; }
[data-flip-back] { transition: none; }
}
/* RWD: telefon — napis „One team." widoczny (karty tylko lekko na niego nachodzą),
lista dyscyplin bez rozstrzelonych odstępów z justowania */
@media (max-width: 860px) {
.places__statement { text-align: left; text-align-last: left; font-size: clamp(1.05rem, 4.4vw, 1.6rem); }
.team__marquee { margin-top: -0.6em; }
.team__marquee .team__cards { padding: 8px 0 14px; }
.team__marquee .team__card {
width: min(82vw, 300px);
min-height: 440px;
}
.team__marquee .team__back { gap: 9px; }
.team__marquee .team__back-name { font-size: clamp(1.3rem, 6vw, 1.7rem); }
.team__marquee .team__back-tag { font-size: 0.62rem; }
.team__marquee .team__skills li { font-size: 0.78rem; line-height: 1.35; }
}
/* ===== CASE STUDIES — pinowany poziomy scroll ===== */
.cases-scroll { position: relative; height: 260vh; }
.cases-pin {
position: sticky;
top: 0;
height: 100vh;
height: 100svh;
overflow: hidden; /* przycina wygięty ekran (obudowa TV) */
}
/* wewnętrzny ekran — to on jest wygięty; pin go przycina */
.cases-screen {
position: absolute;
inset: 0;
display: flex;
align-items: center;
}
.cases-track { display: flex; gap: clamp(16px, 2vw, 28px); padding: 0 4vw; will-change: transform; }
.cases-track .cs { flex: 0 0 min(90vw, 1120px); height: min(82vh, 660px); }
@media (max-width: 860px) {
.cases-scroll { height: auto; }
.cases-pin { position: static; height: auto; overflow: visible; display: block; }
.cases-track { flex-direction: column; padding: 0; transform: none !important; }
.cases-track .cs { flex: none; height: auto; }
}
/* ===== CASE STUDIES — efekt CRT / telewizor ===== */
.cases-pin {
border-radius: clamp(26px, 4vw, 64px);
background: radial-gradient(130% 130% at 50% 45%, #14110f 0%, #0a0807 68%, #000 100%);
box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
isolation: isolate;
}
/* lekkie wygięcie ekranu — skala treści + delikatny flicker */
.cases-track {
transform-origin: center;
filter: contrast(1.06) saturate(1.08) brightness(1.02);
animation: crt-flicker 5s steps(1) infinite;
}
@keyframes crt-flicker {
0%, 96%, 100% { opacity: 1; }
97% { opacity: 0.86; }
98% { opacity: 1; }
99% { opacity: 0.92; }
}
/* skanlinie (przewijają się) — na wygiętym ekranie */
.cases-screen::before {
content: "";
position: absolute; inset: 0; z-index: 5;
pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
mix-blend-mode: multiply;
opacity: 0.55;
animation: crt-scan 9s linear infinite;
}
@keyframes crt-scan { to { background-position: 0 120px; } }
/* obudowa (bezel) + vignette + poświata „szkła" — NA WIERZCHU, maskuje wygięte brzegi */
.cases-pin::after {
content: "";
position: absolute; inset: 0; z-index: 6;
pointer-events: none;
border-radius: inherit;
border: clamp(8px, 1.3vw, 20px) solid #0b0a09;
box-shadow: inset 0 0 clamp(50px, 9vw, 150px) rgba(0, 0, 0, 0.92);
background:
radial-gradient(120% 120% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.5) 100%),
radial-gradient(140% 90% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 40%);
}
/* chromatic aberration na tytułach */
.cases-track .cs__title {
text-shadow: -1.2px 0 rgba(255, 40, 80, 0.45), 1.2px 0 rgba(45, 180, 255, 0.45);
}
@media (max-width: 860px) {
.cases-pin { border-radius: 16px; box-shadow: inset 0 0 0 4px #0b0a09, inset 0 0 60px rgba(0,0,0,0.8); }
.cases-screen { position: static; display: block; }
.cases-track { animation: none; filter: none; }
}
/* barrel distortion ekranu CRT (tylko desktop) */
@media (min-width: 861px) {
.cases-screen { filter: url(#crt-barrel); }
}
/* ===== CRT — TV glitch (przewijany pasek + statyka) na ekranie case studies ===== */
.cases-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.cases-fx::before {
content: "";
position: absolute; left: 0; right: 0; top: -18%; height: 16%;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 55%, transparent);
animation: cases-roll 6.5s linear infinite;
}
@keyframes cases-roll { to { top: 118%; } }
.cases-fx::after {
content: "";
position: absolute; inset: -20%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0;
mix-blend-mode: screen;
animation: cases-static 9s steps(1) infinite;
}
@keyframes cases-static { 0%,90%,100%{opacity:0;} 91%{opacity:0.08;} 92%{opacity:0;} 94%{opacity:0.11;} 95%{opacity:0;} }
/* ===== Glitch całej strony (rzadki) ===== */
.page-glitch {
position: fixed; inset: 0; z-index: 9999; pointer-events: none;
opacity: 0;
mix-blend-mode: screen;
background:
repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 40, 80, 0.06) 2px 3px),
repeating-linear-gradient(0deg, rgba(45, 180, 255, 0.05) 0 1px, transparent 1px 3px);
}
.page-glitch.on { animation: page-glitch 0.3s steps(1) 1; }
@keyframes page-glitch {
0%, 100% { opacity: 0; transform: translateX(0); clip-path: none; }
8% { opacity: 1; transform: translateX(-7px); clip-path: inset(0 0 72% 0); }
22% { opacity: 0.7; transform: translateX(9px); clip-path: inset(24% 0 48% 0); }
38% { opacity: 1; transform: translateX(-5px); clip-path: inset(58% 0 12% 0); }
55% { opacity: 0.6; transform: translateX(4px); clip-path: inset(0 0 84% 0); }
75% { opacity: 1; transform: translateX(-3px); clip-path: none; }
90% { opacity: 0.4; }
}
/* ===== Footer: kontakt (email + telefon) ===== */
.footer__contact {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
margin-top: clamp(22px, 3vw, 36px);
}
.footer__contact a {
color: var(--text);
text-decoration: none;
font-size: 1.02rem;
transition: color 0.2s var(--ease);
}
.footer__contact a:hover { color: var(--hud); }
/* ===== INTRO — pełnoekranowy sygnet na środku ===== */
.intro {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}
/* małe logo + ™ obok, bez żadnych cieni */
.intro__logo {
display: inline-flex;
align-items: flex-start;
gap: 0.35em;
}
.intro__mark {
height: clamp(48px, 9vh, 96px);
width: auto;
}
.intro__tm {
font-family: var(--font-body);
font-size: clamp(0.7rem, 1.4vh, 0.95rem);
line-height: 1;
color: var(--hud);
margin-top: 0.1em;
}
/* stan po zakończeniu intro — znika, odsłania stronę */
.intro.is-done {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.intro__mark { animation: none; }
}
/* ===== WORK — scroll-journey (dwie ręce, Creation of Adam) ===== */
.journey { position: relative; z-index: 2; background: #060705; } /* nad sąsiednimi sekcjami — rękawy mogą na nie zachodzić */
.journey__scroll { position: relative; height: 340vh; }
.journey__pin {
position: sticky;
top: 0;
height: 100vh;
/* przycinamy TYLKO boki (ręce przyczepione do krawędzi ekranu); w pionie rękawy nie są ucinane
linią sąsiedniej sekcji — kończą się swoim naturalnym brzegiem, zachodząc na nią */
overflow-x: clip;
overflow-y: visible;
display: flex;
align-items: center;
justify-content: center;
}
/* tło sceny (poświata) przycięte do sekcji — czerwona mgła nie rozlewa się na sąsiadów */
.journey__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* poświata „boskiego światła" rosnąca w centrum (sterowana --p z JS) */
.journey__glow {
position: absolute;
top: 50%;
left: 50%;
width: clamp(400px, 60vw, 920px);
aspect-ratio: 1;
transform: translate(-50%, -50%) scale(calc(0.4 + var(--p, 0) * 0.9));
background: rgba(219, 57, 76, 0.22);
filter: blur(90px);
opacity: calc(0.15 + var(--p, 0) * 0.5);
pointer-events: none;
}
.journey__hand {
position: absolute;
top: 0;
left: 0;
height: 100vh; /* faktyczną wysokość ustawia JS */
width: auto;
max-width: none;
will-change: transform;
pointer-events: none; /* zachodzi na sąsiednie sekcje — nie blokuje kliknięć */
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.18));
}
.journey__hand--b.is-touching { animation: journey-hand-contact-glitch 0.75s steps(1) both; }
@keyframes journey-hand-contact-glitch {
0%, 100% { clip-path: none; opacity: 1; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.18)); }
12% { clip-path: inset(0 0 58% 0); opacity: 0.82; filter: drop-shadow(-10px 0 rgba(219, 57, 76, 0.9)); }
20% { clip-path: none; opacity: 1; filter: drop-shadow(8px 0 rgba(82, 215, 239, 0.75)); }
36% { clip-path: inset(38% 0 22% 0); opacity: 0.9; filter: drop-shadow(12px 0 rgba(82, 215, 239, 0.8)); }
46%, 64% { clip-path: none; opacity: 1; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.18)); }
72% { clip-path: inset(14% 0 45% 0); opacity: 0.86; filter: drop-shadow(-6px 0 rgba(219, 57, 76, 0.8)); }
}
@media (prefers-reduced-motion: reduce) {
.journey__hand--b.is-touching { animation: none; }
}
/* iskra w miejscu niemal-dotyku */
.journey__spark {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--hud);
box-shadow: 0 0 34px 12px rgba(219, 57, 76, 0.95), 0 0 110px 44px rgba(219, 57, 76, 0.55);
opacity: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}
.journey__words { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.journey__phase--intro { position: absolute; inset: 0; }
.journey__w {
position: absolute;
font-family: var(--font-display);
text-transform: uppercase;
color: var(--text);
line-height: 0.95;
font-size: clamp(2rem, 6vw, 6rem);
}
.journey__w--tl { top: 13%; left: 6vw; }
.journey__w--br { bottom: 15%; right: 6vw; }
.journey__center {
position: absolute;
top: 13%; /* pusty prawy-górny obszar — ręce idą po przekątnej, napis nie wchodzi w palce */
right: 6vw;
margin: 0;
font-family: var(--font-display);
text-transform: uppercase;
color: var(--text);
font-size: clamp(2.4rem, 8vw, 7rem);
line-height: 0.95;
text-align: right;
text-shadow: 0 0 70px rgba(219, 57, 76, 0.5);
opacity: 0;
white-space: nowrap;
}
.journey__hint {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.7rem;
color: var(--text-dim);
opacity: calc(1 - var(--p, 0) * 3);
}
/* ===== HOW WE WORK — trzy etapy współpracy ===== */
.process {
background: #060705;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.process__scroll { height: auto; }
.process__pin { min-height: 100svh; }
.process__frame {
position: relative;
max-width: 1600px;
min-height: 100svh;
margin-inline: auto;
padding: clamp(34px, 5vw, 72px) 4vw;
display: flex;
flex-direction: column;
}
.process__title {
font-family: var(--font-display);
font-size: clamp(0.85rem, 1.2vw, 1.15rem);
font-weight: 400;
line-height: 1;
text-transform: uppercase;
color: var(--text-dim);
text-align: center;
letter-spacing: 0.12em;
}
.process__steps {
list-style: none;
display: grid;
gap: clamp(60px, 9vh, 120px);
padding: clamp(70px, 10vh, 130px) 0;
}
.process__step {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(26px, 4vh, 48px);
text-align: center;
}
.process__step h3 {
font-family: var(--font-display);
font-size: clamp(3.7rem, 8vw, 9rem);
font-weight: 400;
line-height: 0.9;
text-transform: uppercase;
color: var(--text);
}
.process__step h3 span { display: block; }
.process__cue { color: var(--hud); }
.process__step p {
max-width: 56ch;
color: var(--text-dim);
line-height: 1.55;
font-size: clamp(1rem, 1.3vw, 1.25rem);
}
.process__footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
max-width: 1600px;
margin-inline: auto;
padding: clamp(30px, 4vw, 52px) 4vw;
border-top: 1px solid var(--line);
}
.process__footer p { color: var(--text-dim); font-size: clamp(1rem, 1.3vw, 1.25rem); }
.process__cta {
display: inline-flex;
align-items: center;
gap: 24px;
color: var(--text);
font-family: var(--font-display);
font-size: clamp(1.2rem, 1.7vw, 1.8rem);
text-decoration: none;
text-transform: uppercase;
border-bottom: 1px solid var(--hud);
padding-bottom: 8px;
transition: color 0.25s var(--ease);
}
.process__cta span { color: var(--hud); transition: transform 0.3s var(--ease); }
.process__cta:hover { color: var(--hud); }
.process__cta:hover span { transform: translate(4px, -4px); }
.process__cta:focus-visible { outline: 2px solid var(--hud); outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) {
.process.is-enhanced .process__scroll { height: 600vh; }
.process.is-enhanced .process__pin {
position: sticky;
top: 0;
height: 100svh;
min-height: 0;
overflow: hidden;
}
.process.is-enhanced .process__frame { height: 100%; min-height: 0; }
.process.is-enhanced .process__steps {
position: absolute;
inset: 0;
display: block;
padding: 0;
}
.process.is-enhanced .process__step {
position: absolute;
inset: 0;
padding: clamp(96px, 11vh, 150px) 6vw clamp(92px, 10vh, 130px);
pointer-events: none;
opacity: 0;
transform: translate3d(0, 36px, 0);
will-change: opacity, transform;
}
.process.is-enhanced .process__step:first-child { opacity: 1; transform: none; }
.process.is-enhanced .process__cue {
transform: translate3d(0, var(--cue-offset, 12vh), 0);
}
.process.is-enhanced .process__detail,
.process.is-enhanced .process__step p {
opacity: var(--detail, 0);
filter: blur(var(--detail-blur, 18px));
transform: translate3d(0, var(--detail-offset, 34px), 0);
will-change: opacity, filter, transform;
}
.process.is-enhanced .process__title { position: relative; z-index: 1; }
}
/* telefon: ten sam scroll-driven efekt (pin + frazy przechodzące jedna w drugą), dopasowany do wąskiego ekranu */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
.process.is-enhanced .process__scroll { height: 420vh; } /* krótsza droga kciukiem niż na desktopie */
.process.is-enhanced .process__pin, .process.is-enhanced .process__frame { min-height: 0; }
.process.is-enhanced .process__step {
border-top: none;
justify-content: center;
align-items: center; /* jak na desktopie — wyśrodkowane frazy */
text-align: center;
padding: clamp(80px, 12vh, 120px) 4vw clamp(60px, 9vh, 100px);
}
}
@media (max-width: 860px) {
.process__pin, .process__frame { min-height: 0; }
.process__title { font-size: clamp(0.85rem, 3.5vw, 1rem); }
.process__steps { gap: 0; padding: clamp(34px, 6vw, 60px) 0; }
.process__step {
align-items: flex-start;
text-align: left;
padding: clamp(40px, 8vw, 72px) 0;
border-top: 1px solid var(--line);
}
.process__step h3 { font-size: clamp(3.2rem, 11vw, 6rem); }
.process__step p { max-width: 42ch; }
.process__footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.process__cta, .process__cta span { transition: none; }
}
/* ===== Mega menu: wyróżniony box Team Spartan (modyfikator .megamenu--spartan) ===== */
.megamenu--spartan .megamenu__grid { grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 340px); }
.megamenu--spartan .megamenu__main { padding-right: clamp(20px, 2.4vw, 40px); }
/* linia podziału kończy się tam, gdzie linie między kolumnami (margin zamiast paddingu na dole) */
.megamenu__spartan {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: clamp(16px, 1.8vw, 26px);
padding-left: clamp(20px, 2.4vw, 40px);
border-left: 1px solid var(--line);
}
.mm-spartan {
position: relative;
flex: 1;
padding: 0; /* bez paddingu i lewej krawędzi z .nav__panel a */
display: flex;
flex-direction: column;
border: 1px solid var(--hud);
background: #000;
color: var(--text);
text-decoration: none;
overflow: hidden;
box-shadow: 0 0 34px rgba(219, 57, 76, 0.25);
transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.nav__panel .mm-spartan, .nav__panel .mm-spartan:hover { padding: 0; border: 1px solid var(--hud); background: #000; }
.mm-spartan:hover, .mm-spartan:focus-visible { box-shadow: 0 0 50px rgba(219, 57, 76, 0.5); transform: translateY(-2px); outline: none; }
/* kadr postaci: od głowy do piersi, wyśrodkowany, nic nie ucięte u góry */
.mm-spartan__media { position: relative; height: clamp(150px, 15vw, 190px); overflow: hidden; border-bottom: 1px solid rgba(219, 57, 76, 0.4); }
.mm-spartan__media video { position: absolute; left: 50%; top: -6%; width: 78%; height: auto; transform: translateX(-50%); filter: contrast(1.15) brightness(0.9); transition: transform 0.8s var(--ease), filter 0.4s var(--ease); }
.mm-spartan:hover .mm-spartan__media video { transform: translateX(-50%) scale(1.05); filter: contrast(1.2) brightness(1); }
.mm-spartan__body { flex: 1; display: grid; align-content: start; gap: 6px; padding: 14px 16px 16px; }
.mm-spartan__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 0.95; }
.mm-spartan__title .sp-glitch { color: var(--hud); }
.mm-spartan__tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud); }
.mm-spartan__desc { color: #b9b6b2; font-size: 0.84rem; line-height: 1.45; }
.mm-spartan__cta { margin-top: 4px; justify-self: start; font-size: 0.85rem; border-bottom: 1px solid var(--hud); }
.mm-spartan__cta em { font-style: normal; display: inline-block; transition: transform 0.4s var(--ease); }
.mm-spartan:hover .mm-spartan__cta em { transform: translateX(5px); }
/* pilna pomoc w dolnym pasku menu — dosunięta do prawej */
.megamenu__bar:has(.mmbar--urgent) { display: flex; }
.mmbar--urgent { margin-left: auto; border-left: 1px solid var(--line); color: var(--text); }
.mmbar--urgent b { font-weight: 400; font-family: var(--font-display); text-transform: uppercase; color: var(--hud); letter-spacing: 0.04em; }
.mmbar--urgent:hover { background: rgba(219, 57, 76, 0.14); }
.mm-spartan__dot { flex: 0 0 7px; width: 7px; height: 7px; background: var(--hud); box-shadow: 0 0 8px var(--hud); animation: mm-dot 1.2s steps(2, jump-none) infinite; }
@keyframes mm-dot { 50% { opacity: 0.2; } }
@media (max-width: 1100px) {
.megamenu--spartan .megamenu__grid { grid-template-columns: minmax(0, 1fr); }
.megamenu__spartan { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .mm-spartan__dot { animation: none; } }
/* linie pionowe dociągnięte do dolnego paska — treść zostaje na górze */
.megamenu--spartan .megamenu__cats { padding-bottom: 0; }
.megamenu--spartan .mcat { padding-bottom: clamp(16px, 1.8vw, 26px); }
.megamenu__spartan { margin-bottom: 0; padding-bottom: clamp(16px, 1.8vw, 26px); }
/* box Team Spartan bez czerwonej ramki i poświaty */
.nav__panel .mm-spartan, .nav__panel .mm-spartan:hover { border: 0; box-shadow: none; }
.mm-spartan__media { border-bottom: 0; }
.mm-spartan__body { padding-left: 0; padding-right: 0; }
/* bez tła boxu — czerń wideo wtapia się w panel */
.nav__panel .mm-spartan, .nav__panel .mm-spartan:hover { background: transparent; transform: none; }
.mm-spartan__media video { mix-blend-mode: lighten; }
/* cała postać w oknie: od hełmu po buty (przycięty tylko pusty margines nad głową) */
.mm-spartan__media { height: clamp(240px, 22vw, 300px); }
.mm-spartan__media video { top: -3%; width: auto; height: 106%; }
/* ostatnia kolumna mega menu (Team Spartan) cała czarna — do górnej i prawej krawędzi panelu oraz do dolnego paska */
.megamenu__spartan {
background: #000;
margin-top: calc(-1 * clamp(18px, 2.2vw, 30px));
margin-right: calc(-1 * clamp(18px, 2vw, 30px));
padding-top: clamp(18px, 2.2vw, 30px);
padding-right: clamp(18px, 2vw, 30px);
}
/* Karuzela hero — slajdy ze zrzutami stron projektów (Showcase): kadr od góry strony */
.carousel__slide--site img { object-position: top center; }
/* ===== Komponent: pas CTA (.cta-band) — konwersja w długich odcinkach strony ===== */
.cta-band { position: relative; padding: clamp(40px, 7vh, 88px) clamp(16px, 4vw, 58px); background: var(--bg, #060705); }
.cta-band__frame {
position: relative; overflow: hidden;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
padding: clamp(28px, 4.5vw, 56px) clamp(22px, 4vw, 56px);
border: 1px solid var(--line);
transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.cta-band__frame:hover { border-color: var(--hud); box-shadow: 0 0 0 1px var(--hud), 0 22px 70px rgba(219, 57, 76, 0.18); }
.cta-band__corner { position: absolute; width: 16px; height: 16px; border: 0 solid var(--hud); }
.cta-band__corner--tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.cta-band__corner--br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }
.cta-band__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--hud); box-shadow: 0 0 16px var(--hud); opacity: 0; pointer-events: none; }
.cta-band.is-in .cta-band__scan { animation: cta-band-scan 1.4s var(--ease) 0.15s both; }
@keyframes cta-band-scan { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--w, 1400px)); } }
.cta-band__title {
margin: 0; font-family: "Unica One", var(--display, sans-serif); font-weight: 400; text-transform: uppercase;
font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 0.98; letter-spacing: 0.01em; color: var(--text, #f2f0ed);
clip-path: inset(0 100% 0 0);
}
.cta-band.is-in .cta-band__title { animation: cta-band-wipe 0.9s steps(14) 0.25s both; }
@keyframes cta-band-wipe { to { clip-path: inset(0 0 0 0); } }
.cta-band__accent { position: relative; color: var(--hud); }
.cta-band__frame:hover .cta-band__accent { animation: cta-band-jolt 0.42s steps(1) 1; }
@keyframes cta-band-jolt {
0% { transform: translate(2px, -1px); text-shadow: -3px 0 #fff; }
33% { transform: translate(-2px, 1px); text-shadow: 3px 0 #fff; }
66% { transform: translate(1px, 0); text-shadow: none; }
100% { transform: none; }
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; opacity: 0; transform: translateY(12px); }
.cta-band.is-in .cta-band__actions { transition: opacity 0.6s var(--ease) 0.9s, transform 0.6s var(--ease) 0.9s; opacity: 1; transform: none; }
@media (max-width: 720px) {
.cta-band__actions { width: 100%; }
.cta-band__btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.cta-band__title { clip-path: none; animation: none !important; }
.cta-band__actions { opacity: 1; transform: none; }
.cta-band__scan { display: none; }
}
.cta-band__btn span { margin-left: 6px; }
/* aktywny slajd z data-href = link do projektu: strzałka w OSD na hover, przy kliku „wyłączenie" kineskopu */
.carousel__slide[data-href].is-active figcaption span::after { content: " →"; display: inline-block; color: var(--hud); transform: translateX(0); transition: transform 0.35s var(--ease); }
.carousel__slide[data-href].is-active:hover figcaption span::after,
.carousel__slide[data-href].is-active:focus-visible figcaption span::after { transform: translateX(5px); }
.carousel__slide[data-href].is-active:hover { box-shadow: inset 0 0 0 2px #0a0c10, inset 0 0 26px rgba(0, 0, 0, 0.9), 0 0 34px rgba(219, 57, 76, 0.45); }
.carousel__slide[data-href]:focus-visible { outline: 2px solid var(--hud); outline-offset: 4px; }
.carousel__slide.is-opening img { animation: crt-off 0.42s var(--ease) both; }
.carousel__slide.is-opening figcaption { opacity: 0; transition-delay: 0s; }
@keyframes crt-off {
0% { transform: scale(1.04, 1.04); filter: var(--crt-tint-on) brightness(1.4); }
55% { transform: scale(1.3, 0.012); filter: brightness(6) grayscale(1); }
100% { transform: scale(0.004, 0.004); filter: brightness(8) grayscale(1); }
}
/* ===== A11y: skip link (wjeżdża z góry jak komunikat HUD) + widoczny fokus klawiatury ===== */
.skip-link { position: fixed; z-index: 10000; top: 12px; left: 12px; padding: 12px 18px; background: var(--hud); color: #fff; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 24px rgba(219, 57, 76, 0.55); transform: translateY(calc(-100% - 24px)); transition: transform 0.35s var(--ease); }
.skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: 3px; }
main:focus { outline: none; }
:where(a, button, summary, select, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--hud); outline-offset: 3px; }
.btn:focus-visible { outline: 2px solid var(--hud); outline-offset: 4px; box-shadow: 0 0 22px rgba(219, 57, 76, 0.45); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
/* ===== Zgoda na cookies (src/components/consent.js) — panel HUD wjeżdżający z dołu ===== */
.legal__btn { padding: 0; border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 0.85rem; cursor: pointer; transition: color 0.2s var(--ease); }
.legal__btn:hover { color: var(--text); }
.consent { position: fixed; z-index: 9000; left: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); padding: 22px 22px 20px; overflow: hidden;
background: rgba(8, 9, 8, 0.86); border: 1px solid rgba(219, 57, 76, 0.55); box-shadow: 0 0 40px rgba(219, 57, 76, 0.18), 0 20px 60px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
opacity: 0; transform: translateY(24px); clip-path: inset(100% 0 0 0); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), clip-path 0.55s steps(10); }
.consent.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
/* narożniki celownika */
.consent::before, .consent::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--hud); pointer-events: none; }
.consent::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.consent::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.consent__scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hud); box-shadow: 0 0 14px var(--hud); opacity: 0; pointer-events: none; }
.consent.is-in .consent__scan { animation: consent-scan 1.4s var(--ease) 0.35s both; }
@keyframes consent-scan { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(220px); } }
.consent__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.5rem; line-height: 1; color: var(--text); }
.consent__title::after { content: "_"; color: var(--hud); animation: consent-caret 1s steps(2) infinite; }
@keyframes consent-caret { 50% { opacity: 0; } }
.consent__text { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; }
.consent__text a { color: var(--text); text-decoration-color: var(--hud); text-underline-offset: 3px; }
.consent__text a:hover { color: var(--hud); }
/* oba przyciski tej samej wagi — odrzucenie równie łatwe jak akceptacja (wymóg EDPB) */
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.consent__btn { justify-content: center; padding: 12px 14px; border: 1px solid var(--line); background: transparent; color: var(--text); transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); }
.consent__btn:hover, .consent__btn:focus-visible { border-color: var(--hud); background: var(--hud); color: #fff; }
@media (prefers-reduced-motion: reduce) {
.consent { transition: opacity 0.2s linear; transform: none; clip-path: none; }
.consent__scan, .consent__title::after { animation: none !important; }
}
/* ===== What we build: podusługi jako linki (src/components/what-we-build.js) ===== */
.svc__list li { padding: 0 0 0 16px; }
.svc__list li::before { transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); }
.svc__link { position: relative; display: inline-block; padding: 7px 18px 7px 0; color: var(--text); text-decoration: none; transition: color 0.25s var(--ease), transform 0.35s var(--ease); }
/* strzałka wjeżdża w miejsce kwadracika */
.svc__link::after { content: "→"; position: absolute; left: -16px; top: 7px; color: var(--hud); font-family: var(--mono); font-size: 0.85em; opacity: 0; transform: translateX(-6px); transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); }
.svc__list li:has(.svc__link:hover)::before, .svc__list li:has(.svc__link:focus-visible)::before { opacity: 0; transform: scale(0); }
.svc__link:hover, .svc__link:focus-visible { color: #fff; transform: translateX(6px); }
.svc__link:hover::after, .svc__link:focus-visible::after { opacity: 1; transform: none; }
.svc__link:hover { animation: svc-link-jolt 0.3s steps(3) 1; text-shadow: 1px 0 rgba(219, 57, 76, 0.85), -1px 0 rgba(0, 220, 255, 0.5); }
/* glitch bez clip-path (clip-path zmienia obszar hover → migotanie); tylko przesunięcie + rozszczepienie RGB */
@keyframes svc-link-jolt {
0% { transform: translateX(6px); text-shadow: 3px 0 rgba(219, 57, 76, 0.9), -3px 0 rgba(0, 220, 255, 0.6); }
35% { transform: translateX(9px) skewX(-8deg); text-shadow: -2px 0 rgba(219, 57, 76, 0.9), 2px 0 rgba(0, 220, 255, 0.6); }
70% { transform: translateX(5px); text-shadow: 1px 0 rgba(219, 57, 76, 0.85), -1px 0 rgba(0, 220, 255, 0.5); }
100% { transform: translateX(6px); text-shadow: 1px 0 rgba(219, 57, 76, 0.85), -1px 0 rgba(0, 220, 255, 0.5); }
}
/* liczba podusług przy nazwie kategorii */
.svc__count { margin-left: auto; margin-right: clamp(14px, 2vw, 28px); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--text-dim); transition: color 0.3s var(--ease); }
.svc__count::before { content: "["; color: var(--hud); }
.svc__count::after { content: "]"; color: var(--hud); }
.svc__item.is-open .svc__count, .svc__row:hover .svc__count { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .svc__link:hover { animation: none; text-shadow: none; } .svc__link { transition: color 0.2s linear; } }
/* ===== Komponent: modal „Contact us” dla zaangażowanych (src/components/contact-nudge.js) =====
Wejście jak włączenie monitora CRT: punkt → pozioma linia → pełny panel, potem skan + kaskada treści. Bez gradientów. */
html.nudge-open { overflow: hidden; }
.nudge { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; }
.nudge[hidden] { display: none; }
.nudge__backdrop { position: absolute; inset: 0; background: rgba(6, 7, 5, 0.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.45s var(--ease); }
.nudge.is-in .nudge__backdrop { opacity: 1; }
.nudge__panel { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(28px, 5vw, 48px) clamp(22px, 5vw, 48px) clamp(22px, 4vw, 32px);
background: rgba(8, 9, 8, 0.94); border: 1px solid rgba(219, 57, 76, 0.55);
box-shadow: 0 0 0 1px rgba(219, 57, 76, 0.12), 0 0 60px rgba(219, 57, 76, 0.22), 0 30px 90px rgba(0, 0, 0, 0.7);
outline: none; transform: scale(0.02, 0.004); opacity: 0; filter: brightness(3);
transition: transform 0.38s cubic-bezier(0.7, 0, 0.84, 0), opacity 0.2s linear 0.25s, filter 0.3s linear; }
.nudge.is-in .nudge__panel { opacity: 1; filter: none; transform: none; transition: none; animation: nudge-crt-on 0.7s var(--ease) both; }
@keyframes nudge-crt-on {
0% { transform: scale(0.02, 0.004); filter: brightness(4); }
38% { transform: scale(1, 0.004); filter: brightness(4); }
100% { transform: scale(1, 1); filter: brightness(1); }
}
/* narożniki celownika */
.nudge__corner { position: absolute; width: 16px; height: 16px; border: 0 solid var(--hud); pointer-events: none; }
.nudge__corner--tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.nudge__corner--tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.nudge__corner--bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }
.nudge__corner--br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }
.nudge.is-in .nudge__corner { animation: nudge-lock 0.5s var(--ease) 0.6s both; }
@keyframes nudge-lock { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
/* skan przelatujący przez panel po włączeniu */
.nudge__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--hud); box-shadow: 0 0 18px var(--hud); opacity: 0; pointer-events: none; }
.nudge.is-in .nudge__scan { animation: nudge-scan 1.3s var(--ease) 0.55s both; }
@keyframes nudge-scan { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--nudge-h, 420px)); } }
/* zamknięcie: dwie kreski, obrót na hover */
.nudge__x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.45s var(--ease); }
.nudge__x span { position: absolute; width: 16px; height: 2px; background: var(--text); transform: rotate(45deg); transition: background 0.25s var(--ease); }
.nudge__x span + span { transform: rotate(-45deg); }
.nudge__x:hover, .nudge__x:focus-visible { border-color: var(--hud); background: var(--hud); transform: rotate(90deg); }
.nudge__x:hover span, .nudge__x:focus-visible span { background: #fff; }
/* treść — kaskada po włączeniu */
.nudge__title { margin: 0 48px 16px 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 0.98; color: var(--text); clip-path: inset(0 100% 0 0); }
.nudge.is-in .nudge__title { animation: nudge-wipe 0.8s steps(16) 0.6s both; }
@keyframes nudge-wipe { to { clip-path: inset(0 0 0 0); } }
.nudge__accent { position: relative; color: var(--hud); }
.nudge__panel:hover .nudge__accent { animation: nudge-jolt 0.42s steps(1) 1; }
@keyframes nudge-jolt {
0% { text-shadow: 3px 0 #2de2ff, -3px 0 #fff; transform: translateX(2px); }
33% { text-shadow: -3px 0 #2de2ff, 3px 0 #fff; transform: translateX(-3px) skewX(-6deg); }
66% { text-shadow: 2px 0 #2de2ff; transform: translateX(1px); }
100% { text-shadow: none; transform: none; }
}
.nudge__text, .nudge__actions, .nudge__lines, .nudge__telemetry { opacity: 0; transform: translateY(14px); }
.nudge.is-in :is(.nudge__text, .nudge__actions, .nudge__lines, .nudge__telemetry) { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); opacity: 1; transform: none; }
.nudge.is-in .nudge__text { transition-delay: 0.95s; }
.nudge.is-in .nudge__actions { transition-delay: 1.08s; }
.nudge.is-in .nudge__lines { transition-delay: 1.2s; }
.nudge.is-in .nudge__telemetry { transition-delay: 1.32s; }
.nudge__text { max-width: 46ch; margin: 0 0 26px; color: var(--text-dim); font-size: 1rem; line-height: 1.6; }
.nudge__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.nudge__lines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.nudge__line { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); background: var(--glass); color: var(--text); text-decoration: none; transition: border-color 0.25s var(--ease), transform 0.35s var(--ease), box-shadow 0.25s var(--ease); }
.nudge__line:hover, .nudge__line:focus-visible { border-color: var(--hud); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(219, 57, 76, 0.18); }
.nudge__k { font-family: var(--mono, ui-monospace, monospace); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.nudge__v { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.nudge__line:hover .nudge__v { color: var(--hud); }
/* telemetria sesji (prawdziwe dane: liczba podstron + aktywny czas) */
.nudge__telemetry { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-family: var(--mono, ui-monospace, monospace); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.nudge__dot { width: 7px; height: 7px; background: var(--hud); box-shadow: 0 0 10px var(--hud); animation: nudge-blink 1.1s steps(2) infinite; }
@keyframes nudge-blink { 50% { opacity: 0.15; } }
/* telefon: bottom sheet, przyciski na całą szerokość */
@media (max-width: 560px) {
.nudge { place-items: end center; padding: 0; }
.nudge__panel { width: 100%; max-height: 92dvh; border-left: 0; border-right: 0; border-bottom: 0; padding: 32px 16px 20px; }
.nudge__title { margin-right: 44px; }
.nudge__btn { flex: 1 1 100%; }
.nudge__lines { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.nudge__panel, .nudge.is-in .nudge__panel { animation: none !important; transform: none; filter: none; transition: opacity 0.2s linear; }
.nudge__title { clip-path: none; animation: none !important; }
.nudge__scan, .nudge__dot, .nudge.is-in .nudge__corner { animation: none !important; }
.nudge__text, .nudge__actions, .nudge__lines, .nudge__telemetry { transform: none; transition: opacity 0.2s linear !important; }
.nudge__panel:hover .nudge__accent { animation: none; }
}
/* ===== Pas zespołu na telefonie / dotyku — wydajność =====
Animowany filtr SVG (#crt-tile: feTurbulence + displacement) jest liczony na CPU w każdej klatce;
przy przesuwanym pasie na telefonie to główna przyczyna przycinania. Zostaje lekki glitch
na samych transformacjach (kompozytor GPU), bez filtrów i rozmyć. */
@media (max-width: 860px), (hover: none) {
.team__marquee .team__card--photo .fx-glitch .team__photo,
.team__marquee .team__card--photo .fx-glitch.is-switching .team__photo {
filter: none;
animation: team-jolt-gpu 13s steps(1) infinite;
}
.team__marquee .fx-tilt { will-change: auto; }
.team__marquee .fx-tilt__glare { display: none; }
.team__marquee .team__card { contain: layout paint style; }
.team__marquee .team__cards { backface-visibility: hidden; }
}
@keyframes team-jolt-gpu {
0%, 90%, 100% { transform: none; opacity: 1; }
91% { transform: translate3d(-2px, 0, 0); opacity: 0.96; }
93% { transform: translate3d(2px, 0, 0); }
95% { transform: translate3d(-1px, 0, 0); opacity: 0.98; }
}
@media (prefers-reduced-motion: reduce) {
.team__marquee .team__card--photo .fx-glitch .team__photo { animation: none; }
}
/* =====================================================================
RWD PASS — poprawki telefon / tablet (audyt 390 / 768)
===================================================================== */
/* skip-link: ukryty całkowicie (jego poświata wchodziła w ekran jako czerwona smuga) */
.skip-link { transform: translateY(-300%); box-shadow: none; }
.skip-link:focus { box-shadow: 0 0 24px rgba(219, 57, 76, 0.55); }
/* stopka: etykiety social w jednej linii, kroj display zawsze wersalikami */
.footer__soc span:nth-child(2) { white-space: nowrap; text-transform: uppercase; }
@media (max-width: 860px) {
.footer__symbol::before { width: 120vw; opacity: 0.55; }
.footer__soc { padding: 16px 14px; gap: 8px; font-size: 0.9rem; }
}
@media (max-width: 560px) {
/* kolumny linków na pełną szerokość boxa, tekst w linii z logo/opisem */
.footer__map .footer__cols { margin-inline: calc(-1 * var(--fpad-x)); }
.footer__col { gap: 0; }
.footer__col:nth-child(odd) { padding-left: var(--fpad-x); padding-right: 12px; }
.footer__col:nth-child(even) { padding-left: 14px; padding-right: var(--fpad-x); }
.footer__col a { display: block; padding: 9px 0; font-size: 0.9rem; line-height: 1.3; } /* cel dotyku ≥ 40px */
.footer__col h4 { margin-bottom: 4px; }
}
.legal { padding-bottom: clamp(40px, 7vh, 96px); }
/* „One team" — pas na pełną szerokość ekranu (nie ucinany na paddingu sekcji) */
.team__marquee { width: 100vw; margin-inline: calc(50% - 50vw); }
/* strona główna: otwarty panel usługi na tablecie w jednej kolumnie */
@media (max-width: 900px) {
.svc__content { grid-template-columns: 1fr; grid-template-areas: "desc" "list"; padding-left: 0; gap: 20px; }
.svc__list { columns: 1; }
}
/* case studies na telefonie/tablecie: bez ramki CRT i zaokrągleń (prześwitywała między kartami) */
@media (max-width: 860px) {
.cases-pin::after { display: none; }
.cases-pin { border-radius: 0; box-shadow: none; }
}
/* telefon: manifest bez sztucznej min. wysokości (dziura ~230px przed „What we build") */
@media (max-width: 560px) {
.lab__block { min-height: 0; }
}
/* grupy przycisków na telefonie: równe, na pełną szerokość */
@media (max-width: 520px) {
.hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}
/* czytelność: nic poniżej 11px */
.team__cert { font-size: max(0.6rem, 11px); }
.win__ctrls { font-size: max(0.6rem, 11px); }
/* okienko zachęty — telefon: X i treść nie nachodzą na narożniki celownika */
@media (max-width: 560px) {
.nudge__panel { max-height: 78dvh; padding: 48px 24px 28px; }
.nudge__x { top: 22px; right: 22px; }
.nudge__corner { width: 12px; height: 12px; }
.nudge__title { margin-right: 56px; }
}
/* cele dotyku ≥ 40px na ekranach dotykowych / do tabletu */
@media (max-width: 1080px), (hover: none) {
.footer__col a { display: block; padding-block: 9px; line-height: 1.3; }
.footer__col { gap: 0; }
.footer__contact a, .legal__btn { display: inline-flex; align-items: center; min-height: 40px; }
.lab__ask, .svc__cta, .cases__all, .cs__link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* telefon / tablet: hero bez karuzeli projektów (projekty są w Showcase) */
@media (max-width: 860px) {
.hero__portfolio { display: none; }
}
/* telefon: „What you / imagine" blisko siebie — obejmują dłonie z góry i z dołu zamiast rogów ekranu */
@media (max-width: 860px) {
.journey__w { font-size: clamp(2.2rem, 11vw, 4rem); }
.journey__w--tl { top: auto; bottom: 60%; left: 6vw; }
.journey__w--br { top: 59%; bottom: auto; right: 6vw; }
}
/* statystyki na odwrocie karty — Unica One miesza wielkość liter, więc zawsze wersaliki */
.team__stats b { text-transform: uppercase; }
.team__stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.team__stats li { min-width: 0; }
.team__stats span { overflow-wrap: anywhere; hyphens: auto; }
/* przesunięcie postaci w kadrze karty: --photo-up na .team__card (np. 8%) podnosi zdjęcie bez odsłaniania dołu */
.team__photo { position: relative; top: calc(-1 * var(--photo-up, 0%)); height: calc(100% + var(--photo-up, 0%)); }
/* nazwa specjalizacji na zdjęciu: twardy, ciemny cień pod tekstem dla czytelności na czerwonym kombinezonie */
.team__cert { text-shadow: 0 0 1px #000, 0 0 2px #000, 0 1px 3px #000, 0 0 8px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.8); font-weight: 700; }
/* karty bez zdjęcia (zero.png): postać przygaszona, imię w pełnym kolorze */
.team__card--placeholder .team__photo-wrap { opacity: 0.5; }
/* karta case study z animacją produktu (iframe) zamiast tła */
.cs__media--embed { background: #0d0a0d; overflow: hidden; }
.cs__media--embed iframe { position: absolute; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 1.35; translate: 0 -50%; border: 0; pointer-events: none; } /* animacja Meridian ma stałe proporcje 1.35 — wyśrodkowana w pionie */
/* ===== CASE STUDIES — płaskie karty (bez wygięcia CRT, obudowy TV, skanlinii i aberracji) ===== */
.cases-screen,
.cases-screen { filter: none !important; }
.cases-screen::before,
.cases-pin::after,
.cases-fx { display: none; }
.cases-pin { border-radius: 0; background: var(--bg); box-shadow: none; }
.cases-track { filter: none; animation: none; }
.cases-track .cs__title { text-shadow: none; }
@media (min-width: 861px) { .cases-scroll { width: 100vw; margin-inline: calc(50% - 50vw); } } /* pas na całą szerokość — karty nie ucinają się na paddingu sekcji */
/* ===== CASE STUDY v2 — czytelniejsza hierarchia (kicker → tytuł → podtytuł → opis → CTA → cytat) ===== */
.cs--v2 .cs__left { justify-content: center; gap: 0; padding: clamp(32px, 4vw, 64px); }
.cs__kicker {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
margin: 0 0 clamp(20px, 2.4vw, 32px);
font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-dim);
}
.cs__kicker strong { color: var(--text); font-weight: 600; }
.cs__kicker > * + *::before { content: "·"; margin: 0 10px; color: rgba(255,255,255,0.25); }
.cs__kicker-live { color: var(--hud); }
.cs--v2 .cs__title {
display: flex; flex-direction: column; gap: 12px;
font-size: clamp(2.4rem, 4.4vw, 4.4rem); line-height: 0.95; margin: 0 0 clamp(16px, 1.8vw, 24px);
}
.cs__sub {
font-family: var(--font-body, inherit); text-transform: none; letter-spacing: 0;
font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.3; font-weight: 500; color: var(--text);
max-width: 30ch;
}
.cs--v2 .cs__desc { font-size: 0.98rem; max-width: 46ch; margin-bottom: clamp(20px, 2.2vw, 28px); }
.cs--v2 .cs__link { display: inline-flex; gap: 10px; align-items: center; }
.cs--v2 .cs__link em { font-style: normal; color: var(--hud); transition: transform 0.25s var(--ease); }
.cs--v2 .cs__link:hover em { transform: translateX(4px); }
.cs--v2 .cs__quote {
margin-top: clamp(28px, 3.4vw, 44px);
border: 0; border-left: 2px solid var(--hud); background: none;
padding: 2px 0 2px clamp(16px, 1.6vw, 22px);
}
.cs--v2 .cs__quote p { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.3rem, 1.8vw, 1.8rem); line-height: 1.1; margin-bottom: 10px; }
.cs--v2 .cs__quote footer { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; }
.cs--v2 .cs__quote strong { font-size: 0.85rem; }
.cs--v2 .cs__quote span { font-size: 0.85rem; }
.cs--v2 .cs__quote span::before { content: "— "; }
/* panel z animacją: okno aplikacji na ciemnym tle, wypełnia przestrzeń */
.cs--v2 .cs__media--embed {
display: flex; align-items: center; justify-content: center;
padding: clamp(24px, 3vw, 48px);
background: #0d0b0d;
}
.cs__window {
position: relative; width: 100%; aspect-ratio: 1.35; max-height: 100%;
border-radius: 12px; overflow: hidden;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(219,57,76,0.12);
background: #eceef1;
display: flex; flex-direction: column;
}
.cs__window-bar { display: flex; gap: 6px; padding: 9px 12px; background: #1a171a; border-bottom: 1px solid rgba(255,255,255,0.08); flex: none; }
.cs__window-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.cs__window-bar i:first-child { background: var(--hud); }
.cs--v2 .cs__window iframe { position: static; translate: none; flex: 1; width: 100%; height: auto; aspect-ratio: auto; border: 0; pointer-events: none; }
.cs--v2 .cs__stat {
display: flex; flex-direction: column; gap: 4px;
left: clamp(12px, 1.6vw, 24px); right: auto; bottom: clamp(12px, 1.6vw, 24px);
padding: 12px 16px; background: rgba(11,10,11,0.92); border: 1px solid rgba(219,57,76,0.35);
}
.cs--v2 .cs__stat b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 2.4vw, 2.6rem); line-height: 1; color: #fff; }
.cs--v2 .cs__stat small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 860px) {
.cs--v2 .cs__media--embed { padding: 16px; min-height: 0; }
.cs--v2 .cs__stat { position: absolute; }
}
/* kicker: klient w osobnej linii, kropki jako separator po elemencie (nie ląduje na początku nowej linii) */
.cs__kicker > strong { flex-basis: 100%; margin-bottom: 4px; }
.cs__kicker > * + *::before { content: none; }
.cs__kicker > span { white-space: nowrap; }
.cs__kicker > span:not(:last-child)::after { content: "·"; margin: 0 10px; color: rgba(255,255,255,0.25); }
/* scena: okno + statystyka przypięta do narożnika okna */
.cs__stage { position: relative; width: 100%; }
.cs--v2 .cs__stage .cs__stat { position: absolute; left: auto; right: clamp(-14px, -1vw, -8px); bottom: clamp(-22px, -1.6vw, -12px); }
@media (max-width: 860px) { .cs--v2 .cs__stage .cs__stat { right: 8px; bottom: -14px; } .cs--v2 .cs__media--embed { padding-bottom: 32px; } }
/* hook-tytuł (marketing) — dłuższy niż nazwa produktu, więc mniejszy stopień */
.cs--v2 .cs__title--hook { font-size: clamp(2rem, 3.3vw, 3.4rem); line-height: 1; }
.cs--v2 .cs__title--hook .cs__sub { color: var(--text-dim); font-weight: 400; max-width: 40ch; }
/* zrzut ekranu produktu w oknie: wypełnia okno, kadr od góry */
.cs__shot { display: block; flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: left top; }
.cs--v2 .cs__title--hook { gap: 0; }
.cs--v2 .cs__title--hook > span { display: block; }
.cs__title-accent { color: var(--hud); }
/* ===== CASE STUDY — cała karta klikalna (rozciągnięty link „Read the case study") ===== */
.cs { position: relative; cursor: pointer; }
.cs__link::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.cs__link:focus-visible { outline: none; }
.cs:has(.cs__link:focus-visible) { outline: 2px solid var(--hud); outline-offset: 4px; }
/* reakcja całej karty na hover */
.cs:hover .cs__link { color: var(--hud); }
.cs--v2:hover .cs__link em { transform: translateX(6px); }
.cs__window { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.cs:hover .cs__window { transform: translateY(-6px) scale(1.015); box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(219,57,76,0.35); }
@media (prefers-reduced-motion: reduce) { .cs:hover .cs__window { transform: none; } }