/* Mirror of the tokens in assets/tailwind-config.js (only for CSS Tailwind does not cover). */
:root {
  --night-900: #071c7c;
  --night-800: #0e2b94;
  --night-700: #1435a3;
  --night-600: #224dc9;
  --night-500: #2966ed;
  --glow: #1a70fc;
  --star-core: #fefdfd;
  --star-cyan: #b7f2fd;
  --star-sky: #8cc1fd;
  --star-violet: #c6a6fd;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { background: var(--night-900); color: var(--star-core); -webkit-font-smoothing: antialiased; }

/* Background gradient: bottom-left to top-right, slow drift */
.sky {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60rem 40rem at 85% 8%, rgba(26, 112, 252, .35), transparent 70%),
    radial-gradient(50rem 36rem at 10% 90%, rgba(26, 112, 252, .22), transparent 70%),
    linear-gradient(to top right, var(--night-900) 0%, var(--night-800) 30%, var(--night-700) 55%, var(--night-600) 82%, var(--night-500) 100%);
  background-size: 100% 100%, 100% 100%, 160% 160%;
  background-position: 0 0, 0 0, 0% 100%;
  animation: skydrift 50s ease-in-out infinite alternate;
}
@keyframes skydrift {
  to { background-position: 0 0, 0 0, 100% 0%; }
}
#starfield { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
#constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Scroll fade-in (only when JS runs) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Hero: logo + entrance */
.hero-logo { filter: drop-shadow(0 0 28px var(--glow)) drop-shadow(0 0 70px var(--glow)); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.js .hero-in { opacity: 0; animation: heroin 1s ease forwards; animation-delay: var(--d, 0s); }
@keyframes heroin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Karty */
.card { transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.card:hover { transform: translateY(-6px); border-color: var(--star-sky); box-shadow: 0 0 48px -10px var(--glow); }
.card:hover .card-star { transform: rotate(18deg) scale(1.1); }
.card-star { transition: transform .5s ease; filter: drop-shadow(0 0 14px var(--glow)); }

/* Placeholder zrzutu ekranu */
.shot {
  background:
    radial-gradient(circle at 20% 30%, var(--star-cyan) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, var(--star-core) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 20%, var(--star-violet) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 40% 80%, var(--star-sky) 0 1px, transparent 2px),
    linear-gradient(135deg, var(--night-700), var(--night-900));
}
.shot-a { background-color: var(--night-800); box-shadow: inset 0 0 60px -10px var(--glow); }

/* Przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 9999px; padding: .75rem 1.5rem; font-weight: 600; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--star-core); color: var(--night-900); box-shadow: 0 0 36px -6px var(--glow); }
.btn-primary:hover { background: var(--star-cyan); box-shadow: 0 0 52px -4px var(--glow); }
.btn-ghost { border: 1px solid var(--star-sky); color: var(--star-core); background: rgba(7, 28, 124, .45); }
.btn-ghost:hover { background: rgba(26, 112, 252, .35); }

:focus-visible { outline: 3px solid var(--star-cyan); outline-offset: 3px; border-radius: 6px; }

.star-link { text-decoration: underline; text-decoration-color: var(--star-sky); text-underline-offset: 4px; }
.star-link:hover { text-decoration-color: var(--star-core); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky, .hero-logo { animation: none; }
  .js .reveal, .js .hero-in { opacity: 1; transform: none; transition: none; animation: none; }
  .card, .card-star, .btn { transition: none; }
  .card:hover, .btn:hover { transform: none; }
}