/*! sitco motion 1.0 — efekty dla sitco.pl / sitco.uk. Kolory przez zmienne --sm-*, krój dziedziczony ze strony. */
:where(:root) {
  --sm-bg: #0a0a0b;
  --sm-card: #121214;
  --sm-fg: #f4f4f5;
  --sm-muted: #a1a1aa;
  --sm-dim: #6b6b74;
  --sm-line: #26262b;
  --sm-accent: #a35bf5;
  --sm-accent-2: #d2b4ff;
  --sm-on-accent: #0b0710;
  --sm-radius: 14px;
}
@property --sm-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Nagłówek: wejście linii i przebłysk na ostatniej */
.sm-title > span { display: block; animation: sm-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.sm-title > span:nth-child(2) { animation-delay: .06s; }
.sm-title > span:nth-child(3) { animation-delay: .12s; }
.sm-key { padding-bottom: .14em; margin-bottom: -.14em; color: var(--sm-muted); background: linear-gradient(100deg, var(--sm-muted) 42%, #fff 50%, var(--sm-accent-2) 54%, var(--sm-muted) 62%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sm-title > .sm-key { animation: sm-rise .6s cubic-bezier(.2, .7, .2, 1) .12s both, sm-sheen 7s ease-in-out 1.4s infinite; }

/* Zorza */
:where(*:has(> .sm-aurora)) { position: relative; isolation: isolate; }
.sm-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.sm-aurora::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 60% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 60% 30%, #000, transparent 75%); }
.sm-aurora > div { position: absolute; inset: 0; translate: calc(var(--mx, 0) * 28px) calc(var(--my, 0) * 20px); transition: translate 1.2s cubic-bezier(.2, .7, .2, 1); }
.sm-aurora i { position: absolute; width: 80vmax; height: 80vmax; max-width: 1100px; max-height: 1100px; border-radius: 50%; background: radial-gradient(closest-side, rgba(163, 91, 245, .30), rgba(163, 91, 245, .08) 55%, transparent); animation: sm-drift 22s ease-in-out infinite alternate; }
.sm-aurora i:nth-child(1) { top: -45%; right: -35%; }
.sm-aurora i:nth-child(2) { top: -10%; left: -55%; width: 60vmax; height: 60vmax; background: radial-gradient(closest-side, rgba(110, 72, 255, .22), transparent); animation-duration: 28s; animation-direction: alternate-reverse; }
.sm-aurora i:nth-child(3) { top: 20%; right: 5%; width: 40vmax; height: 40vmax; background: radial-gradient(closest-side, rgba(220, 150, 255, .14), transparent); animation-duration: 17s; }

/* Przyciski */
.sm-btn, .sm-btn-ghost { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 3.2em; padding: .9em 1.5em; border-radius: var(--sm-radius); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; isolation: isolate; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background-color .3s; -webkit-tap-highlight-color: transparent; }
.sm-btn { overflow: hidden; border: 0; background: var(--sm-accent); color: var(--sm-on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 32px -14px rgba(163, 91, 245, .7); }
.sm-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-130%); animation: sm-btn-sheen 5s ease-in-out 2.2s infinite; }
.sm-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 20px 44px -14px rgba(163, 91, 245, .95); }
.sm-btn:active, .sm-btn-ghost:active { transform: scale(.97); }
.sm-btn-ghost { border: 1px solid var(--sm-line); background: transparent; color: var(--sm-fg); }
.sm-btn-ghost::before, .sm-beam::before { content: ""; position: absolute; inset: -1px; z-index: -1; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--sm-a), transparent 0 62%, var(--sm-accent) 80%, var(--sm-accent-2) 86%, transparent 94%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: sm-spin 3.2s linear infinite; }
.sm-btn-ghost::before { opacity: 0; transition: opacity .4s; }
.sm-btn-ghost:hover::before, .sm-btn-ghost:focus-visible::before { opacity: 1; }
.sm-btn:focus-visible, .sm-btn-ghost:focus-visible { outline: 2px solid var(--sm-accent-2); outline-offset: 3px; }

/* Karta z wiązką i światłem pod kursorem */
.sm-beam, .sm-spot { position: relative; isolation: isolate; border: 1px solid var(--sm-line); border-radius: calc(var(--sm-radius) + 6px); background: var(--sm-card); }
.sm-beam::before { animation-duration: 6s; }
.sm-beam::after, .sm-spot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--x, 50%) var(--y, 0%), rgba(163, 91, 245, .16), transparent 60%); }
.sm-beam:hover::after, .sm-spot:hover::after { opacity: 1; }

/* Licznik rolkowy */
.sm-odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.sm-odo-d { display: inline-block; height: 1.1em; overflow: hidden; line-height: 1.1; }
.sm-odo-d > span { display: block; transform: translateY(0); transition: transform 1.8s cubic-bezier(.16, .9, .2, 1) var(--d, 0s); }
.sm-odo-d > span > span { display: block; height: 1.1em; }

/* Pętla z logo */
.sm-loop { display: inline-block; width: 2.2em; height: 1.1em; overflow: visible; vertical-align: -.12em; }
.sm-loop .sm-loop-track { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; }
.sm-loop .sm-loop-trail { fill: none; stroke: var(--sm-accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 14 86; animation: sm-trail 3.2s linear infinite; opacity: .9; }
.sm-loop circle { fill: var(--sm-accent); }

/* Przepływ na żywo */
.sm-flow { --row: 3.6rem; display: grid; gap: 14px; padding: 18px; color: var(--sm-fg); text-align: left; }
.sm-flow-head { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--sm-muted); }
.sm-flow-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; background: rgba(163, 91, 245, .12); color: var(--sm-accent-2); font-weight: 600; }
.sm-flow-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--sm-accent); box-shadow: 0 0 0 0 rgba(163, 91, 245, .6); animation: sm-ping 1.8s ease-out infinite; }
.sm-flow-tag { margin-left: auto; padding: 5px 10px; border: 1px solid var(--sm-line); border-radius: 99px; }
.sm-flow-steps { display: grid; align-content: start; gap: 6px; min-height: 23.5rem; margin: 0; padding: 0; list-style: none; }
.sm-step { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0 12px; align-items: start; padding: 9px 4px 9px 0; animation: sm-step-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.sm-step:not(:last-child)::after { content: ""; position: absolute; left: calc(1.125rem - 1px); top: calc(9px + 2.25rem + 4px); bottom: -10px; width: 2px; border-radius: 2px; background: linear-gradient(var(--sm-accent), var(--sm-accent)) 0 0 / 100% 0 no-repeat, var(--sm-line); transition: background-size .5s; }
.sm-step.is-done:not(:last-child)::after { background-size: 100% 100%, auto; }
.sm-step-ico { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #1a1a1e; color: var(--sm-muted); transition: background-color .4s, color .4s; }
.sm-step-ico svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sm-step.is-run .sm-step-ico { color: var(--sm-fg); }
.sm-step.is-run .sm-step-ico::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--sm-accent); border-right-color: var(--sm-accent); animation: sm-spin-r .8s linear infinite; }
.sm-step.is-done .sm-step-ico { background: rgba(163, 91, 245, .16); color: var(--sm-accent-2); }
.sm-step.is-done .sm-step-ico::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--sm-card); background: var(--sm-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230b0710' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100%; animation: sm-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.sm-step b { display: block; font-size: .92rem; font-weight: 600; line-height: 1.35; }
.sm-step-detail { display: block; font-size: .8rem; line-height: 1.45; color: var(--sm-muted); }
.sm-step time { padding-top: 2px; font-size: .74rem; color: var(--sm-dim); font-variant-numeric: tabular-nums; }
.sm-wave { display: flex; align-items: center; gap: 3px; height: 22px; margin-top: 8px; }
.sm-wave i { flex: 1; max-width: 4px; height: 100%; border-radius: 2px; background: linear-gradient(var(--sm-accent-2), var(--sm-accent)); transform: scaleY(.15); transition: transform .12s ease-out; }
.sm-step.is-done .sm-wave { display: none; }
.sm-ask { margin-top: 4px; padding: 12px 12px 14px 0; border-radius: var(--sm-radius); }
.sm-ask.is-wait { background: linear-gradient(90deg, rgba(163, 91, 245, .12), transparent 85%); }
.sm-ask.is-wait .sm-step-ico { background: var(--sm-accent); color: var(--sm-on-accent); animation: sm-ring 1.8s ease-out infinite; }
.sm-ask b { color: var(--sm-accent-2); }
.sm-ask-q { margin: 2px 0 12px; font-size: .9rem; line-height: 1.45; color: var(--sm-fg); }
.sm-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-ask-btns .sm-btn, .sm-ask-btns .sm-btn-ghost { min-height: 2.6em; padding: .6em 1.1em; font-size: .85rem; border-radius: 11px; }
.sm-ask small { display: block; margin-top: 10px; font-size: .74rem; color: var(--sm-dim); }
.sm-flow-foot { min-height: 1.5em; margin: 0; padding-top: 12px; border-top: 1px solid var(--sm-line); font-size: .82rem; color: var(--sm-muted); }
.sm-flow-foot b { color: var(--sm-fg); font-weight: 600; }

/* Wejście przy przewijaniu */
.sm-js [data-sm-reveal=""], .sm-js [data-sm-reveal="stagger"] > * { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s; transition-delay: calc(var(--i, 0) * 90ms); }
.sm-js [data-sm-reveal=""]:not(.is-in), .sm-js [data-sm-reveal="stagger"]:not(.is-in) > * { opacity: 0; transform: translateY(22px); filter: blur(8px); }

/* Telefon / karta wjeżdżająca w 3D przy przewijaniu */
@supports (animation-timeline: view()) {
  .sm-tilt { animation: sm-tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; transform-origin: 50% 100%; }
}

/* Pasek przewijany */
.sm-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.sm-marquee-track { display: flex; width: max-content; animation: sm-marquee var(--sm-marquee-speed, 38s) linear infinite; }
.sm-marquee:hover .sm-marquee-track { animation-play-state: paused; }
.sm-marquee-track > * { display: inline-flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; white-space: nowrap; }
.sm-marquee-track > * > *::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 1.4rem; border-radius: 50%; background: var(--sm-accent); vertical-align: middle; }

/* Wejście hero bez rozmycia: H1 i CTA czytelne w ~0,7 s (audyt CRO 2026-10-30, wcześniej ~1,2–1,5 s) */
@keyframes sm-rise { from { opacity: 0; transform: translateY(.3em); } }
@keyframes sm-sheen { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes sm-drift { to { transform: translate(-8%, 10%) scale(1.15); } }
@keyframes sm-btn-sheen { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes sm-spin { to { --sm-a: 360deg; } }
@keyframes sm-spin-r { to { transform: rotate(360deg); } }
@keyframes sm-trail { from { stroke-dashoffset: 14; } to { stroke-dashoffset: -86; } }
@keyframes sm-ping { 70%, 100% { box-shadow: 0 0 0 8px rgba(163, 91, 245, 0); } }
@keyframes sm-ring { 0% { box-shadow: 0 0 0 0 rgba(163, 91, 245, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(163, 91, 245, 0); } }
@keyframes sm-step-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
@keyframes sm-pop { from { transform: scale(0); } }
@keyframes sm-tilt { from { opacity: .35; transform: perspective(1100px) rotateX(24deg) translateY(60px) scale(.92); } }
@keyframes sm-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .sm-title > span, .sm-title > .sm-key, .sm-aurora i, .sm-btn::after, .sm-btn-ghost::before, .sm-beam::before, .sm-loop .sm-loop-trail, .sm-flow-live i, .sm-step, .sm-ask .sm-step-ico, .sm-tilt, .sm-marquee-track { animation: none !important; }
  .sm-js [data-sm-reveal] *, .sm-js [data-sm-reveal], .sm-odo-d > span { transition: none !important; }
}

/* ——— (r2 31.10) Hero od pierwszego malowania (audyt CRO 2026-10-30): linie H1 bez animacji wejścia, przebłysk na linii kluczowej zostaje.
   31.10 na życzenie właściciela przywrócone: przebłysk przycisków, obwódka ghost, gradient tekstu, zorza, wiązka, wjazd przy scrollu —
   świadome odstępstwo od „avoid gradient blobs / glowing borders” z brand systemu. ——— */
.sm-title > span { animation: none; }
.sm-title > .sm-key { animation: sm-sheen 7s ease-in-out 1.4s infinite; }
.sm-ask small { font-size: .8125rem; color: var(--sm-muted); }
@media (prefers-reduced-motion: reduce) { .sm-step.is-run .sm-step-ico::before { animation: none; } }
/* Detektor impeccable 2026-10-31: znacznik „gotowe” bez sprężynowania (ease-out-quint). */
.sm-step.is-done .sm-step-ico::after { animation-timing-function: cubic-bezier(.22, 1, .36, 1); }