/*! sitco motion pages 1.0 — efekty podstron sitco.pl / sitco.uk. Samodzielne (bez sitco-motion.css), aktywowane selektorami istniejącego markupu. */
:root { --smp-accent: #A855F7; --smp-accent-2: #C99BFB; --smp-gem-2: linear-gradient(90deg, rgba(168, 85, 247, .45), rgba(99, 102, 241, .4), rgba(34, 211, 238, .26), rgba(217, 70, 239, .34), rgba(168, 85, 247, .45), rgba(99, 102, 241, .4), rgba(34, 211, 238, .26), rgba(217, 70, 239, .34), rgba(168, 85, 247, .45)); --smp-gem-3: linear-gradient(90deg, rgba(168, 85, 247, .45), rgba(99, 102, 241, .4), rgba(34, 211, 238, .26), rgba(217, 70, 239, .34), rgba(168, 85, 247, .45), rgba(99, 102, 241, .4), rgba(34, 211, 238, .26), rgba(217, 70, 239, .34), rgba(168, 85, 247, .45), rgba(99, 102, 241, .4), rgba(34, 211, 238, .26), rgba(217, 70, 239, .34), rgba(168, 85, 247, .45)); }
@property --smp-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Pasek postępu przewijania (tylko tam, gdzie przeglądarka zna scroll-timeline) */
@supports (animation-timeline: scroll()) {
  .smp-progress { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px; pointer-events: none; transform-origin: 0 50%; background: linear-gradient(90deg, var(--smp-accent), var(--smp-accent-2)); animation: smp-progress linear both; animation-timeline: scroll(root block); }
}

/* Hero: zorza za nagłówkiem, wejście elementów */
.smp-hero { isolation: isolate; }
.smp-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.smp-aurora::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 25%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 65% 25%, #000, transparent 75%); }
.smp-aurora i { position: absolute; border-radius: 50%; animation: smp-drift 24s ease-in-out infinite alternate; }
.smp-aurora i:nth-child(1) { top: -60%; right: -25%; width: min(80vmax, 1000px); height: min(80vmax, 1000px); background: radial-gradient(closest-side, rgba(168, 85, 247, .22), rgba(168, 85, 247, .06) 55%, transparent); }
.smp-aurora i:nth-child(2) { top: -20%; left: -40%; width: min(55vmax, 760px); height: min(55vmax, 760px); background: radial-gradient(closest-side, rgba(168, 85, 247, .12), transparent); animation-duration: 30s; animation-direction: alternate-reverse; }
.smp-hero .thesis, .smp-hero .s6-ctas, .smp-hero .lead, .smp-hero .sub, .smp-hero .btn-row, .smp-hero .eyebrow { animation: smp-rise 1s cubic-bezier(.2, .7, .2, 1) both; }
.smp-hero .eyebrow { animation-delay: 0s; }
.smp-hero .lead, .smp-hero .sub { animation-delay: .2s; }
.smp-hero .btn-row { animation-delay: .32s; }

/* Wejście sekcji przy przewijaniu */
.sm-js [data-smp]:not(.is-in) { opacity: 0; transform: translateY(20px); filter: blur(6px); }
.sm-js [data-smp] { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s cubic-bezier(.2, .7, .2, 1); }

/* Przyciski w treści: przebłysk na głównym, obwódka na pomocniczym, uniesienie */
main .btn, main .s6-btn { position: relative; isolation: isolate; transition: background-color .2s var(--ease, ease), border-color .2s var(--ease, ease), transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
main .btn--primary, main .s6-btn--primary { overflow: hidden; }
main .btn--primary::after, main .s6-btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-130%); animation: smp-sheen 6s ease-in-out 2s infinite; }
@media (hover: hover) { main .btn--primary:hover, main .s6-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(168, 85, 247, .8); } }
main .btn--ghost::before, main .s6-btn--ghost::before { content: ""; position: absolute; inset: -1px; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: conic-gradient(from var(--smp-a), transparent 0 62%, var(--smp-accent) 80%, var(--smp-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: smp-spin 3.2s linear infinite; }
main .btn--ghost:focus-visible::before, main .btn--ghost:active::before, main .s6-btn--ghost:focus-visible::before, main .s6-btn--ghost:active::before { opacity: 1; }
@media (hover: hover) { main .btn--ghost:hover::before, main .s6-btn--ghost:hover::before { opacity: 1; } }

/* Nagłówki: przyciski jak na home (podświetlenie krawędzi, naciśnięcie) */
main .btn:active, main .s6-btn:active { transform: scale(.97); }
.smp-hero .btn--primary, .smp-hero .s6-btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 32px -14px rgba(168, 85, 247, .7); }

/* Nagłówki: szary tekst z przebłyskiem jak na home */
.ph .h1 span, .cn-hero__h span, .thesis span, .s6-h1 { --smp-key: var(--muted, #A1A1AA); color: var(--smp-key); background: linear-gradient(100deg, var(--smp-key) 42%, #fff 50%, var(--smp-accent-2) 54%, var(--smp-key) 62%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: smp-key 7s ease-in-out 1.4s infinite; }
.ph .h1 span, .cn-hero__h span { padding-bottom: .14em; margin-bottom: -.14em; }
.thesis span { --smp-key: var(--dim, #A1A1AA); }
.s6-h1 { --smp-key: var(--s6-muted, #A1A1AA); padding-bottom: .14em; margin-bottom: -.14em; }
.s6-h1 span { -webkit-text-fill-color: var(--s6-text, #fff); }

/* Nagłówki: szkło (rozmyte tło, jasna krawędź, poświata za kursorem) */
.smp-glass { position: relative; isolation: isolate; background: rgba(26, 26, 30, .58); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -32px rgba(0, 0, 0, .9); }
.smp-glass--chip { background: rgba(255, 255, 255, .045); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.smp-glass::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(168, 85, 247, .16), transparent 60%); }
.smp-glass--chip::after { background: radial-gradient(160px circle at var(--x, 50%) var(--y, 0%), rgba(168, 85, 247, .2), transparent 70%); }
@media (hover: hover) and (pointer: fine) { .smp-glass:hover::after { opacity: 1; } }

/* Tło: dyskretna poświata, która bardzo powoli zmienia barwy (fiolet → indygo → turkus → magenta); hero, baner końcowy, karty z ceną */
.smp-aurora::after, .smp-gem::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--smp-gem-3) 100% 0 / 300% 100% repeat-x, var(--smp-gem-2) 0 0 / 200% 100% repeat-x; animation: smp-gem 20s linear infinite; }
.smp-aurora::after { opacity: .3; -webkit-mask-image: radial-gradient(ellipse 60% 75% at 72% 18%, #000, transparent 72%); mask-image: radial-gradient(ellipse 60% 75% at 72% 18%, #000, transparent 72%); }
.smp-gem { position: relative; isolation: isolate; }
.smp-gem--band { overflow: hidden; }
.smp-gem--band::before { opacity: .18; -webkit-mask-image: radial-gradient(ellipse 65% 130% at 10% 100%, #000, transparent 70%); mask-image: radial-gradient(ellipse 65% 130% at 10% 100%, #000, transparent 70%); }
.smp-gem--card::before { border-radius: inherit; opacity: .18; -webkit-mask-image: radial-gradient(ellipse 110% 85% at 0% 0%, #000, transparent 62%); mask-image: radial-gradient(ellipse 110% 85% at 0% 0%, #000, transparent 62%); }
@keyframes smp-gem { to { background-position: 0 0, 100% 0; } }

/* Karty: uniesienie i poświata po najechaniu (tylko urządzenia z myszą) */
@media (hover: hover) and (pointer: fine) {
  .smp-lift { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
  .smp-lift:hover { transform: translateY(-3px); border-color: rgba(168, 85, 247, .45); box-shadow: 0 18px 40px -22px rgba(168, 85, 247, .45); }
}

@keyframes smp-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes smp-drift { to { transform: translate(-8%, 10%) scale(1.15); } }
@keyframes smp-rise { from { opacity: 0; transform: translateY(.4em); filter: blur(8px); } }
@keyframes smp-sheen { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes smp-key { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes smp-spin { to { --smp-a: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .smp-progress, .smp-aurora i, .smp-aurora::after, .smp-gem::before, .smp-hero .h1, .smp-hero .s6-h1, .smp-hero .thesis, .smp-hero .s6-ctas, .smp-hero .lead, .smp-hero .sub, .smp-hero .btn-row, .smp-hero .eyebrow, main .btn--primary::after, main .btn--ghost::before, main .s6-btn--primary::after, main .s6-btn--ghost::before, .ph .h1 span, .cn-hero__h span, .thesis span, .s6-h1 { animation: none !important; }
  .sm-js [data-smp], .sm-js [data-smp]:not(.is-in) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .smp-lift, .smp-lift:hover, main .btn--primary:hover, main .s6-btn--primary:hover, main .btn:active, main .s6-btn:active { transform: none; }
  main .btn--ghost::before, main .s6-btn--ghost::before { display: none; }
  main .btn--ghost:hover, main .btn--ghost:focus-visible, main .s6-btn--ghost:hover, main .s6-btn--ghost:focus-visible { border-color: var(--smp-accent, #a855f7); }
}