/* ═══════════════════════════════════════════════════════════════════
   SP32 Sosnowiec — Design Tokens
   Paleta pomarańczowo-koralowa · edytuj tylko tutaj,
   zmiany automatycznie trafiają do każdej strony serwisu.

   Jak używać:
     <link rel="stylesheet" href="tokens.css">   ← w <head> każdej strony
     Embedded <style> nie może zawierać osobnego bloku :root z tokenami.
═══════════════════════════════════════════════════════════════════ */

/* ── Paleta podstawowa (tryb jasny) ─────────────────────────────── */
:root {
  /* Kolory główne */
  --cp:    #FF9F43;            /* orange primary — nagłówek, akcenty */
  --cp-d:  #1C0D04;            /* ciemny brąz — tło stopki */
  --cp-l:  #FFB461;            /* jasny orange */
  --ca:    #EE5A6F;            /* coral accent — CTA, podkreślenia */
  --ca-d:  #D94560;            /* ciemniejszy coral */

  /* Tła */
  --clv:   #F5E8D5;            /* ciepły tint (sekcje, karty) */
  --clv-l: #FFF5EE;            /* bardzo jasny ciepły (subtelne tła) */
  --bg:    #FBF8F5;            /* tło strony */
  --sf:    #FFFFFF;            /* powierzchnia kart */

  /* Tekst i krawędzie */
  --tx:    #2D1A08;            /* główny tekst */
  --tx-m:  #7A5838;            /* tekst pomocniczy */
  --bd:    #EAD9C8;            /* krawędzie, linie podziału */

  /* Quick-links (neonowe okręgi) */
  --ql1:   #D62839;            /* karmazyn */
  --ql2:   #F08000;            /* bursztynowy orange */
  --ql3:   #EE5A6F;            /* coral */
  --ql4:   #F9C22E;            /* ciepłe złoto */

  /* Typografia */
  --font-d: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-b: 'Atkinson Hyperlegible', system-ui, sans-serif;

  /* Geometria */
  --r:     12px;               /* border-radius duży */
  --r-s:   8px;                /* border-radius mały */

  /* Cienie */
  --sh:    0 2px 12px rgba(45,26,8,.08);
  --sh-m:  0 4px 24px rgba(45,26,8,.13);

  /* Przejścia animacji */
  --tr:    .18s ease;
}

/* ── Tryb ciemny — preferencja systemu ──────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:    #1A0D04;
    --sf:    #271608;
    --tx:    #F0E8DC;
    --tx-m:  #A89070;
    --bd:    #3D2510;
    --clv:   #2A1508;
    --clv-l: #1F1005;
    --sh:    0 2px 12px rgba(0,0,0,.28);
    --sh-m:  0 4px 24px rgba(0,0,0,.38);
  }
}

/* ── Tryb ciemny — ręczny przełącznik ───────────────────────────── */
:root[data-theme="dark"] {
  --bg:    #1A0D04;
  --sf:    #271608;
  --tx:    #F0E8DC;
  --tx-m:  #A89070;
  --bd:    #3D2510;
  --clv:   #2A1508;
  --clv-l: #1F1005;
  --sh:    0 2px 12px rgba(0,0,0,.28);
  --sh-m:  0 4px 24px rgba(0,0,0,.38);
}

/* ── Wysoki kontrast ─────────────────────────────────────────────── */
.high-contrast,
.high-contrast * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.high-contrast a,
.high-contrast button { color: #FFFF00 !important; }
.high-contrast a:hover,
.high-contrast button:hover { color: #fff !important; background-color: #222 !important; }
.high-contrast img { filter: contrast(1.2); }
.high-contrast .site-header,
.high-contrast .site-footer { background: #000 !important; }
.high-contrast .btn-prim,
.high-contrast .btn { background: #000 !important; color: #FFFF00 !important; border: 2px solid #FFFF00 !important; }
.high-contrast :focus-visible { outline: 3px solid #FFFF00 !important; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE SPLASH SCREEN
   Pojawia się raz na sesję tylko na urządzeniach mobilnych.
   JS wstrzykuje #sp32-splash do <body> i usuwa po animacji.
══════════════════════════════════════════════════════════════════ */
#sp32-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background: linear-gradient(160deg, #FF9F43 0%, #EE5A6F 100%);
  -webkit-tap-highlight-color: transparent;
  will-change: opacity, transform;
}
#sp32-splash .sp-logo {
  width: min(82vw, 320px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.25));
  animation: sp-logo-in .6s cubic-bezier(.34,1.56,.64,1) .1s both;
  will-change: transform, opacity;
}
#sp32-splash .sp-greeting {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 900; font-size: clamp(1.8rem, 8vw, 2.4rem);
  color: #fff; letter-spacing: -.01em;
  text-shadow: 0 3px 14px rgba(0,0,0,.2);
  animation: sp-text-in .5s cubic-bezier(.34,1.4,.64,1) .3s both;
  text-align: center;
}
#sp32-splash .sp-name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700; font-size: .95rem;
  color: rgba(255,255,255,.88); letter-spacing: .02em;
  text-align: center; line-height: 1.4;
  animation: sp-text-in .5s cubic-bezier(.34,1.4,.64,1) .42s both;
}
#sp32-splash.sp32-exit {
  animation: sp-exit .5s cubic-bezier(.55,0,1,.45) forwards !important;
  pointer-events: none;
}
@keyframes sp-logo-in {
  from { opacity: 0; transform: scale(.72) translateY(16px) }
  to   { opacity: 1; transform: scale(1) translateY(0) }
}
@keyframes sp-text-in {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes sp-exit {
  0%   { opacity: 1; transform: scale(1) }
  30%  { opacity: 1; transform: scale(1.05) }
  100% { opacity: 0; transform: scale(1.28) }
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL REVEAL (globalny — wszystkie strony)
   JS observer w shared.js; tutaj tylko CSS.
   Nie animujemy gdy prefers-reduced-motion: reduce.
══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s cubic-bezier(.22,.61,.36,1),
                transform  .65s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .reveal.visible { opacity: 1; transform: none; }
  .stagger .reveal:nth-child(2) { transition-delay: .09s; }
  .stagger .reveal:nth-child(3) { transition-delay: .18s; }
  .stagger .reveal:nth-child(4) { transition-delay: .27s; }
  .stagger .reveal:nth-child(5) { transition-delay: .36s; }
  .stagger .reveal:nth-child(6) { transition-delay: .45s; }
}

/* ══════════════════════════════════════════════════════════════════
   GRADIENT SHIMMER — tytuły bohatera strony
   Dodaj klasę .shimmer-text do dowolnego nagłówka.
══════════════════════════════════════════════════════════════════ */
.shimmer-text {
  background: linear-gradient(
    90deg,
    #fff 0%, #fff 25%,
    rgba(255,220,180,1) 45%,
    rgba(255,180,140,1) 55%,
    #fff 75%, #fff 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-move 3.5s ease-in-out infinite;
}
@keyframes shimmer-move {
  0%   { background-position: 150% center }
  100% { background-position: -150% center }
}
@media (prefers-reduced-motion: reduce) {
  .shimmer-text {
    animation: none;
    background-position: 55% center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING HERO STICKERS
   SVG dekoracje dryfujące w tle sekcji hero.
   HTML: <div class="hero-stickers" aria-hidden="true">
══════════════════════════════════════════════════════════════════ */
.hero-stickers {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  z-index: 0;
}
.hero-stickers .stk {
  position: absolute;
  opacity: .22;
  animation: stk-float 5s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-stickers .stk:nth-child(1) { top: 8%;  left: 5%;  animation-duration: 5.1s; animation-delay: 0s; }
.hero-stickers .stk:nth-child(2) { top: 15%; right: 8%; animation-duration: 4.7s; animation-delay: -.8s; }
.hero-stickers .stk:nth-child(3) { top: 55%; left: 3%;  animation-duration: 6.2s; animation-delay: -1.5s; }
.hero-stickers .stk:nth-child(4) { top: 70%; right: 5%; animation-duration: 4.9s; animation-delay: -.4s; }
.hero-stickers .stk:nth-child(5) { top: 35%; right: 2%; animation-duration: 5.8s; animation-delay: -2.1s; }
.hero-stickers .stk:nth-child(6) { top: 85%; left: 12%; animation-duration: 5.4s; animation-delay: -1s; }
@keyframes stk-float {
  from { transform: translateY(0)    rotate(0deg) }
  to   { transform: translateY(-18px) rotate(8deg) }
}
@media (prefers-reduced-motion: reduce) { .stk { animation: none !important; } }

/* ══════════════════════════════════════════════════════════════════
   SPA PAGE TRANSITIONS
   JS zarządza klasami sp-page-exit / sp-page-enter na <main>.
══════════════════════════════════════════════════════════════════ */
main.sp-page-exit {
  animation: sp-page-out .22s ease forwards;
}
main.sp-page-enter {
  animation: sp-page-in .28s ease forwards;
}
@keyframes sp-page-out {
  from { opacity: 1; transform: translateY(0) }
  to   { opacity: 0; transform: translateY(-18px) }
}
@keyframes sp-page-in {
  from { opacity: 0; transform: translateY(22px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* View Transitions API — płynne przejście strony (Chrome 111+, Safari 18+) */
::view-transition-old(root) {
  animation: 200ms ease both sp-page-out;
}
::view-transition-new(root) {
  animation: 300ms ease both sp-page-in;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   RIPPLE EFFECT na przyciskach
   Automatyczny na .btn-prim i .btn-edupage, opcjonalny przez .btn-ripple.
══════════════════════════════════════════════════════════════════ */
.btn-prim, .btn-edupage, .btn-ripple {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn-ripple .ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: ripple-go .55s linear;
  pointer-events: none;
}
@keyframes ripple-go {
  to { transform: scale(4); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING CONFETTI — tło strony głównej
   JS wstrzykuje canvas #sp32-confetti za nagłówkiem.
══════════════════════════════════════════════════════════════════ */
#sp32-confetti {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .55;
}