/* ============================================================
   GALILEO — promo.css
   Pełnoekranowe animowane "spoty" promocyjne (SP i LO):
   sceny wchodzą i schodzą automatycznie, treści wskakują
   kaskadowo, całość zapętla się jak reklama.
   ============================================================ */
.promo-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
}
.promo-stage.promo-day { color: var(--navy); }

/* tła */
.promo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.promo-night-bg { background: linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 55%, var(--navy) 100%); }
.promo-day-bg { background: linear-gradient(180deg, var(--day-sky-1) 0%, var(--day-sky-2) 70%, #b9cfd8 100%); }
.promo-landscape {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26svh;
  overflow: hidden;
  opacity: 0.9;
  z-index: 1;
}
.promo-landscape img { width: 100%; height: 130%; object-fit: cover; object-position: center 78%; }

/* ---------- sceny ---------- */
.scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  padding: 8vh 7vw 14vh;
  opacity: 0;
  pointer-events: none;
}
.scene.active { opacity: 1; pointer-events: auto; }
.scene.leave {
  opacity: 0;
  transition: opacity 0.55s ease;
}

/* elementy wskakujące kaskadowo (opóźnienie przez --d) */
.scene .pop { opacity: 0; }
.scene.active .pop {
  animation: promo-pop 0.85s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
@keyframes promo-pop {
  from { opacity: 0; transform: perspective(900px) translate3d(0, 46px, -120px); }
  to { opacity: 1; transform: perspective(900px) translate3d(0, 0, 0); }
}

/* typografia scen */
.promo-logo { width: clamp(130px, 18vw, 210px); border-radius: 50%;
  filter: drop-shadow(0 0 45px rgba(168, 195, 207, 0.55)); }
.promo-kicker {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
}
.promo-stage.promo-day .promo-kicker { color: var(--deep-pink); }
.scene h1 {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  color: inherit;
  line-height: 1.08;
  text-wrap: balance;
  max-width: 22ch;
}
.scene h1 em { color: var(--light-blue); }
.promo-stage.promo-day .scene h1 em { color: var(--deep-pink); }
.scene .promo-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  max-width: 52ch;
  color: var(--lavender);
}
.promo-stage.promo-day .scene .promo-sub { color: #3d4a75; }

/* wielkie hasła jedno pod drugim */
.promo-statements { display: grid; gap: 0.4rem; }
.promo-statements span {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.15;
}
.promo-statements .accent { color: var(--deep-pink); font-style: italic; }

/* chipy metod */
.promo-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  max-width: 720px;
}
.promo-chips span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(168, 195, 207, 0.4);
  backdrop-filter: blur(6px);
}
.promo-stage.promo-day .promo-chips span {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(34, 53, 99, 0.2);
}

/* wartości z ikonami */
.promo-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}
.promo-values .pv {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
}
.promo-values img { width: clamp(64px, 9vw, 108px); }
.promo-values b {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
}

/* cytat */
.promo-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  line-height: 1.4;
  max-width: 26ch;
  text-wrap: balance;
}
.promo-quote-author {
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--light-blue);
}
.promo-stage.promo-day .promo-quote-author { color: var(--deep-pink); }

/* CTA końcowe */
.promo-contact { display: grid; gap: 0.4rem; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.promo-contact strong { font-family: var(--font-display); }

/* ---------- sterowanie ---------- */
.promo-dots {
  position: fixed;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.promo-dots button {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.2);
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  transition: all var(--dur-fast) ease;
}
.promo-dots button.on {
  opacity: 1;
  background: var(--deep-pink);
  border-color: var(--deep-pink);
  transform: scale(1.35);
}
.promo-exit {
  position: fixed;
  top: 22px; right: 26px;
  z-index: 10;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(168, 195, 207, 0.4);
  backdrop-filter: blur(8px);
  color: inherit;
  transition: all var(--dur-fast) ease;
}
.promo-exit:hover { background: var(--deep-pink); border-color: var(--deep-pink); color: var(--white); }
.promo-brand {
  position: fixed;
  top: 20px; left: 26px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
}
.promo-brand img { width: 44px; border-radius: 50%; }