/* Warstwa wizualna: zdjęcia, ruch, stany ładowania. Działa bez JS (treść widoczna), z JS dodaje animacje.
   Szanuje prefers-reduced-motion. Ładowana po tokens.css. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }
body { animation: fxIn .55s var(--ease) both; }
@keyframes fxIn { from { opacity: 0; } to { opacity: 1; } }
:focus-visible { outline: 2px solid var(--accent, #3e6ae1); outline-offset: 3px; border-radius: 4px; }
::selection { background: #cfdcfb; }

/* pojawianie przy przewijaniu */
.fx .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.fx .rv.rv-l { transform: translateX(-36px); } .fx .rv.rv-r { transform: translateX(36px); } .fx .rv.rv-z { transform: scale(.94); }
.fx .rv.in { opacity: 1; transform: none; }

/* przyciski i linki */
.btn { transition: transform .18s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s, color .2s; }
.btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(23, 26, 32, .16); }
.btn:not(:disabled):active { transform: scale(.98); box-shadow: none; }
.btn.light { background: #fff; color: #171a20; border-color: #fff; }
.btn.ghostw { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(6px); }
.btn.big { min-height: 52px; padding-inline: 28px; font-size: 16px; }
.lnk { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.lnk i { transition: transform .25s var(--ease); font-style: normal; } .lnk:hover i { transform: translateX(4px); }

/* hero ze zdjęciami (Ken Burns) */
.has-hero .nav { position: fixed; left: 0; right: 0; background: transparent; color: #fff; transition: background-color .3s, color .3s, border-color .3s; }
.has-hero .nav.sc { background: rgba(255, 255, 255, .94); color: var(--ink); }
.has-hero .nav li a:hover, .has-hero .nav li a[aria-current=page] { background: rgba(255, 255, 255, .16); }
.has-hero .nav.sc li a:hover, .has-hero .nav.sc li a[aria-current=page] { background: var(--bg-soft); }
.fxh { position: relative; min-height: min(92svh, 860px); color: #fff; display: flex; align-items: flex-end; overflow: hidden; background: #171a20; isolation: isolate; }
.fxh .sl { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s ease; z-index: -2; }
.fxh .sl.on { opacity: 1; }
.fxh .sl img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.fxh .sl.on img { animation: kb 9s ease-out forwards; }
@keyframes kb { to { transform: scale(1.14) translate(-1.5%, -1%); } }
.fxh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 12, 16, .6) 0%, rgba(10, 12, 16, .18) 38%, rgba(10, 12, 16, .78) 100%); }
.fxh .hin { width: 100%; padding-block: 120px clamp(96px, 13vh, 130px); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.fxh .caps { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .7); font-weight: 500; }
.fxh h1 { font-weight: 400; font-size: clamp(2.3rem, 6.4vw, 4.6rem); line-height: 1.03; letter-spacing: -.025em; max-width: 14ch; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.fxh .lead { font-size: clamp(1rem, 2vw, 1.2rem); max-width: 34rem; color: rgba(255, 255, 255, .88); }
.fxh .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.fxh .dots { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 28px; display: flex; gap: 8px; z-index: 2; }
.fxh .dots i { width: 34px; height: 3px; background: rgba(255, 255, 255, .35); position: relative; overflow: hidden; cursor: pointer; border-radius: 2px; }
.fxh .dots i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.fxh .dots i.on::after { animation: dotf var(--dur, 5.5s) linear forwards; } .fxh .dots i.done::after { transform: scaleX(1); }
@keyframes dotf { to { transform: scaleX(1); } }
.fxh .cue { position: absolute; left: 50%; bottom: 14px; width: 22px; height: 36px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 12px; transform: translateX(-50%); z-index: 2; }
.fxh .cue::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: cue 1.8s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }
.fxs { position: relative; z-index: 3; margin-top: -56px; }
.fxs .srch { background: #fff; box-shadow: 0 24px 60px rgba(23, 26, 32, .18); border-color: transparent; margin-top: 0; }

/* kafle ze zdjęciem */
.pt { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #e9eaee; isolation: isolate; aspect-ratio: var(--ar, 4/3); color: #fff; }
.pt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pt:hover img, .pt:focus-visible img { transform: scale(1.07); }
.pt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(10, 12, 16, .82)); z-index: 1; transition: opacity .4s; }
.pt .cp { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(16px, 2.4vw, 24px); display: flex; flex-direction: column; gap: 4px; }
.pt .cp b { font-weight: 500; font-size: 1.25rem; } .pt .cp span { font-size: 14px; color: rgba(255, 255, 255, .86); max-width: 30ch; }
.pt .cp em { font-style: normal; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.pt .go { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #171a20; display: grid; place-items: center; transform: translate(6px, -6px) scale(.8); opacity: 0; transition: transform .35s var(--ease), opacity .3s; }
.pt:hover .go, .pt:focus-visible .go { transform: none; opacity: 1; }
@media (hover: none) { .pt .go { opacity: 1; transform: none; } }

/* kafle z ikonami */
.fxt { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: #fff; border-radius: 10px; border: 1px solid transparent; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.fxt:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23, 26, 32, .1); border-color: var(--line); }
.fxt svg { width: 34px; height: 34px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fxt b { font-weight: 500; font-size: 1.2rem; } .fxt span { color: var(--ink-2); font-size: 14px; }

/* pasek z markami */
.mq { overflow: hidden; border-block: 1px solid var(--line); background: #fff; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq div { display: flex; gap: 56px; width: max-content; padding-block: 22px; animation: mq 38s linear infinite; font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: #b4b6bb; }
.mq:hover div { animation-play-state: paused; } @keyframes mq { to { transform: translateX(-50%); } }

/* liczniki */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 24px; }
.stats div { display: flex; flex-direction: column; gap: 4px; } .stats b { font-weight: 300; font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { color: var(--ink-2); font-size: 14px; }

/* pas ze zdjęciem i lekkim parallaxem */
.band { position: relative; overflow: hidden; color: #fff; isolation: isolate; min-height: clamp(360px, 56vw, 520px); display: flex; align-items: center; background: #171a20; }
.band img.bg { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; z-index: -2; will-change: transform; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 12, 16, .78), rgba(10, 12, 16, .25)); }
.band .txt { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 36rem; padding-block: 48px; }
.band .caps { color: rgba(255, 255, 255, .8); } .band p { color: rgba(255, 255, 255, .88); }

/* ładowanie */
.sk { background: linear-gradient(90deg, #ececee 25%, #f6f6f7 50%, #ececee 75%); background-size: 200% 100%; animation: sk 1.3s linear infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }
.ckok { width: 64px; height: 64px; }
.ckok circle { fill: none; stroke: #1f7a3d; stroke-width: 3; stroke-dasharray: 170; stroke-dashoffset: 170; animation: dr .7s .05s var(--ease) forwards; }
.ckok path { fill: none; stroke: #1f7a3d; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: dr .5s .6s var(--ease) forwards; }
@keyframes dr { to { stroke-dashoffset: 0; } }
.pop { animation: pop .5s var(--ease) both; } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* telefon: menu jako przewijane pigułki, 44px do dotyku */
@media (max-width: 760px) {
  .nav .wrap { gap: 10px; } .nav .brand { flex: 0 0 auto; }
  .nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
  .nav ul::-webkit-scrollbar { display: none; } .nav li a { white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
  .fxs { margin-top: -40px; }
  .fxh .dots i { width: 24px; } .fxh .cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .fx .rv { opacity: 1; transform: none; } .mq div { animation: none; } .fxh .sl img { transform: none !important; }
}

/* sylwetki aut: większe, w studiu */
.ph svg { width: 100%; height: auto; display: block; padding: 0; }
.car .ph, .ph.studio { background: radial-gradient(120% 90% at 50% 20%, #fafafb, #e4e6ea); padding: 18px 10px 4px; aspect-ratio: 16/10; display: flex; align-items: center; }