/* krstyle.css — Marketing od Zera do Sprzedaży */

html { scroll-behavior: smooth; }
body { background: #050505; color: #e5e5e5; font-family: 'Inter', sans-serif; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #404040; }

.gradient-text {
  background: linear-gradient(to bottom, #ffffff, #737373);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.accent-gradient-text {
  background: linear-gradient(135deg, #00ffc4, #047857);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card {
  background: rgba(23,23,23,0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.05);
}

.glow-accent { box-shadow: 0 0 30px -10px rgba(0,255,196,0.5); }
.glow-accent-hover:hover { box-shadow: 0 0 40px -8px rgba(0,255,196,0.6); }
.shadow-btn { box-shadow: 0 0 20px -5px rgba(0,255,196,0.4); }
.shadow-btn-hover:hover { box-shadow: 0 0 30px -3px rgba(0,255,196,0.6); }

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

@keyframes pulse-glow {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.12; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up { animation: fade-up 0.8s ease-out forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

.strikethrough { position: relative; }
.strikethrough::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #ef4444;
  transform: rotate(-3deg);
}

.interface-mockup {
  background: linear-gradient(145deg, #111111, #0a0a0a);
  border: 1px solid rgba(255,255,255,0.08);
}

.example-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.example-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,255,196,0.3);
  box-shadow: 0 0 30px -10px rgba(0,255,196,0.2);
}

.nav-blur {
  backdrop-filter: blur(12px);
  background: rgba(5,5,5,0.8);
}

.phase-line::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 48px;
  bottom: -24px;
  width: 2px;
  background: linear-gradient(to bottom, #00ffc4, rgba(0,255,196,0.1));
}
.phase-item:last-child .phase-line::before { display: none; }

.outcome-check::before {
  content: '✓';
  color: #00ffc4;
  margin-right: 10px;
  font-weight: 600;
  font-size: 0.875rem;
}

/* ── Teaser Banner ─────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes rocket-launch {
  /* Stoi na dole */
  0%    { transform: translateY(0);     }
  /* Drganie przed startem */
  5%    { transform: translateY(2px);   }
  7%    { transform: translateY(-2px);  }
  9%    { transform: translateY(2px);   }
  11%   { transform: translateY(-1px);  }
  13%   { transform: translateY(0);     }
  /* Wolny, majestatyczny odlot w górę */
  55%   { transform: translateY(-260px); opacity: 1; }
  56%   { transform: translateY(-260px); opacity: 0; }
  /* Teleport na dół — niewidoczny */
  57%   { transform: translateY(180px);  opacity: 0; }
  /* Pojawia się i powoli wlatuje z dołu */
  60%   { transform: translateY(180px);  opacity: 1; }
  72%   { transform: translateY(10px);   }
  75%   { transform: translateY(-4px);   }
  78%   { transform: translateY(2px);    }
  81%   { transform: translateY(0);      }
  /* Pauza */
  85%   { transform: translateY(0);      }
  /* Drganie drugi start */
  87%   { transform: translateY(2px);    }
  89%   { transform: translateY(-2px);   }
  91%   { transform: translateY(2px);    }
  93%   { transform: translateY(-1px);   }
  95%   { transform: translateY(0);      }
  /* Drugi odlot */
  100%  { transform: translateY(-260px); opacity: 1; }
}

@keyframes flame-ignite {
  0%    { opacity: 0.3; transform: scaleY(0.3); }
  5%    { opacity: 0.5; transform: scaleY(0.5); }
  13%   { opacity: 0.9; transform: scaleY(1.1) scaleX(1.1); }
  15%   { opacity: 1;   transform: scaleY(1.3) scaleX(1.0); }
  50%   { opacity: 1;   transform: scaleY(1.5); }
  56%   { opacity: 0;   transform: scaleY(0.2); }
  57%   { opacity: 0;   transform: scaleY(0.2); }
  60%   { opacity: 0.3; transform: scaleY(0.4); }
  72%   { opacity: 0.6; transform: scaleY(0.7); }
  81%   { opacity: 0.4; transform: scaleY(0.4); }
  85%   { transform: scaleY(0.35); }
  91%   { opacity: 0.9; transform: scaleY(1.1) scaleX(1.1); }
  95%   { opacity: 1;   transform: scaleY(1.3); }
  100%  { opacity: 1;   transform: scaleY(1.5); }
}

@keyframes flame-flicker {
  0%, 100% { transform: scaleX(1)   scaleY(1);    opacity: 1; }
  25%       { transform: scaleX(1.1) scaleY(0.95); opacity: 0.9; }
  50%       { transform: scaleX(0.9) scaleY(1.08); opacity: 1; }
  75%       { transform: scaleX(1.05)scaleY(0.97); opacity: 0.95; }
}

@keyframes pad-glow-pulse {
  0%    { opacity: 0;   transform: translateX(-50%) scaleX(0.4); }
  5%    { opacity: 0.4; transform: translateX(-50%) scaleX(0.7); }
  13%   { opacity: 1;   transform: translateX(-50%) scaleX(1);   }
  55%   { opacity: 0;   transform: translateX(-50%) scaleX(0.3); }
  72%   { opacity: 0.3; transform: translateX(-50%) scaleX(0.5); }
  81%   { opacity: 0.3; transform: translateX(-50%) scaleX(0.5); }
  85%   { opacity: 0.2; transform: translateX(-50%) scaleX(0.4); }
  91%   { opacity: 0.9; transform: translateX(-50%) scaleX(0.9); }
  95%   { opacity: 1;   transform: translateX(-50%) scaleX(1);   }
  100%  { opacity: 0;   transform: translateX(-50%) scaleX(0.3); }
}

.teaser-shimmer-line {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,255,196,0.0) 20%,
    rgba(0,255,196,0.35) 50%,
    rgba(0,255,196,0.0) 80%,
    transparent 100%
  );
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

@keyframes border-pulse {
  0%, 100% {
    border-color: rgba(0,255,196,0.12);
    box-shadow:
      0 0 20px -10px rgba(0,255,196,0.08),
      0 0 60px -20px rgba(0,255,196,0.04);
  }
  50% {
    border-color: rgba(0,255,196,0.8);
    box-shadow:
      0 0 60px -5px  rgba(0,255,196,0.45),
      0 0 120px -10px rgba(0,255,196,0.25),
      0 0 200px -20px rgba(0,255,196,0.12);
  }
}

@keyframes teaser-inner-glow {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

@keyframes teaser-shimmer {
  0%   { background-position: -200% 0; opacity: 0; }
  35%  { opacity: 0; }
  50%  { opacity: 1; background-position: 0% 0; }
  65%  { opacity: 0; }
  100% { background-position: 200% 0; opacity: 0; }
}

.teaser-card {
  position: relative;
  background: rgba(10,10,10,0.85);
  border: 1px solid rgba(0,255,196,0.12);
  backdrop-filter: blur(10px);
  animation: border-pulse 6s ease-in-out infinite;
  overflow: hidden;
}

/* Inner bloom — zielone słońce w środku karty */
.teaser-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgba(0,255,196,0.18) 0%,
    rgba(0,255,196,0.08) 35%,
    rgba(0,255,196,0.02) 60%,
    transparent 100%
  );
  animation: teaser-inner-glow 6s ease-in-out infinite;
  z-index: 0;
}

/* Shimmer smuga */
.teaser-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(0,255,196,0.12) 42%,
    rgba(0,255,196,0.24) 50%,
    rgba(0,255,196,0.12) 58%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: teaser-shimmer 6s ease-in-out infinite;
  mix-blend-mode: screen;
  z-index: 0;
}

.teaser-card > * {
  position: relative;
  z-index: 1;
}

.teaser-rocket-wrap {
  background: rgba(0,255,196,0.05);
  border: 1px solid rgba(0,255,196,0.12);
}

.teaser-rocket {
  animation: rocket-launch 12s ease-in-out infinite;
  transform-origin: bottom center;
}

.rocket-flame-main {
  transform-origin: top center;
  animation: flame-ignite 12s ease-in-out infinite,
             flame-flicker 0.18s ease-in-out infinite;
}
.rocket-flame-inner {
  transform-origin: top center;
  animation: flame-ignite 12s ease-in-out infinite,
             flame-flicker 0.13s ease-in-out infinite 0.04s;
}
.rocket-flame-core {
  transform-origin: top center;
  animation: flame-ignite 12s ease-in-out infinite,
             flame-flicker 0.09s ease-in-out infinite 0.02s;
}

.rocket-pad-glow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(0,255,196,0.7) 0%, rgba(0,255,196,0.2) 50%, transparent 100%);
  border-radius: 50%;
  filter: blur(4px);
  animation: pad-glow-pulse 12s ease-in-out infinite;
  z-index: 0;
}

.teaser-badge {
  background: rgba(0,255,196,0.1);
  border: 1px solid rgba(0,255,196,0.2);
  color: #00ffc4;
}

.teaser-tag {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}