/*


* CIS FX — efekty wizualne i animacje


 * @author Wojciech Modzelewski


 * @version 1.0 — 2026-05


 *


 * Paleta: Praxio Blue (#1B5FAA / #2E86DE) + Dusty Rose (#C4788A)


 * Zasada: subtelne, nie przeszkadzają, poprawiają UX


 */





/* ── CSS VARIABLES PRAXIO+DUSTY ROSE ────────────────────── */


:root {


  --fx-navy:   #1a2e4a;


  --fx-blue:   #1B5FAA;


  --fx-blue2:  #2E86DE;


  --fx-rose:   #C4788A;


  --fx-rose2:  #8B4A5E;


  --fx-bg:     #F0F6FF;


  --fx-bg2:    #E8F1FB;


  --fx-border: rgba(13,46,107,.1);


}





/* ── REVEAL ON SCROLL ────────────────────────────────────── */


.cis-reveal {


  opacity: 0;


  transform: translateY(28px);


  transition: opacity .65s cubic-bezier(.25,.8,.25,1),


              transform .65s cubic-bezier(.25,.8,.25,1);


}


.cis-reveal.is-visible {


  opacity: 1;


  transform: none;


}


.cis-reveal-left {


  opacity: 0;


  transform: translateX(-24px);


  transition: opacity .6s ease, transform .6s ease;


}


.cis-reveal-left.is-visible { opacity: 1; transform: none; }





.cis-reveal-right {


  opacity: 0;


  transform: translateX(24px);


  transition: opacity .6s ease, transform .6s ease;


}


.cis-reveal-right.is-visible { opacity: 1; transform: none; }





/* Staggered delay dla gridów */


.cis-reveal:nth-child(1) { transition-delay: 0s; }


.cis-reveal:nth-child(2) { transition-delay: .08s; }


.cis-reveal:nth-child(3) { transition-delay: .16s; }


.cis-reveal:nth-child(4) { transition-delay: .24s; }


.cis-reveal:nth-child(5) { transition-delay: .32s; }


.cis-reveal:nth-child(6) { transition-delay: .40s; }





/* ── KARTA — HOVER LIFT + GLOW ───────────────────────────── */


.cis-card-lift {


  transition: transform .3s cubic-bezier(.25,.8,.25,1),


              box-shadow .3s cubic-bezier(.25,.8,.25,1),


              border-color .3s;


}


.cis-card-lift:hover {


  transform: translateY(-6px);


  box-shadow: 0 16px 40px rgba(13,46,107,.12),


              0 4px 12px rgba(13,46,107,.06);


}





/* Karta programu — kolorowy glow od koloru karty */


.p-card {


  transition: transform .3s cubic-bezier(.25,.8,.25,1),


              box-shadow .3s cubic-bezier(.25,.8,.25,1) !important;


}


.p-card:hover {


  transform: translateY(-8px) !important;


  box-shadow: 0 20px 48px rgba(13,46,107,.14),


              0 0 0 1px rgba(13,46,107,.06) !important;


}





/* ── HERO BACKGROUND ANIMATION ───────────────────────────── */


.fp-hero-section::before {


  content: '';


  position: absolute;


  inset: 0;


  background:


    radial-gradient(ellipse 55% 50% at 15% 25%, rgba(27,95,170,.08) 0%, transparent 65%),


    radial-gradient(ellipse 50% 45% at 85% 75%, rgba(196,120,138,.07) 0%, transparent 65%),


    radial-gradient(ellipse 35% 40% at 50% 110%, rgba(46,134,222,.06) 0%, transparent 60%);


  animation: cis-hero-pulse 10s ease-in-out infinite;


  pointer-events: none;


  z-index: 0;


}


@keyframes cis-hero-pulse {


  0%, 100% { opacity: .8; transform: scale(1); }


  50%       { opacity: 1;  transform: scale(1.04); }


}


.fp-hero-section > * { position: relative; z-index: 1; }





/* ── COUNT-UP — liczniki statystyk ───────────────────────── */


.fp-stat__num[data-target] {


  transition: none;


}





/* ── CURSOR GLOW ─────────────────────────────────────────── */


#cis-cursor-glow {


  position: fixed;


  width: 320px;


  height: 320px;


  border-radius: 50%;


  background: radial-gradient(circle,


    rgba(27,95,170,.06) 0%,


    rgba(196,120,138,.04) 40%,


    transparent 70%


  );


  pointer-events: none;


  transform: translate(-50%, -50%);


  z-index: 9998;


  transition: opacity .3s;


  mix-blend-mode: multiply;


}





/* ── SMOOTH GRADIENT TOPBAR ──────────────────────────────── */


.cis-topbar {


  background: linear-gradient(90deg, var(--fx-navy) 0%, #1B5FAA 50%, var(--fx-navy) 100%) !important;


  background-size: 200% 100% !important;


  animation: cis-topbar-flow 8s linear infinite;


}


@keyframes cis-topbar-flow {


  0%   { background-position: 0% 0%; }


  100% { background-position: 200% 0%; }


}


.cis-topbar__cta {


  background: var(--fx-rose) !important;


  transition: background .2s, transform .2s !important;


}


.cis-topbar__cta:hover {


  background: var(--fx-rose2) !important;


  transform: scale(1.04);


}





/* ── NAV — aktywny link ──────────────────────────────────── */


.cis-nav-link {


  position: relative;


}


.cis-nav-link::after {


  content: '';


  position: absolute;


  bottom: 0;


  left: 50%;


  right: 50%;


  height: 2px;


  background: var(--fx-rose);


  border-radius: 1px;


  transition: left .2s, right .2s;


}


.cis-nav-link:hover::after,


.cis-nav-link.is-active::after {


  left: 12px;


  right: 12px;


}


.cis-nav-link:hover,


.cis-nav-link.is-active {


  color: var(--fx-blue) !important;


  background: rgba(27,95,170,.06) !important;


}





/* CTA przycisk nav */


.cis-nav-btn--filled {


  background: var(--fx-navy) !important;


  transition: all .2s !important;


}


.cis-nav-btn--filled:hover {


  background: var(--fx-blue) !important;


  transform: translateY(-1px) !important;


  box-shadow: 0 6px 18px rgba(27,95,170,.25) !important;


}





/* ── HERO BADGE SHIMMER ──────────────────────────────────── */


.cis-hero__badge,


.fp-badge-text + *,


[class*="hero__badge"],


[class*="badge"] {


  position: relative;


  overflow: hidden;


}





/* ── FOOTER CTA BTNS ─────────────────────────────────────── */


.cis-footer__wa-btn {


  background: var(--fx-blue) !important;


  transition: all .2s !important;


}


.cis-footer__wa-btn:hover {


  background: var(--fx-navy) !important;


  transform: translateY(-2px) !important;


}


.cis-footer__nl-btn {


  background: var(--fx-rose) !important;


  color: white !important;


  transition: all .2s !important;


}


.cis-footer__nl-btn:hover {


  background: var(--fx-rose2) !important;


  transform: translateY(-2px) !important;


}





/* ── SOCIAL BUTTONS ──────────────────────────────────────── */


.cis-footer__logo-line { background: var(--fx-blue) !important; }





/* ── HERO BUTTONS ────────────────────────────────────────── */


a.fp-cta1 {


  background: var(--fx-rose) !important;


  color: white !important;


  box-shadow: 0 8px 24px rgba(196,120,138,.28) !important;


  transition: all .25s cubic-bezier(.25,.8,.25,1) !important;


}


a.fp-cta1:hover {


  background: var(--fx-rose2) !important;


  transform: translateY(-3px) !important;


  box-shadow: 0 14px 32px rgba(196,120,138,.38) !important;


}


a.fp-cta2 {


  background: var(--fx-navy) !important;


  color: var(--fx-bg) !important;


  transition: all .25s cubic-bezier(.25,.8,.25,1) !important;


}


a.fp-cta2:hover {


  background: var(--fx-blue) !important;


  transform: translateY(-3px) !important;


  box-shadow: 0 10px 28px rgba(27,95,170,.25) !important;


}





/* ── GRADIENT TEXT ───────────────────────────────────────── */


.gradient-text {


  background: linear-gradient(90deg, var(--fx-blue) 0%, var(--fx-rose) 100%) !important;


  -webkit-background-clip: text !important;


  -webkit-text-fill-color: transparent !important;


  background-clip: text !important;


}





/* ── SECTION LABELS ──────────────────────────────────────── */


.fp-ss { background: linear-gradient(135deg, var(--fx-navy) 0%, #1B3A6A 100%) !important; }


.fp-ss__lbl { color: var(--fx-rose) !important; }


.fp-ss__btn {


  background: var(--fx-rose) !important;


  color: white !important;


  transition: all .2s !important;


}


.fp-ss__btn:hover {


  background: var(--fx-rose2) !important;


  transform: translateY(-2px) !important;


}





/* ── TABS ────────────────────────────────────────────────── */


.fp-tab.active, .fp-tab:hover {


  border-color: var(--fx-navy) !important;


  color: var(--fx-navy) !important;


  background: var(--fx-bg2) !important;


}





/* ── CIS HERO ────────────────────────────────────────────── */


.cis-hero { background: var(--fx-bg) !important; }


.cis-hero__badge {


  border-color: var(--fx-rose) !important;


  color: var(--fx-rose) !important;


  background: rgba(196,120,138,.06) !important;


}


.cis-hero h1 em {


  background: linear-gradient(90deg, var(--fx-blue), var(--fx-rose)) !important;


  -webkit-background-clip: text !important;


  -webkit-text-fill-color: transparent !important;


  background-clip: text !important;


}


.cis-hero h1::after { background: var(--fx-rose) !important; }


.cis-hero__btn--primary {


  background: linear-gradient(90deg, var(--fx-rose), var(--fx-rose2)) !important;


  color: white !important;


  box-shadow: 0 6px 20px rgba(196,120,138,.28) !important;


}


.cis-hero__btn--secondary {


  color: var(--fx-navy) !important;


}





/* ── RESPONSYWNOŚĆ ───────────────────────────────────────── */


@media (prefers-reduced-motion: reduce) {


  .cis-reveal,


  .cis-reveal-left,


  .cis-reveal-right {


    opacity: 1 !important;


    transform: none !important;


    transition: none !important;


  }


  .cis-topbar { animation: none !important; }


  .fp-hero-section::before { animation: none !important; }


  #cis-cursor-glow { display: none !important; }


}