/* =============================================================
   pogadaj.se — Motyw kosmiczny (design tokens)
   Ciemny granat/błękit + akcenty mgławicy. Czysto, profesjonalnie.
   ============================================================= */

:root {
  /* Tła — głęboka czerń kosmosu (brand Izabela Code) */
  --bg-900: #040406;   /* najgłębszy kosmos */
  --bg-800: #0a0a0e;   /* baza */
  --bg-700: #16161f;   /* karty */
  --bg-600: #20202c;   /* hover/elementy */
  --surface-glass: rgba(22, 22, 30, 0.62);
  --surface-border: rgba(120, 160, 220, 0.18);

  /* Akcenty — błękit opalowy (brand IzabelaCode) */
  --accent: #5b9fe0;       /* błękit główny */
  --accent-bright: #84c4ff;
  --amber: #a8d9ff;        /* jasny błękit do gradientu napisu */
  --accent-soft: #1d3a5c;
  --violet: #8a5bd6;       /* mgławica (akcent kosmiczny) */
  --cyan: #46e0d8;         /* sukces / "mówisz dobrze" */
  --pink: #ff7eb6;         /* delikatny akcent Izabeli */

  /* Semantyka */
  --ok: #46e0d8;
  --warn: #ffcf5c;
  --error: #ff6b81;

  /* Tekst */
  --text: #eef2ff;
  --text-dim: #aab3d8;
  --text-faint: #6b75a3;

  /* Kształty */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Cienie / poświaty */
  --glow-accent: 0 0 26px rgba(91, 159, 224, 0.45);
  --glow-pink: 0 0 24px rgba(255, 126, 182, 0.35);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.55);
  --grad-brand: linear-gradient(90deg, #4f86c6, #84c4ff 55%, #b7e3ff);

  /* Typografia */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Layout */
  --maxw: 1100px;
  --gap: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-800);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.02em; }

a { color: var(--accent-bright); text-decoration: none; }

/* ---------- Tło kosmiczne ---------- */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;            /* widoczne tło — treść aplikacji jest nad nim (z-index:1) */
  background:
    radial-gradient(1000px 700px at 82% -8%, rgba(138, 91, 214, 0.18) 0%, transparent 60%),
    radial-gradient(800px 600px at 8% 108%, rgba(91, 159, 224, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #000 0%, var(--bg-900) 40%, var(--bg-800) 100%);
  overflow: hidden;
}
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 60%, #cdd6ff, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent),
    radial-gradient(2px 2px at 90% 20%, #fff, transparent),
    radial-gradient(1px 1px at 55% 15%, #aab3ff, transparent),
    radial-gradient(1px 1px at 15% 70%, #fff, transparent);
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: 0.7;
  animation: drift 120s linear infinite;
}
/* Planety-opale — błękit mieniący się jak opal (iryzujące przebłyski) */
.planet {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 30%),
    conic-gradient(from 210deg,
      rgba(168,255,236,.34), rgba(186,214,255,.14), rgba(255,188,236,.28),
      rgba(160,236,255,.34), rgba(186,214,255,.14), rgba(168,255,236,.34)),
    radial-gradient(circle at 34% 28%, #e2f2ff, #8ec3f2 48%, #3f6fa8 78%, #22405f);
  box-shadow: inset -16px -12px 34px rgba(8,28,58,.55), 0 0 44px rgba(130,196,255,.35);
  overflow: hidden;
}
/* przebłysk opalu przelatujący po tarczy co kilka sekund */
.planet::after {
  content: '';
  position: absolute; inset: -30%;
  background: linear-gradient(115deg,
    transparent 40%, rgba(255,255,255,.75) 49%, rgba(178,240,255,.55) 53%,
    rgba(255,210,244,.35) 57%, transparent 66%);
  transform: translateX(-130%) rotate(8deg);
  animation: opalShine 8s ease-in-out infinite;
}
.planet--b::after { animation-delay: 2.7s; }
.planet--c::after { animation-delay: 5.2s; }
@keyframes opalShine {
  0%, 10%  { transform: translateX(-130%) rotate(8deg); opacity: 0; }
  16%      { opacity: 1; }
  32%, 100%{ transform: translateX(130%) rotate(8deg); opacity: 0; }
}
.planet--a { width: 120px; height: 120px; left: 11%; top: 28%; animation: floatY 13s ease-in-out infinite; }
.planet--b { width: 64px; height: 64px; right: 12%; top: 22%; opacity: .9; animation: floatY 17s ease-in-out infinite reverse; }
.planet--c { width: 44px; height: 44px; left: 30%; bottom: 12%; opacity: .85; animation: floatY 21s ease-in-out infinite; }

/* Rakieta Izabeli — przelatuje przez ekran, ciągnąc napis IzabelaCode */
.iza-rocket {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  pointer-events: none; will-change: transform;
  animation: rocketFly 22s linear infinite;
}
.iza-rocket__trail {
  order: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .22em; white-space: nowrap;
  background: linear-gradient(90deg, rgba(200,228,255,.55), #dceeff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(130,196,255,.5));
}
.iza-rocket svg { order: 1; filter: drop-shadow(0 0 10px rgba(140,190,240,.45)); }
@keyframes rocketFly {
  0%   { transform: translate(-30vw, 72vh) rotate(-7deg); }
  100% { transform: translate(115vw, 14vh) rotate(-7deg); }
}

/* Małe rakietki/spodki dryfujące w tle */
.sky-rocket { position: absolute; opacity: .5; }
.sky-rocket--1 { left: 4%; top: 38%; animation: dr8 26s linear infinite; }
.sky-rocket--2 { right: 14%; bottom: 14%; animation: dr8 34s linear infinite reverse; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes dr8 { 0% { transform: translate(0,0); } 50% { transform: translate(30px,-18px); } 100% { transform: translate(0,0); } }

@keyframes drift { from { background-position: 0 0; } to { background-position: 600px 600px; } }

@media (prefers-reduced-motion: reduce) {
  .stars, .planet, .planet::after, .sky-rocket, .iza-rocket { animation: none; }
  .iza-rocket { display: none; }
}

/* =============================================================
   Motyw per-ekran — planety/pomarańcz TYLKO na logowaniu.
   Po wejściu na pokład: tło statku + chłodny błękit (golf Izabeli).
   ============================================================= */
.cosmos { display: none; }                         /* domyślnie brak planet */
body[data-route="welcome"] .cosmos { display: block; }

/* Pokład statku — tło z grafiki Izabeli, przyciemnione dla czytelności */
body:not([data-route="welcome"]) {
  background:
    linear-gradient(180deg, rgba(8,11,20,.86), rgba(7,10,18,.93)),
    url('../assets/scenes/scene-02.jpg') center/cover fixed no-repeat;
}

/* Onboarding i paszport: JASNY motyw jak w lekcjach (jedna spójna estetyka) */
body[data-route="onboarding"],
body[data-route="phonetic"] {
  --text: #14314f; --text-dim: #46688c; --text-faint: #7b96b3;
  --surface-border: rgba(100, 170, 225, .35);
  background: linear-gradient(180deg, #e6f2fd 0%, #f7fbff 55%, #e9f5fe 100%);
}
body[data-route="onboarding"] .logo,
body[data-route="phonetic"] .logo { text-shadow: none; }

/* Chłodna paleta (błękit) zamiast pomarańczu na całej apce poza logowaniem */
body:not([data-route="welcome"]) {
  --accent: #5b9fe0;
  --accent-bright: #84c4ff;
  --amber: #84c4ff;
  --accent-soft: #1d3a5c;
  --grad-brand: linear-gradient(90deg, #5b9fe0, #84c4ff);
  --glow-accent: 0 0 24px rgba(91, 159, 224, 0.45);
  --surface-border: rgba(120, 160, 220, 0.18);
}