/* ============================================================
   K4m3l3on Art — pakiet wizualny (2026-08-16)
   Błyszczące planety + lepszy kontrast/nasycenie + więcej animacji.
   Dołączany PO style-20260815.css, więc nadpisuje wybrane wartości.
   Czysto dekoracyjne / warstwa wyglądu — nie zmienia treści.
   ============================================================ */

/* — 1. Kontrast i nasycenie — żywsze akcenty i mocniejszy tekst — */
:root{
  --color-accent:      #a88cff;   /* było #9184d9 — bardziej nasycony fiolet */
  --color-accent-2:    #b9b2ff;
  --color-accent-300:  #e2ddff;   /* jaśniejszy akcent nagłówków */
  --color-text:        #f3f3f8;   /* wyższy kontrast tekstu */
  --color-section-glow:#454ec0;   /* mocniejsza poświata sekcji */
}

/* Delikatne, ale odczuwalne podbicie nasycenia i kontrastu warstw wizualnych.
   Nakładamy tylko na tła/obrazy/planety — NIE na tekst, żeby nie ucierpiała czytelność. */
.cosmic-bg{ filter: saturate(1.4) contrast(1.12) brightness(1.06); }
.section-glow-bg{ filter: saturate(1.25) contrast(1.08); }
.hero-orb, .saturn, .jupiter{ filter: saturate(1.45) contrast(1.12); }

/* Desktop: Ziemia i Księżyc obok siebie, po środku góry hero (mobile bez zmian) */
@media (min-width: 700px){
  .hero-earth{ left: 50%; right: auto; top: 6%; margin-left: -90px; }
  .hero-moon{ left: 50%; right: auto; top: 9%; margin-left: 40px; }
}

/* ——— Responsywność: tablet i laptop mają strukturę jak komputer ———
   Telefony (<=620px) zostają bez zmian — poniżej nic ich nie dotyczy. */
@media (min-width: 621px){
  /* hero bez grafiki: jedna kolumna, tekst wyśrodkowany */
  .hero .section-split{ grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hero .section-split > .hero-copy{
    max-width: 68ch; width: 100%;
    margin-inline: auto; text-align: center;
  }
  .hero .section-split > .hero-copy > *{ margin-inline: auto; }
  .hero .hero-actions{ justify-content: center; }
  #o-mnie .section-split{ grid-template-columns: 1.1fr 0.9fr; }
  #o-mnie .slideshow{ align-self: center; }
  #o-mnie .portrait-frame{ width: 100%; max-width: none; }
  .services-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* tablet w pionie i mniejsze laptopy: struktura desktopowa, tylko gęstsza */
@media (min-width: 621px) and (max-width: 1024px){
  .section-inner{ padding-inline: clamp(20px, 3.4vw, 40px); }
  .hero-portal{ width: min(420px, 40vw); }
  .services-grid{ gap: var(--space-4); }
  .service-card{ padding: var(--space-4); }
  .card-title{ font-size: 17px; line-height: 1.3; }
  .card-body{ font-size: 14.5px; }
  .experience-section h2, #uslugi > .section-inner > h2,
  #faq > .section-inner > h2, #kontakt > .section-inner > h2{
    padding: var(--space-3) var(--space-4);
  }
}

/* wąski tablet / duży telefon poziomo: 2 kolumny kart, reszta bez zmian */
@media (min-width: 621px) and (max-width: 780px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* tablet poziomo i laptop 13" */
@media (min-width: 1025px) and (max-width: 1279px){
  .hero-portal{ width: min(440px, 34vw); }
}

/* obrazy nigdy nie wychodzą z kadru */
img, video, canvas, svg{ max-width: 100%; }
img{ height: auto; }
.slide,
.portrait-frame img,
.hero-figure img,
.hero-video{ filter: saturate(1.18) contrast(1.07) brightness(1.03); }

/* Mocniejszy blask kart i przycisków dla lepszego kontrastu na ciemnym tle */
.btn-primary{ box-shadow: 0 0 22px -6px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.card{ border-color: color-mix(in srgb, var(--color-accent) 26%, transparent); }
.kicker{ text-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 45%, transparent); }

/* Etykiety pól formularza w tej samej ramce */
.contact-form .field > label{
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}

/* Kontakt: te same ramki na etykiecie, h2 i akapicie */
#kontakt > .section-inner > .kicker,
#kontakt > .section-inner > h2,
#kontakt > .section-inner > p{
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}
#kontakt > .section-inner > .kicker{ padding: var(--space-3) var(--space-4); border-radius: 8px; }
@media (max-width: 620px){
  #kontakt > .section-inner > h2,
  #kontakt > .section-inner > p{ padding: 12px 14px; border-radius: 8px; }
}

/* FAQ: te same ramki */
#faq > .section-inner > .kicker,
#faq > .section-inner > h2{
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}
#faq > .section-inner > .kicker{ padding: var(--space-3) var(--space-4); border-radius: 8px; }
@media (max-width: 620px){
  #faq > .section-inner > h2{ padding: 12px 14px; border-radius: 8px; }
}

/* Sekcja Doświadczenie: te same ramki na h2, tagach h3 i etykiecie "Doświadczenie" */
.experience-section .kicker,
.experience-section h2,
.experience-section h3,
.experience-section .lead{
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}
.experience-section .kicker,
.experience-section h3{ padding: var(--space-3) var(--space-4); border-radius: 8px; }
@media (max-width: 620px){
  .experience-section h2{ padding: 12px 14px; border-radius: 8px; }
}

/* Sekcja Usługi: nagłówki h2 i h3 w takiej samej ramce jak .text-panel */
#uslugi > .section-inner > h2,
#uslugi .card-title{
  display: inline-block;
  padding: var(--space-4) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}
#uslugi .card-title{ padding: var(--space-3) var(--space-4); border-radius: 8px; }
#uslugi > .section-inner > .kicker{
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}
@media (max-width: 620px){
  #uslugi > .section-inner > h2{ padding: 12px 14px; border-radius: 8px; }
}
.hero-copy h1 .glitch{ text-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 40%, transparent); }

/* Jaśniejsze, „mocniejsze" gwiazdy w tle */
.cosmic-star{ opacity: 0.7; box-shadow: 0 0 4px 1px rgba(233,233,237,0.5); }
/* Zielony „cyfrowy deszcz" bardziej wyrazisty */
.cosmic-digit{ color: oklch(80% 0.24 150); text-shadow: 0 0 8px oklch(72% 0.2 150 / .5); }
/* Stare, płaskie planety schowane — zastępujemy je błyszczącymi (niżej) */
.cosmic-planet{ opacity: 0.28; }

/* — 2. Błyszczące planety (grafiki z Higgsfield) —
   Kontener .glossy-planet-wrap: pozycja + parallax (transform ustawia JS).
   Wewnątrz <img.glossy-planet>: łagodne unoszenie + tryb „screen" (czarne tło znika).
   .shine: przelatujący połysk. */
.glossy-planet-wrap{
  position: absolute; border-radius: 50%; overflow: hidden;
  pointer-events: none; will-change: transform;
  box-shadow: 0 0 46px -6px rgba(150,120,255,0.45);
}
.glossy-planet{
  display: block; width: 100%; height: 100%; border-radius: 50%;
  mix-blend-mode: screen;
  filter: saturate(1.28) contrast(1.06) brightness(1.05);
  animation: floatY 7s ease-in-out infinite;
}
.glossy-planet-wrap .shine{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.30) 50%, transparent 58%);
  mix-blend-mode: screen; animation: shineSweep 7.5s ease-in-out infinite;
}
@keyframes shineSweep{
  0%, 72%, 100%{ transform: translateX(-130%); opacity:0; }
  80%{ opacity:.9; }
  92%{ transform: translateX(130%); opacity:0; }
}

/* — 3. Spadające gwiazdy (dodawane przez JS) — */
.shooting-star{
  position: fixed; top: -20px; left: 0; width: 3px; height: 3px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0 8px 2px rgba(255,255,255,0.9);
  pointer-events: none; z-index: 0; opacity: 0;
}
.shooting-star::after{
  content:""; position:absolute; top:50%; right:2px; width:140px; height:1.5px;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(255,255,255,0.85), transparent);
}
@keyframes shoot{
  0%{ transform: translate(0,0); opacity:0; }
  8%{ opacity:1; }
  100%{ transform: translate(-420px, 260px); opacity:0; }
}

/* — 4. Dodatkowe animacje wejścia i „życia" — */
/* Karty usług: delikatne unoszenie w kółko + mocniejszy hover */
.service-card{ animation: floatY 7s ease-in-out infinite; }
.services-grid .service-card:nth-child(2n){ animation-duration: 8.5s; }
.services-grid .service-card:nth-child(3n){ animation-duration: 9.5s; }
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--color-accent) 60%, transparent); }

/* Delikatny „oddech" poświaty na sekcji doświadczenia */
.experience-section{ animation: glowPulse 9s ease-in-out infinite; }
@keyframes glowPulse{ 0%,100%{ filter: saturate(1) brightness(1);} 50%{ filter: saturate(1.15) brightness(1.06);} }

/* Logo w nawigacji lekko pulsuje blaskiem */
.nav-logo{ animation: floatY 6s ease-in-out infinite; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-accent) 50%, transparent)); }

@media (prefers-reduced-motion: reduce){
  .glossy-planet, .glossy-planet-wrap .shine, .service-card, .experience-section, .nav-logo{ animation: none !important; }
}


/* ——— Hero bez grafiki: telefon ——— */
@media (max-width: 620px){
  .hero .section-split{ grid-template-columns: 1fr; text-align: left; }
  .hero .hero-actions{ justify-content: stretch; }
}