/* Synerpex Custom CSS - Animacje SVG i dodatkowe style */

/* ===== ANIMACJE KEYFRAMES ===== */

/* Rotacje dla orbit */
@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes rotateReverse {
  to { transform: rotate(-360deg); }
}

/* Unoszenie się */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Pulsowanie */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Przepływ linii (dla SVG stroke-dashoffset) */
@keyframes flowLine {
  to { stroke-dashoffset: -100; }
}

/* Wystrzelenie danych */
@keyframes shootOut {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 1; transform: translateY(-35px) scale(1); }
  90% { opacity: 1; }
  100% { transform: translateY(-80px) scale(0); opacity: 0; }
}

/* Efekt shine */
@keyframes shine {
  0% { left: -150%; opacity: 0; }
  5% { opacity: 0.6; }
  20% { left: 150%; opacity: 0; }
  100% { left: 150%; opacity: 0; }
}

/* Fade in up (scroll animations) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== KLASY ANIMACJI ===== */

.animate-orbit-slow {
  animation: rotate 30s linear infinite;
}

.animate-orbit-med {
  animation: rotate 20s linear infinite reverse;
}

.animate-orbit-fast {
  animation: rotate 15s linear infinite;
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Data streams */
.data-stream {
  animation: flowLine 8s linear infinite;
  stroke-dasharray: 6 10;
}

/* ===== SVG SPECIFIC ===== */

/* Przeciw-rotacja dla ikon w orbitujących grupach */
.counter-rotate {
  animation: rotateReverse 30s linear infinite;
}

/* Shine effect overlay */
.shine-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shine 8s ease-in-out infinite;
}

/* ===== SCROLL ANIMATIONS ===== */

.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for children */
.scroll-animate-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.scroll-animate-stagger > *:nth-child(2) { transition-delay: 0.2s; }
.scroll-animate-stagger > *:nth-child(3) { transition-delay: 0.3s; }
.scroll-animate-stagger > *:nth-child(4) { transition-delay: 0.4s; }

/* ===== SMOOTH SCROLL ===== */

html {
  scroll-behavior: smooth;
}

/* ===== FOCUS STATES ===== */

*:focus-visible {
  outline: 2px solid #A7D500;
  outline-offset: 2px;
}

/* ===== SELECTION ===== */

::selection {
  background: rgba(167, 213, 0, 0.3);
  color: #1C215F;
}

/* ===== LINE CLAMP (dla excerptów bloga) ===== */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== HERO SECTION - SVG PATH STYLES ===== */

.path-flow {
  stroke: #3A3E81;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 10;
  opacity: 0.4;
  animation: flowLine 12s linear infinite, pulseOpacity 4s ease-in-out infinite;
}

.path-cross {
  stroke: #A7D500;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 8 12;
  opacity: 0.8;
  animation: flowLine 8s linear infinite reverse, pulseOpacity 3s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 5px rgba(167, 213, 0, 0.4));
}

@keyframes pulseOpacity {
  0% { opacity: 0.3; stroke-width: 2; }
  50% { opacity: 0.8; stroke-width: 3; }
  100% { opacity: 0.3; stroke-width: 2; }
}

/* ===== AUTOMATYZACJA - ICON HIGHLIGHT ANIMATIONS ===== */
/* Zsynchronizowane z 6s cyklem animacji kropki */

/* Ikona 1: Wniosek - świeci od początku do 95% */
@keyframes iconHold1 {
  0% { transform: scale(1); border-color: rgba(255,255,255,0.2); color: white; box-shadow: none; }
  5% { transform: scale(1.15); border-color: #A7D500; color: #A7D500; box-shadow: 0 0 15px rgba(167, 213, 0, 0.5); }
  95% { transform: scale(1.15); border-color: #A7D500; color: #A7D500; box-shadow: 0 0 15px rgba(167, 213, 0, 0.5); }
  100% { transform: scale(1); border-color: rgba(255,255,255,0.2); color: white; box-shadow: none; }
}

/* Ikona 2: Akceptacja - świeci od 47% do 95% */
@keyframes iconHold2 {
  0%, 45% { transform: scale(1); border-color: rgba(255,255,255,0.2); color: white; box-shadow: none; }
  47% { transform: scale(1.15); border-color: #A7D500; color: #A7D500; box-shadow: 0 0 15px rgba(167, 213, 0, 0.5); }
  95% { transform: scale(1.15); border-color: #A7D500; color: #A7D500; box-shadow: 0 0 15px rgba(167, 213, 0, 0.5); }
  100% { transform: scale(1); border-color: rgba(255,255,255,0.2); color: white; box-shadow: none; }
}

/* Ikona 3: Płace - świeci od 90% do końca */
@keyframes iconHold3 {
  0%, 90% { transform: scale(1); border-color: rgba(255,255,255,0.2); color: white; box-shadow: none; }
  95%, 99% { transform: scale(1.15); border-color: #A7D500; color: #A7D500; box-shadow: 0 0 15px rgba(167, 213, 0, 0.5); }
  100% { transform: scale(1); border-color: rgba(255,255,255,0.2); color: white; box-shadow: none; }
}

/* Klasy do przypisania na ikony kroków */
.flow-step-1 {
  animation: iconHold1 6s infinite linear;
}

.flow-step-2 {
  animation: iconHold2 6s infinite linear;
}

.flow-step-3 {
  animation: iconHold3 6s infinite linear;
}

/* ===== MOBILE HERO ORBIT ANIMATIONS ===== */

/* Orbit ring rotations */
.orbit-1 {
  animation: rotateRight 30s linear infinite;
}

.orbit-2 {
  animation: rotateLeft 20s linear infinite;
}

.orbit-3 {
  animation: rotateRight 15s linear infinite;
}

@keyframes rotateRight {
  to { transform: rotate(360deg); }
}

@keyframes rotateLeft {
  to { transform: rotate(-360deg); }
}

/* Satellite wrappers - rotate with orbits */
.satellite-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sw-1 {
  animation: rotateRight 30s linear infinite;
}

.sw-2 {
  animation: rotateLeft 20s linear infinite;
}

.sw-3 {
  animation: rotateRight 15s linear infinite;
}

/* Satellites - counter-rotate to stay upright */
.sw-1 .satellite {
  animation: counterRotateRight 30s linear infinite;
}

.sw-2 .satellite {
  animation: counterRotateLeft 20s linear infinite;
}

.sw-3 .satellite {
  animation: counterRotateRight 15s linear infinite;
}

@keyframes counterRotateRight {
  to { transform: rotate(-360deg); }
}

@keyframes counterRotateLeft {
  to { transform: rotate(360deg); }
}

/* Core hub float animation */
.core-hub {
  animation: hubFloat 4s ease-in-out infinite;
}

@keyframes hubFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 10px 30px rgba(28, 33, 95, 0.1);
  }
  50% {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(28, 33, 95, 0.15);
  }
}

/* Data streams - shoot out from center */
.data-stream {
  transform-origin: center center;
}

.ds-1 {
  animation: shootOut 3s infinite ease-out;
}

.ds-2 {
  animation: shootOut 3s infinite ease-out 1s;
}

.ds-3 {
  animation: shootOut 3s infinite ease-out 2s;
}

@keyframes shootOut {
  0% {
    transform: rotate(var(--rot)) translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: rotate(var(--rot)) translateY(-35px) scale(1);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--rot)) translateY(-80px) scale(0);
    opacity: 0;
  }
}

/* ===== CONTACT FORM HUB ANIMATIONS ===== */

/* Contact hub ring rotations */
.ch-ring-1 {
  animation: rotateRing 20s linear infinite;
}

.ch-ring-2 {
  animation: rotateRingRev 15s linear infinite;
}

@keyframes rotateRing {
  to { transform: rotate(360deg); }
}

@keyframes rotateRingRev {
  to { transform: rotate(-360deg); }
}

/* Contact hub core float */
.ch-core {
  animation: floatMsg 4s ease-in-out infinite;
}

@keyframes floatMsg {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Contact hub icons orbit */
.ch-icon {
  animation: iconOrbit 4s ease-in-out infinite;
}

@keyframes iconOrbit {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ===== FLOATING DASHBOARD CARDS (HERO) ===== */

/* Base glass card style */
.glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(28, 33, 95, 0.08);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(28, 33, 95, 0.08),
    0 2px 8px rgba(28, 33, 95, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
  box-shadow:
    0 12px 40px rgba(28, 33, 95, 0.12),
    0 4px 12px rgba(28, 33, 95, 0.06);
}

/* Main central card - special styling */
.glass-card-main {
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 20px 60px rgba(28, 33, 95, 0.12),
    0 8px 24px rgba(28, 33, 95, 0.06);
  /* animation: floatMain 5s ease-in-out infinite; - REPLACED BY GSAP */
}

/* Float animation layers - REPLACED BY GSAP */
/*
.glass-card-float1 {
  animation: floatLayer1 4s ease-in-out infinite;
}

.glass-card-float2 {
  animation: floatLayer2 5s ease-in-out infinite;
}

.glass-card-float3 {
  animation: floatLayer3 6s ease-in-out infinite;
}
*/

/* ===== GSAP INITIAL STATES ===== */
/* Prevent flash of unstyled content */
.hero-badge,
.hero-headline,
.hero-description,
.hero-cta,
.glass-card {
  opacity: 0;
}

/* Underline accent initial state */
.hero-headline .underline-accent {
  transform-origin: left;
}

/* Keyframes for floating animations */
@keyframes floatMain {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px);
  }
}

@keyframes floatLayer1 {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(0.5deg);
  }
}

@keyframes floatLayer2 {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(-0.5deg);
  }
}

@keyframes floatLayer3 {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.3deg);
  }
}

/* Animated dashed lines */
@keyframes dashFlow {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -20;
  }
}

.animate-dash {
  animation: dashFlow 3s linear infinite;
}

/* Shimmer effect for cards (subtle - on hover) */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.6s ease;
  pointer-events: none;
  border-radius: inherit;
}

.glass-card:hover::before {
  left: 100%;
}

/* Pulse for online indicator */
.glass-card .animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===== RESPONSIVE CONTACT FORM ===== */
@media (max-width: 980px) {
  .synerpex-split-wrapper {
    flex-direction: column;
  }

  .synerpex-visual-col {
    display: none !important;
  }

  .synerpex-form-col {
    padding: 30px 20px;
  }
}